diff --git a/dist/alpine-typewriter.js b/dist/alpine-typewriter.js index 7a7f6ed..3a5442e 100644 --- a/dist/alpine-typewriter.js +++ b/dist/alpine-typewriter.js @@ -19,8 +19,10 @@ this.element.innerHTML = this.prepareText(true); this.increment(); - while (true) { - await this.swap(); + if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + while (true) { + await this.swap(); + } } } diff --git a/dist/alpine-typewriter.js.map b/dist/alpine-typewriter.js.map index b8f3ab1..6bf1eb1 100644 --- a/dist/alpine-typewriter.js.map +++ b/dist/alpine-typewriter.js.map @@ -1 +1 @@ -{"version":3,"file":"alpine-typewriter.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["class Typewriter {\n constructor(element, texts, waitTime, showCursor) {\n this.element = element;\n this.texts = texts || [];\n this.current = 1;\n this.currentText = '';\n this.waitTime = waitTime || 2000;\n this.showCursor = showCursor || false;\n this.cursor = true;\n }\n\n async start() {\n this.currentText = this.texts[0] || '';\n this.element.innerHTML = this.prepareText(true);\n this.increment();\n while (true) {\n await this.swap();\n }\n }\n\n prepareText(cursor) {\n return `${this.currentText}${\n cursor ? this.getCursor() : ''\n }${this.getPlaceholder()}`;\n }\n\n getCursor() {\n return this.showCursor\n ? ''\n : '';\n }\n\n getPlaceholder() {\n return '';\n }\n\n async swap() {\n await this.wait(this.waitTime);\n await this.clear();\n await this.type(this.nextText());\n }\n\n increment() {\n this.current++;\n if (this.current > this.texts.length) {\n this.current = 1;\n }\n }\n\n nextText() {\n let text = this.texts[this.current - 1];\n this.increment();\n return text;\n }\n\n text() {\n return this.currentText;\n }\n\n length() {\n return this.text().length;\n }\n\n append(text) {\n this.currentText += text;\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n backspace() {\n this.currentText = this.text().slice(0, -1);\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n async clear() {\n while (this.length()) {\n await this.backspace();\n }\n }\n\n async type(text) {\n while (text.length) {\n await this.append(text[0]);\n\n text = text.substring(1);\n }\n }\n\n async wait(milliseconds) {\n this.cursor = true;\n const interval = setInterval(() => {\n this.cursor = !this.cursor;\n if (this.cursor) {\n this.element.innerHTML = this.prepareText(true);\n } else {\n this.element.innerHTML = this.prepareText(false);\n }\n }, 530);\n return new Promise((resolve) => {\n setTimeout(() => {\n clearInterval(interval);\n resolve();\n }, milliseconds);\n });\n }\n}\n\nexport default function (Alpine) {\n Alpine.directive(\n 'typewriter',\n (el, { expression, modifiers }, { evaluate }) => {\n const texts = evaluate(expression);\n\n const timeModifiers = modifiers.filter((modifier) =>\n modifier.match(/^\\d+m?s$/),\n );\n const latestTimeModifier = timeModifiers.pop();\n let milliseconds = null;\n if (latestTimeModifier) {\n if (latestTimeModifier.endsWith('ms')) {\n milliseconds = parseInt(\n latestTimeModifier.match(/^(\\d+)/)[1],\n );\n } else {\n milliseconds =\n parseInt(latestTimeModifier.match(/^(\\d+)s/)[1]) * 1000;\n }\n }\n\n const showCursor = modifiers.includes('cursor');\n\n new Typewriter(el, texts, milliseconds, showCursor).start().then();\n },\n );\n}\n","import Typewriter from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n Typewriter(window.Alpine);\n});\n"],"names":["Typewriter","constructor","element","texts","waitTime","showCursor","current","currentText","cursor","start","innerHTML","prepareText","increment","swap","getCursor","getPlaceholder","wait","clear","type","nextText","length","text","append","backspace","slice","substring","milliseconds","interval","setInterval","Promise","resolve","setTimeout","clearInterval","Alpine","directive","el","expression","modifiers","evaluate","timeModifiers","filter","modifier","match","latestTimeModifier","pop","endsWith","parseInt","includes","then","document","addEventListener","window"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"alpine-typewriter.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["class Typewriter {\n constructor(element, texts, waitTime, showCursor) {\n this.element = element;\n this.texts = texts || [];\n this.current = 1;\n this.currentText = '';\n this.waitTime = waitTime || 2000;\n this.showCursor = showCursor || false;\n this.cursor = true;\n }\n\n async start() {\n this.currentText = this.texts[0] || '';\n this.element.innerHTML = this.prepareText(true);\n this.increment();\n if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n while (true) {\n await this.swap();\n }\n }\n }\n\n prepareText(cursor) {\n return `${this.currentText}${\n cursor ? this.getCursor() : ''\n }${this.getPlaceholder()}`;\n }\n\n getCursor() {\n return this.showCursor\n ? ''\n : '';\n }\n\n getPlaceholder() {\n return '';\n }\n\n async swap() {\n await this.wait(this.waitTime);\n await this.clear();\n await this.type(this.nextText());\n }\n\n increment() {\n this.current++;\n if (this.current > this.texts.length) {\n this.current = 1;\n }\n }\n\n nextText() {\n let text = this.texts[this.current - 1];\n this.increment();\n return text;\n }\n\n text() {\n return this.currentText;\n }\n\n length() {\n return this.text().length;\n }\n\n append(text) {\n this.currentText += text;\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n backspace() {\n this.currentText = this.text().slice(0, -1);\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n async clear() {\n while (this.length()) {\n await this.backspace();\n }\n }\n\n async type(text) {\n while (text.length) {\n await this.append(text[0]);\n\n text = text.substring(1);\n }\n }\n\n async wait(milliseconds) {\n this.cursor = true;\n const interval = setInterval(() => {\n this.cursor = !this.cursor;\n if (this.cursor) {\n this.element.innerHTML = this.prepareText(true);\n } else {\n this.element.innerHTML = this.prepareText(false);\n }\n }, 530);\n return new Promise((resolve) => {\n setTimeout(() => {\n clearInterval(interval);\n resolve();\n }, milliseconds);\n });\n }\n}\n\nexport default function (Alpine) {\n Alpine.directive(\n 'typewriter',\n (el, { expression, modifiers }, { evaluate }) => {\n const texts = evaluate(expression);\n\n const timeModifiers = modifiers.filter((modifier) =>\n modifier.match(/^\\d+m?s$/),\n );\n const latestTimeModifier = timeModifiers.pop();\n let milliseconds = null;\n if (latestTimeModifier) {\n if (latestTimeModifier.endsWith('ms')) {\n milliseconds = parseInt(\n latestTimeModifier.match(/^(\\d+)/)[1],\n );\n } else {\n milliseconds =\n parseInt(latestTimeModifier.match(/^(\\d+)s/)[1]) * 1000;\n }\n }\n\n const showCursor = modifiers.includes('cursor');\n\n new Typewriter(el, texts, milliseconds, showCursor).start().then();\n },\n );\n}\n","import Typewriter from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n Typewriter(window.Alpine);\n});\n"],"names":["Typewriter","constructor","element","texts","waitTime","showCursor","current","currentText","cursor","start","innerHTML","prepareText","increment","window","matchMedia","matches","swap","getCursor","getPlaceholder","wait","clear","type","nextText","length","text","append","backspace","slice","substring","milliseconds","interval","setInterval","Promise","resolve","setTimeout","clearInterval","Alpine","directive","el","expression","modifiers","evaluate","timeModifiers","filter","modifier","match","latestTimeModifier","pop","endsWith","parseInt","includes","then","document","addEventListener"],"mappings":"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"} \ No newline at end of file diff --git a/dist/alpine-typewriter.min.js b/dist/alpine-typewriter.min.js index 4838f94..470daa6 100644 --- a/dist/alpine-typewriter.min.js +++ b/dist/alpine-typewriter.min.js @@ -1,2 +1,2 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";class t{constructor(t,e,s,r){this.element=t,this.texts=e||[],this.current=1,this.currentText="",this.waitTime=s||2e3,this.showCursor=r||!1,this.cursor=!0}async start(){for(this.currentText=this.texts[0]||"",this.element.innerHTML=this.prepareText(!0),this.increment();;)await this.swap()}prepareText(t){return`${this.currentText}${t?this.getCursor():""}${this.getPlaceholder()}`}getCursor(){return this.showCursor?'':""}getPlaceholder(){return''}async swap(){await this.wait(this.waitTime),await this.clear(),await this.type(this.nextText())}increment(){this.current++,this.current>this.texts.length&&(this.current=1)}nextText(){let t=this.texts[this.current-1];return this.increment(),t}text(){return this.currentText}length(){return this.text().length}append(t){return this.currentText+=t,this.element.innerHTML=this.prepareText(!0),this.wait(100)}backspace(){return this.currentText=this.text().slice(0,-1),this.element.innerHTML=this.prepareText(!0),this.wait(100)}async clear(){for(;this.length();)await this.backspace()}async type(t){for(;t.length;)await this.append(t[0]),t=t.substring(1)}async wait(t){this.cursor=!0;const e=setInterval((()=>{this.cursor=!this.cursor,this.cursor?this.element.innerHTML=this.prepareText(!0):this.element.innerHTML=this.prepareText(!1)}),530);return new Promise((s=>{setTimeout((()=>{clearInterval(e),s()}),t)}))}}document.addEventListener("alpine:init",(()=>{window.Alpine.directive("typewriter",((e,{expression:s,modifiers:r},{evaluate:i})=>{const n=i(s),a=r.filter((t=>t.match(/^\d+m?s$/))).pop();let h=null;a&&(h=a.endsWith("ms")?parseInt(a.match(/^(\d+)/)[1]):1e3*parseInt(a.match(/^(\d+)s/)[1]));const c=r.includes("cursor");new t(e,n,h,c).start().then()}))}))})); +!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";class t{constructor(t,e,s,r){this.element=t,this.texts=e||[],this.current=1,this.currentText="",this.waitTime=s||2e3,this.showCursor=r||!1,this.cursor=!0}async start(){if(this.currentText=this.texts[0]||"",this.element.innerHTML=this.prepareText(!0),this.increment(),!window.matchMedia("(prefers-reduced-motion: reduce)").matches)for(;;)await this.swap()}prepareText(t){return`${this.currentText}${t?this.getCursor():""}${this.getPlaceholder()}`}getCursor(){return this.showCursor?'':""}getPlaceholder(){return''}async swap(){await this.wait(this.waitTime),await this.clear(),await this.type(this.nextText())}increment(){this.current++,this.current>this.texts.length&&(this.current=1)}nextText(){let t=this.texts[this.current-1];return this.increment(),t}text(){return this.currentText}length(){return this.text().length}append(t){return this.currentText+=t,this.element.innerHTML=this.prepareText(!0),this.wait(100)}backspace(){return this.currentText=this.text().slice(0,-1),this.element.innerHTML=this.prepareText(!0),this.wait(100)}async clear(){for(;this.length();)await this.backspace()}async type(t){for(;t.length;)await this.append(t[0]),t=t.substring(1)}async wait(t){this.cursor=!0;const e=setInterval((()=>{this.cursor=!this.cursor,this.cursor?this.element.innerHTML=this.prepareText(!0):this.element.innerHTML=this.prepareText(!1)}),530);return new Promise((s=>{setTimeout((()=>{clearInterval(e),s()}),t)}))}}document.addEventListener("alpine:init",(()=>{window.Alpine.directive("typewriter",((e,{expression:s,modifiers:r},{evaluate:i})=>{const n=i(s),a=r.filter((t=>t.match(/^\d+m?s$/))).pop();let h=null;a&&(h=a.endsWith("ms")?parseInt(a.match(/^(\d+)/)[1]):1e3*parseInt(a.match(/^(\d+)s/)[1]));const c=r.includes("cursor");new t(e,n,h,c).start().then()}))}))})); //# sourceMappingURL=alpine-typewriter.min.js.map diff --git a/dist/alpine-typewriter.min.js.map b/dist/alpine-typewriter.min.js.map index 0c2cb8e..7d01777 100644 --- a/dist/alpine-typewriter.min.js.map +++ b/dist/alpine-typewriter.min.js.map @@ -1 +1 @@ -{"version":3,"file":"alpine-typewriter.min.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["class Typewriter {\n constructor(element, texts, waitTime, showCursor) {\n this.element = element;\n this.texts = texts || [];\n this.current = 1;\n this.currentText = '';\n this.waitTime = waitTime || 2000;\n this.showCursor = showCursor || false;\n this.cursor = true;\n }\n\n async start() {\n this.currentText = this.texts[0] || '';\n this.element.innerHTML = this.prepareText(true);\n this.increment();\n while (true) {\n await this.swap();\n }\n }\n\n prepareText(cursor) {\n return `${this.currentText}${\n cursor ? this.getCursor() : ''\n }${this.getPlaceholder()}`;\n }\n\n getCursor() {\n return this.showCursor\n ? ''\n : '';\n }\n\n getPlaceholder() {\n return '';\n }\n\n async swap() {\n await this.wait(this.waitTime);\n await this.clear();\n await this.type(this.nextText());\n }\n\n increment() {\n this.current++;\n if (this.current > this.texts.length) {\n this.current = 1;\n }\n }\n\n nextText() {\n let text = this.texts[this.current - 1];\n this.increment();\n return text;\n }\n\n text() {\n return this.currentText;\n }\n\n length() {\n return this.text().length;\n }\n\n append(text) {\n this.currentText += text;\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n backspace() {\n this.currentText = this.text().slice(0, -1);\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n async clear() {\n while (this.length()) {\n await this.backspace();\n }\n }\n\n async type(text) {\n while (text.length) {\n await this.append(text[0]);\n\n text = text.substring(1);\n }\n }\n\n async wait(milliseconds) {\n this.cursor = true;\n const interval = setInterval(() => {\n this.cursor = !this.cursor;\n if (this.cursor) {\n this.element.innerHTML = this.prepareText(true);\n } else {\n this.element.innerHTML = this.prepareText(false);\n }\n }, 530);\n return new Promise((resolve) => {\n setTimeout(() => {\n clearInterval(interval);\n resolve();\n }, milliseconds);\n });\n }\n}\n\nexport default function (Alpine) {\n Alpine.directive(\n 'typewriter',\n (el, { expression, modifiers }, { evaluate }) => {\n const texts = evaluate(expression);\n\n const timeModifiers = modifiers.filter((modifier) =>\n modifier.match(/^\\d+m?s$/),\n );\n const latestTimeModifier = timeModifiers.pop();\n let milliseconds = null;\n if (latestTimeModifier) {\n if (latestTimeModifier.endsWith('ms')) {\n milliseconds = parseInt(\n latestTimeModifier.match(/^(\\d+)/)[1],\n );\n } else {\n milliseconds =\n parseInt(latestTimeModifier.match(/^(\\d+)s/)[1]) * 1000;\n }\n }\n\n const showCursor = modifiers.includes('cursor');\n\n new Typewriter(el, texts, milliseconds, showCursor).start().then();\n },\n );\n}\n","import Typewriter from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n Typewriter(window.Alpine);\n});\n"],"names":["Typewriter","constructor","element","texts","waitTime","showCursor","this","current","currentText","cursor","async","innerHTML","prepareText","increment","swap","getCursor","getPlaceholder","wait","clear","type","nextText","length","text","append","backspace","slice","substring","milliseconds","interval","setInterval","Promise","resolve","setTimeout","clearInterval","document","addEventListener","window","Alpine","directive","el","expression","modifiers","evaluate","latestTimeModifier","filter","modifier","match","pop","endsWith","parseInt","includes","start","then"],"mappings":"2FAAA,MAAMA,EACFC,YAAYC,EAASC,EAAOC,EAAUC,GAClCC,KAAKJ,QAAUA,EACfI,KAAKH,MAAQA,GAAS,GACtBG,KAAKC,QAAU,EACfD,KAAKE,YAAc,GACnBF,KAAKF,SAAWA,GAAY,IAC5BE,KAAKD,WAAaA,IAAc,EAChCC,KAAKG,QAAS,CACjB,CAEUC,cAIP,IAHAJ,KAAKE,YAAcF,KAAKH,MAAM,IAAM,GACpCG,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAC1CN,KAAKO,oBAEKP,KAAKQ,MAElB,CAEDF,YAAYH,GACR,MAAQ,GAAEH,KAAKE,cACXC,EAASH,KAAKS,YAAc,KAC7BT,KAAKU,kBACX,CAEDD,YACI,OAAOT,KAAKD,WACN,kJACA,EACT,CAEDW,iBACI,MAAO,0EACV,CAESN,mBACAJ,KAAKW,KAAKX,KAAKF,gBACfE,KAAKY,cACLZ,KAAKa,KAAKb,KAAKc,WACxB,CAEDP,YACIP,KAAKC,UACDD,KAAKC,QAAUD,KAAKH,MAAMkB,SAC1Bf,KAAKC,QAAU,EAEtB,CAEDa,WACI,IAAIE,EAAOhB,KAAKH,MAAMG,KAAKC,QAAU,GAErC,OADAD,KAAKO,YACES,CACV,CAEDA,OACI,OAAOhB,KAAKE,WACf,CAEDa,SACI,OAAOf,KAAKgB,OAAOD,MACtB,CAEDE,OAAOD,GAIH,OAHAhB,KAAKE,aAAec,EACpBhB,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAEnCN,KAAKW,KAAK,IACpB,CAEDO,YAII,OAHAlB,KAAKE,YAAcF,KAAKgB,OAAOG,MAAM,GAAI,GACzCnB,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAEnCN,KAAKW,KAAK,IACpB,CAEUP,cACP,KAAOJ,KAAKe,gBACFf,KAAKkB,WAElB,CAESd,WAACY,GACP,KAAOA,EAAKD,cACFf,KAAKiB,OAAOD,EAAK,IAEvBA,EAAOA,EAAKI,UAAU,EAE7B,CAEShB,WAACiB,GACPrB,KAAKG,QAAS,EACd,MAAMmB,EAAWC,aAAY,KACzBvB,KAAKG,QAAUH,KAAKG,OAChBH,KAAKG,OACLH,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAE1CN,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,EAC7C,GACF,KACH,OAAO,IAAIkB,SAASC,IAChBC,YAAW,KACPC,cAAcL,GACdG,GAAO,GACRJ,EAHH,GAKP,ECzGLO,SAASC,iBAAiB,eAAe,KAC1BC,OAAOC,OD4GXC,UACH,cACA,CAACC,GAAMC,aAAYC,cAAeC,eAC9B,MAAMvC,EAAQuC,EAASF,GAKjBG,EAHgBF,EAAUG,QAAQC,GACpCA,EAASC,MAAM,cAEsBC,MACzC,IAAIpB,EAAe,KACfgB,IAEIhB,EADAgB,EAAmBK,SAAS,MACbC,SACXN,EAAmBG,MAAM,UAAU,IAIgB,IAAnDG,SAASN,EAAmBG,MAAM,WAAW,KAIzD,MAAMzC,EAAaoC,EAAUS,SAAS,UAEtC,IAAIlD,EAAWuC,EAAIpC,EAAOwB,EAActB,GAAY8C,QAAQC,MAA5D,GCnIR"} \ No newline at end of file +{"version":3,"file":"alpine-typewriter.min.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["class Typewriter {\n constructor(element, texts, waitTime, showCursor) {\n this.element = element;\n this.texts = texts || [];\n this.current = 1;\n this.currentText = '';\n this.waitTime = waitTime || 2000;\n this.showCursor = showCursor || false;\n this.cursor = true;\n }\n\n async start() {\n this.currentText = this.texts[0] || '';\n this.element.innerHTML = this.prepareText(true);\n this.increment();\n if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n while (true) {\n await this.swap();\n }\n }\n }\n\n prepareText(cursor) {\n return `${this.currentText}${\n cursor ? this.getCursor() : ''\n }${this.getPlaceholder()}`;\n }\n\n getCursor() {\n return this.showCursor\n ? ''\n : '';\n }\n\n getPlaceholder() {\n return '';\n }\n\n async swap() {\n await this.wait(this.waitTime);\n await this.clear();\n await this.type(this.nextText());\n }\n\n increment() {\n this.current++;\n if (this.current > this.texts.length) {\n this.current = 1;\n }\n }\n\n nextText() {\n let text = this.texts[this.current - 1];\n this.increment();\n return text;\n }\n\n text() {\n return this.currentText;\n }\n\n length() {\n return this.text().length;\n }\n\n append(text) {\n this.currentText += text;\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n backspace() {\n this.currentText = this.text().slice(0, -1);\n this.element.innerHTML = this.prepareText(true);\n\n return this.wait(100);\n }\n\n async clear() {\n while (this.length()) {\n await this.backspace();\n }\n }\n\n async type(text) {\n while (text.length) {\n await this.append(text[0]);\n\n text = text.substring(1);\n }\n }\n\n async wait(milliseconds) {\n this.cursor = true;\n const interval = setInterval(() => {\n this.cursor = !this.cursor;\n if (this.cursor) {\n this.element.innerHTML = this.prepareText(true);\n } else {\n this.element.innerHTML = this.prepareText(false);\n }\n }, 530);\n return new Promise((resolve) => {\n setTimeout(() => {\n clearInterval(interval);\n resolve();\n }, milliseconds);\n });\n }\n}\n\nexport default function (Alpine) {\n Alpine.directive(\n 'typewriter',\n (el, { expression, modifiers }, { evaluate }) => {\n const texts = evaluate(expression);\n\n const timeModifiers = modifiers.filter((modifier) =>\n modifier.match(/^\\d+m?s$/),\n );\n const latestTimeModifier = timeModifiers.pop();\n let milliseconds = null;\n if (latestTimeModifier) {\n if (latestTimeModifier.endsWith('ms')) {\n milliseconds = parseInt(\n latestTimeModifier.match(/^(\\d+)/)[1],\n );\n } else {\n milliseconds =\n parseInt(latestTimeModifier.match(/^(\\d+)s/)[1]) * 1000;\n }\n }\n\n const showCursor = modifiers.includes('cursor');\n\n new Typewriter(el, texts, milliseconds, showCursor).start().then();\n },\n );\n}\n","import Typewriter from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n Typewriter(window.Alpine);\n});\n"],"names":["Typewriter","constructor","element","texts","waitTime","showCursor","this","current","currentText","cursor","async","innerHTML","prepareText","increment","window","matchMedia","matches","swap","getCursor","getPlaceholder","wait","clear","type","nextText","length","text","append","backspace","slice","substring","milliseconds","interval","setInterval","Promise","resolve","setTimeout","clearInterval","document","addEventListener","Alpine","directive","el","expression","modifiers","evaluate","latestTimeModifier","filter","modifier","match","pop","endsWith","parseInt","includes","start","then"],"mappings":"2FAAA,MAAMA,EACFC,YAAYC,EAASC,EAAOC,EAAUC,GAClCC,KAAKJ,QAAUA,EACfI,KAAKH,MAAQA,GAAS,GACtBG,KAAKC,QAAU,EACfD,KAAKE,YAAc,GACnBF,KAAKF,SAAWA,GAAY,IAC5BE,KAAKD,WAAaA,IAAc,EAChCC,KAAKG,QAAS,CACjB,CAEUC,cAIP,GAHAJ,KAAKE,YAAcF,KAAKH,MAAM,IAAM,GACpCG,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAC1CN,KAAKO,aACAC,OAAOC,WAAW,oCAAoCC,QACvD,aACUV,KAAKW,MAGtB,CAEDL,YAAYH,GACR,MAAQ,GAAEH,KAAKE,cACXC,EAASH,KAAKY,YAAc,KAC7BZ,KAAKa,kBACX,CAEDD,YACI,OAAOZ,KAAKD,WACN,kJACA,EACT,CAEDc,iBACI,MAAO,0EACV,CAEST,mBACAJ,KAAKc,KAAKd,KAAKF,gBACfE,KAAKe,cACLf,KAAKgB,KAAKhB,KAAKiB,WACxB,CAEDV,YACIP,KAAKC,UACDD,KAAKC,QAAUD,KAAKH,MAAMqB,SAC1BlB,KAAKC,QAAU,EAEtB,CAEDgB,WACI,IAAIE,EAAOnB,KAAKH,MAAMG,KAAKC,QAAU,GAErC,OADAD,KAAKO,YACEY,CACV,CAEDA,OACI,OAAOnB,KAAKE,WACf,CAEDgB,SACI,OAAOlB,KAAKmB,OAAOD,MACtB,CAEDE,OAAOD,GAIH,OAHAnB,KAAKE,aAAeiB,EACpBnB,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAEnCN,KAAKc,KAAK,IACpB,CAEDO,YAII,OAHArB,KAAKE,YAAcF,KAAKmB,OAAOG,MAAM,GAAI,GACzCtB,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAEnCN,KAAKc,KAAK,IACpB,CAEUV,cACP,KAAOJ,KAAKkB,gBACFlB,KAAKqB,WAElB,CAESjB,WAACe,GACP,KAAOA,EAAKD,cACFlB,KAAKoB,OAAOD,EAAK,IAEvBA,EAAOA,EAAKI,UAAU,EAE7B,CAESnB,WAACoB,GACPxB,KAAKG,QAAS,EACd,MAAMsB,EAAWC,aAAY,KACzB1B,KAAKG,QAAUH,KAAKG,OAChBH,KAAKG,OACLH,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,GAE1CN,KAAKJ,QAAQS,UAAYL,KAAKM,aAAY,EAC7C,GACF,KACH,OAAO,IAAIqB,SAASC,IAChBC,YAAW,KACPC,cAAcL,GACdG,GAAO,GACRJ,EAHH,GAKP,EC3GLO,SAASC,iBAAiB,eAAe,KAC1BxB,OAAOyB,OD8GXC,UACH,cACA,CAACC,GAAMC,aAAYC,cAAeC,eAC9B,MAAMzC,EAAQyC,EAASF,GAKjBG,EAHgBF,EAAUG,QAAQC,GACpCA,EAASC,MAAM,cAEsBC,MACzC,IAAInB,EAAe,KACfe,IAEIf,EADAe,EAAmBK,SAAS,MACbC,SACXN,EAAmBG,MAAM,UAAU,IAIgB,IAAnDG,SAASN,EAAmBG,MAAM,WAAW,KAIzD,MAAM3C,EAAasC,EAAUS,SAAS,UAEtC,IAAIpD,EAAWyC,EAAItC,EAAO2B,EAAczB,GAAYgD,QAAQC,MAA5D,GCrIR"} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0cf3c0f..5c56506 100644 --- a/src/index.js +++ b/src/index.js @@ -12,9 +12,11 @@ class Typewriter { async start() { this.currentText = this.texts[0] || ''; this.element.innerHTML = this.prepareText(true); - this.increment(); - while (true) { - await this.swap(); + if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + this.increment(); + while (true) { + await this.swap(); + } } }