somewhere

2023-08-17 13:05:51 +03:30
parent 30c7eb0e7b
commit 53843207cc
429 changed files with 117489 additions and 1 deletions
@@ -0,0 +1,78 @@
+/* eslint-disable no-undef */
+/// ///////////////////////////////////////////////////////////
+/// /////////////////// custom text splitor created by ammiiir1
+/// ////// (amir.i.iii.vii.iii@gmail.com | ammiiir1@gmail.com )
+// (https://gitlab.com/ammiiir1 | https://github.com/ammiiir1)
+
+import Vue from 'vue'
+
+class ATextSplitterVuePlugin {
+  /// ///////////////////////////////////////////////////////////////////////////////////
+  /// text animation#1
+  // .staggerFrom($("#txtID .tsWords"), 0.5, {cycle: {y: [20, -20]}, opacity: 0}, 0.1, 0)
+  // ************************************************************************************
+  /// text animation#2
+  // .staggerFrom($("#txtID .tsLetters"), 0.2, {scale: 5, opacity: 0}, 0.07)
+  // ************************************************************************************
+  // text animation#3
+  // .staggerFrom($("#txtID .tsWords"), 0.4, {scale:2,opacity: 0}, 0.015,1.4)
+  // ************************************************************************************
+  /// text animation#4
+  // .staggerFrom($("#txtID .tsWords"), 0.3, {opacity: 0}, 0.07)
+  // ************************************************************************************
+  constructor({ rtl = false, letterSpace = 0, wordSpace = '3px' } = {}) {
+    // options
+    this.rtl = rtl
+    this.letterSpace = letterSpace + 'px'
+    this.wordSpace = wordSpace + 'px'
+    // pipeline vars
+    this.word = ''
+    this.letterSpans = ''
+    this.wordSpans = ''
+  }
+
+  /// /////////////////////////////////////////////// private classes
+  _split(strOrId, isElement = true) {
+    // pipeline
+    const line = isElement ? $(`#${strOrId}`).text() : strOrId // get the sentence
+    const parts = line.split(' ')
+    for (let i = 0; i < parts.length; i++) {
+      // how many words
+      this.letterSpans = ''
+      this.word = parts[i]
+
+      for (let j = 0; j < this.word.length; j++) {
+        // how many letters in each words
+        this.letterSpans += '<span class="tsLetters">' + this.word[j] + '</span>' // creat a span for each letter
+      }
+      this.wordSpans += '<span class="tsWords">' + this.letterSpans + ' </span>'
+    }
+  }
+
+  _setStyles(txtID) {
+    $(`#${txtID} .tsLetters`).css({
+      display: this.rtl ? 'inline' : 'inline-block',
+      marginRight: this.rtl ? 0 : this.letterSpace,
+      marginLeft: this.rtl ? this.letterSpace : 0
+    })
+    $(`#${txtID} .tsWords`).css({
+      display: 'inline-block',
+      marginRight: this.rtl ? 0 : this.wordSpace,
+      marginLeft: this.rtl ? this.wordSpace : 0
+    })
+  }
+
+  /// /////////////////////////////////////////////// output methods
+  injectToElement(txtID) {
+    this._split(txtID, true)
+    $(`#${txtID}`).html(this.wordSpans) // render the sentence
+    this._setStyles(txtID)
+  }
+
+  returnString(str) {
+    this._split(str, false)
+    return this.wordSpans // return splitted string
+  }
+}
+
+Vue.prototype.$ATextSplitter = ATextSplitterVuePlugin