diff --git a/Readme.md b/Readme.md index 3b86d06..405f05d 100644 --- a/Readme.md +++ b/Readme.md @@ -1,6 +1,6 @@ # iTyped -[![npm package](https://img.shields.io/badge/npm-v1.0.1-lightgray.svg)](https://www.npmjs.com/package/ityped) +[![npm package](https://img.shields.io/badge/npm-v1.0.2-lightgray.svg)](https://www.npmjs.com/package/ityped) > Dead simple Animated typing, with no dependencies. @@ -44,7 +44,7 @@ yarn add ityped #### Browser ~~~ -https://unpkg.com/ityped@1.0.1 +https://unpkg.com/ityped@1.0.2 ~~~ ### CSS diff --git a/dist/index.js b/dist/index.js index a4231a5..0b4c294 100644 --- a/dist/index.js +++ b/dist/index.js @@ -54,102 +54,74 @@ var setProps = function setProps(_ref) { }; }; -var getElement = function getElement(element) { - return typeof element === "string" ? document.querySelector(element) : element; -}; - -var getCursor = function getCursor(props) { - var cursorChar = props.cursorChar; - - var cursor = document.createElement('span'); - cursor.classList.add('ityped-cursor'); - cursor.textContent = cursorChar; - return cursor; -}; - -var insertCursor = function insertCursor(element, cursor, props) { - return props.showCursor ? element.insertAdjacentElement('afterend', cursor) : null; -}; - -var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; - -var typeString = function typeString(word, i, el, props) { - if (i === word.length - 1) { - window.setTimeout(function () { - var k = 0; - - var _loop = function _loop(l) { - k += 1; - if (props.disableBackTyping && isLastLetterOfLastString(word, props) && !props.loop) { - return { - v: props.onFinished() - }; - } - setTimeout(function () { - return eraseString(l, el, props, word); - }, props.backSpeed * k); - }; +var init = function init(element, properties) { + var i = 0, + l = void 0, + STRINGS_TO_ITERATE = void 0; + + var typewrite = function typewrite(strings, props) { + if (i === l) if (props.loop) i = 0; + setTimeout(function () { + typeString(strings[i], props); + }, props.startDelay); + }; - for (var l = word.length - 1; l >= 0; l--) { - var _ret = _loop(l); + var typeString = function typeString(str, props) { + var index = 0, + strLen = str.length; + var intervalID = setInterval(function () { + props.placeholder ? element.placeholder += str[index] : element.textContent += str[index]; + if (++index === strLen) return onStringTyped(intervalID, props); + }, props.typeSpeed); + }; - if ((typeof _ret === "undefined" ? "undefined" : _typeof(_ret)) === "object") return _ret.v; - } + var onStringTyped = function onStringTyped(id, props) { + clearInterval(id); + if (props.disableBackTyping && i === l - 1) { + return props.onFinished(); + } + if (!props.loop && i === l - 1) { + return props.onFinished(); + } + setTimeout(function () { + return eraseString(props); }, props.backDelay); - } - - props.placeholder ? el.placeholder += word[i] : el.innerHTML += word[i]; -}; - -var isLastLetterOfLastString = function isLastLetterOfLastString(word, props) { - return props.strings.indexOf(word) === props.strings.length - 1; -}; - -var eraseString = function eraseString(i, el, props, word) { - props.placeholder ? el.placeholder = el.placeholder.substring(0, --i) : el.innerHTML = el.innerHTML.substring(0, --i); + }; - if (i === 0 && isLastLetterOfLastString(word, props) && props.loop) { - start(el, props); - } else if (isLastLetterOfLastString(word, props) && !props.loop) { - props.onFinished(); - } -}; + var eraseString = function eraseString(props) { + var str = props.placeholder ? element.placeholder : element.textContent, + strLen = str.length; + var intervalID = setInterval(function () { + props.placeholder ? element.placeholder = element.placeholder.substr(0, --strLen) : element.textContent = str.substr(0, --strLen); + if (strLen === 0) return onStringErased(intervalID, props); + }, props.backSpeed); + }; -var writeString = function writeString(el, position, props, time) { - var word = props.strings[position]; - var startTick = window.setTimeout(function () { - Array.from(word).forEach(function (letter, i) { - return setTimeout(function () { - return typeString(word, i, el, props); - }, props.typeSpeed * (i + 1)); - }); - }, time); -}; + var onStringErased = function onStringErased(id, props) { + clearInterval(id); + ++i; + typewrite(STRINGS_TO_ITERATE, props); + }; -var start = function start(element, props) { - var times = []; - var strings = props.strings, - startDelay = props.startDelay, - typeSpeed = props.typeSpeed, - backSpeed = props.backSpeed, - backDelay = props.backDelay, - loop = props.loop; + var setCursor = function setCursor(element, props) { + var cursorSpan = document.createElement('span'); + cursorSpan.classList.add('ityped-cursor'); + cursorSpan.textContent = '|'; + cursorSpan.textContent = props.cursorChar; + element.insertAdjacentElement('afterend', cursorSpan); + }; - var arrLen = strings.length; - for (var i = 0; i < arrLen; i++) { - var len = strings[i].length; - var nextTime = len * typeSpeed + startDelay + len * backSpeed + backDelay; - times.push(nextTime); - var time = i === 0 ? startDelay : startDelay + times[i - 1]; - writeString(element, i, props, time); - } -}; + var startTyping = function startTyping(prop) { + var props = setProps(prop || {}); + var strings = props.strings; + STRINGS_TO_ITERATE = strings; + l = strings.length; + if (typeof element === "string") element = document.querySelector(element); + if (props.showCursor) setCursor(element, props); + typewrite(strings, props); + }; -var init = function init(el, config) { - var props = setProps(config || {}), - element = getElement(el); - insertCursor(element, getCursor(props), props); - start(element, props); + return startTyping(properties); }; exports.init = init; diff --git a/dist/index.js.map b/dist/index.js.map index 22ce3eb..26825fc 100644 --- a/dist/index.js.map +++ b/dist/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sources":["../src/props.js","../src/element.js","../src/cursor.js","../src/writing.js","../src/index.js"],"sourcesContent":["/**\n * @name setProps\n * @description Set the ityped properties configuration\n * @param {Object} config The configuration properties\n * @return {Promise}\n */\nexport const setProps = ({\n strings = ['Put your strings here...', 'and Enjoy!'],\n typeSpeed = 100,\n backSpeed = 50,\n backDelay = 500,\n startDelay = 500,\n cursorChar = '|',\n placeholder = false,\n showCursor = true,\n disableBackTyping = false,\n onFinished = function(){},\n loop = true\n}) => ({\n strings,\n typeSpeed,\n backSpeed,\n cursorChar,\n backDelay,\n placeholder,\n startDelay,\n showCursor,\n loop,\n disableBackTyping, \n onFinished\n})","export const getElement = element => \n typeof element === \"string\" \n ? document.querySelector(element)\n : element","export const getCursor = props => {\n const { cursorChar } = props\n const cursor = document.createElement('span')\n cursor.classList.add('ityped-cursor')\n cursor.textContent = cursorChar\n return cursor\n}\n\nexport const insertCursor = (element, cursor, props) => \n props.showCursor \n ? element.insertAdjacentElement('afterend', cursor)\n : null","const typeString = (word, i, el, props) => {\n if (i === word.length - 1) {\n window.setTimeout(() => {\n let k = 0\n for (let l = word.length - 1; l >= 0; l--) {\n k += 1\n if (props.disableBackTyping && isLastLetterOfLastString(word, props) && !props.loop) {\n return props.onFinished()\n }\n setTimeout(() => eraseString(l, el, props, word), props.backSpeed * k)\n }\n }, props.backDelay)\n }\n\n props.placeholder ? el.placeholder += word[i] : el.innerHTML += word[i]\n}\n\nconst isLastLetterOfLastString = (word, props) => \n props.strings.indexOf(word) === props.strings.length - 1\n\nconst eraseString = (i, el, props, word) => {\n props.placeholder \n ? el.placeholder = el.placeholder.substring(0, --i)\n : el.innerHTML = el.innerHTML.substring(0, --i)\n\n if (i === 0\n && isLastLetterOfLastString(word, props)\n && props.loop\n ) {\n start(el, props)\n } else if (isLastLetterOfLastString(word, props) && !props.loop) {\n props.onFinished()\n }\n}\n\nconst writeString = (el, position, props, time) => {\n const word = props.strings[position]\n let i = 0\n const startTick = window.setTimeout(\n () => {\n Array.from(word)\n .forEach((letter, i) =>\n setTimeout(() => typeString(word, i, el, props), props.typeSpeed * (i + 1))\n )\n }, time)\n}\n\nexport const start = (element, props) => {\n const times = []\n const { strings, startDelay, typeSpeed, backSpeed, backDelay, loop } = props\n const arrLen = strings.length\n for (let i = 0; i < arrLen; i++) {\n const len = strings[i].length\n const nextTime = (len * typeSpeed) + startDelay + (len * backSpeed) + backDelay\n times.push(nextTime)\n const time = i === 0 ? startDelay : startDelay + times[i - 1]\n writeString(element, i, props, time)\n }\n}","import { setProps } from './props'\nimport { getElement } from './element'\nimport { insertCursor, getCursor } from './cursor'\nimport { start } from './writing'\n\nconst init = (el, config) => {\n const \n props = setProps(config || {}), \n element = getElement(el)\n insertCursor(element, getCursor(props), props)\n start(element, props)\n}\n\nexport {\n init\n}"],"names":["setProps","strings","typeSpeed","backSpeed","backDelay","startDelay","cursorChar","placeholder","showCursor","disableBackTyping","onFinished","loop","getElement","element","document","querySelector","getCursor","props","cursor","createElement","classList","add","textContent","insertCursor","insertAdjacentElement","typeString","word","i","el","length","setTimeout","k","l","isLastLetterOfLastString","eraseString","innerHTML","indexOf","substring","writeString","position","time","startTick","window","from","forEach","letter","start","times","arrLen","len","nextTime","push","init","config"],"mappings":";;;;;;;;;;;;AAAA;;;;;;AAMA,AAAO,IAAMA,WAAW,SAAXA,QAAW;0BACtBC,OADsB;MACtBA,OADsB,gCACZ,CAAC,0BAAD,EAA6B,YAA7B,CADY;4BAEtBC,SAFsB;MAEtBA,SAFsB,kCAEV,GAFU;4BAGtBC,SAHsB;MAGtBA,SAHsB,kCAGV,EAHU;4BAItBC,SAJsB;MAItBA,SAJsB,kCAIV,GAJU;6BAKtBC,UALsB;MAKtBA,UALsB,mCAKT,GALS;6BAMtBC,UANsB;MAMtBA,UANsB,mCAMT,GANS;8BAOtBC,WAPsB;MAOtBA,WAPsB,oCAOR,KAPQ;6BAQtBC,UARsB;MAQtBA,UARsB,mCAQT,IARS;mCAStBC,iBATsB;MAStBA,iBATsB,yCASF,KATE;6BAUtBC,UAVsB;MAUtBA,UAVsB,mCAUR,YAAU,EAVF;uBAWtBC,IAXsB;MAWtBA,IAXsB,6BAWf,IAXe;SAYjB;oBAAA;wBAAA;wBAAA;0BAAA;wBAAA;4BAAA;0BAAA;0BAAA;cAAA;wCAAA;;GAZiB;CAAjB;;ACNA,IAAMC,aAAa,SAAbA,UAAa;SACxB,OAAOC,OAAP,KAAmB,QAAnB,GACIC,SAASC,aAAT,CAAuBF,OAAvB,CADJ,GAEIA,OAHoB;CAAnB;;ACAA,IAAMG,YAAY,SAAZA,SAAY,QAAU;MACzBV,UADyB,GACVW,KADU,CACzBX,UADyB;;MAE3BY,SAASJ,SAASK,aAAT,CAAuB,MAAvB,CAAf;SACOC,SAAP,CAAiBC,GAAjB,CAAqB,eAArB;SACOC,WAAP,GAAqBhB,UAArB;SACOY,MAAP;CALK;;AAQP,AAAO,IAAMK,eAAe,SAAfA,YAAe,CAACV,OAAD,EAAUK,MAAV,EAAkBD,KAAlB;SAC1BA,MAAMT,UAAN,GACEK,QAAQW,qBAAR,CAA8B,UAA9B,EAA0CN,MAA1C,CADF,GAEE,IAHwB;CAArB;;;;ACRP,IAAMO,aAAa,SAAbA,UAAa,CAACC,IAAD,EAAOC,CAAP,EAAUC,EAAV,EAAcX,KAAd,EAAwB;MACrCU,MAAMD,KAAKG,MAAL,GAAc,CAAxB,EAA2B;WAClBC,UAAP,CAAkB,YAAM;UAClBC,IAAI,CAAR;;iCACSC,CAFa;aAGf,CAAL;YACIf,MAAMR,iBAAN,IAA2BwB,yBAAyBP,IAAzB,EAA+BT,KAA/B,CAA3B,IAAoE,CAACA,MAAMN,IAA/E,EAAqF;;eAC5EM,MAAMP,UAAN;;;mBAEE;iBAAMwB,YAAYF,CAAZ,EAAeJ,EAAf,EAAmBX,KAAnB,EAA0BS,IAA1B,CAAN;SAAX,EAAkDT,MAAMd,SAAN,GAAkB4B,CAApE;;;WALG,IAAIC,IAAIN,KAAKG,MAAL,GAAc,CAA3B,EAA8BG,KAAK,CAAnC,EAAsCA,GAAtC,EAA2C;yBAAlCA,CAAkC;;;;KAF7C,EASGf,MAAMb,SATT;;;QAYIG,WAAN,GAAoBqB,GAAGrB,WAAH,IAAkBmB,KAAKC,CAAL,CAAtC,GAAgDC,GAAGO,SAAH,IAAgBT,KAAKC,CAAL,CAAhE;CAdF;;AAiBA,IAAMM,2BAA2B,SAA3BA,wBAA2B,CAACP,IAAD,EAAOT,KAAP;SAC/BA,MAAMhB,OAAN,CAAcmC,OAAd,CAAsBV,IAAtB,MAAgCT,MAAMhB,OAAN,CAAc4B,MAAd,GAAuB,CADxB;CAAjC;;AAGA,IAAMK,cAAc,SAAdA,WAAc,CAACP,CAAD,EAAIC,EAAJ,EAAQX,KAAR,EAAeS,IAAf,EAAwB;QACpCnB,WAAN,GACIqB,GAAGrB,WAAH,GAAiBqB,GAAGrB,WAAH,CAAe8B,SAAf,CAAyB,CAAzB,EAA4B,EAAEV,CAA9B,CADrB,GAEIC,GAAGO,SAAH,GAAeP,GAAGO,SAAH,CAAaE,SAAb,CAAuB,CAAvB,EAA0B,EAAEV,CAA5B,CAFnB;;MAIIA,MAAM,CAAN,IACCM,yBAAyBP,IAAzB,EAA+BT,KAA/B,CADD,IAECA,MAAMN,IAFX,EAGE;UACMiB,EAAN,EAAUX,KAAV;GAJF,MAKO,IAAIgB,yBAAyBP,IAAzB,EAA+BT,KAA/B,KAAyC,CAACA,MAAMN,IAApD,EAA0D;UACzDD,UAAN;;CAXJ;;AAeA,IAAM4B,cAAc,SAAdA,WAAc,CAACV,EAAD,EAAKW,QAAL,EAAetB,KAAf,EAAsBuB,IAAtB,EAA+B;MAC3Cd,OAAOT,MAAMhB,OAAN,CAAcsC,QAAd,CAAb;MAEME,YAAYC,OAAOZ,UAAP,CAChB,YAAM;UACEa,IAAN,CAAWjB,IAAX,EACGkB,OADH,CACW,UAACC,MAAD,EAASlB,CAAT;aACPG,WAAW;eAAML,WAAWC,IAAX,EAAiBC,CAAjB,EAAoBC,EAApB,EAAwBX,KAAxB,CAAN;OAAX,EAAiDA,MAAMf,SAAN,IAAmByB,IAAI,CAAvB,CAAjD,CADO;KADX;GAFc,EAMba,IANa,CAAlB;CAHF;;AAYA,AAAO,IAAMM,QAAQ,SAARA,KAAQ,CAACjC,OAAD,EAAUI,KAAV,EAAoB;MACjC8B,QAAQ,EAAd;MACQ9C,OAF+B,GAEgCgB,KAFhC,CAE/BhB,OAF+B;MAEtBI,UAFsB,GAEgCY,KAFhC,CAEtBZ,UAFsB;MAEVH,SAFU,GAEgCe,KAFhC,CAEVf,SAFU;MAECC,SAFD,GAEgCc,KAFhC,CAECd,SAFD;MAEYC,SAFZ,GAEgCa,KAFhC,CAEYb,SAFZ;MAEuBO,IAFvB,GAEgCM,KAFhC,CAEuBN,IAFvB;;MAGjCqC,SAAS/C,QAAQ4B,MAAvB;OACK,IAAIF,IAAI,CAAb,EAAgBA,IAAIqB,MAApB,EAA4BrB,GAA5B,EAAiC;QACzBsB,MAAMhD,QAAQ0B,CAAR,EAAWE,MAAvB;QACMqB,WAAYD,MAAM/C,SAAP,GAAoBG,UAApB,GAAkC4C,MAAM9C,SAAxC,GAAqDC,SAAtE;UACM+C,IAAN,CAAWD,QAAX;QACMV,OAAOb,MAAM,CAAN,GAAUtB,UAAV,GAAuBA,aAAa0C,MAAMpB,IAAI,CAAV,CAAjD;gBACYd,OAAZ,EAAqBc,CAArB,EAAwBV,KAAxB,EAA+BuB,IAA/B;;CATG;;AC1CP,IAAMY,OAAO,SAAPA,IAAO,CAACxB,EAAD,EAAKyB,MAAL,EAAgB;MAEzBpC,QAAQjB,SAASqD,UAAU,EAAnB,CADV;MAEExC,UAAUD,WAAWgB,EAAX,CAFZ;eAGaf,OAAb,EAAsBG,UAAUC,KAAV,CAAtB,EAAwCA,KAAxC;QACMJ,OAAN,EAAeI,KAAf;CALF;;;;;;;;;;;;"} \ No newline at end of file +{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/**\n * @name setProps\n * @description Set the ityped properties configuration\n * @param {Object} config The configuration properties\n * @return {Promise}\n */\nconst setProps = ({\n strings = ['Put your strings here...', 'and Enjoy!'],\n typeSpeed = 100,\n backSpeed = 50,\n backDelay = 500,\n startDelay = 500,\n cursorChar = '|',\n placeholder = false,\n showCursor = true,\n disableBackTyping = false,\n onFinished = function () { },\n loop = true\n}) => ({\n strings,\n typeSpeed,\n backSpeed,\n cursorChar,\n backDelay,\n placeholder,\n startDelay,\n showCursor,\n loop,\n disableBackTyping,\n onFinished\n})\n\nexport const init = (element, properties) => {\n let i = 0, l, STRINGS_TO_ITERATE;\n\n const typewrite = (strings, props) => {\n if (i === l)\n if (props.loop) i = 0;\n setTimeout(() => { typeString(strings[i], props); }, props.startDelay);\n }\n\n const typeString = (str, props) => {\n let index = 0,\n strLen = str.length;\n let intervalID = setInterval(() => {\n props.placeholder ? element.placeholder += str[index] : element.textContent += str[index];\n if (++index === strLen) return onStringTyped(intervalID, props);\n }, props.typeSpeed);\n }\n\n const onStringTyped = (id, props) => {\n clearInterval(id);\n if (props.disableBackTyping && i === l - 1) {\n return props.onFinished()\n }\n if (!props.loop && i === l - 1) {\n return props.onFinished();\n }\n setTimeout(() => eraseString(props), props.backDelay);\n }\n\n const eraseString = (props) => {\n let str = props.placeholder ? element.placeholder : element.textContent,\n strLen = str.length;\n let intervalID = setInterval(() => {\n props.placeholder\n ? element.placeholder = element.placeholder.substr(0, --strLen)\n : element.textContent = str.substr(0, --strLen);\n if (strLen === 0) return onStringErased(intervalID, props);\n }, props.backSpeed);\n }\n\n const onStringErased = (id, props) => {\n clearInterval(id);\n ++i;\n typewrite(STRINGS_TO_ITERATE, props);\n }\n\n const setCursor = (element, props) => {\n let cursorSpan = document.createElement('span');\n cursorSpan.classList.add('ityped-cursor');\n cursorSpan.textContent = '|';\n cursorSpan.textContent = props.cursorChar;\n element.insertAdjacentElement('afterend', cursorSpan);\n }\n\n\n const startTyping = (prop) => {\n let props = setProps(prop || {})\n let strings = props.strings\n STRINGS_TO_ITERATE = strings\n l = strings.length\n if (typeof element === \"string\") element = document.querySelector(element)\n if (props.showCursor) setCursor(element, props)\n typewrite(strings, props)\n }\n\n return startTyping(properties)\n}"],"names":["setProps","strings","typeSpeed","backSpeed","backDelay","startDelay","cursorChar","placeholder","showCursor","disableBackTyping","onFinished","loop","init","element","properties","i","l","STRINGS_TO_ITERATE","typewrite","props","typeString","str","index","strLen","length","intervalID","setInterval","textContent","onStringTyped","id","eraseString","substr","onStringErased","setCursor","cursorSpan","document","createElement","classList","add","insertAdjacentElement","startTyping","prop","querySelector"],"mappings":"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"} \ No newline at end of file diff --git a/dist/index.min.js b/dist/index.min.js index ef9d6b9..62d3cb8 100644 --- a/dist/index.min.js +++ b/dist/index.min.js @@ -1,2 +1,2 @@ -!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o(e.ityped={})}(this,function(e){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(e,o){return o.strings.indexOf(e)===o.strings.length-1},t=function(e,o,t,r){t.placeholder?o.placeholder=o.placeholder.substring(0,--e):o.innerHTML=o.innerHTML.substring(0,--e),0===e&&n(r,t)&&t.loop?i(o,t):n(r,t)&&!t.loop&&t.onFinished()},r=function(e,r,i,s){var a=i.strings[r];window.setTimeout(function(){Array.from(a).forEach(function(r,s){return setTimeout(function(){return u=e,c=i,(d=s)===(r=a).length-1&&window.setTimeout(function(){for(var e=0,i=function(o){if(e+=1,c.disableBackTyping&&n(r,c)&&!c.loop)return{v:c.onFinished()};setTimeout(function(){return t(o,u,c,r)},c.backSpeed*e)},s=r.length-1;s>=0;s--){var a=i(s);if("object"===(void 0===a?"undefined":o(a)))return a.v}},c.backDelay),void(c.placeholder?u.placeholder+=r[d]:u.innerHTML+=r[d]);var r,d,u,c},i.typeSpeed*(s+1))})},s)},i=function(e,o){for(var n=[],t=o.strings,i=o.startDelay,s=o.typeSpeed,a=o.backSpeed,d=o.backDelay,u=(o.loop,t.length),c=0;c ({\n strings,\n typeSpeed,\n backSpeed,\n cursorChar,\n backDelay,\n placeholder,\n startDelay,\n showCursor,\n loop,\n disableBackTyping, \n onFinished\n})","const typeString = (word, i, el, props) => {\n if (i === word.length - 1) {\n window.setTimeout(() => {\n let k = 0\n for (let l = word.length - 1; l >= 0; l--) {\n k += 1\n if (props.disableBackTyping && isLastLetterOfLastString(word, props) && !props.loop) {\n return props.onFinished()\n }\n setTimeout(() => eraseString(l, el, props, word), props.backSpeed * k)\n }\n }, props.backDelay)\n }\n\n props.placeholder ? el.placeholder += word[i] : el.innerHTML += word[i]\n}\n\nconst isLastLetterOfLastString = (word, props) => \n props.strings.indexOf(word) === props.strings.length - 1\n\nconst eraseString = (i, el, props, word) => {\n props.placeholder \n ? el.placeholder = el.placeholder.substring(0, --i)\n : el.innerHTML = el.innerHTML.substring(0, --i)\n\n if (i === 0\n && isLastLetterOfLastString(word, props)\n && props.loop\n ) {\n start(el, props)\n } else if (isLastLetterOfLastString(word, props) && !props.loop) {\n props.onFinished()\n }\n}\n\nconst writeString = (el, position, props, time) => {\n const word = props.strings[position]\n let i = 0\n const startTick = window.setTimeout(\n () => {\n Array.from(word)\n .forEach((letter, i) =>\n setTimeout(() => typeString(word, i, el, props), props.typeSpeed * (i + 1))\n )\n }, time)\n}\n\nexport const start = (element, props) => {\n const times = []\n const { strings, startDelay, typeSpeed, backSpeed, backDelay, loop } = props\n const arrLen = strings.length\n for (let i = 0; i < arrLen; i++) {\n const len = strings[i].length\n const nextTime = (len * typeSpeed) + startDelay + (len * backSpeed) + backDelay\n times.push(nextTime)\n const time = i === 0 ? startDelay : startDelay + times[i - 1]\n writeString(element, i, props, time)\n }\n}","import { setProps } from './props'\nimport { getElement } from './element'\nimport { insertCursor, getCursor } from './cursor'\nimport { start } from './writing'\n\nconst init = (el, config) => {\n const \n props = setProps(config || {}), \n element = getElement(el)\n insertCursor(element, getCursor(props), props)\n start(element, props)\n}\n\nexport {\n init\n}","export const getElement = element => \n typeof element === \"string\" \n ? document.querySelector(element)\n : element","export const getCursor = props => {\n const { cursorChar } = props\n const cursor = document.createElement('span')\n cursor.classList.add('ityped-cursor')\n cursor.textContent = cursorChar\n return cursor\n}\n\nexport const insertCursor = (element, cursor, props) => \n props.showCursor \n ? element.insertAdjacentElement('afterend', cursor)\n : null"],"names":["isLastLetterOfLastString","word","props","strings","indexOf","length","eraseString","i","el","placeholder","substring","innerHTML","loop","onFinished","writeString","position","time","window","setTimeout","from","forEach","letter","k","l","disableBackTyping","backSpeed","backDelay","typeSpeed","start","element","times","startDelay","arrLen","len","nextTime","push","config","cursorChar","showCursor","setProps","document","querySelector","cursor","createElement","classList","add","textContent","getCursor","insertAdjacentElement"],"mappings":"yLAMA,gNCWMA,EAA2B,SAACC,EAAMC,UACtCA,EAAMC,QAAQC,QAAQH,KAAUC,EAAMC,QAAQE,OAAS,GAEnDC,EAAc,SAACC,EAAGC,EAAIN,EAAOD,KAC3BQ,YACFD,EAAGC,YAAcD,EAAGC,YAAYC,UAAU,IAAKH,GAC/CC,EAAGG,UAAYH,EAAGG,UAAUD,UAAU,IAAKH,GAErC,IAANA,GACCP,EAAyBC,EAAMC,IAC/BA,EAAMU,OAEHJ,EAAIN,GACDF,EAAyBC,EAAMC,KAAWA,EAAMU,QACnDC,cAIJC,EAAc,SAACN,EAAIO,EAAUb,EAAOc,OAClCf,EAAOC,EAAMC,QAAQY,GAETE,OAAOC,WACvB,iBACQC,KAAKlB,GACRmB,QAAQ,SAACC,EAAQd,UAChBW,WAAW,kBA1CQV,EA0CkBA,EA1CdN,EA0CkBA,GA1CzBK,EA0CkBA,MA1CxBN,EA0CkBA,GAzCrBI,OAAS,UACfa,WAAW,eAEX,IADDI,EAAI,aACCC,SACF,EACDrB,EAAMsB,mBAAqBxB,EAAyBC,EAAMC,KAAWA,EAAMU,cACtEV,EAAMW,yBAEJ,kBAAMP,EAAYiB,EAAGf,EAAIN,EAAOD,IAAOC,EAAMuB,UAAYH,IAL7DC,EAAItB,EAAKI,OAAS,EAAGkB,GAAK,EAAGA,IAAK,SAAlCA,4DAORrB,EAAMwB,kBAGLjB,YAAcD,EAAGC,aAAeR,EAAKM,GAAKC,EAAGG,WAAaV,EAAKM,IAdpD,IAACN,EAAMM,EAAGC,EAAIN,GA0C0BA,EAAMyB,WAAapB,EAAI,OAE3ES,IAGMY,EAAQ,SAACC,EAAS3B,OAIxB,IAHC4B,KACE3B,EAA+DD,EAA/DC,QAAS4B,EAAsD7B,EAAtD6B,WAAYJ,EAA0CzB,EAA1CyB,UAAWF,EAA+BvB,EAA/BuB,UAAWC,EAAoBxB,EAApBwB,UAC7CM,GADiE9B,EAATU,KAC/CT,EAAQE,QACdE,EAAI,EAAGA,EAAIyB,EAAQzB,IAAK,KACzB0B,EAAM9B,EAAQI,GAAGF,OACjB6B,EAAYD,EAAMN,EAAaI,EAAcE,EAAMR,EAAaC,IAChES,KAAKD,OACLlB,EAAa,IAANT,EAAUwB,EAAaA,EAAaD,EAAMvB,EAAI,KAC/CsB,EAAStB,EAAGL,EAAOc,YCnDtB,SAACR,EAAI4B,SAEdlC,EFDoB,oBACtBC,QAAAA,cAAW,2BAA4B,oBACvCwB,UAAAA,aAAY,UACZF,UAAAA,aAAY,SACZC,UAAAA,aAAY,UACZK,WAAAA,aAAa,UACbM,WAAAA,aAAa,UACb5B,YAAAA,oBACA6B,WAAAA,oBACAd,kBAAAA,oBACAX,WAAAA,aAAc,mBACdD,oKEVU2B,CAASH,OACjBP,KAAqBrB,ECPJ,iBAAZqB,EACHW,SAASC,cAAcZ,GACvBA,GCKuBA,EFCdA,EEDuBa,EARb,gBACfL,EAAenC,EAAfmC,WACFK,EAASF,SAASG,cAAc,iBAC/BC,UAAUC,IAAI,mBACdC,YAAcT,EACdK,EFIeK,CAAU7C,GAAQA,EEAlCoC,YACJT,EAAQmB,sBAAsB,WAAYN,GAFlB,IAACb,EAASa,IFE9Bb,EAAS3B"} \ No newline at end of file +{"version":3,"file":"index.min.js","sources":["../src/index.js"],"sourcesContent":["/**\n * @name setProps\n * @description Set the ityped properties configuration\n * @param {Object} config The configuration properties\n * @return {Promise}\n */\nconst setProps = ({\n strings = ['Put your strings here...', 'and Enjoy!'],\n typeSpeed = 100,\n backSpeed = 50,\n backDelay = 500,\n startDelay = 500,\n cursorChar = '|',\n placeholder = false,\n showCursor = true,\n disableBackTyping = false,\n onFinished = function () { },\n loop = true\n}) => ({\n strings,\n typeSpeed,\n backSpeed,\n cursorChar,\n backDelay,\n placeholder,\n startDelay,\n showCursor,\n loop,\n disableBackTyping,\n onFinished\n})\n\nexport const init = (element, properties) => {\n let i = 0, l, STRINGS_TO_ITERATE;\n\n const typewrite = (strings, props) => {\n if (i === l)\n if (props.loop) i = 0;\n setTimeout(() => { typeString(strings[i], props); }, props.startDelay);\n }\n\n const typeString = (str, props) => {\n let index = 0,\n strLen = str.length;\n let intervalID = setInterval(() => {\n props.placeholder ? element.placeholder += str[index] : element.textContent += str[index];\n if (++index === strLen) return onStringTyped(intervalID, props);\n }, props.typeSpeed);\n }\n\n const onStringTyped = (id, props) => {\n clearInterval(id);\n if (props.disableBackTyping && i === l - 1) {\n return props.onFinished()\n }\n if (!props.loop && i === l - 1) {\n return props.onFinished();\n }\n setTimeout(() => eraseString(props), props.backDelay);\n }\n\n const eraseString = (props) => {\n let str = props.placeholder ? element.placeholder : element.textContent,\n strLen = str.length;\n let intervalID = setInterval(() => {\n props.placeholder\n ? element.placeholder = element.placeholder.substr(0, --strLen)\n : element.textContent = str.substr(0, --strLen);\n if (strLen === 0) return onStringErased(intervalID, props);\n }, props.backSpeed);\n }\n\n const onStringErased = (id, props) => {\n clearInterval(id);\n ++i;\n typewrite(STRINGS_TO_ITERATE, props);\n }\n\n const setCursor = (element, props) => {\n let cursorSpan = document.createElement('span');\n cursorSpan.classList.add('ityped-cursor');\n cursorSpan.textContent = '|';\n cursorSpan.textContent = props.cursorChar;\n element.insertAdjacentElement('afterend', cursorSpan);\n }\n\n\n const startTyping = (prop) => {\n let props = setProps(prop || {})\n let strings = props.strings\n STRINGS_TO_ITERATE = strings\n l = strings.length\n if (typeof element === \"string\") element = document.querySelector(element)\n if (props.showCursor) setCursor(element, props)\n typewrite(strings, props)\n }\n\n return startTyping(properties)\n}"],"names":["element","properties","i","l","STRINGS_TO_ITERATE","typewrite","strings","props","loop","startDelay","typeString","str","index","strLen","length","intervalID","setInterval","placeholder","textContent","onStringTyped","typeSpeed","id","disableBackTyping","onFinished","eraseString","backDelay","substr","onStringErased","backSpeed","prop","cursorChar","showCursor","setProps","document","querySelector","cursorSpan","createElement","classList","add","insertAdjacentElement","setCursor","startTyping"],"mappings":"gMAgCoB,SAACA,EAASC,OACxBC,EAAI,EAAGC,SAAGC,SAERC,EAAY,SAACC,EAASC,GACtBL,IAAMC,GACJI,EAAMC,OAAMN,EAAI,cACX,aAAmBI,EAAQJ,GAAIK,IAAWA,EAAME,aAGvDC,EAAa,SAACC,EAAKJ,OACnBK,EAAQ,EACVC,EAASF,EAAIG,OACXC,EAAaC,YAAY,gBACrBC,YAAcjB,EAAQiB,aAAeN,EAAIC,GAASZ,EAAQkB,aAAeP,EAAIC,KAC7EA,IAAUC,EAAQ,OAAOM,EAAcJ,EAAYR,IACxDA,EAAMa,YAGLD,EAAgB,SAACE,EAAId,wBACXc,GACVd,EAAMe,mBAAqBpB,IAAMC,EAAI,EAChCI,EAAMgB,aAEVhB,EAAMC,MAAQN,IAAMC,EAAI,kBAGlB,kBAAMqB,EAAYjB,IAAQA,EAAMkB,WAFlClB,EAAMgB,cAKXC,EAAc,SAACjB,OACfI,EAAMJ,EAAMU,YAAcjB,EAAQiB,YAAcjB,EAAQkB,YAC1DL,EAASF,EAAIG,OACXC,EAAaC,YAAY,gBACrBC,YACFjB,EAAQiB,YAAcjB,EAAQiB,YAAYS,OAAO,IAAKb,GACtDb,EAAQkB,YAAcP,EAAIe,OAAO,IAAKb,GAC3B,IAAXA,EAAc,OAAOc,EAAeZ,EAAYR,IACnDA,EAAMqB,YAGLD,EAAiB,SAACN,EAAId,iBACZc,KACZnB,IACQE,EAAoBG,WAYZ,SAACsB,OACftB,EAlFS,oBACfD,QAAAA,cAAW,2BAA4B,oBACvCc,UAAAA,aAAY,UACZQ,UAAAA,aAAY,SACZH,UAAAA,aAAY,UACZhB,WAAAA,aAAa,UACbqB,WAAAA,aAAa,UACbb,YAAAA,oBACAc,WAAAA,oBACAT,kBAAAA,oBACAC,WAAAA,aAAa,mBACbf,oKAuEcwB,CAASH,OACjBvB,EAAUC,EAAMD,UACCA,IACjBA,EAAQQ,OACW,iBAAZd,IAAsBA,EAAUiC,SAASC,cAAclC,IAC9DO,EAAMwB,YAfM,SAAC/B,EAASO,OACtB4B,EAAaF,SAASG,cAAc,UAC7BC,UAAUC,IAAI,mBACdpB,YAAc,MACdA,YAAcX,EAAMuB,aACvBS,sBAAsB,WAAYJ,GAUpBK,CAAUxC,EAASO,KAC/BD,EAASC,GAGdkC,CAAYxC"} \ No newline at end of file diff --git a/index.html b/index.html index d9a93c8..5112bd5 100644 --- a/index.html +++ b/index.html @@ -42,13 +42,9 @@ diff --git a/package.json b/package.json index 7bf50a4..c8caa93 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,11 @@ { "name": "ityped", - "version": "1.0.1", - "description": "Dead simple Animated typing, with no dependencies.", + "version": "1.0.2", + "description": "Dead simple animated typing, with no dependencies.", "main": "dist/index.min.js", "module": "src/index.js", "files": [ - "dist", - "src" + "dist" ], "scripts": { "prebuild": "npm run clean", diff --git a/src/cursor.js b/src/cursor.js deleted file mode 100644 index f5808df..0000000 --- a/src/cursor.js +++ /dev/null @@ -1,12 +0,0 @@ -export const getCursor = props => { - const { cursorChar } = props - const cursor = document.createElement('span') - cursor.classList.add('ityped-cursor') - cursor.textContent = cursorChar - return cursor -} - -export const insertCursor = (element, cursor, props) => - props.showCursor - ? element.insertAdjacentElement('afterend', cursor) - : null \ No newline at end of file diff --git a/src/element.js b/src/element.js deleted file mode 100644 index 3d966c2..0000000 --- a/src/element.js +++ /dev/null @@ -1,4 +0,0 @@ -export const getElement = element => - typeof element === "string" - ? document.querySelector(element) - : element \ No newline at end of file diff --git a/src/index.js b/src/index.js index 923e849..7792b1e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,99 @@ -import { setProps } from './props' -import { getElement } from './element' -import { insertCursor, getCursor } from './cursor' -import { start } from './writing' - -const init = (el, config) => { - const - props = setProps(config || {}), - element = getElement(el) - insertCursor(element, getCursor(props), props) - start(element, props) -} - -export { - init +/** + * @name setProps + * @description Set the ityped properties configuration + * @param {Object} config The configuration properties + * @return {Promise} + */ +const setProps = ({ + strings = ['Put your strings here...', 'and Enjoy!'], + typeSpeed = 100, + backSpeed = 50, + backDelay = 500, + startDelay = 500, + cursorChar = '|', + placeholder = false, + showCursor = true, + disableBackTyping = false, + onFinished = function () { }, + loop = true +}) => ({ + strings, + typeSpeed, + backSpeed, + cursorChar, + backDelay, + placeholder, + startDelay, + showCursor, + loop, + disableBackTyping, + onFinished +}) + +export const init = (element, properties) => { + let i = 0, l, STRINGS_TO_ITERATE; + + const typewrite = (strings, props) => { + if (i === l) + if (props.loop) i = 0; + setTimeout(() => { typeString(strings[i], props); }, props.startDelay); + } + + const typeString = (str, props) => { + let index = 0, + strLen = str.length; + let intervalID = setInterval(() => { + props.placeholder ? element.placeholder += str[index] : element.textContent += str[index]; + if (++index === strLen) return onStringTyped(intervalID, props); + }, props.typeSpeed); + } + + const onStringTyped = (id, props) => { + clearInterval(id); + if (props.disableBackTyping && i === l - 1) { + return props.onFinished() + } + if (!props.loop && i === l - 1) { + return props.onFinished(); + } + setTimeout(() => eraseString(props), props.backDelay); + } + + const eraseString = (props) => { + let str = props.placeholder ? element.placeholder : element.textContent, + strLen = str.length; + let intervalID = setInterval(() => { + props.placeholder + ? element.placeholder = element.placeholder.substr(0, --strLen) + : element.textContent = str.substr(0, --strLen); + if (strLen === 0) return onStringErased(intervalID, props); + }, props.backSpeed); + } + + const onStringErased = (id, props) => { + clearInterval(id); + ++i; + typewrite(STRINGS_TO_ITERATE, props); + } + + const setCursor = (element, props) => { + let cursorSpan = document.createElement('span'); + cursorSpan.classList.add('ityped-cursor'); + cursorSpan.textContent = '|'; + cursorSpan.textContent = props.cursorChar; + element.insertAdjacentElement('afterend', cursorSpan); + } + + + const startTyping = (prop) => { + let props = setProps(prop || {}) + let strings = props.strings + STRINGS_TO_ITERATE = strings + l = strings.length + if (typeof element === "string") element = document.querySelector(element) + if (props.showCursor) setCursor(element, props) + typewrite(strings, props) + } + + return startTyping(properties) } \ No newline at end of file diff --git a/src/props.js b/src/props.js deleted file mode 100644 index b2856b5..0000000 --- a/src/props.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @name setProps - * @description Set the ityped properties configuration - * @param {Object} config The configuration properties - * @return {Promise} - */ -export const setProps = ({ - strings = ['Put your strings here...', 'and Enjoy!'], - typeSpeed = 100, - backSpeed = 50, - backDelay = 500, - startDelay = 500, - cursorChar = '|', - placeholder = false, - showCursor = true, - disableBackTyping = false, - onFinished = function(){}, - loop = true -}) => ({ - strings, - typeSpeed, - backSpeed, - cursorChar, - backDelay, - placeholder, - startDelay, - showCursor, - loop, - disableBackTyping, - onFinished -}) \ No newline at end of file diff --git a/src/writing.js b/src/writing.js deleted file mode 100644 index 5da07d5..0000000 --- a/src/writing.js +++ /dev/null @@ -1,59 +0,0 @@ -const typeString = (word, i, el, props) => { - if (i === word.length - 1) { - window.setTimeout(() => { - let k = 0 - for (let l = word.length - 1; l >= 0; l--) { - k += 1 - if (props.disableBackTyping && isLastLetterOfLastString(word, props) && !props.loop) { - return props.onFinished() - } - setTimeout(() => eraseString(l, el, props, word), props.backSpeed * k) - } - }, props.backDelay) - } - - props.placeholder ? el.placeholder += word[i] : el.innerHTML += word[i] -} - -const isLastLetterOfLastString = (word, props) => - props.strings.indexOf(word) === props.strings.length - 1 - -const eraseString = (i, el, props, word) => { - props.placeholder - ? el.placeholder = el.placeholder.substring(0, --i) - : el.innerHTML = el.innerHTML.substring(0, --i) - - if (i === 0 - && isLastLetterOfLastString(word, props) - && props.loop - ) { - start(el, props) - } else if (isLastLetterOfLastString(word, props) && !props.loop) { - props.onFinished() - } -} - -const writeString = (el, position, props, time) => { - const word = props.strings[position] - let i = 0 - const startTick = window.setTimeout( - () => { - Array.from(word) - .forEach((letter, i) => - setTimeout(() => typeString(word, i, el, props), props.typeSpeed * (i + 1)) - ) - }, time) -} - -export const start = (element, props) => { - const times = [] - const { strings, startDelay, typeSpeed, backSpeed, backDelay, loop } = props - const arrLen = strings.length - for (let i = 0; i < arrLen; i++) { - const len = strings[i].length - const nextTime = (len * typeSpeed) + startDelay + (len * backSpeed) + backDelay - times.push(nextTime) - const time = i === 0 ? startDelay : startDelay + times[i - 1] - writeString(element, i, props, time) - } -} \ No newline at end of file