typewriter-vue/dist/typewriter.min.js

Typing effect component for Vue.js

var Typewriter=function(e){"use strict";function n(e,n,t,r,i,s,a){try{var o=e[s](a),c=o.value}catch(e){return void t(e)}o.done?n(c):Promise.resolve(c).then(r,i)}function t(e){return function(){var t=this,r=arguments;return new Promise((function(i,s){var a=e.apply(t,r);function o(e){n(a,i,s,o,c,"next",e)}function c(e){n(a,i,s,o,c,"throw",e)}o(void 0)}))}}var r=function(e,n){if(!e)throw new Error(n||"Assertion failed")},i={name:"Typewriter",props:{startDelay:{type:Number,default:0},typeInterval:{type:Number,default:75},replace:{type:Array,default:function(){return[]}},replaceInterval:{type:Number,default:2e3}},mounted:function(){this.init()},methods:{init:function(){var e=this;return t(regeneratorRuntime.mark((function n(){var t,r,i;return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return t=e.$el,r=t.innerHTML,i=t.innerText,e.$el.innerHTML=r.trim()===i?"<span>".concat(r,"</span>"):r,n.next=4,e.typewriter(e.$el.innerHTML);case 4:e.replace.length&&setTimeout((function(){e.startReplacing()}),e.replaceInterval);case 5:case"end":return n.stop()}}),n)})))()},typewriter:function(e){var n=this;return new Promise((function(t){n.$el.innerHTML="";!function r(i){i="<"===e[i]?e.indexOf(">",i)+1:++i,n.$el.innerHTML=e.substr(0,i),i<e.length-1?setTimeout(r,n.typeInterval,i):t()}(0)}))},removeString:function(e,n){var t=this;return new Promise((function(r){var i=t.$el;!function n(s){i.innerHTML=i.innerHTML.slice(0,s),s--,e<=s?setTimeout(n,t.typeInterval,s):r()}(n-1)}))},addString:function(e,n){var t=this;return new Promise((function(r){var i=t.$el;!function e(s,a){i.innerHTML=t.insert(i.innerHTML,a,n[s]),s<n.length-1?setTimeout(e,t.typeInterval,++s,++a):r()}(0,e)}))},insert:function(e,n,t){return e.substring(0,n)+t+e.substr(n)},replaceLastWord:function(e){var n=this;return t(regeneratorRuntime.mark((function t(){var i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return i=n.$el.innerText.split(" ").pop(),r(i,"Component`s current innerHTML is empty"),t.next=4,n.replaceText({from:i,to:e});case 4:case"end":return t.stop()}}),t)})))()},replaceText:function(e){var n=this;return t(regeneratorRuntime.mark((function t(){var i,s,a,o,c,l;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r(e,"Changed parameter is needed"),i=e.from,s=e.to,a=n.$el.innerHTML,o=new RegExp("\\b"+i+"\\b"),c=a.match(o),r(c,"Substring '".concat(i,"' not found in component` current innerHTML")),l=c.index,t.next=9,n.removeString(l,l+i.length);case 9:return t.next=11,n.addString(l,s);case 11:case"end":return t.stop()}}),t)})))()},startReplacing:function(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.replace,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.replaceInterval;if(!n)throw new Error("Replace parameter is needed");if(!n)throw new Error("Replace parameter has 0 length");return new Promise((function(i){var s=function(){var a=t(regeneratorRuntime.mark((function t(a){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.replaceText(n[a]);case 2:if(!(a<n.length-1)){t.next=5;break}return setTimeout(s,r,++a),t.abrupt("return");case 5:i();case 6:case"end":return t.stop()}}),t)})));return function(e){return a.apply(this,arguments)}}();s(0)}))}}};function s(e,n,t,r,i,s,a,o,c,l){"boolean"!=typeof a&&(c=o,o=a,a=!1);const u="function"==typeof t?t.options:t;let p;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,i&&(u.functional=!0)),r&&(u._scopeId=r),s?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=p):n&&(p=a?function(e){n.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,o(e))}),p)if(u.functional){const e=u.render;u.render=function(n,t){return p.call(t),e(n,t)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,p):[p]}return t}const a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(e){return(e,n)=>function(e,n){const t=a?n.media||"default":e,r=l[t]||(l[t]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",n.media&&r.element.setAttribute("media",n.media),void 0===c&&(c=document.head||document.getElementsByTagName("head")[0]),c.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(t),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,n=document.createTextNode(t),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(n,i[e]):r.element.appendChild(n)}}}(e,n)}let c;const l={};const u=i;var p=function(){var e=this,n=e.$createElement;return(e._self._c||n)("div",{staticClass:"content"},[e._t("default")],2)};p._withStripped=!0;const d=s({render:p,staticRenderFns:[]},(function(e){e&&e("data-v-b6673ec6_0",{source:'\n@keyframes blink {\nfrom,\n  to {\n    opacity: 0;\n}\n50% {\n    opacity: 1;\n}\n}\n.content *:last-child::after {\n  font-size: calc(1em + 2px);\n  content: "|";\n  animation: blink 0.75s step-end infinite;\n}\n',map:{version:3,sources:["/home/runner/work/typewriter-vue/typewriter-vue/src/components/Typewriter.vue"],names:[],mappings:";AAkKA;AACA;;IAEA,UAAA;AACA;AACA;IACA,UAAA;AACA;AACA;AAEA;EACA,0BAAA;EACA,YAAA;EACA,wCAAA;AACA",file:"Typewriter.vue",sourcesContent:['<template>\n  <div class="content">\n    <slot></slot>\n  </div>\n</template>\n\n<script>\nconst assert = (condition, message) => {\n  if (!condition) {\n    throw new Error(message || "Assertion failed");\n  }\n};\n\nexport default {\n  name: "Typewriter",\n  props: {\n    /**\n     *  Time to wait before typing first character (ms).\n     */\n    startDelay: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Interval between entering letters (ms).\n     */\n    typeInterval: {\n      type: Number,\n      default: 75,\n    },\n    /**\n     * Array of objects with keys:\n     *  - from - @type {String}  to be replaced (has to be present in currently displayed text),\n     *  - to - @type {String} that will replace \'from\' text\n     */\n    replace: {\n      type: Array,\n      default: () => [],\n    },\n    /**\n     * Interval between replacing  in (ms).\n     */\n    replaceInterval: {\n      type: Number,\n      default: 2000,\n    },\n  },\n  mounted() {\n    this.init();\n  },\n  methods: {\n    async init() {\n      const { innerHTML, innerText } = this.$el;\n      this.$el.innerHTML =\n        innerHTML.trim() === innerText\n          ? `<span>${innerHTML}</span>`\n          : innerHTML;\n      await this.typewriter(this.$el.innerHTML);\n      if (this.replace.length) {\n        setTimeout(() => {\n          this.startReplacing();\n        }, this.replaceInterval);\n      }\n    },\n    typewriter(str) {\n      return new Promise((resolve) => {\n        this.$el.innerHTML = "";\n        const f = (index) => {\n          const current = str[index];\n          index = current === "<" ? str.indexOf(">", index) + 1 : ++index;\n          this.$el.innerHTML = str.substr(0, index);\n          if (index < str.length - 1) {\n            setTimeout(f, this.typeInterval, index);\n            return;\n          }\n          resolve();\n        };\n        f(0);\n      });\n    },\n    removeString(start, end) {\n      return new Promise((resolve) => {\n        const elementCopy = this.$el;\n        const f = (index) => {\n          elementCopy.innerHTML = elementCopy.innerHTML.slice(0, index);\n          index--;\n          if (start <= index) {\n            setTimeout(f, this.typeInterval, index);\n            return;\n          }\n          resolve();\n        };\n        f(end - 1);\n      });\n    },\n    addString(start, str) {\n      return new Promise((resolve) => {\n        const elementCopy = this.$el;\n        const f = (index, start) => {\n          elementCopy.innerHTML = this.insert(\n            elementCopy.innerHTML,\n            start,\n            str[index]\n          );\n          if (index < str.length - 1) {\n            setTimeout(f, this.typeInterval, ++index, ++start);\n            return;\n          }\n          resolve();\n        };\n        f(0, start);\n      });\n    },\n    insert(text, index, newChar) {\n      return text.substring(0, index) + newChar + text.substr(index);\n    },\n    async replaceLastWord(to) {\n      const lastWord = this.$el.innerText.split(" ").pop();\n      assert(lastWord, "Component`s current innerHTML is empty");\n      await this.replaceText({ from: lastWord, to });\n    },\n    async replaceText(changed) {\n      assert(changed, "Changed parameter is needed");\n      const { from, to } = changed;\n      const str = this.$el.innerHTML;\n      const regex = new RegExp("\\\\b" + from + "\\\\b");\n      const match = str.match(regex);\n      assert(\n        match,\n        `Substring \'${from}\' not found in component\\` current innerHTML`\n      );\n      const { index } = match;\n      await this.removeString(index, index + from.length);\n      await this.addString(index, to);\n    },\n    startReplacing(\n      replace = this.replace,\n      replaceInterval = this.replaceInterval\n    ) {\n      if (!replace) {\n        throw new Error("Replace parameter is needed");\n      }\n      if (!replace) {\n        throw new Error("Replace parameter has 0 length");\n      }\n      return new Promise((resolve) => {\n        const func = async (index) => {\n          await this.replaceText(replace[index]);\n          if (index < replace.length - 1) {\n            setTimeout(func, replaceInterval, ++index);\n            return;\n          }\n          resolve();\n        };\n        func(0);\n      });\n    },\n  },\n};\n<\/script>\n\n<style>\n@keyframes blink {\n  from,\n  to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n.content *:last-child::after {\n  font-size: calc(1em + 2px);\n  content: "|";\n  animation: blink 0.75s step-end infinite;\n}\n</style>\n']},media:void 0})}),u,undefined,false,undefined,!1,o,void 0,void 0);function f(e){f.installed||(f.installed=!0,e.component("Typewriter",d))}var m={install:f},h=null;return"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.Vue),h&&h.use(m),e.default=d,e.install=f,e}({});