typewrite-simple
Version:
2 lines (1 loc) • 10.3 kB
JavaScript
var e=function(){return e=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},e.apply(this,arguments)};function t(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}"function"==typeof SuppressedError&&SuppressedError;var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var o,a,s={exports:{}},i={exports:{}},u=i.exports;var p=function(){if(a)return s.exports;a=1;for(var e=(o||(o=1,function(){var e,t,n,r,o,a;"undefined"!=typeof performance&&null!==performance&&performance.now?i.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(i.exports=function(){return(e()-o)/1e6},t=process.hrtime,r=(e=function(){var e;return 1e9*(e=t())[0]+e[1]})(),a=1e9*process.uptime(),o=r-a):Date.now?(i.exports=function(){return Date.now()-n},n=Date.now()):(i.exports=function(){return(new Date).getTime()-n},n=(new Date).getTime())}.call(u)),i.exports),t="undefined"==typeof window?n:window,r=["moz","webkit"],p="AnimationFrame",l=t["request"+p],c=t["cancel"+p]||t["cancelRequest"+p],d=0;!l&&d<r.length;d++)l=t[r[d]+"Request"+p],c=t[r[d]+"Cancel"+p]||t[r[d]+"CancelRequest"+p];if(!l||!c){var v=0,f=0,h=[],m=1e3/60;l=function(t){if(0===h.length){var n=e(),r=Math.max(0,m-(n-v));v=r+n,setTimeout((function(){var e=h.slice(0);h.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(v)}catch(e){setTimeout((function(){throw e}),0)}}),Math.round(r))}return h.push({handle:++f,callback:t,cancelled:!1}),f},c=function(e){for(var t=0;t<h.length;t++)h[t].handle===e&&(h[t].cancelled=!0)}}return s.exports=function(e){return l.call(t,e)},s.exports.cancel=function(){c.apply(t,arguments)},s.exports.polyfill=function(e){e||(e=t),e.requestAnimationFrame=l,e.cancelAnimationFrame=c},s.exports}(),l=r(p),c=function(e){return new RegExp(/<[a-z][\s\S]*>/i).test(e)},d=function(e,t){return Math.floor(Math.random()*(t-e+1))+e},v="TYPE_CHARACTER",f="REMOVE_CHARACTER",h="REMOVE_ALL",m="REMOVE_LAST_VISIBLE_NODE",E="PAUSE_FOR",y="CALL_FUNCTION",g="ADD_HTML_TAG_ELEMENT",T="CHANGE_DELETE_SPEED",w="CHANGE_DELAY",A="CHANGE_CURSOR",N="PASTE_STRING",S="HTML_TAG",C="TEXT_NODE",_=function(){function n(n,r){var o=this;if(this.state={cursorAnimation:null,lastFrameTime:null,pauseUntil:null,eventQueue:[],eventLoop:null,eventLoopPaused:!1,reverseCalledEvents:[],calledEvents:[],visibleNodes:[],initialOptions:null,elements:{container:null,wrapper:document.createElement("span"),cursor:document.createElement("span")}},this.options={strings:"",cursor:"|",delay:"natural",pauseFor:1500,deleteSpeed:"natural",loop:!1,autoStart:!1,devMode:!1,skipAddStyles:!1,wrapperClassName:"Typewrite__wrapper",cursorClassName:"Typewrite__cursor",stringSplitter:null,onCreateTextNode:null,onRemoveNode:null,onStep:null},this.setupWrapperElement=function(){o.state.elements.container&&(o.state.elements.wrapper.className=o.options.wrapperClassName,o.state.elements.cursor.className=o.options.cursorClassName,o.state.elements.cursor.innerHTML=o.options.cursor,o.state.elements.container.innerHTML="",o.state.elements.container.appendChild(o.state.elements.wrapper),o.state.elements.container.appendChild(o.state.elements.cursor))},this.start=function(){return o.state.eventLoopPaused=!1,o.runEventLoop(),o},this.pause=function(){return o.state.eventLoopPaused=!0,o},this.stop=function(){return o.state.eventLoop&&(p.cancel(o.state.eventLoop),o.state.eventLoop=null),o},this.pauseFor=function(e){return o.addEventToQueue(E,{ms:e}),o},this.typeOutAllStrings=function(){return"string"==typeof o.options.strings?(o.typeString(o.options.strings).pauseFor(o.options.pauseFor),o):(o.options.strings.forEach((function(e){o.typeString(e).pauseFor(o.options.pauseFor).deleteAll(o.options.deleteSpeed)})),o)},this.typeString=function(e,t){if(void 0===t&&(t=null),c(e))return o.typeOutHTMLString(e,t);if(e){var n=(o.options||{}).stringSplitter,r="function"==typeof n?n(e):e.split("");o.typeCharacters(r,t)}return o},this.pasteString=function(e,t){return void 0===t&&(t=null),c(e)?o.typeOutHTMLString(e,t,!0):(e&&o.addEventToQueue(N,{character:e,node:t}),o)},this.typeOutHTMLString=function(e,t,n){void 0===t&&(t=null);var r=function(e){var t=document.createElement("div");return t.innerHTML=e,t.childNodes}(e);if(r.length>0)for(var a=0;a<r.length;a++){var s=r[a],i=s.innerHTML;s&&3!==s.nodeType?(s.innerHTML="",o.addEventToQueue(g,{node:s,parentNode:t}),n?o.pasteString(i,s):o.typeString(i,s)):s.textContent&&(n?o.pasteString(s.textContent,t):o.typeString(s.textContent,t))}return o},this.deleteAll=function(e){return void 0===e&&(e="natural"),o.addEventToQueue(h,{speed:e}),o},this.changeDeleteSpeed=function(e){if(!e)throw new Error("Must provide new delete speed");return o.addEventToQueue(T,{speed:e}),o},this.changeDelay=function(e){if(!e)throw new Error("Must provide new delay");return o.addEventToQueue(w,{delay:e}),o},this.changeCursor=function(e){if(!e)throw new Error("Must provide new cursor");return o.addEventToQueue(A,{cursor:e}),o},this.deleteChars=function(e){if(!e)throw new Error("Must provide amount of characters to delete");for(var t=0;t<e;t++)o.addEventToQueue(f);return o},this.callFunction=function(e,t){if(!e||"function"!=typeof e)throw new Error("Callback must be a function");return o.addEventToQueue(y,{cb:e,thisArg:t}),o},this.typeCharacters=function(e,t){if(void 0===t&&(t=null),!e||!Array.isArray(e))throw new Error("Characters must be an array");return e.forEach((function(e){o.addEventToQueue(v,{character:e,node:t})})),o},this.removeCharacters=function(e){if(!e||!Array.isArray(e))throw new Error("Characters must be an array");return e.forEach((function(){o.addEventToQueue(f)})),o},this.addEventToQueue=function(e,t,n){return o.addEventToStateProperty(e,t,n,"eventQueue")},this.addReverseCalledEvent=function(e,t,n){return void 0===n&&(n=!1),o.options.loop?o.addEventToStateProperty(e,t,n,"reverseCalledEvents"):o},this.addEventToStateProperty=function(e,n,r,a){var s={eventName:e,eventArgs:n||{}};return o.state[a]=r?t([s],o.state[a],!0):t(t([],o.state[a],!0),[s],!1),o},this.runEventLoop=function(){var n,r;o.state.lastFrameTime||(o.state.lastFrameTime=Date.now());var a=Date.now(),s=a-o.state.lastFrameTime;if(!o.state.eventQueue.length){if(!o.options.loop)return;o.state.eventQueue=t([],o.state.calledEvents,!0),o.state.calledEvents=[],o.options=e({},o.state.initialOptions)}if(o.state.eventLoop=l(o.runEventLoop),!o.state.eventLoopPaused){if(o.state.pauseUntil){if(a<o.state.pauseUntil)return;o.state.pauseUntil=null}var i=t([],o.state.eventQueue,!0),u=i.shift(),p=0;if(!(s<=(p=u.eventName===m||u.eventName===f?"natural"===o.options.deleteSpeed?d(40,80):o.options.deleteSpeed:"natural"===o.options.delay?d(120,160):o.options.delay))){var c=u.eventName,_=u.eventArgs;switch(o.logInDevMode({currentEvent:u,state:o.state,delay:p}),null===(r=(n=o.options).onStep)||void 0===r||r.call(n,u),c){case N:case v:var b=_.character,L=_.node,M=document.createTextNode(b),x=M;o.options.onCreateTextNode&&"function"==typeof o.options.onCreateTextNode&&(x=o.options.onCreateTextNode(b,M)),x&&(L?L.appendChild(x):o.state.elements.wrapper.appendChild(x)),o.state.visibleNodes=t(t([],o.state.visibleNodes,!0),[{type:C,character:b,node:x}],!1);break;case f:i.unshift({eventName:m,eventArgs:{removingCharacterNode:!0}});break;case E:var D=u.eventArgs.ms;o.state.pauseUntil=Date.now()+parseInt(D);break;case y:var Q=u.eventArgs,R=Q.cb,O=Q.thisArg;R.call(O,{elements:o.state.elements});break;case g:var k=u.eventArgs,F=(L=k.node,k.parentNode);F?F.appendChild(L):o.state.elements.wrapper.appendChild(L),o.state.visibleNodes=t(t([],o.state.visibleNodes,!0),[{type:S,node:L,parentNode:F||o.state.elements.wrapper}],!1);break;case h:var H=o.state.visibleNodes,P=_.speed,I=[];P&&I.push({eventName:T,eventArgs:{speed:P,temp:!0}});for(var U=0,q=H.length;U<q;U++)I.push({eventName:m,eventArgs:{removingCharacterNode:!1}});P&&I.push({eventName:T,eventArgs:{speed:o.options.deleteSpeed,temp:!0}}),i.unshift.apply(i,I);break;case m:var G=u.eventArgs.removingCharacterNode;if(o.state.visibleNodes.length){var Y=o.state.visibleNodes.pop(),V=Y.type;L=Y.node,b=Y.character;o.options.onRemoveNode&&"function"==typeof o.options.onRemoveNode&&o.options.onRemoveNode({node:L,character:b}),L&&L.parentNode.removeChild(L),V===S&&G&&i.unshift({eventName:m,eventArgs:{}})}break;case T:o.options.deleteSpeed=u.eventArgs.speed;break;case w:o.options.delay=u.eventArgs.delay;break;case A:o.options.cursor=u.eventArgs.cursor,o.state.elements.cursor.innerHTML=u.eventArgs.cursor}o.options.loop&&(u.eventName===m||u.eventArgs&&u.eventArgs.temp||(o.state.calledEvents=t(t([],o.state.calledEvents,!0),[u],!1))),o.state.eventQueue=i,o.state.lastFrameTime=a}}},this.clearEventQueue=function(){return o.state.eventQueue=[],o},n)if("string"==typeof n){var a=document.querySelector(n);if(!a)throw new Error("Could not find container element");this.state.elements.container=a}else this.state.elements.container=n;r&&(this.options=e(e({},this.options),r)),this.state.initialOptions=e({},this.options),this.init()}return n.prototype.init=function(){var e,t;this.setupWrapperElement(),this.addEventToQueue(A,{cursor:this.options.cursor},!0),this.addEventToQueue(h,null,!0),!window||window.___TYPEWRITE_JS_STYLES_ADDED___||this.options.skipAddStyles||(e=".Typewrite__cursor{-webkit-animation:Typewrite-cursor 1s infinite;animation:Typewrite-cursor 1s infinite;margin-left:1px}@-webkit-keyframes Typewrite-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes Typewrite-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}",(t=document.createElement("style")).appendChild(document.createTextNode(e)),document.head.appendChild(t),window.___TYPEWRITE_JS_STYLES_ADDED___=!0),!0===this.options.autoStart&&this.options.strings&&this.typeOutAllStrings().start()},n.prototype.logInDevMode=function(e){this.options.devMode&&console.log(e)},n}();export{_ as default};