typed.js 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051
  1. /*!
  2. *
  3. * typed.js - A JavaScript Typing Animation Library
  4. * Author: Matt Boldt <me@mattboldt.com>
  5. * Version: v2.0.11
  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)
  14. define([], factory);
  15. else if(typeof exports === 'object')
  16. exports["Typed"] = factory();
  17. else
  18. root["Typed"] = factory();
  19. })(this, function() {
  20. return /******/ (function(modules) { // webpackBootstrap
  21. /******/ // The module cache
  22. /******/ var installedModules = {};
  23. /******/
  24. /******/ // The require function
  25. /******/ function __webpack_require__(moduleId) {
  26. /******/
  27. /******/ // Check if module is in cache
  28. /******/ if(installedModules[moduleId])
  29. /******/ return installedModules[moduleId].exports;
  30. /******/
  31. /******/ // Create a new module (and put it into the cache)
  32. /******/ var module = installedModules[moduleId] = {
  33. /******/ exports: {},
  34. /******/ id: moduleId,
  35. /******/ loaded: false
  36. /******/ };
  37. /******/
  38. /******/ // Execute the module function
  39. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  40. /******/
  41. /******/ // Flag the module as loaded
  42. /******/ module.loaded = true;
  43. /******/
  44. /******/ // Return the exports of the module
  45. /******/ return module.exports;
  46. /******/ }
  47. /******/
  48. /******/
  49. /******/ // expose the modules object (__webpack_modules__)
  50. /******/ __webpack_require__.m = modules;
  51. /******/
  52. /******/ // expose the module cache
  53. /******/ __webpack_require__.c = installedModules;
  54. /******/
  55. /******/ // __webpack_public_path__
  56. /******/ __webpack_require__.p = "";
  57. /******/
  58. /******/ // Load entry module and return exports
  59. /******/ return __webpack_require__(0);
  60. /******/ })
  61. /************************************************************************/
  62. /******/ ([
  63. /* 0 */
  64. /***/ (function(module, exports, __webpack_require__) {
  65. 'use strict';
  66. Object.defineProperty(exports, '__esModule', {
  67. value: true
  68. });
  69. var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  70. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
  71. var _initializerJs = __webpack_require__(1);
  72. var _htmlParserJs = __webpack_require__(3);
  73. /**
  74. * Welcome to Typed.js!
  75. * @param {string} elementId HTML element ID _OR_ HTML element
  76. * @param {object} options options object
  77. * @returns {object} a new Typed object
  78. */
  79. var Typed = (function () {
  80. function Typed(elementId, options) {
  81. _classCallCheck(this, Typed);
  82. // Initialize it up
  83. _initializerJs.initializer.load(this, options, elementId);
  84. // All systems go!
  85. this.begin();
  86. }
  87. /**
  88. * Toggle start() and stop() of the Typed instance
  89. * @public
  90. */
  91. _createClass(Typed, [{
  92. key: 'toggle',
  93. value: function toggle() {
  94. this.pause.status ? this.start() : this.stop();
  95. }
  96. /**
  97. * Stop typing / backspacing and enable cursor blinking
  98. * @public
  99. */
  100. }, {
  101. key: 'stop',
  102. value: function stop() {
  103. if (this.typingComplete) return;
  104. if (this.pause.status) return;
  105. this.toggleBlinking(true);
  106. this.pause.status = true;
  107. this.options.onStop(this.arrayPos, this);
  108. }
  109. /**
  110. * Start typing / backspacing after being stopped
  111. * @public
  112. */
  113. }, {
  114. key: 'start',
  115. value: function start() {
  116. if (this.typingComplete) return;
  117. if (!this.pause.status) return;
  118. this.pause.status = false;
  119. if (this.pause.typewrite) {
  120. this.typewrite(this.pause.curString, this.pause.curStrPos);
  121. } else {
  122. this.backspace(this.pause.curString, this.pause.curStrPos);
  123. }
  124. this.options.onStart(this.arrayPos, this);
  125. }
  126. /**
  127. * Destroy this instance of Typed
  128. * @public
  129. */
  130. }, {
  131. key: 'destroy',
  132. value: function destroy() {
  133. this.reset(false);
  134. this.options.onDestroy(this);
  135. }
  136. /**
  137. * Reset Typed and optionally restarts
  138. * @param {boolean} restart
  139. * @public
  140. */
  141. }, {
  142. key: 'reset',
  143. value: function reset() {
  144. var restart = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
  145. clearInterval(this.timeout);
  146. this.replaceText('');
  147. if (this.cursor && this.cursor.parentNode) {
  148. this.cursor.parentNode.removeChild(this.cursor);
  149. this.cursor = null;
  150. }
  151. this.strPos = 0;
  152. this.arrayPos = 0;
  153. this.curLoop = 0;
  154. if (restart) {
  155. this.insertCursor();
  156. this.options.onReset(this);
  157. this.begin();
  158. }
  159. }
  160. /**
  161. * Begins the typing animation
  162. * @private
  163. */
  164. }, {
  165. key: 'begin',
  166. value: function begin() {
  167. var _this = this;
  168. this.options.onBegin(this);
  169. this.typingComplete = false;
  170. this.shuffleStringsIfNeeded(this);
  171. this.insertCursor();
  172. if (this.bindInputFocusEvents) this.bindFocusEvents();
  173. this.timeout = setTimeout(function () {
  174. // Check if there is some text in the element, if yes start by backspacing the default message
  175. if (!_this.currentElContent || _this.currentElContent.length === 0) {
  176. _this.typewrite(_this.strings[_this.sequence[_this.arrayPos]], _this.strPos);
  177. } else {
  178. // Start typing
  179. _this.backspace(_this.currentElContent, _this.currentElContent.length);
  180. }
  181. }, this.startDelay);
  182. }
  183. /**
  184. * Called for each character typed
  185. * @param {string} curString the current string in the strings array
  186. * @param {number} curStrPos the current position in the curString
  187. * @private
  188. */
  189. }, {
  190. key: 'typewrite',
  191. value: function typewrite(curString, curStrPos) {
  192. var _this2 = this;
  193. if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {
  194. this.el.classList.remove(this.fadeOutClass);
  195. if (this.cursor) this.cursor.classList.remove(this.fadeOutClass);
  196. }
  197. var humanize = this.humanizer(this.typeSpeed);
  198. var numChars = 1;
  199. if (this.pause.status === true) {
  200. this.setPauseStatus(curString, curStrPos, true);
  201. return;
  202. }
  203. // contain typing function in a timeout humanize'd delay
  204. this.timeout = setTimeout(function () {
  205. // skip over any HTML chars
  206. curStrPos = _htmlParserJs.htmlParser.typeHtmlChars(curString, curStrPos, _this2);
  207. var pauseTime = 0;
  208. var substr = curString.substr(curStrPos);
  209. // check for an escape character before a pause value
  210. // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
  211. // single ^ are removed from string
  212. if (substr.charAt(0) === '^') {
  213. if (/^\^\d+/.test(substr)) {
  214. var skip = 1; // skip at least 1
  215. substr = /\d+/.exec(substr)[0];
  216. skip += substr.length;
  217. pauseTime = parseInt(substr);
  218. _this2.temporaryPause = true;
  219. _this2.options.onTypingPaused(_this2.arrayPos, _this2);
  220. // strip out the escape character and pause value so they're not printed
  221. curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
  222. _this2.toggleBlinking(true);
  223. }
  224. }
  225. // check for skip characters formatted as
  226. // "this is a `string to print NOW` ..."
  227. if (substr.charAt(0) === '`') {
  228. while (curString.substr(curStrPos + numChars).charAt(0) !== '`') {
  229. numChars++;
  230. if (curStrPos + numChars > curString.length) break;
  231. }
  232. // strip out the escape characters and append all the string in between
  233. var stringBeforeSkip = curString.substring(0, curStrPos);
  234. var stringSkipped = curString.substring(stringBeforeSkip.length + 1, curStrPos + numChars);
  235. var stringAfterSkip = curString.substring(curStrPos + numChars + 1);
  236. curString = stringBeforeSkip + stringSkipped + stringAfterSkip;
  237. numChars--;
  238. }
  239. // timeout for any pause after a character
  240. _this2.timeout = setTimeout(function () {
  241. // Accounts for blinking while paused
  242. _this2.toggleBlinking(false);
  243. // We're done with this sentence!
  244. if (curStrPos >= curString.length) {
  245. _this2.doneTyping(curString, curStrPos);
  246. } else {
  247. _this2.keepTyping(curString, curStrPos, numChars);
  248. }
  249. // end of character pause
  250. if (_this2.temporaryPause) {
  251. _this2.temporaryPause = false;
  252. _this2.options.onTypingResumed(_this2.arrayPos, _this2);
  253. }
  254. }, pauseTime);
  255. // humanized value for typing
  256. }, humanize);
  257. }
  258. /**
  259. * Continue to the next string & begin typing
  260. * @param {string} curString the current string in the strings array
  261. * @param {number} curStrPos the current position in the curString
  262. * @private
  263. */
  264. }, {
  265. key: 'keepTyping',
  266. value: function keepTyping(curString, curStrPos, numChars) {
  267. // call before functions if applicable
  268. if (curStrPos === 0) {
  269. this.toggleBlinking(false);
  270. this.options.preStringTyped(this.arrayPos, this);
  271. }
  272. // start typing each new char into existing string
  273. // curString: arg, this.el.html: original text inside element
  274. curStrPos += numChars;
  275. var nextString = curString.substr(0, curStrPos);
  276. this.replaceText(nextString);
  277. // loop the function
  278. this.typewrite(curString, curStrPos);
  279. }
  280. /**
  281. * We're done typing the current string
  282. * @param {string} curString the current string in the strings array
  283. * @param {number} curStrPos the current position in the curString
  284. * @private
  285. */
  286. }, {
  287. key: 'doneTyping',
  288. value: function doneTyping(curString, curStrPos) {
  289. var _this3 = this;
  290. // fires callback function
  291. this.options.onStringTyped(this.arrayPos, this);
  292. this.toggleBlinking(true);
  293. // is this the final string
  294. if (this.arrayPos === this.strings.length - 1) {
  295. // callback that occurs on the last typed string
  296. this.complete();
  297. // quit if we wont loop back
  298. if (this.loop === false || this.curLoop === this.loopCount) {
  299. return;
  300. }
  301. }
  302. this.timeout = setTimeout(function () {
  303. _this3.backspace(curString, curStrPos);
  304. }, this.backDelay);
  305. }
  306. /**
  307. * Backspaces 1 character at a time
  308. * @param {string} curString the current string in the strings array
  309. * @param {number} curStrPos the current position in the curString
  310. * @private
  311. */
  312. }, {
  313. key: 'backspace',
  314. value: function backspace(curString, curStrPos) {
  315. var _this4 = this;
  316. if (this.pause.status === true) {
  317. this.setPauseStatus(curString, curStrPos, true);
  318. return;
  319. }
  320. if (this.fadeOut) return this.initFadeOut();
  321. this.toggleBlinking(false);
  322. var humanize = this.humanizer(this.backSpeed);
  323. this.timeout = setTimeout(function () {
  324. curStrPos = _htmlParserJs.htmlParser.backSpaceHtmlChars(curString, curStrPos, _this4);
  325. // replace text with base text + typed characters
  326. var curStringAtPosition = curString.substr(0, curStrPos);
  327. _this4.replaceText(curStringAtPosition);
  328. // if smartBack is enabled
  329. if (_this4.smartBackspace) {
  330. // the remaining part of the current string is equal of the same part of the new string
  331. var nextString = _this4.strings[_this4.arrayPos + 1];
  332. if (nextString && curStringAtPosition === nextString.substr(0, curStrPos)) {
  333. _this4.stopNum = curStrPos;
  334. } else {
  335. _this4.stopNum = 0;
  336. }
  337. }
  338. // if the number (id of character in current string) is
  339. // less than the stop number, keep going
  340. if (curStrPos > _this4.stopNum) {
  341. // subtract characters one by one
  342. curStrPos--;
  343. // loop the function
  344. _this4.backspace(curString, curStrPos);
  345. } else if (curStrPos <= _this4.stopNum) {
  346. // if the stop number has been reached, increase
  347. // array position to next string
  348. _this4.arrayPos++;
  349. // When looping, begin at the beginning after backspace complete
  350. if (_this4.arrayPos === _this4.strings.length) {
  351. _this4.arrayPos = 0;
  352. _this4.options.onLastStringBackspaced();
  353. _this4.shuffleStringsIfNeeded();
  354. _this4.begin();
  355. } else {
  356. _this4.typewrite(_this4.strings[_this4.sequence[_this4.arrayPos]], curStrPos);
  357. }
  358. }
  359. // humanized value for typing
  360. }, humanize);
  361. }
  362. /**
  363. * Full animation is complete
  364. * @private
  365. */
  366. }, {
  367. key: 'complete',
  368. value: function complete() {
  369. this.options.onComplete(this);
  370. if (this.loop) {
  371. this.curLoop++;
  372. } else {
  373. this.typingComplete = true;
  374. }
  375. }
  376. /**
  377. * Has the typing been stopped
  378. * @param {string} curString the current string in the strings array
  379. * @param {number} curStrPos the current position in the curString
  380. * @param {boolean} isTyping
  381. * @private
  382. */
  383. }, {
  384. key: 'setPauseStatus',
  385. value: function setPauseStatus(curString, curStrPos, isTyping) {
  386. this.pause.typewrite = isTyping;
  387. this.pause.curString = curString;
  388. this.pause.curStrPos = curStrPos;
  389. }
  390. /**
  391. * Toggle the blinking cursor
  392. * @param {boolean} isBlinking
  393. * @private
  394. */
  395. }, {
  396. key: 'toggleBlinking',
  397. value: function toggleBlinking(isBlinking) {
  398. if (!this.cursor) return;
  399. // if in paused state, don't toggle blinking a 2nd time
  400. if (this.pause.status) return;
  401. if (this.cursorBlinking === isBlinking) return;
  402. this.cursorBlinking = isBlinking;
  403. if (isBlinking) {
  404. this.cursor.classList.add('typed-cursor--blink');
  405. } else {
  406. this.cursor.classList.remove('typed-cursor--blink');
  407. }
  408. }
  409. /**
  410. * Speed in MS to type
  411. * @param {number} speed
  412. * @private
  413. */
  414. }, {
  415. key: 'humanizer',
  416. value: function humanizer(speed) {
  417. return Math.round(Math.random() * speed / 2) + speed;
  418. }
  419. /**
  420. * Shuffle the sequence of the strings array
  421. * @private
  422. */
  423. }, {
  424. key: 'shuffleStringsIfNeeded',
  425. value: function shuffleStringsIfNeeded() {
  426. if (!this.shuffle) return;
  427. this.sequence = this.sequence.sort(function () {
  428. return Math.random() - 0.5;
  429. });
  430. }
  431. /**
  432. * Adds a CSS class to fade out current string
  433. * @private
  434. */
  435. }, {
  436. key: 'initFadeOut',
  437. value: function initFadeOut() {
  438. var _this5 = this;
  439. this.el.className += ' ' + this.fadeOutClass;
  440. if (this.cursor) this.cursor.className += ' ' + this.fadeOutClass;
  441. return setTimeout(function () {
  442. _this5.arrayPos++;
  443. _this5.replaceText('');
  444. // Resets current string if end of loop reached
  445. if (_this5.strings.length > _this5.arrayPos) {
  446. _this5.typewrite(_this5.strings[_this5.sequence[_this5.arrayPos]], 0);
  447. } else {
  448. _this5.typewrite(_this5.strings[0], 0);
  449. _this5.arrayPos = 0;
  450. }
  451. }, this.fadeOutDelay);
  452. }
  453. /**
  454. * Replaces current text in the HTML element
  455. * depending on element type
  456. * @param {string} str
  457. * @private
  458. */
  459. }, {
  460. key: 'replaceText',
  461. value: function replaceText(str) {
  462. if (this.attr) {
  463. this.el.setAttribute(this.attr, str);
  464. } else {
  465. if (this.isInput) {
  466. this.el.value = str;
  467. } else if (this.contentType === 'html') {
  468. this.el.innerHTML = str;
  469. } else {
  470. this.el.textContent = str;
  471. }
  472. }
  473. }
  474. /**
  475. * If using input elements, bind focus in order to
  476. * start and stop the animation
  477. * @private
  478. */
  479. }, {
  480. key: 'bindFocusEvents',
  481. value: function bindFocusEvents() {
  482. var _this6 = this;
  483. if (!this.isInput) return;
  484. this.el.addEventListener('focus', function (e) {
  485. _this6.stop();
  486. });
  487. this.el.addEventListener('blur', function (e) {
  488. if (_this6.el.value && _this6.el.value.length !== 0) {
  489. return;
  490. }
  491. _this6.start();
  492. });
  493. }
  494. /**
  495. * On init, insert the cursor element
  496. * @private
  497. */
  498. }, {
  499. key: 'insertCursor',
  500. value: function insertCursor() {
  501. if (!this.showCursor) return;
  502. if (this.cursor) return;
  503. this.cursor = document.createElement('span');
  504. this.cursor.className = 'typed-cursor';
  505. this.cursor.innerHTML = this.cursorChar;
  506. this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling);
  507. }
  508. }]);
  509. return Typed;
  510. })();
  511. exports['default'] = Typed;
  512. module.exports = exports['default'];
  513. /***/ }),
  514. /* 1 */
  515. /***/ (function(module, exports, __webpack_require__) {
  516. 'use strict';
  517. Object.defineProperty(exports, '__esModule', {
  518. value: true
  519. });
  520. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  521. var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  522. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  523. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
  524. var _defaultsJs = __webpack_require__(2);
  525. var _defaultsJs2 = _interopRequireDefault(_defaultsJs);
  526. /**
  527. * Initialize the Typed object
  528. */
  529. var Initializer = (function () {
  530. function Initializer() {
  531. _classCallCheck(this, Initializer);
  532. }
  533. _createClass(Initializer, [{
  534. key: 'load',
  535. /**
  536. * Load up defaults & options on the Typed instance
  537. * @param {Typed} self instance of Typed
  538. * @param {object} options options object
  539. * @param {string} elementId HTML element ID _OR_ instance of HTML element
  540. * @private
  541. */
  542. value: function load(self, options, elementId) {
  543. // chosen element to manipulate text
  544. if (typeof elementId === 'string') {
  545. self.el = document.querySelector(elementId);
  546. } else {
  547. self.el = elementId;
  548. }
  549. self.options = _extends({}, _defaultsJs2['default'], options);
  550. // attribute to type into
  551. self.isInput = self.el.tagName.toLowerCase() === 'input';
  552. self.attr = self.options.attr;
  553. self.bindInputFocusEvents = self.options.bindInputFocusEvents;
  554. // show cursor
  555. self.showCursor = self.isInput ? false : self.options.showCursor;
  556. // custom cursor
  557. self.cursorChar = self.options.cursorChar;
  558. // Is the cursor blinking
  559. self.cursorBlinking = true;
  560. // text content of element
  561. self.elContent = self.attr ? self.el.getAttribute(self.attr) : self.el.textContent;
  562. // html or plain text
  563. self.contentType = self.options.contentType;
  564. // typing speed
  565. self.typeSpeed = self.options.typeSpeed;
  566. // add a delay before typing starts
  567. self.startDelay = self.options.startDelay;
  568. // backspacing speed
  569. self.backSpeed = self.options.backSpeed;
  570. // only backspace what doesn't match the previous string
  571. self.smartBackspace = self.options.smartBackspace;
  572. // amount of time to wait before backspacing
  573. self.backDelay = self.options.backDelay;
  574. // Fade out instead of backspace
  575. self.fadeOut = self.options.fadeOut;
  576. self.fadeOutClass = self.options.fadeOutClass;
  577. self.fadeOutDelay = self.options.fadeOutDelay;
  578. // variable to check whether typing is currently paused
  579. self.isPaused = false;
  580. // input strings of text
  581. self.strings = self.options.strings.map(function (s) {
  582. return s.trim();
  583. });
  584. // div containing strings
  585. if (typeof self.options.stringsElement === 'string') {
  586. self.stringsElement = document.querySelector(self.options.stringsElement);
  587. } else {
  588. self.stringsElement = self.options.stringsElement;
  589. }
  590. if (self.stringsElement) {
  591. self.strings = [];
  592. self.stringsElement.style.display = 'none';
  593. var strings = Array.prototype.slice.apply(self.stringsElement.children);
  594. var stringsLength = strings.length;
  595. if (stringsLength) {
  596. for (var i = 0; i < stringsLength; i += 1) {
  597. var stringEl = strings[i];
  598. self.strings.push(stringEl.innerHTML.trim());
  599. }
  600. }
  601. }
  602. // character number position of current string
  603. self.strPos = 0;
  604. // current array position
  605. self.arrayPos = 0;
  606. // index of string to stop backspacing on
  607. self.stopNum = 0;
  608. // Looping logic
  609. self.loop = self.options.loop;
  610. self.loopCount = self.options.loopCount;
  611. self.curLoop = 0;
  612. // shuffle the strings
  613. self.shuffle = self.options.shuffle;
  614. // the order of strings
  615. self.sequence = [];
  616. self.pause = {
  617. status: false,
  618. typewrite: true,
  619. curString: '',
  620. curStrPos: 0
  621. };
  622. // When the typing is complete (when not looped)
  623. self.typingComplete = false;
  624. // Set the order in which the strings are typed
  625. for (var i in self.strings) {
  626. self.sequence[i] = i;
  627. }
  628. // If there is some text in the element
  629. self.currentElContent = this.getCurrentElContent(self);
  630. self.autoInsertCss = self.options.autoInsertCss;
  631. this.appendAnimationCss(self);
  632. }
  633. }, {
  634. key: 'getCurrentElContent',
  635. value: function getCurrentElContent(self) {
  636. var elContent = '';
  637. if (self.attr) {
  638. elContent = self.el.getAttribute(self.attr);
  639. } else if (self.isInput) {
  640. elContent = self.el.value;
  641. } else if (self.contentType === 'html') {
  642. elContent = self.el.innerHTML;
  643. } else {
  644. elContent = self.el.textContent;
  645. }
  646. return elContent;
  647. }
  648. }, {
  649. key: 'appendAnimationCss',
  650. value: function appendAnimationCss(self) {
  651. var cssDataName = 'data-typed-js-css';
  652. if (!self.autoInsertCss) {
  653. return;
  654. }
  655. if (!self.showCursor && !self.fadeOut) {
  656. return;
  657. }
  658. if (document.querySelector('[' + cssDataName + ']')) {
  659. return;
  660. }
  661. var css = document.createElement('style');
  662. css.type = 'text/css';
  663. css.setAttribute(cssDataName, true);
  664. var innerCss = '';
  665. if (self.showCursor) {
  666. 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 ';
  667. }
  668. if (self.fadeOut) {
  669. 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 ';
  670. }
  671. if (css.length === 0) {
  672. return;
  673. }
  674. css.innerHTML = innerCss;
  675. document.body.appendChild(css);
  676. }
  677. }]);
  678. return Initializer;
  679. })();
  680. exports['default'] = Initializer;
  681. var initializer = new Initializer();
  682. exports.initializer = initializer;
  683. /***/ }),
  684. /* 2 */
  685. /***/ (function(module, exports) {
  686. /**
  687. * Defaults & options
  688. * @returns {object} Typed defaults & options
  689. * @public
  690. */
  691. 'use strict';
  692. Object.defineProperty(exports, '__esModule', {
  693. value: true
  694. });
  695. var defaults = {
  696. /**
  697. * @property {array} strings strings to be typed
  698. * @property {string} stringsElement ID of element containing string children
  699. */
  700. strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
  701. stringsElement: null,
  702. /**
  703. * @property {number} typeSpeed type speed in milliseconds
  704. */
  705. typeSpeed: 0,
  706. /**
  707. * @property {number} startDelay time before typing starts in milliseconds
  708. */
  709. startDelay: 0,
  710. /**
  711. * @property {number} backSpeed backspacing speed in milliseconds
  712. */
  713. backSpeed: 0,
  714. /**
  715. * @property {boolean} smartBackspace only backspace what doesn't match the previous string
  716. */
  717. smartBackspace: true,
  718. /**
  719. * @property {boolean} shuffle shuffle the strings
  720. */
  721. shuffle: false,
  722. /**
  723. * @property {number} backDelay time before backspacing in milliseconds
  724. */
  725. backDelay: 700,
  726. /**
  727. * @property {boolean} fadeOut Fade out instead of backspace
  728. * @property {string} fadeOutClass css class for fade animation
  729. * @property {boolean} fadeOutDelay Fade out delay in milliseconds
  730. */
  731. fadeOut: false,
  732. fadeOutClass: 'typed-fade-out',
  733. fadeOutDelay: 500,
  734. /**
  735. * @property {boolean} loop loop strings
  736. * @property {number} loopCount amount of loops
  737. */
  738. loop: false,
  739. loopCount: Infinity,
  740. /**
  741. * @property {boolean} showCursor show cursor
  742. * @property {string} cursorChar character for cursor
  743. * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
  744. */
  745. showCursor: true,
  746. cursorChar: '|',
  747. autoInsertCss: true,
  748. /**
  749. * @property {string} attr attribute for typing
  750. * Ex: input placeholder, value, or just HTML text
  751. */
  752. attr: null,
  753. /**
  754. * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
  755. */
  756. bindInputFocusEvents: false,
  757. /**
  758. * @property {string} contentType 'html' or 'null' for plaintext
  759. */
  760. contentType: 'html',
  761. /**
  762. * Before it begins typing
  763. * @param {Typed} self
  764. */
  765. onBegin: function onBegin(self) {},
  766. /**
  767. * All typing is complete
  768. * @param {Typed} self
  769. */
  770. onComplete: function onComplete(self) {},
  771. /**
  772. * Before each string is typed
  773. * @param {number} arrayPos
  774. * @param {Typed} self
  775. */
  776. preStringTyped: function preStringTyped(arrayPos, self) {},
  777. /**
  778. * After each string is typed
  779. * @param {number} arrayPos
  780. * @param {Typed} self
  781. */
  782. onStringTyped: function onStringTyped(arrayPos, self) {},
  783. /**
  784. * During looping, after last string is typed
  785. * @param {Typed} self
  786. */
  787. onLastStringBackspaced: function onLastStringBackspaced(self) {},
  788. /**
  789. * Typing has been stopped
  790. * @param {number} arrayPos
  791. * @param {Typed} self
  792. */
  793. onTypingPaused: function onTypingPaused(arrayPos, self) {},
  794. /**
  795. * Typing has been started after being stopped
  796. * @param {number} arrayPos
  797. * @param {Typed} self
  798. */
  799. onTypingResumed: function onTypingResumed(arrayPos, self) {},
  800. /**
  801. * After reset
  802. * @param {Typed} self
  803. */
  804. onReset: function onReset(self) {},
  805. /**
  806. * After stop
  807. * @param {number} arrayPos
  808. * @param {Typed} self
  809. */
  810. onStop: function onStop(arrayPos, self) {},
  811. /**
  812. * After start
  813. * @param {number} arrayPos
  814. * @param {Typed} self
  815. */
  816. onStart: function onStart(arrayPos, self) {},
  817. /**
  818. * After destroy
  819. * @param {Typed} self
  820. */
  821. onDestroy: function onDestroy(self) {}
  822. };
  823. exports['default'] = defaults;
  824. module.exports = exports['default'];
  825. /***/ }),
  826. /* 3 */
  827. /***/ (function(module, exports) {
  828. /**
  829. * TODO: These methods can probably be combined somehow
  830. * Parse HTML tags & HTML Characters
  831. */
  832. 'use strict';
  833. Object.defineProperty(exports, '__esModule', {
  834. value: true
  835. });
  836. var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  837. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
  838. var HTMLParser = (function () {
  839. function HTMLParser() {
  840. _classCallCheck(this, HTMLParser);
  841. }
  842. _createClass(HTMLParser, [{
  843. key: 'typeHtmlChars',
  844. /**
  845. * Type HTML tags & HTML Characters
  846. * @param {string} curString Current string
  847. * @param {number} curStrPos Position in current string
  848. * @param {Typed} self instance of Typed
  849. * @returns {number} a new string position
  850. * @private
  851. */
  852. value: function typeHtmlChars(curString, curStrPos, self) {
  853. if (self.contentType !== 'html') return curStrPos;
  854. var curChar = curString.substr(curStrPos).charAt(0);
  855. if (curChar === '<' || curChar === '&') {
  856. var endTag = '';
  857. if (curChar === '<') {
  858. endTag = '>';
  859. } else {
  860. endTag = ';';
  861. }
  862. while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
  863. curStrPos++;
  864. if (curStrPos + 1 > curString.length) {
  865. break;
  866. }
  867. }
  868. curStrPos++;
  869. }
  870. return curStrPos;
  871. }
  872. /**
  873. * Backspace HTML tags and HTML Characters
  874. * @param {string} curString Current string
  875. * @param {number} curStrPos Position in current string
  876. * @param {Typed} self instance of Typed
  877. * @returns {number} a new string position
  878. * @private
  879. */
  880. }, {
  881. key: 'backSpaceHtmlChars',
  882. value: function backSpaceHtmlChars(curString, curStrPos, self) {
  883. if (self.contentType !== 'html') return curStrPos;
  884. var curChar = curString.substr(curStrPos).charAt(0);
  885. if (curChar === '>' || curChar === ';') {
  886. var endTag = '';
  887. if (curChar === '>') {
  888. endTag = '<';
  889. } else {
  890. endTag = '&';
  891. }
  892. while (curString.substr(curStrPos - 1).charAt(0) !== endTag) {
  893. curStrPos--;
  894. if (curStrPos < 0) {
  895. break;
  896. }
  897. }
  898. curStrPos--;
  899. }
  900. return curStrPos;
  901. }
  902. }]);
  903. return HTMLParser;
  904. })();
  905. exports['default'] = HTMLParser;
  906. var htmlParser = new HTMLParser();
  907. exports.htmlParser = htmlParser;
  908. /***/ })
  909. /******/ ])
  910. });
  911. ;