|
1 | 1 | /** |
2 | | -* PleaseWait |
| 2 | +* please-wait |
3 | 3 | * Display a nice loading screen while your app loads |
4 | 4 |
|
5 | 5 | * @author Pathgather <tech@pathgather.com> |
6 | 6 | * @copyright Pathgather 2015 |
7 | 7 | * @license MIT <http://opensource.org/licenses/mit-license.php> |
8 | 8 | * @link https://github.com/Pathgather/please-wait |
9 | | -* @module pleaseWait |
10 | | -* @version 0.0.3 |
| 9 | +* @module please-wait |
| 10 | +* @version 0.0.4 |
11 | 11 | */ |
12 | 12 | (function(root, factory) { |
13 | 13 | if (typeof exports === "object") { |
|
18 | 18 | factory(root); |
19 | 19 | } |
20 | 20 | })(this, function(exports) { |
21 | | - var PleaseWait, animationEvent, animationSupport, domPrefixes, elm, key, pfx, pleaseWait, transEndEventNames, transitionEvent, transitionSupport, val, _i, _len; |
| 21 | + var PleaseWait, addClass, animationEvent, animationSupport, domPrefixes, elm, key, pfx, pleaseWait, removeClass, transEndEventNames, transitionEvent, transitionSupport, val, _i, _len; |
22 | 22 | elm = document.createElement('fakeelement'); |
23 | 23 | animationSupport = false; |
24 | 24 | transitionSupport = false; |
|
65 | 65 | } |
66 | 66 | } |
67 | 67 | } |
| 68 | + addClass = function(classname, elem) { |
| 69 | + if (elem.classList) { |
| 70 | + return elem.classList.add(classname); |
| 71 | + } else { |
| 72 | + return elem.className += " " + classname; |
| 73 | + } |
| 74 | + }; |
| 75 | + removeClass = function(classname, elem) { |
| 76 | + if (elem.classList) { |
| 77 | + return elem.classList.remove(classname); |
| 78 | + } else { |
| 79 | + return elem.className = elem.className.replace(classname, "").trim(); |
| 80 | + } |
| 81 | + }; |
68 | 82 | PleaseWait = (function() { |
69 | 83 | PleaseWait._defaultOptions = { |
70 | 84 | backgroundColor: null, |
|
100 | 114 | if (this._logoElem != null) { |
101 | 115 | this._logoElem.src = this.options.logo; |
102 | 116 | } |
103 | | - document.body.className += " pg-loading"; |
| 117 | + removeClass("pg-loaded", document.body); |
| 118 | + addClass("pg-loading", document.body); |
104 | 119 | document.body.appendChild(this._loadingElem); |
105 | | - this._loadingElem.className += " pg-loading"; |
| 120 | + addClass("pg-loading", this._loadingElem); |
106 | 121 | this._onLoadedCallback = this.options.onLoadedCallback; |
107 | 122 | listener = (function(_this) { |
108 | 123 | return function(evt) { |
109 | 124 | _this.loaded = true; |
110 | 125 | _this._readyToShowLoadingHtml = true; |
111 | | - _this._loadingHtmlElem.className += " pg-loaded"; |
| 126 | + addClass("pg-loaded", _this._loadingHtmlElem); |
112 | 127 | if (animationSupport) { |
113 | 128 | _this._loadingHtmlElem.removeEventListener(animationEvent, listener); |
114 | 129 | } |
|
132 | 147 | this._loadingHtmlListener = (function(_this) { |
133 | 148 | return function() { |
134 | 149 | _this._readyToShowLoadingHtml = true; |
135 | | - _this._loadingHtmlElem.className = _this._loadingHtmlElem.className.replace(" pg-loading ", ""); |
| 150 | + removeClass("pg-loading", _this._loadingHtmlElem); |
136 | 151 | if (transitionSupport) { |
137 | 152 | _this._loadingHtmlElem.removeEventListener(transitionEvent, _this._loadingHtmlListener); |
138 | 153 | } |
|
144 | 159 | this._removingHtmlListener = (function(_this) { |
145 | 160 | return function() { |
146 | 161 | _this._loadingHtmlElem.innerHTML = _this._loadingHtmlToDisplay.shift(); |
147 | | - _this._loadingHtmlElem.className = _this._loadingHtmlElem.className.replace(" pg-removing ", " pg-loading "); |
| 162 | + removeClass("pg-removing", _this._loadingHtmlElem); |
| 163 | + addClass("pg-loading", _this._loadingHtmlElem); |
148 | 164 | if (transitionSupport) { |
149 | 165 | _this._loadingHtmlElem.removeEventListener(transitionEvent, _this._removingHtmlListener); |
150 | 166 | return _this._loadingHtmlElem.addEventListener(transitionEvent, _this._loadingHtmlListener); |
|
222 | 238 | this._readyToShowLoadingHtml = false; |
223 | 239 | this._loadingHtmlElem.removeEventListener(transitionEvent, this._loadingHtmlListener); |
224 | 240 | this._loadingHtmlElem.removeEventListener(transitionEvent, this._removingHtmlListener); |
225 | | - this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-loading ", "").replace(" pg-removing ", ""); |
| 241 | + removeClass("pg-loading", this._loadingHtmlElem); |
| 242 | + removeClass("pg-removing", this._loadingHtmlElem); |
226 | 243 | if (transitionSupport) { |
227 | | - this._loadingHtmlElem.className += " pg-removing "; |
| 244 | + addClass("pg-removing", this._loadingHtmlElem); |
228 | 245 | return this._loadingHtmlElem.addEventListener(transitionEvent, this._removingHtmlListener); |
229 | 246 | } else { |
230 | 247 | return this._removingHtmlListener(); |
|
239 | 256 | if (this._loadingElem == null) { |
240 | 257 | return; |
241 | 258 | } |
242 | | - document.body.className += " pg-loaded"; |
| 259 | + addClass("pg-loaded", document.body); |
243 | 260 | if (typeof this._onLoadedCallback === "function") { |
244 | 261 | this._onLoadedCallback.apply(this); |
245 | 262 | } |
246 | 263 | listener = (function(_this) { |
247 | 264 | return function() { |
248 | 265 | document.body.removeChild(_this._loadingElem); |
249 | | - document.body.className = document.body.className.replace("pg-loading", ""); |
| 266 | + removeClass("pg-loading", document.body); |
250 | 267 | if (animationSupport) { |
251 | 268 | _this._loadingElem.removeEventListener(animationEvent, listener); |
252 | 269 | } |
253 | 270 | return _this._loadingElem = null; |
254 | 271 | }; |
255 | 272 | })(this); |
256 | 273 | if (!immediately && animationSupport) { |
257 | | - this._loadingElem.className += " pg-loaded"; |
| 274 | + addClass("pg-loaded", document.body); |
258 | 275 | return this._loadingElem.addEventListener(animationEvent, listener); |
259 | 276 | } else { |
260 | 277 | return listener(); |
|
0 commit comments