Swift
79 lines
2.9 KiB
JavaScript
79 lines
2.9 KiB
JavaScript
/* 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
|