You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
9.1 KiB
256 lines
9.1 KiB
/**
|
|
* @name ityped
|
|
* @description Dead simple Animated Typing with no dependencies
|
|
* @author Luis Vinícius
|
|
* @email luis@uilabs.me
|
|
*/
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
(factory((global.ityped = global.ityped || {})));
|
|
}(this, (function (exports) { 'use strict';
|
|
|
|
/**
|
|
* async foreach
|
|
* https://www.npmjs.com/package/async-foreach
|
|
*/
|
|
var forEach = function forEach(a, b, c) {
|
|
var d = -1,
|
|
e = a.length >>> 0;
|
|
(function f(g) {
|
|
var h,
|
|
j = g === !1;
|
|
do {
|
|
++d;
|
|
} while (!(d in a) && d !== e);
|
|
if (j || d === e) {
|
|
c && c(!j, a);
|
|
return;
|
|
}
|
|
g = b.call({
|
|
async: function async() {
|
|
return h = !0, f;
|
|
}
|
|
}, a[d], d, a), h || f(g);
|
|
})();
|
|
};
|
|
|
|
/**
|
|
* el is the element
|
|
*/
|
|
var selectedElement = void 0;
|
|
var props = void 0;
|
|
var cursor = document.createElement('span');
|
|
cursor.classList.add('ityped-cursor');
|
|
cursor.textContent = '|';
|
|
|
|
/**
|
|
* @name setProps
|
|
* @description Set the ityped properties configuration
|
|
* @param {Object} config The configuration properties
|
|
* @return {Promise}
|
|
*/
|
|
function setProps(config) {
|
|
var props = config;
|
|
props.strings = config.strings || ['Put your string here...', 'and Enjoy!'];
|
|
props.typeSpeed = config.typeSpeed || 100;
|
|
props.backSpeed = config.backSpeed || 75;
|
|
props.backDelay = config.backDelay || 2000;
|
|
props.startDelay = config.startDelay || 750;
|
|
props.showCursor = config.showCursor;
|
|
props.loop = config.loop || false;
|
|
|
|
if (props.showCursor === undefined) props.showCursor = true;
|
|
|
|
return Promise.resolve(props);
|
|
}
|
|
/**
|
|
* @name init
|
|
* @param { String || Element } element The element that will receive the strings
|
|
* @param {Object} config The initial configuration
|
|
*/
|
|
function init(element, config) {
|
|
typeof element === 'string' ? element = document.querySelector(element) : element = element;
|
|
setProps(config).then(function (properties) {
|
|
props = properties;
|
|
element._props = props;
|
|
// init cursor if needed
|
|
if (props.showCursor) {
|
|
initCursorOn(element, props.cursorChar || '|');
|
|
}
|
|
loopingOnWords(element);
|
|
});
|
|
}
|
|
|
|
function initCursorOn(element, cursorChar) {
|
|
var newCursor = cursor.cloneNode();
|
|
element.insertAdjacentElement('afterend', newCursor);
|
|
newCursor.textContent = cursorChar;
|
|
}
|
|
|
|
/**
|
|
* @name loopingOnWords
|
|
* @description Loop on each string passed
|
|
* @param {HTMLElement} element The element to handle the animation on
|
|
* @param {Array} words The array that contain the words
|
|
*/
|
|
function loopingOnWords(element) {
|
|
forEach(element._props.strings, function (word, index, arr) {
|
|
var time = element._props.typeSpeed * word.length - 1;
|
|
/**
|
|
* set the correct time
|
|
* with the differences of type and back
|
|
* speed
|
|
*/
|
|
if (element._props.backSpeed < element._props.typeSpeed) {
|
|
time -= (element._props.typeSpeed - element._props.backSpeed) * word.length;
|
|
} else if (element._props.backSpeed > element._props.typeSpeed) {
|
|
time += (element._props.backSpeed - element._props.typeSpeed) * word.length;
|
|
}
|
|
var done = this.async();
|
|
var len = element._props.strings.length;
|
|
iterateWords(element, word, index, len).then(function () {
|
|
setTimeout(function () {
|
|
done();
|
|
}, time);
|
|
});
|
|
}, function () {
|
|
if (element._props.loop) {
|
|
loopingOnWords(element);
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* @name increment
|
|
* @description Increment each letter and append it on element
|
|
* @param {Element} element The Element that will receive the letters
|
|
* @param {String} word The string that will be looped to
|
|
* get each letter
|
|
* @return {Promise}
|
|
*/
|
|
function increment(element, word) {
|
|
return new Promise(function (resolve, reject) {
|
|
var count = 0;
|
|
|
|
var _loop = function _loop(i) {
|
|
var wordIndex = i;
|
|
var len = word.length;
|
|
setTimeout(function (i) {
|
|
appendWord(element, word.charAt(wordIndex));
|
|
count++;
|
|
if (count === len - 1) {
|
|
resolve();
|
|
}
|
|
}, element._props.typeSpeed * i);
|
|
};
|
|
|
|
for (var i = 0; i < word.length; i++) {
|
|
_loop(i);
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* @name appendWord
|
|
* @description Append each letter on Element
|
|
* @param {Element} element The Element that will receive the letter
|
|
* @param {String} word The string that will be appended
|
|
*/
|
|
function appendWord(element, word) {
|
|
element.innerHTML += word;
|
|
}
|
|
|
|
/**
|
|
* @name iterateWords
|
|
* @description Iterate on each word, incrementing and decrementing
|
|
* @param {Element} element The Element that will receive the letters of word
|
|
* @param {String} word The string that is the word
|
|
* @param {Integer} index The index position of the words Array
|
|
* @param {Integer} wordsLengthArray The length of words Array
|
|
* @return {Promise}
|
|
*/
|
|
function iterateWords(element, word, index, wordsLengthArray) {
|
|
return new Promise(function (resolve, reject) {
|
|
increment(element, word).then(function () {
|
|
setTimeout(function () {
|
|
decrement(element, word, index, wordsLengthArray).then(function () {
|
|
setTimeout(function () {
|
|
resolve();
|
|
}, element._props.startDelay);
|
|
});
|
|
}, element._props.backDelay);
|
|
});
|
|
});
|
|
}
|
|
/**
|
|
* @name iterateInsideDecrement
|
|
* @description Iterate on each word, inside the decrement function for decrement the word
|
|
* @param {Element} element The Element that will receive the letters of word
|
|
* @param {String} word The string that is the word
|
|
* @param {Integer} len The length of words Array
|
|
* @param {Promise} resolve The Promise.resolve method that will be trigerred when
|
|
* the decrement iteration are finished
|
|
* @return {Promise}
|
|
*/
|
|
function iterateInsideDecrement(element, word, len, resolve) {
|
|
var _loop2 = function _loop2(i) {
|
|
var iteratedI = i,
|
|
count = len;
|
|
setTimeout(function (i) {
|
|
element.innerHTML = word.substring(0, len - iteratedI);
|
|
count--;
|
|
if (iteratedI === 1) {
|
|
resolve();
|
|
}
|
|
}, element._props.backSpeed * i);
|
|
};
|
|
|
|
for (var i = len; i > 0; i--) {
|
|
_loop2(i);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @name decrement
|
|
* @description decrement the word in the correct case
|
|
* @param {Element} element The Element that will receive the letters of word
|
|
* @param {String} word The string that is the word
|
|
* @param {Integer} index The index of the Array that contain the word
|
|
* @param {Integer} lengthWords The length of words Array
|
|
*/
|
|
function decrement(element, word, index, lengthWords) {
|
|
return new Promise(function (resolve, reject) {
|
|
var len = word.length;
|
|
// if is the last letter and the last word and no loop
|
|
if (index + 1 === lengthWords) {
|
|
if (!element._props.loop) {
|
|
// when the last word
|
|
if (element._props.onFinished !== undefined && typeof element._props.onFinished === "function") {
|
|
element._props.onFinished();
|
|
}
|
|
element.innerHTML = word;
|
|
} else if (element._props.loop) {
|
|
iterateInsideDecrement(element, word, len, resolve);
|
|
}
|
|
} else if (index + 1 !== lengthWords) {
|
|
iterateInsideDecrement(element, word, len, resolve);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @name destroy
|
|
* @description destroy the onFinished function
|
|
*/
|
|
function destroy(element) {
|
|
element._props.onFinished = function () {
|
|
return void 0;
|
|
};
|
|
}
|
|
|
|
exports.init = init;
|
|
exports.destroy = destroy;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
})));
|
|
//# sourceMappingURL=ityped.js.map
|