typeinit/dist/index.umd.js

An Intuitive Javascript Typing Animation Library

var ut=(f,c,p)=>{if(!c.has(f))throw TypeError("Cannot "+p)};var t=(f,c,p)=>(ut(f,c,"read from private field"),p?p.call(f):c.get(f)),l=(f,c,p)=>{if(c.has(f))throw TypeError("Cannot add the same private member more than once");c instanceof WeakSet?c.add(f):c.set(f,p)},o=(f,c,p,I)=>(ut(f,c,"write to private field"),I?I.call(f,p):c.set(f,p),p),Y=(f,c,p,I)=>({set _(D){o(f,c,D,p)},get _(){return t(f,c,I)}}),h=(f,c,p)=>(ut(f,c,"access private method"),p);(function(f,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c():typeof define=="function"&&define.amd?define(c):(f=typeof globalThis!="undefined"?globalThis:f||self,f.Typeinit=c())})(this,function(){var s,r,U,k,x,g,E,v,R,C,V,B,X,pt,Z,mt,A,wt,O,Ct,tt,bt,z,dt,G,yt,L,j,d,y,et,gt,it,Et,st,vt,T,P,rt,St,nt,Dt,ht,$t,H,Q;"use strict";function f(m,e){const i=document.createElement(m);return m!=="br"&&(i.textContent=e),i}function c(m,e=!1){const i=m.querySelector(":last-child");return e?i.previousElementSibling:i}function p(m,e,i){const n=window.innerHeight;return new Promise((a,u)=>{if(i.signal.addEventListener("abort",()=>{u()}),m.getBoundingClientRect().top+m.offsetHeight/2<=n)a();else{const b=()=>{const $=m.offsetHeight,w=m.getBoundingClientRect().top,M=w+$/2,_=w+$,S=0,q=n,F=q/2,N={top:w,center:M,bottom:_},ft={top:S,center:F,bottom:q},W=e.split(" ");let J,K;W.length===1?J=K=W[0]:(J=W[0],K=W[1]);const at=N[J],ot=ft[K];if(!at||!ot)throw document.removeEventListener("scroll",b),new Error(`unknown value for visiblity options - '${e}'`);at<=ot&&(document.removeEventListener("scroll",b),a())};document.addEventListener("scroll",b)}})}function I(m){return window.getComputedStyle(m).getPropertyValue("display")}function D(m){return typeof m=="number"}const lt={startDelay:0,typingSpeed:100,deletingSpeed:40,deleteDelay:300,pause:1e3,repeat:0,repeatEase:!1,repeatSpeed:0,repeatDelay:750,caret:!0,caretColor:"currentcolor",caretWidth:1,waitUntilVisible:!1,visibleOptions:"center bottom",onStart:void 0,onEnd:void 0,onReset:void 0,onRestart:void 0,onCharTyped:void 0,onCharDeleted:void 0};class Tt{constructor(e,i){l(this,X);l(this,Z);l(this,A);l(this,O);l(this,tt);l(this,z);l(this,G);l(this,L);l(this,d);l(this,et);l(this,it);l(this,st);l(this,T);l(this,rt);l(this,nt);l(this,ht);l(this,H);l(this,s,void 0);l(this,r,void 0);l(this,U,[]);l(this,k,0);l(this,x,new AbortController);l(this,g,!1);l(this,E,!1);l(this,v,"typeinit__caret");l(this,R,0);l(this,C,0);l(this,V,!1);l(this,B,"");if(typeof e=="string")o(this,s,h(this,O,Ct).call(this,e));else{const ct=e.tagName.toLowerCase();if(ct==="input"||ct==="textarea")throw new Error(`Selector cannot be a '${ct}' element`);o(this,s,e)}t(this,s).style.whiteSpace="pre-wrap",h(this,X,pt).call(this),h(this,A,wt).call(this),i={...lt,...h(this,Z,mt).call(this,i)};const{typingSpeed:n,deletingSpeed:a,pause:u,repeat:b,repeatEase:$,repeatSpeed:w,repeatDelay:M,caret:_,caretColor:S,caretWidth:q,waitUntilVisible:F,visibleOptions:N,deleteDelay:ft,startDelay:W,onEnd:J,onStart:K,onCharTyped:at,onCharDeleted:ot,onRestart:_t,onReset:kt}=i;o(this,r,{typingSpeed:n,deletingSpeed:a,pause:u,repeat:b,repeatEase:$,repeatSpeed:w,repeatDelay:M,caret:_,caretColor:S,caretWidth:q,waitUntilVisible:F,visibleOptions:N,deleteDelay:ft,startDelay:W,onEnd:J,onStart:K,onCharTyped:at,onCharDeleted:ot,onRestart:_t,onReset:kt}),t(this,r).caret&&(this._addStyles(),h(this,tt,bt).call(this))}_addStyles(){if(document.querySelector(`.${t(this,v)}`))return;const e=f("style","");e.innerHTML=`
    .${t(this,v)} {
        display: inline-block;
        height: 0.9em;
        transform: translateY(7%);
        border-radius: 100vmax;
        animation: blink-${t(this,v)} 1s infinite;
    }

    * + .${t(this,v)} {
        margin-inline-start: 0.25ch;
    }

    @keyframes blink-${t(this,v)} {
        0% {
          opacity: 0;
        }
        49% {
          opacity: 0;
        }
        50% {
            opacity: 1;
        }
    }
    `,document.querySelector("head").appendChild(e)}type(e){if(typeof e!="string")throw new Error(`'${e}' must be a string`);return t(this,g)||h(this,L,j).call(this,h(this,it,Et),e),this}delete(e=1,i){let n=i==null?void 0:i.mode;const a=i==null?void 0:i.speed,u=i==null?void 0:i.delay;if(!D(e))throw new Error(`'${e}' must be a number`);if(n&&(n=n.toLowerCase(),n!=="char"&&n!=="c"&&n!=="word"&&n!=="w"))throw new Error("mode must be either 'word', 'w','char' or 'c'");if(u&&!D(u))throw new Error(`'${u}' must be a number`);return t(this,g)||h(this,L,j).call(this,h(this,st,vt),e,{mode:n,speed:a,delay:u}),this}deleteAll(e=!0,i){const n=i==null?void 0:i.speed,a=i==null?void 0:i.delay;if(n&&!D(n))throw new Error(`'${n}' must be a number`);if(a&&!D(a))throw new Error(`'${a}' must be a number`);return t(this,g)||h(this,L,j).call(this,h(this,T,P),e,{speed:n,delay:a}),this}newLine(e=1){if(!D(e))throw new Error(`'${e}' must be a number`);return t(this,g)||h(this,L,j).call(this,h(this,rt,St),e),this}pause(e=t(this,r).pause){if(!D(e))throw new Error(`'${e}' must be a number`);return t(this,g)||h(this,L,j).call(this,h(this,nt,Dt),e),this}reset(){if(h(this,et,gt).call(this),t(this,B)){if(!t(this,s))return;t(this,s).innerHTML=t(this,B)}o(this,s,void 0),o(this,B,""),t(this,r).onReset&&t(this,r).onReset(),o(this,r,lt)}restart(){h(this,ht,$t).call(this)}play(){h(this,H,Q).call(this)}}return s=new WeakMap,r=new WeakMap,U=new WeakMap,k=new WeakMap,x=new WeakMap,g=new WeakMap,E=new WeakMap,v=new WeakMap,R=new WeakMap,C=new WeakMap,V=new WeakMap,B=new WeakMap,X=new WeakSet,pt=function(){if(!t(this,s))return;I(t(this,s))==="inline"&&(t(this,s).style.display="inline-block")},Z=new WeakSet,mt=function(e){const i={};if(e)for(let n in e){const a=e[n],u=lt[n];typeof a!=typeof u?n==="onStart"||n==="onEnd"||n==="onCharTyped"||n==="onCharDeleted"||n==="onRestart"||n==="onReset"?typeof a=="function"?i[n]=a:(i[n]=u,console.warn(`${a} is not of type 'function' or '${typeof u}'`)):n==="repeat"?a==="infinite"?i[n]=a:(i[n]=u,console.warn(`${a} is not of type 'infinite' or '${typeof u}'`)):(i[n]=u,console.warn(`${a} is not of type '${typeof u}'`)):D(a)?a>=0?i[n]=a:(i[n]=0,console.warn(`${n} expects a positive number, got ${a}`)):i[n]=a}return i},A=new WeakSet,wt=function(){var i;if(!t(this,s))return;const e=(i=t(this,s).textContent)==null?void 0:i.trim();e&&(t(this,s).innerHTML="",o(this,B,e),this.type(e))},O=new WeakSet,Ct=function(e){const i=document.querySelector(e);if(i)return i;throw new Error(`Couldn't find an element with '${e}'`)},tt=new WeakSet,bt=function(){if(!t(this,s)||t(this,s).querySelector(`.${t(this,v)}`))return;const e=f("span","");e.classList.add(t(this,v)),e.setAttribute("aria-hidden","true"),e.style.background=t(this,r).caretColor,e.style.width=`${t(this,r).caretWidth}px`,t(this,s).appendChild(e)},z=new WeakSet,dt=function(){if(!!t(this,s)&&t(this,r).caret){const e=t(this,s).querySelector(`.${t(this,v)}`);(e==null?void 0:e.style.animationDuration)!=="0s"&&(e.style.animationDuration="0s")}},G=new WeakSet,yt=function(){if(!!t(this,s)&&t(this,r).caret){const e=t(this,s).querySelector(`.${t(this,v)}`);e.style.animationDuration!=="1s"&&(e.style.animationDuration="1s")}},L=new WeakSet,j=function(e,...i){t(this,U).push([e,i])},d=new WeakSet,y=function(e){return new Promise(i=>{const n=setTimeout(()=>{clearInterval(n),i()},e);o(this,k,n)})},et=new WeakSet,gt=function(){clearInterval(t(this,k)),o(this,k,0),t(this,x).abort(),o(this,x,new AbortController),o(this,U,[]),o(this,g,!1),o(this,E,!1),o(this,R,0),o(this,C,0),o(this,V,!1)},it=new WeakSet,Et=async function(e){if(!!t(this,s)){h(this,z,dt).call(this);for(const i of e){if(!t(this,s))return;const n=f("span",i);Y(this,C)._++,t(this,r).caret?t(this,s).insertBefore(n,t(this,s).lastElementChild):t(this,s).appendChild(n),t(this,r).onCharTyped&&t(this,r).onCharTyped(),await h(this,d,y).call(this,t(this,r).typingSpeed)}h(this,G,yt).call(this)}},st=new WeakSet,vt=async function(e,i){var $,w,M;if(!t(this,s))return;const n=($=i==null?void 0:i.mode)!=null?$:"char",a=(w=i==null?void 0:i.speed)!=null?w:t(this,r).deletingSpeed,u=(M=i==null?void 0:i.delay)!=null?M:t(this,r).deleteDelay,b=t(this,r).caret?1:0;if(t(this,s).childElementCount>b)if(await h(this,d,y).call(this,u),n==="char"||n=="c"){e=Math.min(e,t(this,s).childElementCount-b);for(let _=0;_<e;_++){if(!t(this,s))return;Y(this,C)._--,t(this,s).removeChild(c(t(this,s),t(this,r).caret)),t(this,r).onCharDeleted&&t(this,r).onCharDeleted(),await h(this,d,y).call(this,a)}}else{let _=0;for(;t(this,s).childElementCount>b&&_<e;){if(!t(this,s))return;for(;t(this,s).childElementCount>b;){Y(this,C)._--;const S=c(t(this,s),t(this,r).caret),q=S.textContent,F=S.previousElementSibling;if(q)if(q.trim())if(F){const N=F.textContent;if(N){if(!N.trim()){t(this,s).removeChild(S),await h(this,d,y).call(this,a);break}t(this,s).removeChild(S),await h(this,d,y).call(this,a)}else{t(this,s).removeChild(S),await h(this,d,y).call(this,a);break}}else t(this,s).removeChild(S),await h(this,d,y).call(this,a);else t(this,s).removeChild(S),await h(this,d,y).call(this,a);else t(this,s).removeChild(S),await h(this,d,y).call(this,a)}_++,t(this,r).onCharDeleted&&t(this,r).onCharDeleted()}}},T=new WeakSet,P=async function(e=!0,i){var b,$;const n=(b=i==null?void 0:i.speed)!=null?b:t(this,r).deletingSpeed,a=($=i==null?void 0:i.delay)!=null?$:t(this,r).deleteDelay,u=t(this,r).caret?1:0;if(!!t(this,s)&&t(this,s).childElementCount>u)if(await h(this,d,y).call(this,a),e===!1){let w=0;for(;w<t(this,C);){if(!t(this,s))return;c(t(this,s),t(this,r).caret).remove(),w++}o(this,C,0),t(this,V)?o(this,V,!1):t(this,r).onCharDeleted&&t(this,r).onCharDeleted()}else{let w=0;for(;w<t(this,C);){if(!t(this,s))return;t(this,s).removeChild(c(t(this,s),t(this,r).caret)),t(this,r).onCharDeleted&&t(this,r).onCharDeleted(),await h(this,d,y).call(this,n),w++}o(this,C,0)}},rt=new WeakSet,St=async function(e){if(!!t(this,s)){h(this,z,dt).call(this);for(let i=0;i<e;i++){if(!t(this,s))return;Y(this,C)._++;const n=f("br","");t(this,r).caret?t(this,s).insertBefore(n,t(this,s).lastElementChild):t(this,s).appendChild(n),t(this,r).onCharTyped&&t(this,r).onCharTyped(),await h(this,d,y).call(this,t(this,r).typingSpeed)}h(this,G,yt).call(this)}},nt=new WeakSet,Dt=async function(e){return h(this,d,y).call(this,e)},ht=new WeakSet,$t=async function(){clearInterval(t(this,k)),t(this,r).waitUntilVisible&&(t(this,x).abort(),o(this,x,new AbortController)),o(this,V,!0),await h(this,T,P).call(this,!1,{delay:0}),t(this,r).onRestart&&t(this,r).onRestart(),o(this,k,0),o(this,g,!1),o(this,E,!1),o(this,R,0),o(this,C,0),h(this,H,Q).call(this)},H=new WeakSet,Q=async function(){if(!t(this,g)||t(this,E)){if(!t(this,s))return;if(o(this,g,!0),!t(this,E)){if(t(this,r).waitUntilVisible)try{await p(t(this,s),t(this,r).visibleOptions,t(this,x))}catch{return}await h(this,d,y).call(this,t(this,r).startDelay)}!t(this,E)&&t(this,r).onStart&&t(this,r).onStart();for(const e of t(this,U)){if(!t(this,s))return;const[i,n]=[e[0],e[1]];await i.call(this,...n)}D(t(this,r).repeat)?t(this,R)<t(this,r).repeat?(o(this,E,!0),t(this,r).repeatEase?await h(this,T,P).call(this,!0,{speed:t(this,r).repeatSpeed}):await h(this,T,P).call(this,!1),await h(this,d,y).call(this,t(this,r).repeatDelay),h(this,H,Q).call(this),Y(this,R)._++):(o(this,R,0),o(this,E,!1)):t(this,r).repeat==="infinite"&&(o(this,E,!0),t(this,r).repeatEase?await h(this,T,P).call(this,!0,{speed:t(this,r).repeatSpeed}):await h(this,T,P).call(this,!1),await h(this,d,y).call(this,t(this,r).repeatDelay),h(this,H,Q).call(this)),!t(this,E)&&t(this,r).onEnd&&t(this,r).onEnd()}},Tt});