1/*! 2 * 3 * typed.js - A JavaScript Typing Animation Library 4 * Author: Matt Boldt <[email protected]> 5 * Version: v2.0.9 6 * Url: https://github.com/mattboldt/typed.js 7 * License(s): MIT 8 * 9 */ 10(function webpackUniversalModuleDefinition(root, factory) { 11 if (typeof exports === 'object' && typeof module === 'object') 12 module.exports = factory(); 13 else if (typeof define === 'function' && define.amd) define([], factory); 14 else if (typeof exports === 'object') exports.Typed = factory(); 15 else root.Typed = factory(); 16})(this, function () { 17 return /******/ (function (modules) { 18 // webpackBootstrap 19 /******/ // The module cache 20 /******/ const installedModules = {}; // The require function 21 /******/ 22 /******/ /** 23 * @param moduleId 24 */ function __webpack_require__(moduleId) { 25 /******/ 26 /******/ // Check if module is in cache 27 /******/ if (installedModules[moduleId]) 28 /******/ return installedModules[moduleId].exports; // Create a new module (and put it into the cache) 29 /******/ 30 /******/ /******/ const module = (installedModules[moduleId] = { 31 /******/ exports: {}, 32 /******/ id: moduleId, 33 /******/ loaded: false, 34 /******/ 35 }); // Execute the module function 36 /******/ 37 /******/ /******/ modules[moduleId].call( 38 module.exports, 39 module, 40 module.exports, 41 __webpack_require__ 42 ); // Flag the module as loaded 43 /******/ 44 /******/ /******/ module.loaded = true; // Return the exports of the module 45 /******/ 46 /******/ /******/ return module.exports; 47 /******/ 48 } // expose the modules object (__webpack_modules__) 49 /******/ 50 /******/ 51 /******/ /******/ __webpack_require__.m = modules; // expose the module cache 52 /******/ 53 /******/ /******/ __webpack_require__.c = installedModules; // __webpack_public_path__ 54 /******/ 55 /******/ /******/ __webpack_require__.p = ''; // Load entry module and return exports 56 /******/ 57 /******/ /******/ return __webpack_require__(0); 58 /******/ 59 })( 60 /************************************************************************/ 61 /** 62 * @param module 63 * @param exports 64 * @param __webpack_require__ 65 */ [ 66 /* 0 */ 67 /***/ function (module, exports, __webpack_require__) { 68 'use strict'; 69 70 Object.defineProperty(exports, '__esModule', { 71 value: true, 72 }); 73 74 const _createClass = (function () { 75 function defineProperties(target, props) { 76 for (let i = 0; i < props.length; i++) { 77 const descriptor = props[i]; 78 descriptor.enumerable = 79 descriptor.enumerable || false; 80 descriptor.configurable = true; 81 if ('value' in descriptor) 82 descriptor.writable = true; 83 Object.defineProperty( 84 target, 85 descriptor.key, 86 descriptor 87 ); 88 } 89 } 90 return function (Constructor, protoProps, staticProps) { 91 if (protoProps) 92 defineProperties(Constructor.prototype, protoProps); 93 if (staticProps) 94 defineProperties(Constructor, staticProps); 95 return Constructor; 96 }; 97 })(); 98 99 function _classCallCheck(instance, Constructor) { 100 if (!(instance instanceof Constructor)) { 101 throw new TypeError( 102 'Cannot call a class as a function' 103 ); 104 } 105 } 106 107 const _initializerJs = __webpack_require__(1); 108 109 const _htmlParserJs = __webpack_require__(3); 110 111 /** 112 * Welcome to Typed.js! 113 * 114 * @param {string} elementId HTML element ID _OR_ HTML element 115 * @param {Object} options options object 116 * @return {Object} a new Typed object 117 */ 118 119 const Typed = (function () { 120 function Typed(elementId, options) { 121 _classCallCheck(this, Typed); 122 123 // Initialize it up 124 _initializerJs.initializer.load( 125 this, 126 options, 127 elementId 128 ); 129 // All systems go! 130 this.begin(); 131 } 132 133 /** 134 * Toggle start() and stop() of the Typed instance 135 * 136 * @public 137 */ 138 139 _createClass(Typed, [ 140 { 141 key: 'toggle', 142 value: function toggle() { 143 this.pause.status ? this.start() : this.stop(); 144 }, 145 146 /** 147 * Stop typing / backspacing and enable cursor blinking 148 * 149 * @public 150 */ 151 }, 152 { 153 key: 'stop', 154 value: function stop() { 155 clearInterval(this.timeout);
156 if (this.typingComplete) return; 157 if (this.pause.status) return; 158 this.toggleBlinking(true); 159 this.pause.status = true; 160 this.options.onStop(this.arrayPos, this); 161 }, 162 163 /** 164 * Start typing / backspacing after being stopped 165 * 166 * @public 167 */ 168 }, 169 { 170 key: 'start', 171 value: function start() { 172 if (this.typingComplete) return; 173 if (!this.pause.status) return; 174 this.pause.status = false; 175 if (this.pause.typewrite) { 176 this.typewrite( 177 this.pause.curString, 178 this.pause.curStrPos 179 ); 180 } else { 181 this.backspace( 182 this.pause.curString, 183 this.pause.curStrPos 184 ); 185 } 186 this.options.onStart(this.arrayPos, this); 187 }, 188 189 /** 190 * Destroy this instance of Typed 191 * 192 * @public 193 */ 194 }, 195 { 196 key: 'destroy', 197 value: function destroy() { 198 this.reset(false); 199 this.options.onDestroy(this); 200 }, 201 202 /** 203 * Reset Typed and optionally restarts 204 * 205 * @param {boolean} restart 206 * @public 207 */ 208 }, 209 { 210 key: 'reset', 211 value: function reset() { 212 const restart = 213 arguments.length <= 0 || 214 arguments[0] === undefined 215 ? true 216 : arguments[0]; 217 218 clearInterval(this.timeout); 219 this.replaceText(''); 220 if (this.cursor && this.cursor.parentNode) { 221 this.cursor.parentNode.removeChild( 222 this.cursor 223 ); 224 this.cursor = null; 225 } 226 this.strPos = 0; 227 this.arrayPos = 0; 228 this.curLoop = 0; 229 if (restart) { 230 this.insertCursor(); 231 this.options.onReset(this); 232 this.begin(); 233 } 234 }, 235 236 /** 237 * Begins the typing animation 238 * 239 * @private 240 */ 241 }, 242 { 243 key: 'begin', 244 value: function begin() { 245 const _this = this; 246 247 this.typingComplete = false; 248 this.shuffleStringsIfNeeded(this); 249 this.insertCursor(); 250 if (this.bindInputFocusEvents) 251 this.bindFocusEvents(); 252 this.timeout = setTimeout(function () { 253 // Check if there is some text in the element, if yes start by backspacing the default message 254 if ( 255 !_this.currentElContent || 256 _this.currentElContent.length === 0 257 ) { 258 _this.typewrite( 259 _this.strings[ 260 _this.sequence[_this.arrayPos] 261 ], 262 _this.strPos 263 ); 264 } else { 265 // Start typing 266 _this.backspace( 267 _this.currentElContent, 268 _this.currentElContent.length 269 ); 270 } 271 }, this.startDelay); 272 }, 273 274 /** 275 * Called for each character typed 276 * 277 * @param {string} curString the current string in the strings array 278 * @param {number} curStrPos the current position in the curString 279 * @private 280 */ 281 }, 282 { 283 key: 'typewrite', 284 value: function typewrite(curString, curStrPos) { 285 const _this2 = this; 286 287 if ( 288 this.fadeOut && 289 this.el.classList.contains( 290 this.fadeOutClass 291 ) 292 ) { 293 this.el.classList.remove(this.fadeOutClass); 294 if (this.cursor) 295 this.cursor.classList.remove( 296 this.fadeOutClass 297 ); 298 } 299 300 const humanize = this.humanizer(this.typeSpeed); 301 let numChars = 1; 302 303 if (this.pause.status === true) { 304 this.setPauseStatus( 305 curString, 306 curStrPos, 307 true 308 ); 309 return; 310 } 311 312 // contain typing function in a timeout humanize'd delay 313 this.timeout = setTimeout(function () { 314 // skip over any HTML chars 315 curStrPos = _htmlParserJs.htmlParser.typeHtmlChars( 316 curString, 317 curStrPos, 318 _this2 319 ); 320 321 let pauseTime = 0; 322 let substr = curString.substr(curStrPos); 323 // check for an escape character before a pause value 324 // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^ 325 // single ^ are removed from string 326 if (substr.charAt(0) === '^') { 327 if (/^\^\d+/.test(substr)) { 328 let skip = 1;
328 // skip at least 1 329 substr = /\d+/.exec(substr)[0]; 330 skip += substr.length; 331 pauseTime = parseInt(substr); 332 _this2.temporaryPause = true; 333 _this2.options.onTypingPaused( 334 _this2.arrayPos, 335 _this2 336 ); 337 // strip out the escape character and pause value so they're not printed 338 curString = 339 curString.substring( 340 0, 341 curStrPos 342 ) + 343 curString.substring( 344 curStrPos + skip 345 ); 346 _this2.toggleBlinking(true); 347 } 348 } 349 350 // check for skip characters formatted as 351 // "this is a `string to print NOW` ..." 352 if (substr.charAt(0) === '`') { 353 while ( 354 curString 355 .substr(curStrPos + numChars) 356 .charAt(0) !== '`' 357 ) { 358 numChars++; 359 if ( 360 curStrPos + numChars > 361 curString.length 362 ) 363 break; 364 } 365 // strip out the escape characters and append all the string in between 366 const stringBeforeSkip = curString.substring( 367 0, 368 curStrPos 369 ); 370 const stringSkipped = curString.substring( 371 stringBeforeSkip.length + 1, 372 curStrPos + numChars 373 ); 374 const stringAfterSkip = curString.substring( 375 curStrPos + numChars + 1 376 ); 377 curString = 378 stringBeforeSkip + 379 stringSkipped + 380 stringAfterSkip; 381 numChars--; 382 } 383 384 // timeout for any pause after a character 385 _this2.timeout = setTimeout(function () { 386 // Accounts for blinking while paused 387 _this2.toggleBlinking(false); 388 389 // We're done with this sentence! 390 if (curStrPos >= curString.length) { 391 _this2.doneTyping( 392 curString, 393 curStrPos 394 ); 395 } else { 396 _this2.keepTyping( 397 curString, 398 curStrPos, 399 numChars 400 ); 401 } 402 // end of character pause 403 if (_this2.temporaryPause) { 404 _this2.temporaryPause = false; 405 _this2.options.onTypingResumed( 406 _this2.arrayPos, 407 _this2 408 ); 409 } 410 }, pauseTime); 411 412 // humanized value for typing 413 }, humanize); 414 }, 415 416 /** 417 * Continue to the next string & begin typing 418 * 419 * @param {string} curString the current string in the strings array 420 * @param {number} curStrPos the current position in the curString 421 * @private 422 */ 423 }, 424 { 425 key: 'keepTyping', 426 value: function keepTyping( 427 curString, 428 curStrPos, 429 numChars 430 ) { 431 // call before functions if applicable 432 if (curStrPos === 0) { 433 this.toggleBlinking(false); 434 this.options.preStringTyped( 435 this.arrayPos, 436 this 437 ); 438 } 439 // start typing each new char into existing string 440 // curString: arg, this.el.html: original text inside element 441 curStrPos += numChars; 442 const nextString = curString.substr( 443 0, 444 curStrPos 445 ); 446 this.replaceText(nextString); 447 // loop the function 448 this.typewrite(curString, curStrPos); 449 }, 450 451 /** 452 * We're done typing the current string 453 * 454 * @param {string} curString the current string in the strings array 455 * @param {number} curStrPos the current position in the curString 456 * @private 457 */ 458 }, 459 { 460 key: 'doneTyping', 461 value: function doneTyping(curString, curStrPos) { 462 const _this3 = this; 463 464 // fires callback function 465 this.options.onStringTyped(this.arrayPos, this); 466 this.toggleBlinking(true); 467 // is this the final string 468 if (this.arrayPos === this.strings.length - 1) { 469 // callback that occurs on the last typed string 470 this.complete(); 471 // quit if we wont loop back 472 if ( 473 this.loop === false || 474 this.curLoop === this.loopCount 475 ) { 476 return; 477 } 478 } 479 this.timeout = setTimeout(function () { 480 _this3.backspace(curString, curStrPos); 481 }, this.backDelay); 482 }, 483 484 /** 485 * Backspaces 1 character at a time 486 * 487 * @param {string} curString the current string in the strings array 488 * @param {number} curStrPos the current position in the curString 489 * @private 490 */ 491 }, 492 { 493 key: 'backspace', 494 value: function backspace(curString, curStrPos) { 495 const _this4 = this; 496 497 if (this.pause.status === true) { 498 this.setPauseStatus( 499 curString, 500 curStrPos, 501 true 502 ); 503 return; 504 } 505 if (this.fadeOut) return this.initFadeOut(); 506 507 this.toggleBlinking(false); 508 const humanize = this.humanizer(this.backSpeed); 509 510 this.timeout = setTimeout(function () { 511 curStrPos = _htmlParserJs.htmlParser.backSpaceHtmlChars( 512 curString, 513 curStrPos, 514 _this4 515 ); 516 // replace text with base text + typed characters 517 const curStringAtPosition = curString.substr( 518 0, 519 curStrPos 520 ); 521 _this4.replaceText(curStringAtPosition); 522 523 // if smartBack is enabled 524 if (_this4.smartBackspace) { 525 // the remaining part of the current string is equal of the same part of the new string 526 const nextString = 527 _this4.strings[_this4.arrayPos + 1]; 528 if ( 529 nextString && 530 curStringAtPosition === 531 nextString.substr(0, curStrPos) 532 ) { 533 _this4.stopNum = curStrPos; 534 } else { 535 _this4.stopNum = 0; 536 } 537 } 538 539 // if the number (id of character in current string) is 540 // less than the stop number, keep going 541 if (curStrPos > _this4.stopNum) { 542 // subtract characters one by one 543 curStrPos--; 544 // loop the function 545 _this4.backspace(curString, curStrPos); 546 } else if (curStrPos <= _this4.stopNum) { 547 // if the stop number has been reached, increase 548 // array position to next string 549 _this4.arrayPos++; 550 // When looping, begin at the beginning after backspace complete 551 if ( 552 _this4.arrayPos === 553 _this4.strings.length 554 ) { 555 _this4.arrayPos = 0; 556 _this4.options.onLastStringBackspaced(); 557 _this4.shuffleStringsIfNeeded(); 558 _this4.begin(); 559 } else { 560 _this4.typewrite( 561 _this4.strings[ 562 _this4.sequence[ 563 _this4.arrayPos 564 ] 565 ], 566 curStrPos 567 ); 568 } 569 } 570 // humanized value for typing 571 }, humanize); 572 }, 573 574 /** 575 * Full animation is complete 576 * 577 * @private 578 */ 579 }, 580 { 581 key: 'complete', 582 value: function complete() { 583 this.options.onComplete(this); 584 if (this.loop) { 585 this.curLoop++; 586 } else { 587 this.typingComplete = true; 588 } 589 }, 590 591 /** 592 * Has the typing been stopped 593 * 594 * @param {string} curString the current string in the strings array 595 * @param {number} curStrPos the current position in the curString 596 * @param {boolean} isTyping 597 * @private 598 */ 599 }, 600 { 601 key: 'setPauseStatus', 602 value: function setPauseStatus( 603 curString, 604 curStrPos, 605 isTyping 606 ) { 607 this.pause.typewrite = isTyping; 608 this.pause.curString = curString;
609 this.pause.curStrPos = curStrPos; 610 }, 611 612 /** 613 * Toggle the blinking cursor 614 * 615 * @param {boolean} isBlinking 616 * @private 617 */ 618 }, 619 { 620 key: 'toggleBlinking', 621 value: function toggleBlinking(isBlinking) { 622 if (!this.cursor) return; 623 // if in paused state, don't toggle blinking a 2nd time 624 if (this.pause.status) return; 625 if (this.cursorBlinking === isBlinking) return; 626 this.cursorBlinking = isBlinking; 627 if (isBlinking) { 628 this.cursor.classList.add( 629 'typed-cursor--blink' 630 ); 631 } else { 632 this.cursor.classList.remove( 633 'typed-cursor--blink' 634 ); 635 } 636 }, 637 638 /** 639 * Speed in MS to type 640 * 641 * @param {number} speed 642 * @private 643 */ 644 }, 645 { 646 key: 'humanizer', 647 value: function humanizer(speed) { 648 return ( 649 Math.round((Math.random() * speed) / 2) + 650 speed 651 ); 652 }, 653 654 /** 655 * Shuffle the sequence of the strings array 656 * 657 * @private 658 */ 659 }, 660 { 661 key: 'shuffleStringsIfNeeded', 662 value: function shuffleStringsIfNeeded() { 663 if (!this.shuffle) return; 664 this.sequence = this.sequence.sort(function () { 665 return Math.random() - 0.5; 666 }); 667 }, 668 669 /** 670 * Adds a CSS class to fade out current string 671 * 672 * @private 673 */ 674 }, 675 { 676 key: 'initFadeOut', 677 value: function initFadeOut() { 678 const _this5 = this; 679 680 this.el.className += ' ' + this.fadeOutClass; 681 if (this.cursor) 682 this.cursor.className += 683 ' ' + this.fadeOutClass; 684 return setTimeout(function () { 685 _this5.arrayPos++; 686 _this5.replaceText(''); 687 688 // Resets current string if end of loop reached 689 if ( 690 _this5.strings.length > _this5.arrayPos 691 ) { 692 _this5.typewrite( 693 _this5.strings[ 694 _this5.sequence[_this5.arrayPos] 695 ], 696 0 697 ); 698 } else { 699 _this5.typewrite(_this5.strings[0], 0); 700 _this5.arrayPos = 0; 701 } 702 }, this.fadeOutDelay); 703 }, 704 705 /** 706 * Replaces current text in the HTML element 707 * depending on element type 708 * 709 * @param {string} str 710 * @private 711 */ 712 }, 713 { 714 key: 'replaceText', 715 value: function replaceText(str) { 716 if (this.attr) { 717 this.el.setAttribute(this.attr, str); 718 } else if (this.isInput) { 719 this.el.value = str; 720 } else if (this.contentType === 'html') { 721 this.el.innerHTML = str; 722 } else { 723 this.el.textContent = str; 724 } 725 }, 726 727 /** 728 * If using input elements, bind focus in order to 729 * start and stop the animation 730 * 731 * @private 732 */ 733 }, 734 { 735 key: 'bindFocusEvents', 736 value: function bindFocusEvents() { 737 const _this6 = this; 738 739 if (!this.isInput) return; 740 this.el.addEventListener('focus', function (e) { 741 _this6.stop(); 742 }); 743 this.el.addEventListener('blur', function (e) { 744 if ( 745 _this6.el.value && 746 _this6.el.value.length !== 0 747 ) { 748 return; 749 } 750 _this6.start(); 751 }); 752 }, 753 754 /** 755 * On init, insert the cursor element 756 * 757 * @private 758 */ 759 }, 760 { 761 key: 'insertCursor', 762 value: function insertCursor() { 763 if (!this.showCursor) return; 764 if (this.cursor) return; 765 this.cursor = document.createElement('span'); 766 this.cursor.className = 'typed-cursor'; 767 this.cursor.innerHTML = this.cursorChar; 768 this.el.parentNode && 769 this.el.parentNode.insertBefore( 770 this.cursor, 771 this.el.nextSibling 772 ); 773 }, 774 }, 775 ]); 776 777 return Typed; 778 })(); 779 780 exports.default = Typed; 781 module.exports = exports.default; 782 783 /***/ 784 }, 785 /* 1 */ 786 /***/ function (module, exports, __webpack_require__) { 787 'use strict'; 788 789 Object.defineProperty(exports, '__esModule', { 790 value: true, 791 }); 792 793 const _extends =
794 Object.assign || 795 function (target) { 796 for (let i = 1; i < arguments.length; i++) { 797 const source = arguments[i]; 798 for (const key in source) { 799 if ( 800 Object.prototype.hasOwnProperty.call( 801 source, 802 key 803 ) 804 ) { 805 target[key] = source[key]; 806 } 807 } 808 } 809 return target; 810 }; 811 812 const _createClass = (function () { 813 function defineProperties(target, props) { 814 for (let i = 0; i < props.length; i++) { 815 const descriptor = props[i]; 816 descriptor.enumerable = 817 descriptor.enumerable || false; 818 descriptor.configurable = true; 819 if ('value' in descriptor) 820 descriptor.writable = true; 821 Object.defineProperty( 822 target, 823 descriptor.key, 824 descriptor 825 ); 826 } 827 } 828 return function (Constructor, protoProps, staticProps) { 829 if (protoProps) 830 defineProperties(Constructor.prototype, protoProps); 831 if (staticProps) 832 defineProperties(Constructor, staticProps); 833 return Constructor; 834 }; 835 })(); 836 837 function _interopRequireDefault(obj) { 838 return obj && obj.__esModule ? obj : { default: obj }; 839 } 840 841 function _classCallCheck(instance, Constructor) { 842 if (!(instance instanceof Constructor)) { 843 throw new TypeError( 844 'Cannot call a class as a function' 845 ); 846 } 847 } 848 849 const _defaultsJs = __webpack_require__(2); 850 851 const _defaultsJs2 = _interopRequireDefault(_defaultsJs); 852 853 /** 854 * Initialize the Typed object 855 */ 856 857 const Initializer = (function () { 858 function Initializer() { 859 _classCallCheck(this, Initializer); 860 } 861 862 _createClass(Initializer, [ 863 { 864 key: 'load', 865 866 /** 867 * Load up defaults & options on the Typed instance 868 * 869 * @param {Typed} self instance of Typed 870 * @param {Object} options options object 871 * @param {string} elementId HTML element ID _OR_ instance of HTML element 872 * @private 873 */ 874 875 value: function load(self, options, elementId) { 876 // chosen element to manipulate text 877 if (typeof elementId === 'string') { 878 self.el = document.querySelector(elementId); 879 } else { 880 self.el = elementId; 881 } 882 883 self.options = _extends( 884 {}, 885 _defaultsJs2.default, 886 options 887 ); 888 889 // attribute to type into 890 self.isInput = 891 self.el.tagName.toLowerCase() === 'input'; 892 self.attr = self.options.attr; 893 self.bindInputFocusEvents = 894 self.options.bindInputFocusEvents; 895 896 // show cursor 897 self.showCursor = self.isInput 898 ? false 899 : self.options.showCursor; 900 901 // custom cursor 902 self.cursorChar = self.options.cursorChar; 903 904 // Is the cursor blinking 905 self.cursorBlinking = true; 906 907 // text content of element 908 self.elContent = self.attr 909 ? self.el.getAttribute(self.attr) 910 : self.el.textContent; 911 912 // html or plain text 913 self.contentType = self.options.contentType; 914 915 // typing speed 916 self.typeSpeed = self.options.typeSpeed; 917 918 // add a delay before typing starts 919 self.startDelay = self.options.startDelay; 920 921 // backspacing speed 922 self.backSpeed = self.options.backSpeed; 923 924 // only backspace what doesn't match the previous string 925 self.smartBackspace = 926 self.options.smartBackspace; 927 928 // amount of time to wait before backspacing 929 self.backDelay = self.options.backDelay; 930 931 // Fade out instead of backspace 932 self.fadeOut = self.options.fadeOut; 933 self.fadeOutClass = self.options.fadeOutClass; 934 self.fadeOutDelay = self.options.fadeOutDelay; 935 936 // variable to check whether typing is currently paused 937 self.isPaused = false; 938 939 // input strings of text 940 self.strings = self.options.strings.map( 941 function (s) { 942 return s.trim(); 943 } 944 ); 945
946 // div containing strings 947 if ( 948 typeof self.options.stringsElement === 949 'string' 950 ) { 951 self.stringsElement = document.querySelector( 952 self.options.stringsElement 953 ); 954 } else { 955 self.stringsElement = 956 self.options.stringsElement; 957 } 958 959 if (self.stringsElement) { 960 self.strings = []; 961 self.stringsElement.style.display = 'none'; 962 const strings = Array.prototype.slice.apply( 963 self.stringsElement.children 964 ); 965 const stringsLength = strings.length; 966 967 if (stringsLength) { 968 for ( 969 var i = 0; 970 i < stringsLength; 971 i += 1 972 ) { 973 const stringEl = strings[i]; 974 self.strings.push( 975 stringEl.innerHTML.trim() 976 ); 977 } 978 } 979 } 980 981 // character number position of current string 982 self.strPos = 0; 983 984 // current array position 985 self.arrayPos = 0; 986 987 // index of string to stop backspacing on 988 self.stopNum = 0; 989 990 // Looping logic 991 self.loop = self.options.loop; 992 self.loopCount = self.options.loopCount; 993 self.curLoop = 0; 994 995 // shuffle the strings 996 self.shuffle = self.options.shuffle; 997 // the order of strings 998 self.sequence = []; 999 1000 self.pause = { 1001 status: false, 1002 typewrite: true, 1003 curString: '', 1004 curStrPos: 0, 1005 }; 1006 1007 // When the typing is complete (when not looped) 1008 self.typingComplete = false; 1009 1010 // Set the order in which the strings are typed 1011 for (var i in self.strings) { 1012 self.sequence[i] = i; 1013 } 1014 1015 // If there is some text in the element 1016 self.currentElContent = this.getCurrentElContent( 1017 self 1018 ); 1019 1020 self.autoInsertCss = self.options.autoInsertCss; 1021 1022 this.appendAnimationCss(self); 1023 }, 1024 }, 1025 { 1026 key: 'getCurrentElContent', 1027 value: function getCurrentElContent(self) { 1028 let elContent = ''; 1029 if (self.attr) { 1030 elContent = self.el.getAttribute(self.attr); 1031 } else if (self.isInput) { 1032 elContent = self.el.value; 1033 } else if (self.contentType === 'html') { 1034 elContent = self.el.innerHTML; 1035 } else { 1036 elContent = self.el.textContent; 1037 } 1038 return elContent; 1039 }, 1040 }, 1041 { 1042 key: 'appendAnimationCss', 1043 value: function appendAnimationCss(self) { 1044 const cssDataName = 'data-typed-js-css'; 1045 if (!self.autoInsertCss) { 1046 return; 1047 } 1048 if (!self.showCursor && !self.fadeOut) { 1049 return; 1050 } 1051 if ( 1052 document.querySelector( 1053 '[' + cssDataName + ']' 1054 ) 1055 ) { 1056 return; 1057 } 1058 1059 const css = document.createElement('style'); 1060 css.type = 'text/css'; 1061 css.setAttribute(cssDataName, true); 1062 1063 let innerCss = ''; 1064 if (self.showCursor) { 1065 innerCss += 1066 '\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 '; 1067 } 1068 if (self.fadeOut) { 1069 innerCss += 1070 '\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 '; 1071 } 1072 if (css.length === 0) { 1073 return; 1074 } 1075 css.innerHTML = innerCss; 1076 document.body.appendChild(css); 1077 }, 1078 }, 1079 ]); 1080 1081 return Initializer; 1082 })(); 1083 1084 exports.default = Initializer; 1085 const initializer = new Initializer(); 1086 exports.initializer = initializer; 1087 1088 /***/ 1089 }, 1090 /* 2 */
1091 /***/ function (module, exports) { 1092 /** 1093 * Defaults & options 1094 * 1095 * @return {Object} Typed defaults & options 1096 * @public 1097 */ 1098 1099 'use strict'; 1100 1101 Object.defineProperty(exports, '__esModule', { 1102 value: true, 1103 }); 1104 const defaults = { 1105 /** 1106 * @property {Array} strings strings to be typed 1107 * @property {string} stringsElement ID of element containing string children 1108 */ 1109 strings: [ 1110 'These are the default values...', 1111 'You know what you should do?', 1112 'Use your own!', 1113 'Have a great day!', 1114 ], 1115 stringsElement: null, 1116 1117 /** 1118 * @property {number} typeSpeed type speed in milliseconds 1119 */ 1120 typeSpeed: 0, 1121 1122 /** 1123 * @property {number} startDelay time before typing starts in milliseconds 1124 */ 1125 startDelay: 0, 1126 1127 /** 1128 * @property {number} backSpeed backspacing speed in milliseconds 1129 */ 1130 backSpeed: 0, 1131 1132 /** 1133 * @property {boolean} smartBackspace only backspace what doesn't match the previous string 1134 */ 1135 smartBackspace: true, 1136 1137 /** 1138 * @property {boolean} shuffle shuffle the strings 1139 */ 1140 shuffle: false, 1141 1142 /** 1143 * @property {number} backDelay time before backspacing in milliseconds 1144 */ 1145 backDelay: 700, 1146 1147 /** 1148 * @property {boolean} fadeOut Fade out instead of backspace 1149 * @property {string} fadeOutClass css class for fade animation 1150 * @property {boolean} fadeOutDelay Fade out delay in milliseconds 1151 */ 1152 fadeOut: false, 1153 fadeOutClass: 'typed-fade-out', 1154 fadeOutDelay: 500, 1155 1156 /** 1157 * @property {boolean} loop loop strings 1158 * @property {number} loopCount amount of loops 1159 */ 1160 loop: false, 1161 loopCount: Infinity, 1162 1163 /** 1164 * @property {boolean} showCursor show cursor 1165 * @property {string} cursorChar character for cursor 1166 * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head> 1167 */ 1168 showCursor: true, 1169 cursorChar: '|', 1170 autoInsertCss: true, 1171 1172 /** 1173 * @property {string} attr attribute for typing 1174 * Ex: input placeholder, value, or just HTML text 1175 */ 1176 attr: null, 1177 1178 /** 1179 * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input 1180 */ 1181 bindInputFocusEvents: false, 1182 1183 /** 1184 * @property {string} contentType 'html' or 'null' for plaintext 1185 */ 1186 contentType: 'html', 1187 1188 /** 1189 * All typing is complete 1190 * 1191 * @param {Typed} self 1192 */ 1193 onComplete: function onComplete(self) {}, 1194 1195 /** 1196 * Before each string is typed 1197 * 1198 * @param {number} arrayPos 1199 * @param {Typed} self 1200 */ 1201 preStringTyped: function preStringTyped(arrayPos, self) {}, 1202 1203 /** 1204 * After each string is typed 1205 * 1206 * @param {number} arrayPos 1207 * @param {Typed} self 1208 */ 1209 onStringTyped: function onStringTyped(arrayPos, self) {}, 1210 1211 /** 1212 * During looping, after last string is typed 1213 * 1214 * @param {Typed} self 1215 */ 1216 onLastStringBackspaced: function onLastStringBackspaced( 1217 self 1218 ) {}, 1219 1220 /** 1221 * Typing has been stopped 1222 * 1223 * @param {number} arrayPos 1224 * @param {Typed} self 1225 */ 1226 onTypingPaused: function onTypingPaused(arrayPos, self) {}, 1227 1228 /** 1229 * Typing has been started after being stopped 1230 * 1231 * @param {number} arrayPos 1232 * @param {Typed} self 1233 */ 1234 onTypingResumed: function onTypingResumed( 1235 arrayPos, 1236 self 1237 ) {}, 1238 1239 /** 1240 * After reset 1241 * 1242 * @param {Typed} self 1243 */ 1244 onReset: function onReset(self) {}, 1245 1246 /** 1247 * After stop 1248 * 1249 * @param {number} arrayPos 1250 * @param {Typed} self 1251 */ 1252 onStop: function onStop(arrayPos, self) {}, 1253 1254 /** 1255 * After start 1256 * 1257 * @param {number} arrayPos 1258 * @param {Typed} self 1259 */ 1260 onStart: function onStart(arrayPos, self) {}, 1261 1262 /** 1263 * After destroy 1264 * 1265 * @param {Typed} self 1266 */ 1267 onDestroy: function onDestroy(self) {}, 1268 }; 1269 1270 exports.default = defaults; 1271 module.exports = exports.default; 1272 1273 /***/ 1274 }, 1275 /* 3 */
1276 /***/ function (module, exports) { 1277 /** 1278 * TODO: These methods can probably be combined somehow 1279 * Parse HTML tags & HTML Characters 1280 */ 1281 1282 'use strict'; 1283 1284 Object.defineProperty(exports, '__esModule', { 1285 value: true, 1286 }); 1287 1288 const _createClass = (function () { 1289 function defineProperties(target, props) { 1290 for (let i = 0; i < props.length; i++) { 1291 const descriptor = props[i]; 1292 descriptor.enumerable = 1293 descriptor.enumerable || false; 1294 descriptor.configurable = true; 1295 if ('value' in descriptor) 1296 descriptor.writable = true; 1297 Object.defineProperty( 1298 target, 1299 descriptor.key, 1300 descriptor 1301 ); 1302 } 1303 } 1304 return function (Constructor, protoProps, staticProps) { 1305 if (protoProps) 1306 defineProperties(Constructor.prototype, protoProps); 1307 if (staticProps) 1308 defineProperties(Constructor, staticProps); 1309 return Constructor; 1310 }; 1311 })(); 1312 1313 function _classCallCheck(instance, Constructor) { 1314 if (!(instance instanceof Constructor)) { 1315 throw new TypeError( 1316 'Cannot call a class as a function' 1317 ); 1318 } 1319 } 1320 1321 const HTMLParser = (function () { 1322 function HTMLParser() { 1323 _classCallCheck(this, HTMLParser); 1324 } 1325 1326 _createClass(HTMLParser, [ 1327 { 1328 key: 'typeHtmlChars', 1329 1330 /** 1331 * Type HTML tags & HTML Characters 1332 * 1333 * @param {string} curString Current string 1334 * @param {number} curStrPos Position in current string 1335 * @param {Typed} self instance of Typed 1336 * @return {number} a new string position 1337 * @private 1338 */ 1339 1340 value: function typeHtmlChars( 1341 curString, 1342 curStrPos, 1343 self 1344 ) { 1345 if (self.contentType !== 'html') 1346 return curStrPos; 1347 const curChar = curString 1348 .substr(curStrPos) 1349 .charAt(0); 1350 if (curChar === '<' || curChar === '&') { 1351 let endTag = ''; 1352 if (curChar === '<') { 1353 endTag = '>'; 1354 } else { 1355 endTag = ';'; 1356 } 1357 while ( 1358 curString 1359 .substr(curStrPos + 1) 1360 .charAt(0) !== endTag 1361 ) { 1362 curStrPos++; 1363 if (curStrPos + 1 > curString.length) { 1364 break; 1365 } 1366 } 1367 curStrPos++; 1368 } 1369 return curStrPos; 1370 }, 1371 1372 /** 1373 * Backspace HTML tags and HTML Characters 1374 * 1375 * @param {string} curString Current string 1376 * @param {number} curStrPos Position in current string 1377 * @param {Typed} self instance of Typed 1378 * @return {number} a new string position 1379 * @private 1380 */ 1381 }, 1382 { 1383 key: 'backSpaceHtmlChars', 1384 value: function backSpaceHtmlChars( 1385 curString, 1386 curStrPos, 1387 self 1388 ) { 1389 if (self.contentType !== 'html') 1390 return curStrPos; 1391 const curChar = curString 1392 .substr(curStrPos) 1393 .charAt(0); 1394 if (curChar === '>' || curChar === ';') { 1395 let endTag = ''; 1396 if (curChar === '>') { 1397 endTag = '<'; 1398 } else { 1399 endTag = '&'; 1400 } 1401 while ( 1402 curString 1403 .substr(curStrPos - 1) 1404 .charAt(0) !== endTag 1405 ) { 1406 curStrPos--; 1407 if (curStrPos < 0) { 1408 break; 1409 } 1410 } 1411 curStrPos--; 1412 } 1413 return curStrPos; 1414 }, 1415 }, 1416 ]); 1417 1418 return HTMLParser; 1419 })(); 1420 1421 exports.default = HTMLParser; 1422 const htmlParser = new HTMLParser(); 1423 exports.htmlParser = htmlParser; 1424 1425 /***/ 1426 }, 1427 /******/ 1428 ] 1429 ); 1430});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.