typeit - npm Package Compare versions

Comparing version 8.6.1 to 8.6.2

dist/index.es.js

@@ -359,17 +359,24 @@ // TypeIt by Alex MacArthur - https://typeitjs.com
   }
-  let animation = cursor == null ? void 0 : cursor.getAnimations()[0];
-  let timingOptions = cursor ? {
-    ...animation.effect.getComputedTiming(),
-    delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
-  } : {};
-  let frames = cursor ? animation.effect.getKeyframes() : [];
-  await wait2(async () => {
-    if (queueItem.shouldPauseCursor()) {
-      animation == null ? void 0 : animation.cancel();
+  let fire = async () => {
+    let animation2 = cursor == null ? void 0 : cursor.getAnimations()[0];
+    let timingOptions2, frames2;
+    if (animation2) {
+      timingOptions2 = cursor ? {
+        ...animation2.effect.getComputedTiming(),
+        delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
+      } : {};
+      frames2 = cursor ? animation2.effect.getKeyframes() : [];
     }
-    await beforePaint(() => {
-      execute(queueItem);
-    });
-  }, queueItem.delay);
-  rebuildCursorAnimation({
+    await wait2(async () => {
+      if (queueItem.shouldPauseCursor()) {
+        animation2 == null ? void 0 : animation2.cancel();
+      }
+      await beforePaint(() => {
+        execute(queueItem);
+      });
+    }, queueItem.delay);
+    return { animation: animation2, frames: frames2, timingOptions: timingOptions2 };
+  };
+  let { animation, frames, timingOptions } = await fire();
+  animation && rebuildCursorAnimation({
     cursor,
@@ -395,2 +402,10 @@ frames,
   };
+  let _fireItemWithCursor = (index, queueItems) => {
+    return fireItem({
+      index,
+      queueItems,
+      wait: _wait,
+      cursor: _cursor
+    });
+  };
   let _elementIsInput = () => isInput(_element);
@@ -461,4 +476,15 @@ let _getPace = (index = 0) => calculatePace(_opts)[index];
     derivedCursorPosition && await _move({ value: derivedCursorPosition });
-    for (let _i of _getAllChars()) {
-      await _wait(_delete, _getPace(1));
+    let queueItems = _getAllChars().map((c) => {
+      return [
+        Symbol(),
+        {
+          func: _delete,
+          delay: _getPace(1),
+          deletable: true,
+          shouldPauseCursor: () => true
+        }
+      ];
+    });
+    for (let index = 0; index < queueItems.length; index++) {
+      await _fireItemWithCursor(index, queueItems);
     }
@@ -499,8 +525,3 @@ _queue.reset();
         if (!queueItem.deletable || queueItem.deletable && _getAllChars().length) {
-          let newIndex = await fireItem({
-            index,
-            queueItems,
-            wait: _wait,
-            cursor: _cursor
-          });
+          let newIndex = await _fireItemWithCursor(index, queueItems);
           Array(newIndex - index).fill(index + 1).map((x, y) => x + y).forEach((i) => {
@@ -507,0 +528,0 @@ let [key] = queueItems[i];

dist/index.umd.js

 // TypeIt by Alex MacArthur - https://typeitjs.com
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TypeIt=t()}(this,(function(){"use strict";var e=e=>Array.isArray(e),t=t=>e(t)?t:[t];var n=e=>Array.from(e),r=e=>document.createTextNode(e);let i=e=>([...e.childNodes].forEach((e=>{if(e.nodeValue)return[...e.nodeValue].forEach((t=>{e.parentNode.insertBefore(r(t),e)})),void e.remove();i(e)})),e);var l=e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,i(t.body)};const a="ti-cursor",o={started:!1,completed:!1,frozen:!1,destroyed:!1},s={breakLines:!0,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,html:!0,lifeLike:!0,loop:!1,loopDelay:750,nextStringDelay:750,speed:100,startDelay:250,startDelete:!1,strings:[],waitUntilVisible:!1,beforeString:()=>{},afterString:()=>{},beforeStep:()=>{},afterStep:()=>{},afterComplete:()=>{}};function u(e,t=!1,n=!1){let r,i=e.querySelector(".ti-cursor"),l=document.createTreeWalker(e,NodeFilter.SHOW_ALL,{acceptNode:e=>{var t,r;if(i&&n){if(null==(t=e.classList)?void 0:t.contains(a))return NodeFilter.FILTER_ACCEPT;if(i.contains(e))return NodeFilter.FILTER_REJECT}return(null==(r=e.classList)?void 0:r.contains(a))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=[];for(;r=l.nextNode();)r.originalParent||(r.originalParent=r.parentNode),o.push(r);return t?o.reverse():o}function c(e,t=!0){return t?u(l(e)):n(e).map(r)}var d=e=>document.createElement(e),f=(e,t="")=>{let n=d("style");n.id=t,n.appendChild(r(e)),document.head.appendChild(n)},h=t=>(e(t)||(t=[t/2,t/2]),t),y=(e,t)=>Math.abs(Math.random()*(e+t-(e-t))+(e-t));let p=e=>e/2;var m=e=>"value"in e;let g=e=>"function"==typeof e?e():e;var b=e=>Number.isInteger(e);let v=(e,t=document,n=!1)=>t["querySelector"+(n?"All":"")](e);var T=(e,t)=>Object.assign({},e,t),w=e=>{if(!e)return;let t=e.parentNode;(t.childNodes.length>1?e:t).remove()};let E={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"",transform:"translateX(-.125em)"};var S=(e,t)=>new Array(t).fill(e);const L=({queueItems:e,selector:t,cursorPosition:n,to:r})=>{if(b(t))return-1*t;let i=new RegExp("END","i").test(r),l=t?[...e].reverse().findIndex((({char:e})=>{let n=e.parentElement,r=n.matches(t);return!(!i||!r)||r&&n.firstChild.isSameNode(e)})):-1;return l<0&&(l=i?0:e.length-1),l-n+(i?0:1)};let N=e=>new Promise((t=>{requestAnimationFrame((async()=>{t(await e())}))}));const C={iterations:1/0,easing:"steps(2, start)",fill:"forwards"},M=[{opacity:0},{opacity:0},{opacity:1}];let x=({cursor:e,frames:t=null,timingOptions:n={}})=>e.animate(t||M,{...C,...n}),I=e=>{var t;return null==(t=e.func)?void 0:t.call(globalThis)},D=async({index:e,queueItems:t,wait:n,cursor:r})=>{let i=t[e][1],l=[],a=e,o=i,s=()=>o&&!o.delay;for(;s();)l.push(o),s()&&a++,o=t[a]?t[a][1]:null;if(l.length)return await N((async()=>{for(let e of l)await I(e)})),a-1;let u=null==r?void 0:r.getAnimations()[0],c=r?{...u.effect.getComputedTiming(),delay:i.shouldPauseCursor()?500:0}:{},d=r?u.effect.getKeyframes():[];return await n((async()=>{i.shouldPauseCursor()&&(null==u||u.cancel()),await N((()=>{I(i)}))}),i.delay),(({cursor:e,frames:t,timingOptions:n})=>{if(!e)return;let r,i=e.getAnimations()[0];i&&"idle"!==i.playState&&(n.delay=i.effect.getComputedTiming().delay,r=i.currentTime,i.cancel());let l=x({cursor:e,frames:t,timingOptions:n});r&&(l.currentTime=r)})({cursor:r,frames:d,timingOptions:c}),e};return function(e,r={}){let N=async(e,t,n=!1)=>{W.frozen&&await new Promise((e=>{this.unfreeze=()=>{W.frozen=!1,e()}})),n||await X.beforeStep(this),await((e,t,n)=>new Promise((r=>{n.push(setTimeout((async()=>{await e(),r()}),t||0))})))(e,t,Q),n||await X.afterStep(this)},C=()=>m(V),M=(e=0)=>function(e){let{speed:t,deleteSpeed:n,lifeLike:r}=e;return n=null!==n?n:t/3,r?[y(t,p(t)),y(n,p(n))]:[t,n]}(X)[e],I=()=>(e=>m(e)?n(e.value):u(e,!0).filter((e=>!(e.childNodes.length>0))))(V),P=(e,t)=>(G.add(e),((e={})=>{let t=e.delay;t&&G.add({delay:t})})(t),this),A=()=>null!=U?U:J,O=(e={})=>[{func:()=>z(e)},{func:()=>z(X)}],H=e=>{let t=X.nextStringDelay;G.add([{delay:t[0]},...e,{delay:t[1]}])},k=async()=>{!C()&&Z&&V.appendChild(Z),Y&&(((e,t)=>{let n=`[data-typeit-id='${e}'] .ti-cursor`,r=getComputedStyle(t),i=Object.entries(E).reduce(((e,[t,n])=>`${e} ${t}: var(--ti-cursor-${t}, ${n||r[t]});`),"");f(`${n} { display: inline-block; width: 0; ${i} } .ti-cursor-wrapper { display: inline-block; font: inherit; color: inherit; }`,e)})(K,V),x({cursor:Z,timingOptions:{duration:X.cursorSpeed}}))},F=()=>{let e=X.strings.filter((e=>!!e));e.forEach(((t,n)=>{if(this.type(t),n+1===e.length)return;let r=X.breakLines?[{func:()=>q(d("BR")),typeable:!0}]:S({func:_,delay:M(1)},G.getTypeable().length);H(r)}))},R=async(e=!0)=>{W.started=!0;let t=t=>{G.done(t,!e)};try{let n=[...G.getQueue()];for(let e=0;e<n.length;e++){let[r,i]=n[e];if(!i.done){if(!i.deletable||i.deletable&&I().length){let r=await D({index:e,queueItems:n,wait:N,cursor:Z});Array(r-e).fill(e+1).map(((e,t)=>e+t)).forEach((e=>{let[r]=n[e];t(r)})),e=r}t(r)}}if(!e)return this;if(W.completed=!0,await X.afterComplete(this),!X.loop)throw"";let r=X.loopDelay;N((async()=>{await(async e=>{let t=A();t&&await $({value:t});for(let n of I())await N(_,M(1));G.reset(),G.set(0,{delay:e})})(r[0]),R()}),r[1])}catch(n){}return this},$=async e=>{var t,n,r;t=e,n=J,r=I(),J=Math.min(Math.max(n+t,0),r.length),((e,t,n)=>{let r=t[n-1],i=v(".ti-cursor",e);(e=(null==r?void 0:r.parentNode)||e).insertBefore(i,r||null)})(V,I(),J)},q=e=>((e,t)=>{if(m(e))return void(e.value=`${e.value}${t.textContent}`);t.innerHTML="";let n=(r=t.originalParent,/body/i.test(null==r?void 0:r.tagName)?e:t.originalParent||e);var r;n.insertBefore(t,v(".ti-cursor",n)||null)})(V,e),z=async e=>X=T(X,e),B=async()=>{C()?V.value="":I().forEach(w)},_=()=>{let e=I();e.length&&(C()?V.value=V.value.slice(0,-1):w(e[J]))};this.break=function(e){return P({func:()=>q(d("BR")),typeable:!0},e)},this.delete=function(e=null,t={}){e=g(e);let n=O(t),r=e,{instant:i,to:l}=t,a=G.getTypeable(),o=null===r?a.length:b(r)?r:L({queueItems:a,selector:r,cursorPosition:A(),to:l});return P([n[0],...S({func:_,delay:i?0:M(1),deletable:!0},o),n[1]],t)},this.empty=function(e={}){return P({func:B},e)},this.exec=function(e,t={}){let n=O(t);return P([n[0],{func:()=>e(this)},n[1]],t)},this.move=function(e,t={}){e=g(e);let n=O(t),{instant:r,to:i}=t,l=L({queueItems:G.getTypeable(),selector:null===e?"":e,to:i,cursorPosition:A()}),a=l<0?-1:1;return U=A()+l,P([n[0],...S({func:()=>$(a),delay:r?0:M(),cursorable:!0},Math.abs(l)),n[1]],t)},this.options=function(e,t={}){return e=g(e),z(e),P({},t)},this.pause=function(e,t={}){return P({delay:g(e)},t)},this.type=function(e,t={}){e=g(e);let{instant:n}=t,r=O(t),i=c(e,X.html).map((e=>{return{func:()=>q(e),char:e,delay:n||(t=e,/<(.+)>(.*?)<\/(.+)>/.test(t.outerHTML))?0:M(),typeable:e.nodeType===Node.TEXT_NODE};var t})),l=[r[0],{func:async()=>await X.beforeString(e,this)},...i,{func:async()=>await X.afterString(e,this)},r[1]];return P(l,t)},this.is=function(e){return W[e]},this.destroy=function(e=!0){Q.forEach(clearTimeout),Q=[],g(e)&&Z&&w(Z),W.destroyed=!0},this.freeze=function(){W.frozen=!0},this.unfreeze=()=>{},this.reset=function(e){!this.is("destroyed")&&this.destroy(),e?(G.wipe(),e(this)):G.reset(),J=0;for(let t in W)W[t]=!1;return V[C()?"value":"innerHTML"]="",this},this.go=function(){return W.started?this:(k(),X.waitUntilVisible?(((e,t)=>{new IntersectionObserver(((n,r)=>{n.forEach((n=>{n.isIntersecting&&(t(),r.unobserve(e))}))}),{threshold:1}).observe(e)})(V,R.bind(this)),this):(R(),this))},this.flush=function(e=(()=>{})){return k(),R(!1).then(e),this},this.getQueue=()=>G,this.getOptions=()=>X,this.updateOptions=e=>z(e),this.getElement=()=>V;let V="string"==typeof(j=e)?v(j):j;var j;let Q=[],J=0,U=null,W=T({},o),X=T(s,r);X=T(X,{html:!C()&&X.html,nextStringDelay:h(X.nextStringDelay),loopDelay:h(X.loopDelay)});let K=Math.random().toString().substring(2,9),G=function(e){let n=function(e){return t(e).forEach((e=>{var t;return l.set(Symbol(null==(t=e.char)?void 0:t.innerText),r({...e}))})),this},r=e=>(e.shouldPauseCursor=function(){return Boolean(this.typeable||this.cursorable||this.deletable)},e),i=()=>Array.from(l.values()),l=new Map;return n(e),{add:n,set:function(e,t){let n=[...l.keys()];l.set(n[e],r(t))},wipe:function(){l=new Map,n(e)},reset:function(){l.forEach((e=>delete e.done))},destroy:e=>l.delete(e),done:(e,t=!1)=>t?l.delete(e):l.get(e).done=!0,getItems:(e=!1)=>e?i():i().filter((e=>!e.done)),getQueue:()=>l,getTypeable:()=>i().filter((e=>e.typeable))}}([{func:()=>{},delay:X.startDelay}]);V.dataset.typeitId=K,f("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}");let Y=X.cursor&&!C(),Z=(()=>{if(C())return;let e=d("span");return e.className=a,Y?(e.innerHTML=l(X.cursorChar).innerHTML,e):(e.style.visibility="hidden",e)})();X.strings=(e=>{let t=V.innerHTML;return t?(V.innerHTML="",X.startDelete?(V.innerHTML=t,i(V),H(S({func:_,delay:M(1),deletable:!0},I().length)),e):t.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(t(X.strings)),X.strings.length&&F()}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TypeIt=t()}(this,(function(){"use strict";var e=e=>Array.isArray(e),t=t=>e(t)?t:[t];var n=e=>Array.from(e),r=e=>document.createTextNode(e);let i=e=>([...e.childNodes].forEach((e=>{if(e.nodeValue)return[...e.nodeValue].forEach((t=>{e.parentNode.insertBefore(r(t),e)})),void e.remove();i(e)})),e);var a=e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,i(t.body)};const l="ti-cursor",o={started:!1,completed:!1,frozen:!1,destroyed:!1},s={breakLines:!0,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,html:!0,lifeLike:!0,loop:!1,loopDelay:750,nextStringDelay:750,speed:100,startDelay:250,startDelete:!1,strings:[],waitUntilVisible:!1,beforeString:()=>{},afterString:()=>{},beforeStep:()=>{},afterStep:()=>{},afterComplete:()=>{}};function u(e,t=!1,n=!1){let r,i=e.querySelector(".ti-cursor"),a=document.createTreeWalker(e,NodeFilter.SHOW_ALL,{acceptNode:e=>{var t,r;if(i&&n){if(null==(t=e.classList)?void 0:t.contains(l))return NodeFilter.FILTER_ACCEPT;if(i.contains(e))return NodeFilter.FILTER_REJECT}return(null==(r=e.classList)?void 0:r.contains(l))?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=[];for(;r=a.nextNode();)r.originalParent||(r.originalParent=r.parentNode),o.push(r);return t?o.reverse():o}function c(e,t=!0){return t?u(a(e)):n(e).map(r)}var d=e=>document.createElement(e),f=(e,t="")=>{let n=d("style");n.id=t,n.appendChild(r(e)),document.head.appendChild(n)},h=t=>(e(t)||(t=[t/2,t/2]),t),y=(e,t)=>Math.abs(Math.random()*(e+t-(e-t))+(e-t));let p=e=>e/2;var m=e=>"value"in e;let g=e=>"function"==typeof e?e():e;var b=e=>Number.isInteger(e);let v=(e,t=document,n=!1)=>t["querySelector"+(n?"All":"")](e);var w=(e,t)=>Object.assign({},e,t),T=e=>{if(!e)return;let t=e.parentNode;(t.childNodes.length>1?e:t).remove()};let E={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"",transform:"translateX(-.125em)"};var S=(e,t)=>new Array(t).fill(e);const C=({queueItems:e,selector:t,cursorPosition:n,to:r})=>{if(b(t))return-1*t;let i=new RegExp("END","i").test(r),a=t?[...e].reverse().findIndex((({char:e})=>{let n=e.parentElement,r=n.matches(t);return!(!i||!r)||r&&n.firstChild.isSameNode(e)})):-1;return a<0&&(a=i?0:e.length-1),a-n+(i?0:1)};let L=e=>new Promise((t=>{requestAnimationFrame((async()=>{t(await e())}))}));const N={iterations:1/0,easing:"steps(2, start)",fill:"forwards"},M=[{opacity:0},{opacity:0},{opacity:1}];let x=({cursor:e,frames:t=null,timingOptions:n={}})=>e.animate(t||M,{...N,...n}),I=e=>{var t;return null==(t=e.func)?void 0:t.call(globalThis)},P=async({index:e,queueItems:t,wait:n,cursor:r})=>{let i=t[e][1],a=[],l=e,o=i,s=()=>o&&!o.delay;for(;s();)a.push(o),s()&&l++,o=t[l]?t[l][1]:null;if(a.length)return await L((async()=>{for(let e of a)await I(e)})),l-1;let{animation:u,frames:c,timingOptions:d}=await(async()=>{let e,t,a=null==r?void 0:r.getAnimations()[0];return a&&(e=r?{...a.effect.getComputedTiming(),delay:i.shouldPauseCursor()?500:0}:{},t=r?a.effect.getKeyframes():[]),await n((async()=>{i.shouldPauseCursor()&&(null==a||a.cancel()),await L((()=>{I(i)}))}),i.delay),{animation:a,frames:t,timingOptions:e}})();return u&&(({cursor:e,frames:t,timingOptions:n})=>{if(!e)return;let r,i=e.getAnimations()[0];i&&"idle"!==i.playState&&(n.delay=i.effect.getComputedTiming().delay,r=i.currentTime,i.cancel());let a=x({cursor:e,frames:t,timingOptions:n});r&&(a.currentTime=r)})({cursor:r,frames:c,timingOptions:d}),e};return function(e,r={}){let L=async(e,t,n=!1)=>{X.frozen&&await new Promise((e=>{this.unfreeze=()=>{X.frozen=!1,e()}})),n||await K.beforeStep(this),await((e,t,n)=>new Promise((r=>{n.push(setTimeout((async()=>{await e(),r()}),t||0))})))(e,t,J),n||await K.afterStep(this)},N=(e,t)=>P({index:e,queueItems:t,wait:L,cursor:ee}),M=()=>m(j),I=(e=0)=>function(e){let{speed:t,deleteSpeed:n,lifeLike:r}=e;return n=null!==n?n:t/3,r?[y(t,p(t)),y(n,p(n))]:[t,n]}(K)[e],D=()=>(e=>m(e)?n(e.value):u(e,!0).filter((e=>!(e.childNodes.length>0))))(j),O=(e,t)=>(Y.add(e),((e={})=>{let t=e.delay;t&&Y.add({delay:t})})(t),this),A=()=>null!=W?W:U,H=(e={})=>[{func:()=>B(e)},{func:()=>B(K)}],k=e=>{let t=K.nextStringDelay;Y.add([{delay:t[0]},...e,{delay:t[1]}])},F=async()=>{!M()&&ee&&j.appendChild(ee),Z&&(((e,t)=>{let n=`[data-typeit-id='${e}'] .ti-cursor`,r=getComputedStyle(t),i=Object.entries(E).reduce(((e,[t,n])=>`${e} ${t}: var(--ti-cursor-${t}, ${n||r[t]});`),"");f(`${n} { display: inline-block; width: 0; ${i} } .ti-cursor-wrapper { display: inline-block; font: inherit; color: inherit; }`,e)})(G,j),x({cursor:ee,timingOptions:{duration:K.cursorSpeed}}))},R=()=>{let e=K.strings.filter((e=>!!e));e.forEach(((t,n)=>{if(this.type(t),n+1===e.length)return;let r=K.breakLines?[{func:()=>z(d("BR")),typeable:!0}]:S({func:V,delay:I(1)},Y.getTypeable().length);k(r)}))},$=async(e=!0)=>{X.started=!0;let t=t=>{Y.done(t,!e)};try{let n=[...Y.getQueue()];for(let e=0;e<n.length;e++){let[r,i]=n[e];if(!i.done){if(!i.deletable||i.deletable&&D().length){let r=await N(e,n);Array(r-e).fill(e+1).map(((e,t)=>e+t)).forEach((e=>{let[r]=n[e];t(r)})),e=r}t(r)}}if(!e)return this;if(X.completed=!0,await K.afterComplete(this),!K.loop)throw"";let r=K.loopDelay;L((async()=>{await(async e=>{let t=A();t&&await q({value:t});let n=D().map((e=>[Symbol(),{func:V,delay:I(1),deletable:!0,shouldPauseCursor:()=>!0}]));for(let r=0;r<n.length;r++)await N(r,n);Y.reset(),Y.set(0,{delay:e})})(r[0]),$()}),r[1])}catch(n){}return this},q=async e=>{var t,n,r;t=e,n=U,r=D(),U=Math.min(Math.max(n+t,0),r.length),((e,t,n)=>{let r=t[n-1],i=v(".ti-cursor",e);(e=(null==r?void 0:r.parentNode)||e).insertBefore(i,r||null)})(j,D(),U)},z=e=>((e,t)=>{if(m(e))return void(e.value=`${e.value}${t.textContent}`);t.innerHTML="";let n=(r=t.originalParent,/body/i.test(null==r?void 0:r.tagName)?e:t.originalParent||e);var r;n.insertBefore(t,v(".ti-cursor",n)||null)})(j,e),B=async e=>K=w(K,e),_=async()=>{M()?j.value="":D().forEach(T)},V=()=>{let e=D();e.length&&(M()?j.value=j.value.slice(0,-1):T(e[U]))};this.break=function(e){return O({func:()=>z(d("BR")),typeable:!0},e)},this.delete=function(e=null,t={}){e=g(e);let n=H(t),r=e,{instant:i,to:a}=t,l=Y.getTypeable(),o=null===r?l.length:b(r)?r:C({queueItems:l,selector:r,cursorPosition:A(),to:a});return O([n[0],...S({func:V,delay:i?0:I(1),deletable:!0},o),n[1]],t)},this.empty=function(e={}){return O({func:_},e)},this.exec=function(e,t={}){let n=H(t);return O([n[0],{func:()=>e(this)},n[1]],t)},this.move=function(e,t={}){e=g(e);let n=H(t),{instant:r,to:i}=t,a=C({queueItems:Y.getTypeable(),selector:null===e?"":e,to:i,cursorPosition:A()}),l=a<0?-1:1;return W=A()+a,O([n[0],...S({func:()=>q(l),delay:r?0:I(),cursorable:!0},Math.abs(a)),n[1]],t)},this.options=function(e,t={}){return e=g(e),B(e),O({},t)},this.pause=function(e,t={}){return O({delay:g(e)},t)},this.type=function(e,t={}){e=g(e);let{instant:n}=t,r=H(t),i=c(e,K.html).map((e=>{return{func:()=>z(e),char:e,delay:n||(t=e,/<(.+)>(.*?)<\/(.+)>/.test(t.outerHTML))?0:I(),typeable:e.nodeType===Node.TEXT_NODE};var t})),a=[r[0],{func:async()=>await K.beforeString(e,this)},...i,{func:async()=>await K.afterString(e,this)},r[1]];return O(a,t)},this.is=function(e){return X[e]},this.destroy=function(e=!0){J.forEach(clearTimeout),J=[],g(e)&&ee&&T(ee),X.destroyed=!0},this.freeze=function(){X.frozen=!0},this.unfreeze=()=>{},this.reset=function(e){!this.is("destroyed")&&this.destroy(),e?(Y.wipe(),e(this)):Y.reset(),U=0;for(let t in X)X[t]=!1;return j[M()?"value":"innerHTML"]="",this},this.go=function(){return X.started?this:(F(),K.waitUntilVisible?(((e,t)=>{new IntersectionObserver(((n,r)=>{n.forEach((n=>{n.isIntersecting&&(t(),r.unobserve(e))}))}),{threshold:1}).observe(e)})(j,$.bind(this)),this):($(),this))},this.flush=function(e=(()=>{})){return F(),$(!1).then(e),this},this.getQueue=()=>Y,this.getOptions=()=>K,this.updateOptions=e=>B(e),this.getElement=()=>j;let j="string"==typeof(Q=e)?v(Q):Q;var Q;let J=[],U=0,W=null,X=w({},o),K=w(s,r);K=w(K,{html:!M()&&K.html,nextStringDelay:h(K.nextStringDelay),loopDelay:h(K.loopDelay)});let G=Math.random().toString().substring(2,9),Y=function(e){let n=function(e){return t(e).forEach((e=>{var t;return a.set(Symbol(null==(t=e.char)?void 0:t.innerText),r({...e}))})),this},r=e=>(e.shouldPauseCursor=function(){return Boolean(this.typeable||this.cursorable||this.deletable)},e),i=()=>Array.from(a.values()),a=new Map;return n(e),{add:n,set:function(e,t){let n=[...a.keys()];a.set(n[e],r(t))},wipe:function(){a=new Map,n(e)},reset:function(){a.forEach((e=>delete e.done))},destroy:e=>a.delete(e),done:(e,t=!1)=>t?a.delete(e):a.get(e).done=!0,getItems:(e=!1)=>e?i():i().filter((e=>!e.done)),getQueue:()=>a,getTypeable:()=>i().filter((e=>e.typeable))}}([{func:()=>{},delay:K.startDelay}]);j.dataset.typeitId=G,f("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}");let Z=K.cursor&&!M(),ee=(()=>{if(M())return;let e=d("span");return e.className=l,Z?(e.innerHTML=a(K.cursorChar).innerHTML,e):(e.style.visibility="hidden",e)})();K.strings=(e=>{let t=j.innerHTML;return t?(j.innerHTML="",K.startDelete?(j.innerHTML=t,i(j),k(S({func:V,delay:I(1),deletable:!0},D().length)),e):t.replace(/<!--(.+?)-->/g,"").trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(t(K.strings)),K.strings.length&&R()}}));

package.json

 {
   "name": "typeit",
-  "version": "8.6.1",
+  "version": "8.6.2",
   "description": "The most versatile animated typing utility on the planet.",
@@ -61,3 +61,3 @@ "author": "Alex MacArthur <[e-mail]> (https://macarthur.me)",
   },
-  "gitHead": "3600a4d499c4792d0488f016f48d3c230087a78b"
+  "gitHead": "0cc007e43d2ecc37b715188debaa95ef1fff9d98"
 }

src/helpers/fireItem.ts

@@ -49,21 +49,33 @@ import { CURSOR_ANIMATION_RESTART_DELAY } from "../constants";
 
-  let animation = cursor?.getAnimations()[0];
-  let timingOptions = cursor ? {
-    ...animation.effect.getComputedTiming(),
-    delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
-  } : {};
-  let frames = cursor ? animation.effect.getKeyframes() : [];
-  
-  await wait(async () => {
-    // Pause the cursor while stuff is happening.
-    if(queueItem.shouldPauseCursor()) {
-      animation?.cancel();
+  let fire = async (): Promise<{animation: Animation, timingOptions: object, frames: AnimationKeyFrame[]}> => {
+    // An animation is only registered on the cursor when it's made visible. 
+    // If the cursor has been disabled, there won't be one here.
+    let animation = cursor?.getAnimations()[0];
+    let timingOptions: object, frames: AnimationKeyFrame[];
+
+    if(animation) {
+      timingOptions = cursor ? {
+        ...animation.effect.getComputedTiming(),
+        delay: queueItem.shouldPauseCursor() ? CURSOR_ANIMATION_RESTART_DELAY : 0
+      } : {};
+      frames = cursor ? animation.effect.getKeyframes() : [];
     }
+    
+    await wait(async () => {
+      // Pause the cursor while stuff is happening.
+      if(queueItem.shouldPauseCursor()) {
+        animation?.cancel();
+      }
 
-    await beforePaint(() => {    
-      execute(queueItem);
-    })
-  }, queueItem.delay);
+      await beforePaint(() => {    
+        execute(queueItem);
+      })
+    }, queueItem.delay);
 
-  rebuildCursorAnimation({
+    return { animation, frames, timingOptions };
+  }
+
+  let { animation, frames, timingOptions } = await fire();
+
+  animation && rebuildCursorAnimation({
     cursor,
@@ -70,0 +82,0 @@ frames,

src/index.ts

@@ -70,2 +70,11 @@ import Queue from "./Queue";
 
+  let _fireItemWithCursor = (index: number, queueItems: QueueMapPair[]): Promise<number> => {
+    return fireItem({
+            index,
+            queueItems,
+            wait: _wait,
+            cursor: _cursor as El,
+          });
+  }
+
   let _elementIsInput = () => isInput(_element);
@@ -193,4 +202,22 @@
     // in order to wipe the slate clean before restarting.
-    for (let _i of _getAllChars()) {
-      await _wait(_delete, _getPace(1));
+    // 
+    // It's important to first convert each deletion to a 
+    // queue item, so that we can take advantage of the same
+    // cursor-pausing logic (and anything else that might be
+    // introduced in the future).
+    let queueItems: QueueMapPair[] = _getAllChars().map(c => {
+      return [
+        Symbol(), 
+        {
+          func: _delete, 
+          delay: _getPace(1), 
+          deletable: true, 
+          shouldPauseCursor: () => true
+        }
+      ]
+    });
+
+    for(let index = 0; index < queueItems.length; index++) {
+      await _fireItemWithCursor(        index,
+        queueItems);
     }
@@ -280,10 +307,4 @@
         ) {
+          let newIndex = await _fireItemWithCursor(index, queueItems);
 
-          let newIndex = await fireItem({
-            index,
-            queueItems,
-            wait: _wait,
-            cursor: _cursor as El,
-          });
-
           // Ensure each skipped item goes through the cleanup process,
@@ -290,0 +311,0 @@ // so that methods like .flush() don't get messed up.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116568

increased by1.81%

Number of low license alerts

3

decreased by-25%

Lines of code

2260

increased by2.31%

Worsened metrics

Number of downloads

9717

decreased by-9.97%

No dependency changes