npm - typed.js - Versions diffs - 1.1.7 → 2.0.1-3.1 - Mend

typed.js 1.1.7 → 2.0.1-3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/LICENSE.txt CHANGED Viewed

@@ -1,6 +1,6 @@
 The MIT License (MIT)
-Copyright (c) 2016 Matt Boldt
+Copyright (c) 2023 Matt Boldt
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md CHANGED Viewed

@@ -1,282 +1,337 @@
-<img src="/logo-cropped.png" width="450px" title="Typed.js" />
-========
+[![Build Status](https://travis-ci.org/mattboldt/typed.js.svg?branch=typed-2.0)](https://travis-ci.org/mattboldt/typed.js)
+[![Code Climate](https://codeclimate.com/github/mattboldt/typed.js/badges/gpa.svg)](https://codeclimate.com/github/mattboldt/typed.js)
+[![GitHub release](https://img.shields.io/github/release/mattboldt/typed.js.svg)]()
+[![npm](https://img.shields.io/npm/dt/typed.js.svg)](https://img.shields.io/npm/dt/typed.js.svg)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)
-[View the live demo](http://www.mattboldt.com/demos/typed-js/) | [Go to my site, mattboldt.com](http://www.mattboldt.com)
+<img src="https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png" width="450px" title="Typed.js" />
-Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
+### [Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://mattboldt.github.io/typed.js/) | [View Full Docs](http://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)
-Looking for some custom use cases for Typed.js? [Check out the wiki](https://github.com/mattboldt/typed.js/wiki)
+Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
 ---
-Installation
-------------
+## Installation
+For use with a build tool like [Vite](https://vitejs.dev/), install with NPM or Yarn.
+#### NPM
+```
+npm install typed.js
+```
+#### Yarn
+```
+yarn add typed.js
+```
+#### CDN
+For use directly in the browser via `<script>` tag:
+```html
+<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.13.1/dist/typed.umd.js"></script>
+```
+#### Setup
 This is really all you need to get going.
-~~~ javascript
-<script src="typed.js"></script>
-<script>
-	document.addEventListener("DOMContentLoaded", function(){
-		Typed.new(".element", {
-			strings: ["First sentence.", "Second sentence."],
-			typeSpeed: 0
-		});
-	});
-</script>
-...
+```javascript
+// Can also be included with a regular script tag
+import Typed from 'typed.js';
-<span class="element"></span>
-~~~
+var options = {
+  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
+  typeSpeed: 40,
+};
-Or you can use jQuery:
+var typed = new Typed('.element', options);
+```
-~~~ javascript
-<script src="jquery.js"></script>
-<script src="typed.js"></script>
-<script>
-	$(function(){
-		$(".element").typed({
-			strings: ["First sentence.", "Second sentence."],
-			typeSpeed: 0
-		});
-	});
-</script>
-...
+### Use with ReactJS
-<span class="element"></span>
-~~~
+Hook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/
-### Install with Bower
+Class component: https://jsfiddle.net/mattboldt/ovat9jmp/
-~~~
-bower install typed.js
-~~~
+### Use with Vue.js
-Want the animated blinking cursor? Add this CSS.
+Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js
-~~~ scss
-.typed-cursor{
-	opacity: 1;
-	-webkit-animation: blink 0.7s infinite;
-	-moz-animation: blink 0.7s infinite;
-	animation: blink 0.7s infinite;
-}
-@keyframes blink{
-	0% { opacity:1; }
-	50% { opacity:0; }
-	100% { opacity:1; }
-}
-@-webkit-keyframes blink{
-	0% { opacity:1; }
-	50% { opacity:0; }
-	100% { opacity:1; }
-}
-@-moz-keyframes blink{
-	0% { opacity:1; }
-	50% { opacity:0; }
-	100% { opacity:1; }
-}
-~~~
+### Use it as WebComponent
-CSS when using the `fadeOut` option
+Check out the WebComponent: https://github.com/Orlandster/wc-typed-js
-~~~ scss
-.typed-fade-out{
-    opacity: 0;
-    animation: 0;
-    transition: opacity .25s;
-}
-~~~
+## Wonderful sites that have used (or are using) Typed.js
+https://github.com/features/package-registry
-Wonderful sites using Typed.js
----
 https://slack.com/
 https://envato.com/
+https://gorails.com/
 https://productmap.co/
 https://www.typed.com/
-https://git.market/
-http://allison.house/404
+https://apeiron.io
-http://www.maxcdn.com/
+https://git.market/
 https://commando.io/
 http://testdouble.com/agency.html
-http://www.stephanemartinw.com/
-http://www.trelab.fi/en/
+https://www.capitalfactory.com/
-http://jessejohnson.github.io/
+http://www.maxcdn.com/
+https://www.powerauth.com/
 ---
-### HTML tags
-By default the content type is set to `html`, so you're good to go. Want to type out the html regularly? Set it to `text`.
-~~~ javascript
-Typed.new(".element", {
-	strings: ["Typed.js is an <strong>Awesome</strong> library."],
-	contentType: 'html' // or 'text'
-});
-~~~
 ### Strings from static HTML (SEO Friendly)
 Rather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.
 This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
-~~~ javascript
+```javascript
 <script>
-	document.addEventListener('DOMContentLoaded', function(){
-		Typed.new('#typed', {
-			stringsElement: document.getElementById('typed-strings')
-		});
-	});
+  var typed = new Typed('#typed', {
+    stringsElement: '#typed-strings'
+  });
 </script>
-~~~
-You must wrap each string in the `typed-strings` div with a `<p>`
-~~~ html
+```
+```html
 <div id="typed-strings">
-    <p>Typed.js is an <strong>Awesome</strong> library.</p>
-    <p>It <em>types</em> out sentences.</p>
+  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
+  <p>It <em>types</em> out sentences.</p>
 </div>
 <span id="typed"></span>
-~~~
-### Line Breaks
-#### `contentType: 'html'`
-~~~ javascript
-Typed.new(".typed", { strings: ["Sentence with <br>line break."] });
-~~~
-#### `contentType: 'text'`
-Use `white-space: pre` in your typed text element, and then `\n` when typing out the strings. Example:
-~~~ html
-<span id="typed" style="white-space:pre"></span>
-...
-Typed.new(".element", { strings: ["Sentence with a\nline break."] });
-~~~
+```
 ### Type Pausing
 You can pause in the middle of a string for a given amount of time by including an escape character.
-~~~ javascript
-Typed.new(".element", {
-	// Waits 1000ms after typing "First"
-	strings: ["First ^1000 sentence.", "Second sentence."]
-});
-~~~
-Customization
-----
-~~~ javascript
-Typed.new(".element", {
-	strings: ["First sentence.", "Second sentence."],
-	// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
-	stringsElement: null,
-	// typing speed
-	typeSpeed: 0,
-	// time before typing starts
-	startDelay: 0,
-	// backspacing speed
-	backSpeed: 0,
-	// shuffle the strings
-	shuffle: false,
-	// time before backspacing
-	backDelay: 500,
-	// Fade out instead of backspace (must use CSS class)
-	fadeOut: false,
-	fadeOutClass: 'typed-fade-out',
-	fadeOutDelay: 500, // milliseconds
-	// loop
-	loop: false,
-	// null = infinite
-	loopCount: null,
-	// show cursor
-	showCursor: true,
-	// character for cursor
-	cursorChar: "|",
-	// attribute to type (null == text)
-	attr: null,
-	// either html or text
-	contentType: 'html',
-	// call when done callback function
-	callback: function() {},
-	// starting callback function before each string
-	preStringTyped: function() {},
-	//callback for every typed string
-	onStringTyped: function() {},
-	// callback for reset
-	resetCallback: function() {}
+```javascript
+var typed = new Typed('.element', {
+  // Waits 1000ms after typing "First"
+  strings: ['First ^1000 sentence.', 'Second sentence.'],
 });
-~~~
+```
+### Smart Backspacing
-### Get Super Custom
+In the following example, this would only backspace the words after "This is a"
-Want to get really custom? On my site and in the Typed.js demo I have the code type out two words, and then backspace only those two, then continue where it left off. This is done in an `if` statement in the `backspace()` function. Here's what it looks like.
-~~~ javascript
-...
-, backspace: function(curString, curStrPos){
-	...
-	setTimeout(function() {
+```javascript
+var typed = new Typed('.element', {
+  strings: ['This is a JavaScript library', 'This is an ES6 module'],
+  smartBackspace: true, // Default value
+});
+```
-			// check string array position
-			// on the first string, only delete one word
-			// the stopNum actually represents the amount of chars to
-			// keep in the current string. In my case it's 3.
-			if (self.arrayPos == 1){
-				self.stopNum = 3;
-			}
-			//every other time, delete the whole typed string
-			else{
-				self.stopNum = 0;
-			}
-...
-~~~
+### Bulk Typing
-This checks if the `arrayPos` is `1`, which would be the second string you entered. If so, it sets `stopNum` to `3` instead of `0`, which tells it to stop when there are 3 characters left. For now you'll have to create custom `if` statements for each specific case you want. I may automate this somehow in the future.
+The following example would emulate how a terminal acts when typing a command and seeing its result.
+```javascript
+var typed = new Typed('.element', {
+  strings: ['git push --force ^1000\n `pushed to origin with option force`'],
+});
+```
-## Development
+### CSS
-`npm install`
+CSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:
-Then, once you've made your edits:
+```css
+/* Cursor */
+.typed-cursor {
+}
-`gulp`
+/* If fade out option is set */
+.typed-fade-out {
+}
+```
+## Customization
+```javascript
+var typed = new Typed('.element', {
+  /**
+   * @property {array} strings strings to be typed
+   * @property {string} stringsElement ID of element containing string children
+   */
+  strings: [
+    'These are the default values...',
+    'You know what you should do?',
+    'Use your own!',
+    'Have a great day!',
+  ],
+  stringsElement: null,
+  /**
+   * @property {number} typeSpeed type speed in milliseconds
+   */
+  typeSpeed: 0,
+  /**
+   * @property {number} startDelay time before typing starts in milliseconds
+   */
+  startDelay: 0,
+  /**
+   * @property {number} backSpeed backspacing speed in milliseconds
+   */
+  backSpeed: 0,
+  /**
+   * @property {boolean} smartBackspace only backspace what doesn't match the previous string
+   */
+  smartBackspace: true,
+  /**
+   * @property {boolean} shuffle shuffle the strings
+   */
+  shuffle: false,
+  /**
+   * @property {number} backDelay time before backspacing in milliseconds
+   */
+  backDelay: 700,
+  /**
+   * @property {boolean} fadeOut Fade out instead of backspace
+   * @property {string} fadeOutClass css class for fade animation
+   * @property {boolean} fadeOutDelay Fade out delay in milliseconds
+   */
+  fadeOut: false,
+  fadeOutClass: 'typed-fade-out',
+  fadeOutDelay: 500,
+  /**
+   * @property {boolean} loop loop strings
+   * @property {number} loopCount amount of loops
+   */
+  loop: false,
+  loopCount: Infinity,
+  /**
+   * @property {boolean} showCursor show cursor
+   * @property {string} cursorChar character for cursor
+   * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
+   */
+  showCursor: true,
+  cursorChar: '|',
+  autoInsertCss: true,
+  /**
+   * @property {string} attr attribute for typing
+   * Ex: input placeholder, value, or just HTML text
+   */
+  attr: null,
+  /**
+   * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
+   */
+  bindInputFocusEvents: false,
+  /**
+   * @property {string} contentType 'html' or 'null' for plaintext
+   */
+  contentType: 'html',
+  /**
+   * Before it begins typing
+   * @param {Typed} self
+   */
+  onBegin: (self) => {},
+  /**
+   * All typing is complete
+   * @param {Typed} self
+   */
+  onComplete: (self) => {},
+  /**
+   * Before each string is typed
+   * @param {number} arrayPos
+   * @param {Typed} self
+   */
+  preStringTyped: (arrayPos, self) => {},
+  /**
+   * After each string is typed
+   * @param {number} arrayPos
+   * @param {Typed} self
+   */
+  onStringTyped: (arrayPos, self) => {},
+  /**
+   * During looping, after last string is typed
+   * @param {Typed} self
+   */
+  onLastStringBackspaced: (self) => {},
+  /**
+   * Typing has been stopped
+   * @param {number} arrayPos
+   * @param {Typed} self
+   */
+  onTypingPaused: (arrayPos, self) => {},
+  /**
+   * Typing has been started after being stopped
+   * @param {number} arrayPos
+   * @param {Typed} self
+   */
+  onTypingResumed: (arrayPos, self) => {},
+  /**
+   * After reset
+   * @param {Typed} self
+   */
+  onReset: (self) => {},
+  /**
+   * After stop
+   * @param {number} arrayPos
+   * @param {Typed} self
+   */
+  onStop: (arrayPos, self) => {},
+  /**
+   * After start
+   * @param {number} arrayPos
+   * @param {Typed} self
+   */
+  onStart: (arrayPos, self) => {},
+  /**
+   * After destroy
+   * @param {Typed} self
+   */
+  onDestroy: (self) => {},
+});
+```
-This will create a minified version in `/dist`
+## Contributing
-or simply use `gulp watch` for automatic change detection
+### [View Contribution Guidelines](./.github/CONTRIBUTING.md)
-end
----
+## end
-Thanks for checking this out. If you have any questions, I'll be on [Twitter](http://www.twitter.com/atmattb).
+Thanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).
 If you're using this, let me know! I'd love to see it.
 It would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http://www.mattboldt.com)

package/dist/typed.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function t(){return t=Object.assign?Object.assign.bind():function(t){for(var s=1;s<arguments.length;s++){var e=arguments[s];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},t.apply(this,arguments)}var s={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,smartBackspace:!0,shuffle:!1,backDelay:700,fadeOut:!1,fadeOutClass:"typed-fade-out",fadeOutDelay:500,loop:!1,loopCount:Infinity,showCursor:!0,cursorChar:"\|",autoInsertCss:!0,attr:null,bindInputFocusEvents:!1,contentType:"html",onBegin:function(t){},onComplete:function(t){},preStringTyped:function(t,s){},onStringTyped:function(t,s){},onLastStringBackspaced:function(t){},onTypingPaused:function(t,s){},onTypingResumed:function(t,s){},onReset:function(t){},onStop:function(t,s){},onStart:function(t,s){},onDestroy:function(t){}},e=new(/#__PURE__/function(){function e(){}var n=e.prototype;return n.load=function(e,n,i){if(e.el="string"==typeof i?document.querySelector(i):i,e.options=t({},s,n),e.isInput="input"===e.el.tagName.toLowerCase(),e.attr=e.options.attr,e.bindInputFocusEvents=e.options.bindInputFocusEvents,e.showCursor=!e.isInput&&e.options.showCursor,e.cursorChar=e.options.cursorChar,e.cursorBlinking=!0,e.elContent=e.attr?e.el.getAttribute(e.attr):e.el.textContent,e.contentType=e.options.contentType,e.typeSpeed=e.options.typeSpeed,e.startDelay=e.options.startDelay,e.backSpeed=e.options.backSpeed,e.smartBackspace=e.options.smartBackspace,e.backDelay=e.options.backDelay,e.fadeOut=e.options.fadeOut,e.fadeOutClass=e.options.fadeOutClass,e.fadeOutDelay=e.options.fadeOutDelay,e.isPaused=!1,e.strings=e.options.strings.map(function(t){return t.trim()}),e.stringsElement="string"==typeof e.options.stringsElement?document.querySelector(e.options.stringsElement):e.options.stringsElement,e.stringsElement){e.strings=[],e.stringsElement.style.cssText="clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;";var r=Array.prototype.slice.apply(e.stringsElement.children),o=r.length;if(o)for(var a=0;a<o;a+=1)e.strings.push(r[a].innerHTML.trim())}for(var u in e.strPos=0,e.arrayPos=0,e.stopNum=0,e.loop=e.options.loop,e.loopCount=e.options.loopCount,e.curLoop=0,e.shuffle=e.options.shuffle,e.sequence=[],e.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},e.typingComplete=!1,e.strings)e.sequence[u]=u;e.currentElContent=this.getCurrentElContent(e),e.autoInsertCss=e.options.autoInsertCss,this.appendAnimationCss(e)},n.getCurrentElContent=function(t){return t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:"html"===t.contentType?t.el.innerHTML:t.el.textContent},n.appendAnimationCss=function(t){var s="data-typed-js-css";if(t.autoInsertCss&&(t.showCursor\|\|t.fadeOut)&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.type="text/css",e.setAttribute(s,!0);var n="";t.showCursor&&(n+="\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n "),t.fadeOut&&(n+="\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n "),0!==e.length&&(e.innerHTML=n,document.body.appendChild(e))}},e}()),n=new(/#__PURE__/function(){function t(){}var s=t.prototype;return s.typeHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substr(s).charAt(0);if("<"===n\|\|"&"===n){var i;for(i="<"===n?">":";";t.substr(s+1).charAt(0)!==i&&!(1+ ++s>t.length););s++}return s},s.backSpaceHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substr(s).charAt(0);if(">"===n\|\|";"===n){var i;for(i=">"===n?"<":"&";t.substr(s-1).charAt(0)!==i&&!(--s<0););s--}return s},t}());module.exports=/#__PURE__/function(){function t(t,s){e.load(this,s,t),this.begin()}var s=t.prototype;return s.toggle=function(){this.pause.status?this.start():this.stop()},s.stop=function(){this.typingComplete\|\|this.pause.status\|\|(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))},s.start=function(){this.typingComplete\|\|this.pause.status&&(this.pause.status=!1,this.pause.typewrite?this.typewrite(this.pause.curString,this.pause.curStrPos):this.backspace(this.pause.curString,this.pause.curStrPos),this.options.onStart(this.arrayPos,this))},s.destroy=function(){this.reset(!1),this.options.onDestroy(this)},s.reset=function(t){void 0===t&&(t=!0),clearInterval(this.timeout),this.replaceText(""),this.cursor&&this.cursor.parentNode&&(this.cursor.parentNode.removeChild(this.cursor),this.cursor=null),this.strPos=0,this.arrayPos=0,this.curLoop=0,t&&(this.insertCursor(),this.options.onReset(this),this.begin())},s.begin=function(){var t=this;this.options.onBegin(this),this.typingComplete=!1,this.shuffleStringsIfNeeded(this),this.insertCursor(),this.bindInputFocusEvents&&this.bindFocusEvents(),this.timeout=setTimeout(function(){t.currentElContent&&0!==t.currentElContent.length?t.backspace(t.currentElContent,t.currentElContent.length):t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)},s.typewrite=function(t,s){var e=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var i=this.humanizer(this.typeSpeed),r=1;!0!==this.pause.status?this.timeout=setTimeout(function(){s=n.typeHtmlChars(t,s,e);var i=0,o=t.substr(s);if("^"===o.charAt(0)&&/^\^\d+/.test(o)){var a=1;a+=(o=/\d+/.exec(o)[0]).length,i=parseInt(o),e.temporaryPause=!0,e.options.onTypingPaused(e.arrayPos,e),t=t.substring(0,s)+t.substring(s+a),e.toggleBlinking(!0)}if("`"===o.charAt(0)){for(;"`"!==t.substr(s+r).charAt(0)&&(r++,!(s+r>t.length)););var u=t.substring(0,s),p=t.substring(u.length+1,s+r),c=t.substring(s+r+1);t=u+p+c,r--}e.timeout=setTimeout(function(){e.toggleBlinking(!1),s>=t.length?e.doneTyping(t,s):e.keepTyping(t,s,r),e.temporaryPause&&(e.temporaryPause=!1,e.options.onTypingResumed(e.arrayPos,e))},i)},i):this.setPauseStatus(t,s,!0)},s.keepTyping=function(t,s,e){0===s&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this));var n=t.substr(0,s+=e);this.replaceText(n),this.typewrite(t,s)},s.doneTyping=function(t,s){var e=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),!1===this.loop\|\|this.curLoop===this.loopCount)\|\|(this.timeout=setTimeout(function(){e.backspace(t,s)},this.backDelay))},s.backspace=function(t,s){var e=this;if(!0!==this.pause.status){if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var i=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){s=n.backSpaceHtmlChars(t,s,e);var i=t.substr(0,s);if(e.replaceText(i),e.smartBackspace){var r=e.strings[e.arrayPos+1];e.stopNum=r&&i===r.substr(0,s)?s:0}s>e.stopNum?(s--,e.backspace(t,s)):s<=e.stopNum&&(e.arrayPos++,e.arrayPos===e.strings.length?(e.arrayPos=0,e.options.onLastStringBackspaced(),e.shuffleStringsIfNeeded(),e.begin()):e.typewrite(e.strings[e.sequence[e.arrayPos]],s))},i)}else this.setPauseStatus(t,s,!1)},s.complete=function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0},s.setPauseStatus=function(t,s,e){this.pause.typewrite=e,this.pause.curString=t,this.pause.curStrPos=s},s.toggleBlinking=function(t){this.cursor&&(this.pause.status\|\|this.cursorBlinking!==t&&(this.cursorBlinking=t,t?this.cursor.classList.add("typed-cursor--blink"):this.cursor.classList.remove("typed-cursor--blink")))},s.humanizer=function(t){return Math.round(Math.random()*t/2)+t},s.shuffleStringsIfNeeded=function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))},s.initFadeOut=function(){var t=this;return this.el.className+=" "+this.fadeOutClass,this.cursor&&(this.cursor.className+=" "+this.fadeOutClass),setTimeout(function(){t.arrayPos++,t.replaceText(""),t.strings.length>t.arrayPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],0):(t.typewrite(t.strings[0],0),t.arrayPos=0)},this.fadeOutDelay)},s.replaceText=function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:"html"===this.contentType?this.el.innerHTML=t:this.el.textContent=t},s.bindFocusEvents=function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(s){t.stop()}),this.el.addEventListener("blur",function(s){t.el.value&&0!==t.el.value.length\|\|t.start()}))},s.insertCursor=function(){this.showCursor&&(this.cursor\|\|(this.cursor=document.createElement("span"),this.cursor.className="typed-cursor",this.cursor.setAttribute("aria-hidden",!0),this.cursor.innerHTML=this.cursorChar,this.el.parentNode&&this.el.parentNode.insertBefore(this.cursor,this.el.nextSibling)))},t}();
2	+ //# sourceMappingURL=typed.cjs.map

package/dist/typed.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"typed.cjs","sources":["../src/defaults.js","../src/initializer.js","../src/html-parser.js","../src/typed.js"],"sourcesContent":["/**\n * Defaults & options\n * @returns {object} Typed defaults & options\n * @public\n */\n\nconst defaults = {\n /**\n * @property {array} strings strings to be typed\n * @property {string} stringsElement ID of element containing string children\n */\n strings: [\n 'These are the default values...',\n 'You know what you should do?',\n 'Use your own!',\n 'Have a great day!',\n ],\n stringsElement: null,\n\n /**\n * @property {number} typeSpeed type speed in milliseconds\n */\n typeSpeed: 0,\n\n /**\n * @property {number} startDelay time before typing starts in milliseconds\n */\n startDelay: 0,\n\n /**\n * @property {number} backSpeed backspacing speed in milliseconds\n */\n backSpeed: 0,\n\n /**\n * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n */\n smartBackspace: true,\n\n /**\n * @property {boolean} shuffle shuffle the strings\n */\n shuffle: false,\n\n /**\n * @property {number} backDelay time before backspacing in milliseconds\n */\n backDelay: 700,\n\n /**\n * @property {boolean} fadeOut Fade out instead of backspace\n * @property {string} fadeOutClass css class for fade animation\n * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n */\n fadeOut: false,\n fadeOutClass: 'typed-fade-out',\n fadeOutDelay: 500,\n\n /**\n * @property {boolean} loop loop strings\n * @property {number} loopCount amount of loops\n */\n loop: false,\n loopCount: Infinity,\n\n /**\n * @property {boolean} showCursor show cursor\n * @property {string} cursorChar character for cursor\n * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>\n */\n showCursor: true,\n cursorChar: '|',\n autoInsertCss: true,\n\n /**\n * @property {string} attr attribute for typing\n * Ex: input placeholder, value, or just HTML text\n */\n attr: null,\n\n /**\n * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n */\n bindInputFocusEvents: false,\n\n /**\n * @property {string} contentType 'html' or 'null' for plaintext\n */\n contentType: 'html',\n\n /**\n * Before it begins typing\n * @param {Typed} self\n */\n onBegin: (self) => {},\n\n /**\n * All typing is complete\n * @param {Typed} self\n */\n onComplete: (self) => {},\n\n /**\n * Before each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n preStringTyped: (arrayPos, self) => {},\n\n /**\n * After each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStringTyped: (arrayPos, self) => {},\n\n /**\n * During looping, after last string is typed\n * @param {Typed} self\n */\n onLastStringBackspaced: (self) => {},\n\n /**\n * Typing has been stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingPaused: (arrayPos, self) => {},\n\n /**\n * Typing has been started after being stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingResumed: (arrayPos, self) => {},\n\n /**\n * After reset\n * @param {Typed} self\n */\n onReset: (self) => {},\n\n /**\n * After stop\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStop: (arrayPos, self) => {},\n\n /**\n * After start\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStart: (arrayPos, self) => {},\n\n /**\n * After destroy\n * @param {Typed} self\n */\n onDestroy: (self) => {},\n};\n\nexport default defaults;\n","import defaults from './defaults.js';\n/**\n * Initialize the Typed object\n */\n\nexport default class Initializer {\n /**\n * Load up defaults & options on the Typed instance\n * @param {Typed} self instance of Typed\n * @param {object} options options object\n * @param {string} elementId HTML element ID _OR_ instance of HTML element\n * @private\n */\n\n load(self, options, elementId) {\n // chosen element to manipulate text\n if (typeof elementId === 'string') {\n self.el = document.querySelector(elementId);\n } else {\n self.el = elementId;\n }\n\n self.options = { ...defaults, ...options };\n\n // attribute to type into\n self.isInput = self.el.tagName.toLowerCase() === 'input';\n self.attr = self.options.attr;\n self.bindInputFocusEvents = self.options.bindInputFocusEvents;\n\n // show cursor\n self.showCursor = self.isInput ? false : self.options.showCursor;\n\n // custom cursor\n self.cursorChar = self.options.cursorChar;\n\n // Is the cursor blinking\n self.cursorBlinking = true;\n\n // text content of element\n self.elContent = self.attr\n ? self.el.getAttribute(self.attr)\n : self.el.textContent;\n\n // html or plain text\n self.contentType = self.options.contentType;\n\n // typing speed\n self.typeSpeed = self.options.typeSpeed;\n\n // add a delay before typing starts\n self.startDelay = self.options.startDelay;\n\n // backspacing speed\n self.backSpeed = self.options.backSpeed;\n\n // only backspace what doesn't match the previous string\n self.smartBackspace = self.options.smartBackspace;\n\n // amount of time to wait before backspacing\n self.backDelay = self.options.backDelay;\n\n // Fade out instead of backspace\n self.fadeOut = self.options.fadeOut;\n self.fadeOutClass = self.options.fadeOutClass;\n self.fadeOutDelay = self.options.fadeOutDelay;\n\n // variable to check whether typing is currently paused\n self.isPaused = false;\n\n // input strings of text\n self.strings = self.options.strings.map((s) => s.trim());\n\n // div containing strings\n if (typeof self.options.stringsElement === 'string') {\n self.stringsElement = document.querySelector(self.options.stringsElement);\n } else {\n self.stringsElement = self.options.stringsElement;\n }\n\n if (self.stringsElement) {\n self.strings = [];\n self.stringsElement.style.cssText =\n 'clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;';\n\n const strings = Array.prototype.slice.apply(self.stringsElement.children);\n const stringsLength = strings.length;\n\n if (stringsLength) {\n for (let i = 0; i < stringsLength; i += 1) {\n const stringEl = strings[i];\n self.strings.push(stringEl.innerHTML.trim());\n }\n }\n }\n\n // character number position of current string\n self.strPos = 0;\n\n // current array position\n self.arrayPos = 0;\n\n // index of string to stop backspacing on\n self.stopNum = 0;\n\n // Looping logic\n self.loop = self.options.loop;\n self.loopCount = self.options.loopCount;\n self.curLoop = 0;\n\n // shuffle the strings\n self.shuffle = self.options.shuffle;\n // the order of strings\n self.sequence = [];\n\n self.pause = {\n status: false,\n typewrite: true,\n curString: '',\n curStrPos: 0,\n };\n\n // When the typing is complete (when not looped)\n self.typingComplete = false;\n\n // Set the order in which the strings are typed\n for (let i in self.strings) {\n self.sequence[i] = i;\n }\n\n // If there is some text in the element\n self.currentElContent = this.getCurrentElContent(self);\n\n self.autoInsertCss = self.options.autoInsertCss;\n\n this.appendAnimationCss(self);\n }\n\n getCurrentElContent(self) {\n let elContent = '';\n if (self.attr) {\n elContent = self.el.getAttribute(self.attr);\n } else if (self.isInput) {\n elContent = self.el.value;\n } else if (self.contentType === 'html') {\n elContent = self.el.innerHTML;\n } else {\n elContent = self.el.textContent;\n }\n return elContent;\n }\n\n appendAnimationCss(self) {\n const cssDataName = 'data-typed-js-css';\n if (!self.autoInsertCss) {\n return;\n }\n if (!self.showCursor && !self.fadeOut) {\n return;\n }\n if (document.querySelector(`[${cssDataName}]`)) {\n return;\n }\n\n let css = document.createElement('style');\n css.type = 'text/css';\n css.setAttribute(cssDataName, true);\n\n let innerCss = '';\n if (self.showCursor) {\n innerCss += `\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n `;\n }\n\n if (self.fadeOut) {\n innerCss += `\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n `;\n }\n if (css.length === 0) {\n return;\n }\n css.innerHTML = innerCss;\n document.body.appendChild(css);\n }\n}\n\nexport let initializer = new Initializer();\n","/**\n * TODO: These methods can probably be combined somehow\n * Parse HTML tags & HTML Characters\n */\n\nexport default class HTMLParser {\n /**\n * Type HTML tags & HTML Characters\n * @param {string} curString Current string\n * @param {number} curStrPos Position in current string\n * @param {Typed} self instance of Typed\n * @returns {number} a new string position\n * @private\n */\n\n typeHtmlChars(curString, curStrPos, self) {\n if (self.contentType !== 'html') return curStrPos;\n const curChar = curString.substr(curStrPos).charAt(0);\n if (curChar === '<' || curChar === '&') {\n let endTag = '';\n if (curChar === '<') {\n endTag = '>';\n } else {\n endTag = ';';\n }\n while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {\n curStrPos++;\n if (curStrPos + 1 > curString.length) {\n break;\n }\n }\n curStrPos++;\n }\n return curStrPos;\n }\n\n /**\n * Backspace HTML tags and HTML Characters\n * @param {string} curString Current string\n * @param {number} curStrPos Position in current string\n * @param {Typed} self instance of Typed\n * @returns {number} a new string position\n * @private\n */\n backSpaceHtmlChars(curString, curStrPos, self) {\n if (self.contentType !== 'html') return curStrPos;\n const curChar = curString.substr(curStrPos).charAt(0);\n if (curChar === '>' || curChar === ';') {\n let endTag = '';\n if (curChar === '>') {\n endTag = '<';\n } else {\n endTag = '&';\n }\n while (curString.substr(curStrPos - 1).charAt(0) !== endTag) {\n curStrPos--;\n if (curStrPos < 0) {\n break;\n }\n }\n curStrPos--;\n }\n return curStrPos;\n }\n}\n\nexport let htmlParser = new HTMLParser();\n","import { initializer } from './initializer.js';\nimport { htmlParser } from './html-parser.js';\n\n/**\n * Welcome to Typed.js!\n * @param {string} elementId HTML element ID _OR_ HTML element\n * @param {object} options options object\n * @returns {object} a new Typed object\n */\nexport default class Typed {\n constructor(elementId, options) {\n // Initialize it up\n initializer.load(this, options, elementId);\n // All systems go!\n this.begin();\n }\n\n /**\n * Toggle start() and stop() of the Typed instance\n * @public\n */\n toggle() {\n this.pause.status ? this.start() : this.stop();\n }\n\n /**\n * Stop typing / backspacing and enable cursor blinking\n * @public\n */\n stop() {\n if (this.typingComplete) return;\n if (this.pause.status) return;\n this.toggleBlinking(true);\n this.pause.status = true;\n this.options.onStop(this.arrayPos, this);\n }\n\n /**\n * Start typing / backspacing after being stopped\n * @public\n */\n start() {\n if (this.typingComplete) return;\n if (!this.pause.status) return;\n this.pause.status = false;\n if (this.pause.typewrite) {\n this.typewrite(this.pause.curString, this.pause.curStrPos);\n } else {\n this.backspace(this.pause.curString, this.pause.curStrPos);\n }\n this.options.onStart(this.arrayPos, this);\n }\n\n /**\n * Destroy this instance of Typed\n * @public\n */\n destroy() {\n this.reset(false);\n this.options.onDestroy(this);\n }\n\n /**\n * Reset Typed and optionally restarts\n * @param {boolean} restart\n * @public\n */\n reset(restart = true) {\n clearInterval(this.timeout);\n this.replaceText('');\n if (this.cursor && this.cursor.parentNode) {\n this.cursor.parentNode.removeChild(this.cursor);\n this.cursor = null;\n }\n this.strPos = 0;\n this.arrayPos = 0;\n this.curLoop = 0;\n if (restart) {\n this.insertCursor();\n this.options.onReset(this);\n this.begin();\n }\n }\n\n /**\n * Begins the typing animation\n * @private\n */\n begin() {\n this.options.onBegin(this);\n this.typingComplete = false;\n this.shuffleStringsIfNeeded(this);\n this.insertCursor();\n if (this.bindInputFocusEvents) this.bindFocusEvents();\n this.timeout = setTimeout(() => {\n // Check if there is some text in the element, if yes start by backspacing the default message\n if (!this.currentElContent || this.currentElContent.length === 0) {\n this.typewrite(this.strings[this.sequence[this.arrayPos]], this.strPos);\n } else {\n // Start typing\n this.backspace(this.currentElContent, this.currentElContent.length);\n }\n }, this.startDelay);\n }\n\n /**\n * Called for each character typed\n * @param {string} curString the current string in the strings array\n * @param {number} curStrPos the current position in the curString\n * @private\n */\n typewrite(curString, curStrPos) {\n if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {\n this.el.classList.remove(this.fadeOutClass);\n if (this.cursor) this.cursor.classList.remove(this.fadeOutClass);\n }\n\n const humanize = this.humanizer(this.typeSpeed);\n let numChars = 1;\n\n if (this.pause.status === true) {\n this.setPauseStatus(curString, curStrPos, true);\n return;\n }\n\n // contain typing function in a timeout humanize'd delay\n this.timeout = setTimeout(() => {\n // skip over any HTML chars\n curStrPos = htmlParser.typeHtmlChars(curString, curStrPos, this);\n\n let pauseTime = 0;\n let substr = curString.substr(curStrPos);\n // check for an escape character before a pause value\n // format: \\^\\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^\n // single ^ are removed from string\n if (substr.charAt(0) === '^') {\n if (/^\\^\\d+/.test(substr)) {\n let skip = 1; // skip at least 1\n substr = /\\d+/.exec(substr)[0];\n skip += substr.length;\n pauseTime = parseInt(substr);\n this.temporaryPause = true;\n this.options.onTypingPaused(this.arrayPos, this);\n // strip out the escape character and pause value so they're not printed\n curString =\n curString.substring(0, curStrPos) +\n curString.substring(curStrPos + skip);\n this.toggleBlinking(true);\n }\n }\n\n // check for skip characters formatted as\n // \"this is a `string to print NOW` ...\"\n if (substr.charAt(0) === '`') {\n while (curString.substr(curStrPos + numChars).charAt(0) !== '`') {\n numChars++;\n if (curStrPos + numChars > curString.length) break;\n }\n // strip out the escape characters and append all the string in between\n const stringBeforeSkip = curString.substring(0, curStrPos);\n const stringSkipped = curString.substring(\n stringBeforeSkip.length + 1,\n curStrPos + numChars\n );\n const stringAfterSkip = curString.substring(curStrPos + numChars + 1);\n curString = stringBeforeSkip + stringSkipped + stringAfterSkip;\n numChars--;\n }\n\n // timeout for any pause after a character\n this.timeout = setTimeout(() => {\n // Accounts for blinking while paused\n this.toggleBlinking(false);\n\n // We're done with this sentence!\n if (curStrPos >= curString.length) {\n this.doneTyping(curString, curStrPos);\n } else {\n this.keepTyping(curString, curStrPos, numChars);\n }\n // end of character pause\n if (this.temporaryPause) {\n this.temporaryPause = false;\n this.options.onTypingResumed(this.arrayPos, this);\n }\n }, pauseTime);\n\n // humanized value for typing\n }, humanize);\n }\n\n /**\n * Continue to the next string & begin typing\n * @param {string} curString the current string in the strings array\n * @param {number} curStrPos the current position in the curString\n * @private\n */\n keepTyping(curString, curStrPos, numChars) {\n // call before functions if applicable\n if (curStrPos === 0) {\n this.toggleBlinking(false);\n this.options.preStringTyped(this.arrayPos, this);\n }\n // start typing each new char into existing string\n // curString: arg, this.el.html: original text inside element\n curStrPos += numChars;\n const nextString = curString.substr(0, curStrPos);\n this.replaceText(nextString);\n // loop the function\n this.typewrite(curString, curStrPos);\n }\n\n /**\n * We're done typing the current string\n * @param {string} curString the current string in the strings array\n * @param {number} curStrPos the current position in the curString\n * @private\n */\n doneTyping(curString, curStrPos) {\n // fires callback function\n this.options.onStringTyped(this.arrayPos, this);\n this.toggleBlinking(true);\n // is this the final string\n if (this.arrayPos === this.strings.length - 1) {\n // callback that occurs on the last typed string\n this.complete();\n // quit if we wont loop back\n if (this.loop === false || this.curLoop === this.loopCount) {\n return;\n }\n }\n this.timeout = setTimeout(() => {\n this.backspace(curString, curStrPos);\n }, this.backDelay);\n }\n\n /**\n * Backspaces 1 character at a time\n * @param {string} curString the current string in the strings array\n * @param {number} curStrPos the current position in the curString\n * @private\n */\n backspace(curString, curStrPos) {\n if (this.pause.status === true) {\n this.setPauseStatus(curString, curStrPos, false);\n return;\n }\n if (this.fadeOut) return this.initFadeOut();\n\n this.toggleBlinking(false);\n const humanize = this.humanizer(this.backSpeed);\n\n this.timeout = setTimeout(() => {\n curStrPos = htmlParser.backSpaceHtmlChars(curString, curStrPos, this);\n // replace text with base text + typed characters\n const curStringAtPosition = curString.substr(0, curStrPos);\n this.replaceText(curStringAtPosition);\n\n // if smartBack is enabled\n if (this.smartBackspace) {\n // the remaining part of the current string is equal of the same part of the new string\n let nextString = this.strings[this.arrayPos + 1];\n if (\n nextString &&\n curStringAtPosition === nextString.substr(0, curStrPos)\n ) {\n this.stopNum = curStrPos;\n } else {\n this.stopNum = 0;\n }\n }\n\n // if the number (id of character in current string) is\n // less than the stop number, keep going\n if (curStrPos > this.stopNum) {\n // subtract characters one by one\n curStrPos--;\n // loop the function\n this.backspace(curString, curStrPos);\n } else if (curStrPos <= this.stopNum) {\n // if the stop number has been reached, increase\n // array position to next string\n this.arrayPos++;\n // When looping, begin at the beginning after backspace complete\n if (this.arrayPos === this.strings.length) {\n this.arrayPos = 0;\n this.options.onLastStringBackspaced();\n this.shuffleStringsIfNeeded();\n this.begin();\n } else {\n this.typewrite(this.strings[this.sequence[this.arrayPos]], curStrPos);\n }\n }\n // humanized value for typing\n }, humanize);\n }\n\n /**\n * Full animation is complete\n * @private\n */\n complete() {\n this.options.onComplete(this);\n if (this.loop) {\n this.curLoop++;\n } else {\n this.typingComplete = true;\n }\n }\n\n /**\n * Has the typing been stopped\n * @param {string} curString the current string in the strings array\n * @param {number} curStrPos the current position in the curString\n * @param {boolean} isTyping\n * @private\n */\n setPauseStatus(curString, curStrPos, isTyping) {\n this.pause.typewrite = isTyping;\n this.pause.curString = curString;\n this.pause.curStrPos = curStrPos;\n }\n\n /**\n * Toggle the blinking cursor\n * @param {boolean} isBlinking\n * @private\n */\n toggleBlinking(isBlinking) {\n if (!this.cursor) return;\n // if in paused state, don't toggle blinking a 2nd time\n if (this.pause.status) return;\n if (this.cursorBlinking === isBlinking) return;\n this.cursorBlinking = isBlinking;\n if (isBlinking) {\n this.cursor.classList.add('typed-cursor--blink');\n } else {\n this.cursor.classList.remove('typed-cursor--blink');\n }\n }\n\n /**\n * Speed in MS to type\n * @param {number} speed\n * @private\n */\n humanizer(speed) {\n return Math.round((Math.random() * speed) / 2) + speed;\n }\n\n /**\n * Shuffle the sequence of the strings array\n * @private\n */\n shuffleStringsIfNeeded() {\n if (!this.shuffle) return;\n this.sequence = this.sequence.sort(() => Math.random() - 0.5);\n }\n\n /**\n * Adds a CSS class to fade out current string\n * @private\n */\n initFadeOut() {\n this.el.className += ` ${this.fadeOutClass}`;\n if (this.cursor) this.cursor.className += ` ${this.fadeOutClass}`;\n return setTimeout(() => {\n this.arrayPos++;\n this.replaceText('');\n\n // Resets current string if end of loop reached\n if (this.strings.length > this.arrayPos) {\n this.typewrite(this.strings[this.sequence[this.arrayPos]], 0);\n } else {\n this.typewrite(this.strings[0], 0);\n this.arrayPos = 0;\n }\n }, this.fadeOutDelay);\n }\n\n /**\n * Replaces current text in the HTML element\n * depending on element type\n * @param {string} str\n * @private\n */\n replaceText(str) {\n if (this.attr) {\n this.el.setAttribute(this.attr, str);\n } else {\n if (this.isInput) {\n this.el.value = str;\n } else if (this.contentType === 'html') {\n this.el.innerHTML = str;\n } else {\n this.el.textContent = str;\n }\n }\n }\n\n /**\n * If using input elements, bind focus in order to\n * start and stop the animation\n * @private\n */\n bindFocusEvents() {\n if (!this.isInput) return;\n this.el.addEventListener('focus', (e) => {\n this.stop();\n });\n this.el.addEventListener('blur', (e) => {\n if (this.el.value && this.el.value.length !== 0) {\n return;\n }\n this.start();\n });\n }\n\n /**\n * On init, insert the cursor element\n * @private\n */\n insertCursor() {\n if (!this.showCursor) return;\n if (this.cursor) return;\n this.cursor = document.createElement('span');\n this.cursor.className = 'typed-cursor';\n this.cursor.setAttribute('aria-hidden', true);\n this.cursor.innerHTML = this.cursorChar;\n this.el.parentNode &&\n this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling);\n }\n}\n"],"names":["defaults","strings","stringsElement","typeSpeed","startDelay","backSpeed","smartBackspace","shuffle","backDelay","fadeOut","fadeOutClass","fadeOutDelay","loop","loopCount","Infinity","showCursor","cursorChar","autoInsertCss","attr","bindInputFocusEvents","contentType","onBegin","self","onComplete","preStringTyped","arrayPos","onStringTyped","onLastStringBackspaced","onTypingPaused","onTypingResumed","onReset","onStop","onStart","onDestroy","initializer","Initializer","_proto","prototype","load","options","elementId","el","document","querySelector","_extends","isInput","tagName","toLowerCase","cursorBlinking","elContent","getAttribute","textContent","isPaused","map","s","trim","style","cssText","Array","slice","apply","children","stringsLength","length","i","push","innerHTML","strPos","stopNum","curLoop","sequence","pause","status","typewrite","curString","curStrPos","typingComplete","currentElContent","this","getCurrentElContent","appendAnimationCss","value","cssDataName","css","createElement","type","setAttribute","innerCss","body","appendChild","htmlParser","HTMLParser","typeHtmlChars","curChar","substr","charAt","endTag","backSpaceHtmlChars","Typed","begin","toggle","start","stop","toggleBlinking","backspace","destroy","reset","restart","clearInterval","timeout","replaceText","cursor","parentNode","removeChild","insertCursor","_this","shuffleStringsIfNeeded","bindFocusEvents","setTimeout","_this2","classList","contains","remove","humanize","humanizer","numChars","pauseTime","test","skip","exec","parseInt","temporaryPause","substring","stringBeforeSkip","stringSkipped","stringAfterSkip","doneTyping","keepTyping","setPauseStatus","nextString","_this3","complete","_this4","initFadeOut","curStringAtPosition","isTyping","isBlinking","add","speed","Math","round","random","sort","_this5","className","str","_this6","addEventListener","e","insertBefore","nextSibling"],"mappings":"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"}