|
1 | | -/*! superplaceholder.js - v0.1.1 - 2016-03-06 |
| 1 | +/*! superplaceholder.js - v0.1.2 - 2018-03-28 |
2 | 2 | * http://kushagragour.in/lab/superplaceholderjs/ |
3 | | -* Copyright (c) 2016 Kushagra Gour; Licensed CC-BY-ND-4.0 */ |
| 3 | +* Copyright (c) 2018 Kushagra Gour; Licensed CC-BY-ND-4.0 */ |
4 | 4 |
|
5 | | -;(function () { |
6 | | - var test = document.createElement('input'); |
7 | | - var isPlaceHolderSupported = ('placeholder' in test); |
| 5 | +(function() { |
| 6 | + var test = document.createElement('input'); |
| 7 | + var isPlaceHolderSupported = 'placeholder' in test; |
8 | 8 |
|
9 | | - // Helpers |
10 | | - function extend(obj1, obj2) { |
11 | | - var obj = {}; |
12 | | - for (var key in obj1) { |
13 | | - obj[key] = obj2[key] === undefined ? obj1[key] : obj2[key]; |
14 | | - } |
15 | | - return obj; |
16 | | - } |
| 9 | + // Helpers |
| 10 | + function extend(obj1, obj2) { |
| 11 | + var obj = {}; |
| 12 | + for (var key in obj1) { |
| 13 | + obj[key] = obj2[key] === undefined ? obj1[key] : obj2[key]; |
| 14 | + } |
| 15 | + return obj; |
| 16 | + } |
17 | 17 |
|
18 | | - var defaults = { |
19 | | - letterDelay: 100, //milliseconds |
20 | | - sentenceDelay: 1000, //milliseconds |
21 | | - loop: false, |
22 | | - startOnFocus: true, |
23 | | - shuffle: false, |
24 | | - showCursor: true, |
25 | | - cursor: '|' |
26 | | - }; |
| 18 | + var defaults = { |
| 19 | + letterDelay: 100, //milliseconds |
| 20 | + sentenceDelay: 1000, //milliseconds |
| 21 | + loop: false, |
| 22 | + startOnFocus: true, |
| 23 | + shuffle: false, |
| 24 | + showCursor: true, |
| 25 | + cursor: '|' |
| 26 | + }; |
27 | 27 |
|
28 | | - // Constructor: PlaceHolder |
29 | | - function PlaceHolder(el, texts, options) { |
30 | | - this.el = el; |
31 | | - this.texts = texts; |
32 | | - options = options || {}; |
33 | | - this.options = extend(defaults, options); |
34 | | - this.timeouts = []; |
35 | | - this.begin(); |
36 | | - } |
| 28 | + // Constructor: PlaceHolder |
| 29 | + function PlaceHolder(el, texts, options) { |
| 30 | + this.el = el; |
| 31 | + this.texts = texts; |
| 32 | + options = options || {}; |
| 33 | + this.options = extend(defaults, options); |
| 34 | + this.timeouts = []; |
| 35 | + this.begin(); |
| 36 | + } |
37 | 37 |
|
38 | | - PlaceHolder.prototype.begin = function() { |
39 | | - var self = this, |
40 | | - temp, |
41 | | - randomIndex; |
42 | | - self.originalPlaceholder = self.el.getAttribute('placeholder'); |
43 | | - if (self.options.shuffle) { |
44 | | - for (var i = self.texts.length; i--;) { |
45 | | - randomIndex = ~~(Math.random() * i); |
46 | | - temp = self.texts[randomIndex]; |
47 | | - self.texts[randomIndex] = self.texts[i]; |
48 | | - self.texts[i] = temp; |
49 | | - } |
50 | | - } |
| 38 | + PlaceHolder.prototype.begin = function() { |
| 39 | + var self = this, |
| 40 | + temp, |
| 41 | + randomIndex; |
| 42 | + self.originalPlaceholder = self.el.getAttribute('placeholder'); |
| 43 | + if (self.options.shuffle) { |
| 44 | + for (var i = self.texts.length; i--; ) { |
| 45 | + randomIndex = ~~(Math.random() * i); |
| 46 | + temp = self.texts[randomIndex]; |
| 47 | + self.texts[randomIndex] = self.texts[i]; |
| 48 | + self.texts[i] = temp; |
| 49 | + } |
| 50 | + } |
51 | 51 |
|
52 | | - if (self.options.startOnFocus) { |
53 | | - self.el.addEventListener('focus', function () { |
54 | | - self.processText(0); |
55 | | - }); |
56 | | - self.el.addEventListener('blur', function () { |
57 | | - self.cleanUp(); |
58 | | - }); |
59 | | - } |
60 | | - else { |
61 | | - self.processText(0); |
62 | | - } |
63 | | - }; |
| 52 | + if (self.options.startOnFocus) { |
| 53 | + self.el.addEventListener('focus', function() { |
| 54 | + self.processText(0); |
| 55 | + }); |
| 56 | + self.el.addEventListener('blur', function() { |
| 57 | + self.cleanUp(); |
| 58 | + }); |
| 59 | + } else { |
| 60 | + self.processText(0); |
| 61 | + } |
| 62 | + }; |
64 | 63 |
|
65 | | - PlaceHolder.prototype.cleanUp = function () { |
66 | | - // Stop timeouts |
67 | | - for (var i = this.timeouts.length; i--;) { |
68 | | - clearTimeout(this.timeouts[i]); |
69 | | - } |
70 | | - this.el.setAttribute('placeholder', this.originalPlaceholder); |
71 | | - this.timeouts.length = 0; |
72 | | - }; |
| 64 | + PlaceHolder.prototype.cleanUp = function() { |
| 65 | + // Stop timeouts |
| 66 | + for (var i = this.timeouts.length; i--; ) { |
| 67 | + clearTimeout(this.timeouts[i]); |
| 68 | + } |
| 69 | + // null means there was no placeholder attribute initially. |
| 70 | + if (this.originalPlaceholder === null) { |
| 71 | + this.el.removeAttribute('placeholder'); |
| 72 | + } else { |
| 73 | + this.el.setAttribute('placeholder', this.originalPlaceholder); |
| 74 | + } |
| 75 | + this.timeouts.length = 0; |
| 76 | + }; |
73 | 77 |
|
74 | | - PlaceHolder.prototype.typeString = function (str, callback) { |
75 | | - var self = this, |
76 | | - timeout; |
| 78 | + PlaceHolder.prototype.typeString = function(str, callback) { |
| 79 | + var self = this, |
| 80 | + timeout; |
77 | 81 |
|
78 | | - if (!str) { return false; } |
79 | | - function setTimeoutCallback(index) { |
80 | | - // Add cursor `|` after current substring unless we are showing last |
81 | | - // character of the string. |
82 | | - self.el.setAttribute('placeholder', str.substr(0, index + 1) + (index === str.length - 1 || !self.options.showCursor ? '' : self.options.cursor)); |
83 | | - if (index === str.length - 1) { |
84 | | - callback(); |
85 | | - } |
86 | | - } |
87 | | - for (var i = 0; i < str.length; i++) { |
88 | | - timeout = setTimeout(setTimeoutCallback, i * self.options.letterDelay, i); |
89 | | - self.timeouts.push(timeout); |
90 | | - } |
91 | | - }; |
| 82 | + if (!str) { |
| 83 | + return false; |
| 84 | + } |
| 85 | + function setTimeoutCallback(index) { |
| 86 | + // Add cursor `|` after current substring unless we are showing last |
| 87 | + // character of the string. |
| 88 | + self.el.setAttribute( |
| 89 | + 'placeholder', |
| 90 | + str.substr(0, index + 1) + |
| 91 | + (index === str.length - 1 || !self.options.showCursor |
| 92 | + ? '' |
| 93 | + : self.options.cursor) |
| 94 | + ); |
| 95 | + if (index === str.length - 1) { |
| 96 | + callback(); |
| 97 | + } |
| 98 | + } |
| 99 | + for (var i = 0; i < str.length; i++) { |
| 100 | + timeout = setTimeout(setTimeoutCallback, i * self.options.letterDelay, i); |
| 101 | + self.timeouts.push(timeout); |
| 102 | + } |
| 103 | + }; |
92 | 104 |
|
93 | | - PlaceHolder.prototype.processText = function(index) { |
94 | | - var self = this, |
95 | | - timeout; |
| 105 | + PlaceHolder.prototype.processText = function(index) { |
| 106 | + var self = this, |
| 107 | + timeout; |
96 | 108 |
|
97 | | - self.typeString(self.texts[index], function () { |
98 | | - timeout = setTimeout(function () { |
99 | | - self.processText(self.options.loop ? ((index + 1) % self.texts.length) : (index + 1)); |
100 | | - }, self.options.sentenceDelay); |
101 | | - self.timeouts.push(timeout); |
102 | | - }); |
103 | | - }; |
| 109 | + self.typeString(self.texts[index], function() { |
| 110 | + timeout = setTimeout(function() { |
| 111 | + self.processText( |
| 112 | + self.options.loop ? (index + 1) % self.texts.length : index + 1 |
| 113 | + ); |
| 114 | + }, self.options.sentenceDelay); |
| 115 | + self.timeouts.push(timeout); |
| 116 | + }); |
| 117 | + }; |
104 | 118 |
|
105 | | - var superplaceholder = function (params) { |
106 | | - if (!isPlaceHolderSupported) { return; } |
107 | | - new PlaceHolder(params.el, params.sentences, params.options); |
108 | | - }; |
| 119 | + var superplaceholder = function(params) { |
| 120 | + if (!isPlaceHolderSupported) { |
| 121 | + return; |
| 122 | + } |
| 123 | + new PlaceHolder(params.el, params.sentences, params.options); |
| 124 | + }; |
109 | 125 |
|
110 | | - // open to the world. |
111 | | - // commonjs |
112 | | - if( typeof exports === 'object' ) { |
113 | | - module.exports = superplaceholder; |
114 | | - } |
115 | | - // AMD module |
116 | | - else if( typeof define === 'function' && define.amd ) { |
117 | | - define(function () { |
118 | | - return superplaceholder; |
119 | | - }); |
120 | | - } |
121 | | - // Browser global |
122 | | - else { |
123 | | - window.superplaceholder = superplaceholder; |
124 | | - } |
| 126 | + // open to the world. |
| 127 | + // commonjs |
| 128 | + if (typeof exports === 'object') { |
| 129 | + module.exports = superplaceholder; |
| 130 | + } else if (typeof define === 'function' && define.amd) { |
| 131 | + // AMD module |
| 132 | + define(function() { |
| 133 | + return superplaceholder; |
| 134 | + }); |
| 135 | + } else { |
| 136 | + // Browser global |
| 137 | + window.superplaceholder = superplaceholder; |
| 138 | + } |
125 | 139 | })(); |
0 commit comments