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