izitoast 1.2.0 → 1.4.0

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 (5) hide show
  1. checksums.yaml +4 -4
  2. data/lib/izitoast/version.rb +1 -1
  3. data/vendor/assets/javascripts/iziToast.js +1242 -1089
  4. data/vendor/assets/stylesheets/iziToast.css +51 -25
  5. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 21e2c9991adaafe4f9aa92bf1d3bad62a94dd48a
4
- data.tar.gz: 48f3507dd14d5eb13a8cf6e1b9a950d8597152f9
3
+ metadata.gz: 0da70a335ae32500fa33c40b1fa30179b3fcaa41
4
+ data.tar.gz: 64053920cc923817b29617c2c82410452121709b
5
5
  SHA512:
6
- metadata.gz: 49b942abd214ae947fda56ebc2b233fa37fc313ca245776f813856967aabec92ba966b750f670fb2009aa88a037283551173633e292a600da955f2d1d3833779
7
- data.tar.gz: 50448bde1f7a9cead6089f1cf6f82c97b87ae45fe26b65cce9ec0933372191c26e608d5cf6a6a7eccbd876b40c6e66741527d0430e3eec15f462647e58491a11
6
+ metadata.gz: 41bb2d761b7883c2a33ad83ba476a9aca98fcce3acfa612bdadb981ccd51818f32dcda4da81e89637d7a1dcb3fc627e047598d601cf8334e049e49bb907914c0
7
+ data.tar.gz: 07a259ca2b1f0a7e96aa8fab1c106b665d73b2adcebd21859bcd8650dd3d4b0c2b8ff8930ee66fab9e1b535f1663808633f46dc162722fad57046f876899bb31
data/lib/izitoast/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Izitoast
2
- VERSION = "1.2.0"
2
+ VERSION = "1.4.0"
3
3
  end
data/vendor/assets/javascripts/iziToast.js CHANGED
@@ -1,1139 +1,1292 @@
1
1
  /*
2
- * iziToast | v1.2.0
2
+ * iziToast | v1.4.0
3
3
  * http://izitoast.marcelodolce.com
4
4
  * by Marcelo Dolce.
5
5
  */
6
6
  (function (root, factory) {
7
- if(typeof define === 'function' && define.amd) {
8
- define([], factory(root));
9
- } else if(typeof exports === 'object') {
10
- module.exports = factory(root);
11
- } else {
12
- root.iziToast = factory(root);
13
- }
7
+ if(typeof define === 'function' && define.amd) {
8
+ define([], factory(root));
9
+ } else if(typeof exports === 'object') {
10
+ module.exports = factory(root);
11
+ } else {
12
+ root.iziToast = factory(root);
13
+ }
14
14
  })(typeof global !== 'undefined' ? global : window || this.window || this.global, function (root) {
15
15
 
16
- 'use strict';
17
-
18
- //
19
- // Variables
20
- //
21
- var $iziToast = {},
22
- PLUGIN_NAME = 'iziToast',
23
- BODY = document.querySelector('body'),
24
- ISMOBILE = (/Mobi/.test(navigator.userAgent)) ? true : false,
25
- ISCHROME = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
26
- ISFIREFOX = typeof InstallTrigger !== 'undefined',
27
- ACCEPTSTOUCH = 'ontouchstart' in document.documentElement,
28
- POSITIONS = ['bottomRight','bottomLeft','bottomCenter','topRight','topLeft','topCenter','center'],
29
- THEMES = {
30
- info: {
31
- color: 'blue',
32
- icon: 'ico-info'
33
- },
34
- success: {
35
- color: 'green',
36
- icon: 'ico-success'
37
- },
38
- warning: {
39
- color: 'orange',
40
- icon: 'ico-warning'
41
- },
42
- error: {
43
- color: 'red',
44
- icon: 'ico-error'
45
- },
46
- question: {
47
- color: 'yellow',
48
- icon: 'ico-question'
49
- }
50
- },
51
- MOBILEWIDTH = 568,
52
- CONFIG = {};
53
-
54
-
55
- // Default settings
56
- var defaults = {
57
- id: null,
58
- class: '',
59
- title: '',
60
- titleColor: '',
61
- titleSize: '',
62
- titleLineHeight: '',
63
- message: '',
64
- messageColor: '',
65
- messageSize: '',
66
- messageLineHeight: '',
67
- backgroundColor: '',
68
- theme: 'light', // dark
69
- color: '', // blue, red, green, yellow
70
- icon: '',
71
- iconText: '',
72
- iconColor: '',
73
- image: '',
74
- imageWidth: 50,
75
- maxWidth: null,
76
- zindex: null,
77
- layout: 1,
78
- balloon: false,
79
- close: true,
80
- closeOnEscape: false,
81
- rtl: false,
82
- position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
83
- target: '',
84
- targetFirst: true,
85
- toastOnce: false,
86
- timeout: 5000,
87
- animateInside: true,
88
- drag: true,
89
- pauseOnHover: true,
90
- resetOnHover: false,
91
- progressBar: true,
92
- progressBarColor: '',
93
- progressBarEasing: 'linear',
94
- overlay: false,
95
- overlayClose: false,
96
- overlayColor: 'rgba(0, 0, 0, 0.6)',
97
- transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
98
- transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
99
- transitionInMobile: 'fadeInUp',
100
- transitionOutMobile: 'fadeOutDown',
101
- buttons: {},
102
- onOpening: function () {},
103
- onOpened: function () {},
104
- onClosing: function () {},
105
- onClosed: function () {}
106
- };
107
-
108
- //
109
- // Methods
110
- //
111
-
112
-
113
- /**
114
- * Polyfill for remove() method
115
- */
116
- if(!('remove' in Element.prototype)) {
117
- Element.prototype.remove = function() {
118
- if(this.parentNode) {
119
- this.parentNode.removeChild(this);
120
- }
121
- };
122
- }
123
-
124
- /*
16
+ 'use strict';
17
+
18
+ //
19
+ // Variables
20
+ //
21
+ var $iziToast = {},
22
+ PLUGIN_NAME = 'iziToast',
23
+ BODY = document.querySelector('body'),
24
+ ISMOBILE = (/Mobi/.test(navigator.userAgent)) ? true : false,
25
+ ISCHROME = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
26
+ ISFIREFOX = typeof InstallTrigger !== 'undefined',
27
+ ACCEPTSTOUCH = 'ontouchstart' in document.documentElement,
28
+ POSITIONS = ['bottomRight','bottomLeft','bottomCenter','topRight','topLeft','topCenter','center'],
29
+ THEMES = {
30
+ info: {
31
+ color: 'blue',
32
+ icon: 'ico-info'
33
+ },
34
+ success: {
35
+ color: 'green',
36
+ icon: 'ico-success'
37
+ },
38
+ warning: {
39
+ color: 'orange',
40
+ icon: 'ico-warning'
41
+ },
42
+ error: {
43
+ color: 'red',
44
+ icon: 'ico-error'
45
+ },
46
+ question: {
47
+ color: 'yellow',
48
+ icon: 'ico-question'
49
+ }
50
+ },
51
+ MOBILEWIDTH = 568,
52
+ CONFIG = {};
53
+
54
+ $iziToast.children = {};
55
+
56
+ // Default settings
57
+ var defaults = {
58
+ id: null,
59
+ class: '',
60
+ title: '',
61
+ titleColor: '',
62
+ titleSize: '',
63
+ titleLineHeight: '',
64
+ message: '',
65
+ messageColor: '',
66
+ messageSize: '',
67
+ messageLineHeight: '',
68
+ backgroundColor: '',
69
+ theme: 'light', // dark
70
+ color: '', // blue, red, green, yellow
71
+ icon: '',
72
+ iconText: '',
73
+ iconColor: '',
74
+ iconUrl: null,
75
+ image: '',
76
+ imageWidth: 50,
77
+ maxWidth: null,
78
+ zindex: null,
79
+ layout: 1,
80
+ balloon: false,
81
+ close: true,
82
+ closeOnEscape: false,
83
+ closeOnClick: false,
84
+ displayMode: 0,
85
+ position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
86
+ target: '',
87
+ targetFirst: true,
88
+ timeout: 5000,
89
+ rtl: false,
90
+ animateInside: true,
91
+ drag: true,
92
+ pauseOnHover: true,
93
+ resetOnHover: false,
94
+ progressBar: true,
95
+ progressBarColor: '',
96
+ progressBarEasing: 'linear',
97
+ overlay: false,
98
+ overlayClose: false,
99
+ overlayColor: 'rgba(0, 0, 0, 0.6)',
100
+ transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
101
+ transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
102
+ transitionInMobile: 'fadeInUp',
103
+ transitionOutMobile: 'fadeOutDown',
104
+ buttons: {},
105
+ inputs: {},
106
+ onOpening: function () {},
107
+ onOpened: function () {},
108
+ onClosing: function () {},
109
+ onClosed: function () {}
110
+ };
111
+
112
+ //
113
+ // Methods
114
+ //
115
+
116
+
117
+ /**
118
+ * Polyfill for remove() method
119
+ */
120
+ if(!('remove' in Element.prototype)) {
121
+ Element.prototype.remove = function() {
122
+ if(this.parentNode) {
123
+ this.parentNode.removeChild(this);
124
+ }
125
+ };
126
+ }
127
+
128
+ /*
125
129
  * Polyfill for CustomEvent for IE >= 9
126
130
  * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
127
131
  */
128
- if(typeof window.CustomEvent !== 'function') {
129
- var CustomEventPolyfill = function (event, params) {
130
- params = params || { bubbles: false, cancelable: false, detail: undefined };
131
- var evt = document.createEvent('CustomEvent');
132
- evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
133
- return evt;
134
- };
135
-
136
- CustomEventPolyfill.prototype = window.Event.prototype;
137
-
138
- window.CustomEvent = CustomEventPolyfill;
139
- }
140
-
141
- /**
142
- * A simple forEach() implementation for Arrays, Objects and NodeLists
143
- * @private
144
- * @param {Array|Object|NodeList} collection Collection of items to iterate
145
- * @param {Function} callback Callback function for each iteration
146
- * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
147
- */
148
- var forEach = function (collection, callback, scope) {
149
- if(Object.prototype.toString.call(collection) === '[object Object]') {
150
- for (var prop in collection) {
151
- if(Object.prototype.hasOwnProperty.call(collection, prop)) {
152
- callback.call(scope, collection[prop], prop, collection);
153
- }
154
- }
155
- } else {
156
- if(collection){
157
- for (var i = 0, len = collection.length; i < len; i++) {
158
- callback.call(scope, collection[i], i, collection);
159
- }
160
- }
161
- }
162
- };
163
-
164
- /**
165
- * Merge defaults with user options
166
- * @private
167
- * @param {Object} defaults Default settings
168
- * @param {Object} options User options
169
- * @returns {Object} Merged values of defaults and options
170
- */
171
- var extend = function (defaults, options) {
172
- var extended = {};
173
- forEach(defaults, function (value, prop) {
174
- extended[prop] = defaults[prop];
175
- });
176
- forEach(options, function (value, prop) {
177
- extended[prop] = options[prop];
178
- });
179
- return extended;
180
- };
181
-
182
-
183
- /**
184
- * Create a fragment DOM elements
185
- * @private
186
- */
187
- var createFragElem = function(htmlStr) {
188
- var frag = document.createDocumentFragment(),
189
- temp = document.createElement('div');
190
- temp.innerHTML = htmlStr;
191
- while (temp.firstChild) {
192
- frag.appendChild(temp.firstChild);
193
- }
194
- return frag;
195
- };
196
-
197
-
198
- /**
199
- * Check if is a color
200
- * @private
201
- */
202
- var isColor = function(color){
203
- if( color.substring(0,1) == '#' || color.substring(0,3) == 'rgb' || color.substring(0,3) == 'hsl' ){
204
- return true;
205
- } else {
206
- return false;
207
- }
208
- };
209
-
210
-
211
- /**
212
- * Check if is a Base64 string
213
- * @private
214
- */
215
- var isBase64 = function(str) {
216
- try {
217
- return btoa(atob(str)) == str;
218
- } catch (err) {
219
- return false;
220
- }
221
- };
222
-
223
-
224
- /**
225
- * Drag method of toasts
226
- * @private
227
- */
228
- var drag = function() {
229
-
230
- return {
231
- move: function(toast, instance, settings, xpos) {
232
-
233
- var opacity,
234
- opacityRange = 0.3,
235
- distance = 180;
236
-
237
- if(xpos !== 0){
238
-
239
- toast.classList.add(PLUGIN_NAME+'-dragged');
240
-
241
- toast.style.transform = 'translateX('+xpos + 'px)';
242
-
243
- if(xpos > 0){
244
- opacity = (distance-xpos) / distance;
245
- if(opacity < opacityRange){
246
- instance.hide(toast, extend(settings, { transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight' }), 'drag');
247
- }
248
- } else {
249
- opacity = (distance+xpos) / distance;
250
- if(opacity < opacityRange){
251
- instance.hide(toast, extend(settings, { transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft' }), 'drag');
252
- }
253
- }
254
- toast.style.opacity = opacity;
255
-
256
- if(opacity < opacityRange){
257
-
258
- if(ISCHROME || ISFIREFOX)
259
- toast.style.left = xpos+'px';
260
-
261
- toast.parentNode.style.opacity = opacityRange;
262
-
263
- this.stopMoving(toast, null);
264
- }
265
- }
266
-
267
-
268
- },
269
- startMoving: function(toast, instance, settings, e) {
270
-
271
- e = e || window.event;
272
- var posX = ((ACCEPTSTOUCH) ? e.touches[0].clientX : e.clientX),
273
- toastLeft = toast.style.transform.replace('px)', '');
274
- toastLeft = toastLeft.replace('translateX(', '');
275
- var offsetX = posX - toastLeft;
276
-
277
- toast.classList.remove(settings.transitionIn);
278
- toast.classList.remove(settings.transitionInMobile);
279
- toast.style.transition = '';
280
-
281
- if(ACCEPTSTOUCH) {
282
- document.ontouchmove = function(e) {
283
- e.preventDefault();
284
- e = e || window.event;
285
- var posX = e.touches[0].clientX,
286
- finalX = posX - offsetX;
287
- drag.move(toast, instance, settings, finalX);
288
- };
289
- } else {
290
- document.onmousemove = function(e) {
291
- e.preventDefault();
292
- e = e || window.event;
293
- var posX = e.clientX,
294
- finalX = posX - offsetX;
295
- drag.move(toast, instance, settings, finalX);
296
- };
297
- }
298
-
299
- },
300
- stopMoving: function(toast, e) {
301
-
302
- if(ACCEPTSTOUCH) {
303
- document.ontouchmove = function() {};
304
- } else {
305
- document.onmousemove = function() {};
306
- }
307
-
308
- toast.style.opacity = '';
309
- toast.style.transform = '';
310
-
311
- if(toast.classList.contains(PLUGIN_NAME+'-dragged')){
312
-
313
- toast.classList.remove(PLUGIN_NAME+'-dragged');
314
-
315
- toast.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
316
- setTimeout(function() {
317
- toast.style.transition = '';
318
- }, 400);
319
- }
320
-
321
- }
322
- };
323
-
324
- }();
325
-
326
-
327
- /**
328
- * Destroy the current initialization.
329
- * @public
330
- */
331
- $iziToast.destroy = function () {
332
-
333
- forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-wrapper'), function(element, index) {
334
- element.remove();
335
- });
336
-
337
- forEach(document.querySelectorAll('.'+PLUGIN_NAME), function(element, index) {
338
- element.remove();
339
- });
340
-
341
- // Remove event listeners
342
- document.removeEventListener(PLUGIN_NAME+'-opened', {}, false);
343
- document.removeEventListener(PLUGIN_NAME+'-opening', {}, false);
344
- document.removeEventListener(PLUGIN_NAME+'-closing', {}, false);
345
- document.removeEventListener(PLUGIN_NAME+'-closed', {}, false);
346
- document.removeEventListener('keyup', {}, false);
347
-
348
- // Reset variables
349
- CONFIG = {};
350
- };
351
-
352
- /**
353
- * Initialize Plugin
354
- * @public
355
- * @param {Object} options User settings
356
- */
357
- $iziToast.settings = function (options) {
132
+ if(typeof window.CustomEvent !== 'function') {
133
+ var CustomEventPolyfill = function (event, params) {
134
+ params = params || { bubbles: false, cancelable: false, detail: undefined };
135
+ var evt = document.createEvent('CustomEvent');
136
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
137
+ return evt;
138
+ };
139
+
140
+ CustomEventPolyfill.prototype = window.Event.prototype;
141
+
142
+ window.CustomEvent = CustomEventPolyfill;
143
+ }
144
+
145
+ /**
146
+ * A simple forEach() implementation for Arrays, Objects and NodeLists
147
+ * @private
148
+ * @param {Array|Object|NodeList} collection Collection of items to iterate
149
+ * @param {Function} callback Callback function for each iteration
150
+ * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
151
+ */
152
+ var forEach = function (collection, callback, scope) {
153
+ if(Object.prototype.toString.call(collection) === '[object Object]') {
154
+ for (var prop in collection) {
155
+ if(Object.prototype.hasOwnProperty.call(collection, prop)) {
156
+ callback.call(scope, collection[prop], prop, collection);
157
+ }
158
+ }
159
+ } else {
160
+ if(collection){
161
+ for (var i = 0, len = collection.length; i < len; i++) {
162
+ callback.call(scope, collection[i], i, collection);
163
+ }
164
+ }
165
+ }
166
+ };
167
+
168
+ /**
169
+ * Merge defaults with user options
170
+ * @private
171
+ * @param {Object} defaults Default settings
172
+ * @param {Object} options User options
173
+ * @returns {Object} Merged values of defaults and options
174
+ */
175
+ var extend = function (defaults, options) {
176
+ var extended = {};
177
+ forEach(defaults, function (value, prop) {
178
+ extended[prop] = defaults[prop];
179
+ });
180
+ forEach(options, function (value, prop) {
181
+ extended[prop] = options[prop];
182
+ });
183
+ return extended;
184
+ };
185
+
186
+
187
+ /**
188
+ * Create a fragment DOM elements
189
+ * @private
190
+ */
191
+ var createFragElem = function(htmlStr) {
192
+ var frag = document.createDocumentFragment(),
193
+ temp = document.createElement('div');
194
+ temp.innerHTML = htmlStr;
195
+ while (temp.firstChild) {
196
+ frag.appendChild(temp.firstChild);
197
+ }
198
+ return frag;
199
+ };
200
+
201
+
202
+ /**
203
+ * Generate new ID
204
+ * @private
205
+ */
206
+ var generateId = function(params) {
207
+ var newId = btoa(encodeURIComponent(params));
208
+ return newId.replace(/=/g, "");
209
+ };
210
+
211
+
212
+ /**
213
+ * Check if is a color
214
+ * @private
215
+ */
216
+ var isColor = function(color){
217
+ if( color.substring(0,1) == '#' || color.substring(0,3) == 'rgb' || color.substring(0,3) == 'hsl' ){
218
+ return true;
219
+ } else {
220
+ return false;
221
+ }
222
+ };
223
+
224
+
225
+ /**
226
+ * Check if is a Base64 string
227
+ * @private
228
+ */
229
+ var isBase64 = function(str) {
230
+ try {
231
+ return btoa(atob(str)) == str;
232
+ } catch (err) {
233
+ return false;
234
+ }
235
+ };
236
+
237
+
238
+ /**
239
+ * Drag method of toasts
240
+ * @private
241
+ */
242
+ var drag = function() {
243
+
244
+ return {
245
+ move: function(toast, instance, settings, xpos) {
246
+
247
+ var opacity,
248
+ opacityRange = 0.3,
249
+ distance = 180;
250
+
251
+ if(xpos !== 0){
252
+
253
+ toast.classList.add(PLUGIN_NAME+'-dragged');
254
+
255
+ toast.style.transform = 'translateX('+xpos + 'px)';
256
+
257
+ if(xpos > 0){
258
+ opacity = (distance-xpos) / distance;
259
+ if(opacity < opacityRange){
260
+ instance.hide(extend(settings, { transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight' }), toast, 'drag');
261
+ }
262
+ } else {
263
+ opacity = (distance+xpos) / distance;
264
+ if(opacity < opacityRange){
265
+ instance.hide(extend(settings, { transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft' }), toast, 'drag');
266
+ }
267
+ }
268
+ toast.style.opacity = opacity;
269
+
270
+ if(opacity < opacityRange){
271
+
272
+ if(ISCHROME || ISFIREFOX)
273
+ toast.style.left = xpos+'px';
274
+
275
+ toast.parentNode.style.opacity = opacityRange;
276
+
277
+ this.stopMoving(toast, null);
278
+ }
279
+ }
358
280
 
359
- // Destroy any existing initializations
360
- $iziToast.destroy();
361
281
 
362
- CONFIG = options;
363
- defaults = extend(defaults, options || {});
364
- };
282
+ },
283
+ startMoving: function(toast, instance, settings, e) {
365
284
 
285
+ e = e || window.event;
286
+ var posX = ((ACCEPTSTOUCH) ? e.touches[0].clientX : e.clientX),
287
+ toastLeft = toast.style.transform.replace('px)', '');
288
+ toastLeft = toastLeft.replace('translateX(', '');
289
+ var offsetX = posX - toastLeft;
366
290
 
367
- /**
368
- * Building themes functions.
369
- * @public
370
- * @param {Object} options User settings
371
- */
372
- forEach(THEMES, function (theme, name) {
291
+ if(settings.transitionIn){
292
+ toast.classList.remove(settings.transitionIn);
293
+ }
294
+ if(settings.transitionInMobile){
295
+ toast.classList.remove(settings.transitionInMobile);
296
+ }
297
+ toast.style.transition = '';
373
298
 
374
- $iziToast[name] = function (options) {
299
+ if(ACCEPTSTOUCH) {
300
+ document.ontouchmove = function(e) {
301
+ e.preventDefault();
302
+ e = e || window.event;
303
+ var posX = e.touches[0].clientX,
304
+ finalX = posX - offsetX;
305
+ drag.move(toast, instance, settings, finalX);
306
+ };
307
+ } else {
308
+ document.onmousemove = function(e) {
309
+ e.preventDefault();
310
+ e = e || window.event;
311
+ var posX = e.clientX,
312
+ finalX = posX - offsetX;
313
+ drag.move(toast, instance, settings, finalX);
314
+ };
315
+ }
375
316
 
376
- var settings = extend(CONFIG, options || {});
377
- settings = extend(theme, settings || {});
317
+ },
318
+ stopMoving: function(toast, e) {
378
319
 
379
- this.show(settings);
380
- };
320
+ if(ACCEPTSTOUCH) {
321
+ document.ontouchmove = function() {};
322
+ } else {
323
+ document.onmousemove = function() {};
324
+ }
381
325
 
382
- });
326
+ toast.style.opacity = '';
327
+ toast.style.transform = '';
383
328
 
329
+ if(toast.classList.contains(PLUGIN_NAME+'-dragged')){
384
330
 
385
- /**
386
- * Do the calculation to move the progress bar
387
- * @private
388
- */
389
- $iziToast.progress = function ($toast, options, callback) {
331
+ toast.classList.remove(PLUGIN_NAME+'-dragged');
390
332
 
391
- var that = this,
392
- settings = extend(that.settings, options || {}),
393
- $elem = $toast.querySelector('.'+PLUGIN_NAME+'-progressbar div');
333
+ toast.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
334
+ setTimeout(function() {
335
+ toast.style.transition = '';
336
+ }, 400);
337
+ }
394
338
 
395
- return {
396
- start: function() {
339
+ }
340
+ };
397
341
 
398
- if($elem !== null){
399
- $elem.style.transition = 'width '+ settings.timeout +'ms '+settings.progressBarEasing;
400
- $elem.style.width = '0%';
401
- }
402
- settings.TIME.START = new Date().getTime();
403
- settings.TIME.END = settings.TIME.START + settings.timeout;
404
- settings.TIME.TIMER = setTimeout(function() {
342
+ }();
405
343
 
406
- clearTimeout(settings.TIME.TIMER);
407
344
 
408
- if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
409
345
 
410
- that.hide($toast, settings, 'timeout');
411
346
 
412
- if(typeof callback === 'function'){
413
- callback.apply(that);
414
- }
415
- }
416
347
 
417
- }, settings.timeout);
418
-
419
- },
420
- pause: function() {
348
+ $iziToast.setSetting = function (ref, option, value) {
421
349
 
422
- settings.TIME.REMAINING = settings.TIME.END - new Date().getTime();
350
+ $iziToast.children[ref][option] = value;
423
351
 
424
- clearTimeout(settings.TIME.TIMER);
352
+ };
425
353
 
426
- if($elem !== null){
427
- var computedStyle = window.getComputedStyle($elem),
428
- propertyWidth = computedStyle.getPropertyValue('width');
429
354
 
430
- $elem.style.transition = 'none';
431
- $elem.style.width = propertyWidth;
432
- }
355
+ $iziToast.getSetting = function (ref, option) {
433
356
 
434
- if(typeof callback === 'function'){
435
- setTimeout(function() {
436
- callback.apply(that);
437
- }, 10);
438
- }
357
+ return $iziToast.children[ref][option];
439
358
 
440
- },
441
- resume: function() {
359
+ };
442
360
 
443
- if($elem !== null){
444
- $elem.style.transition = 'width '+ settings.TIME.REMAINING +'ms '+settings.progressBarEasing;
445
- $elem.style.width = '0%';
446
- }
447
361
 
448
- settings.TIME.END = new Date().getTime() + settings.TIME.REMAINING;
449
- settings.TIME.TIMER = setTimeout(function() {
362
+ /**
363
+ * Destroy the current initialization.
364
+ * @public
365
+ */
366
+ $iziToast.destroy = function () {
450
367
 
451
- clearTimeout(settings.TIME.TIMER);
368
+ forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-overlay'), function(element, index) {
369
+ element.remove();
370
+ });
452
371
 
453
- if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
372
+ forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-wrapper'), function(element, index) {
373
+ element.remove();
374
+ });
454
375
 
455
- that.hide($toast, settings, 'timeout');
376
+ forEach(document.querySelectorAll('.'+PLUGIN_NAME), function(element, index) {
377
+ element.remove();
378
+ });
456
379
 
457
- if(typeof callback === 'function'){
458
- callback.apply(that);
459
- }
460
- }
380
+ this.children = {};
461
381
 
382
+ // Remove event listeners
383
+ document.removeEventListener(PLUGIN_NAME+'-opened', {}, false);
384
+ document.removeEventListener(PLUGIN_NAME+'-opening', {}, false);
385
+ document.removeEventListener(PLUGIN_NAME+'-closing', {}, false);
386
+ document.removeEventListener(PLUGIN_NAME+'-closed', {}, false);
387
+ document.removeEventListener('keyup', {}, false);
462
388
 
463
- }, settings.TIME.REMAINING);
389
+ // Reset variables
390
+ CONFIG = {};
391
+ };
464
392
 
465
- },
466
- reset: function(){
393
+ /**
394
+ * Initialize Plugin
395
+ * @public
396
+ * @param {Object} options User settings
397
+ */
398
+ $iziToast.settings = function (options) {
467
399
 
468
- clearTimeout(settings.TIME.TIMER);
400
+ // Destroy any existing initializations
401
+ $iziToast.destroy();
469
402
 
470
- if($elem !== null){
471
- $elem.style.transition = 'none';
472
- $elem.style.width = '100%';
473
- }
403
+ CONFIG = options;
404
+ defaults = extend(defaults, options || {});
405
+ };
474
406
 
475
- if(typeof callback === 'function'){
476
- setTimeout(function() {
477
- callback.apply(that);
478
- }, 10);
479
- }
480
-
481
- }
482
- };
483
407
 
484
- };
485
-
486
-
487
- /**
488
- * Close the specific Toast
489
- * @public
490
- * @param {Object} options User settings
491
- */
492
- $iziToast.hide = function ($toast, options, closedBy) {
493
-
494
- var settings = extend(this.settings, options || {});
495
- closedBy = closedBy || null;
496
-
497
- if(typeof $toast != 'object'){
498
- $toast = document.querySelector($toast);
499
- }
500
-
501
- $toast.classList.add(PLUGIN_NAME+'-closing');
408
+ /**
409
+ * Building themes functions.
410
+ * @public
411
+ * @param {Object} options User settings
412
+ */
413
+ forEach(THEMES, function (theme, name) {
502
414
 
503
- settings.closedBy = closedBy;
504
- settings.REF = $toast.getAttribute('data-iziToast-ref');
415
+ $iziToast[name] = function (options) {
505
416
 
506
- // Overlay
507
- (function(){
417
+ var settings = extend(CONFIG, options || {});
418
+ settings = extend(theme, settings || {});
508
419
 
509
- var $overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
510
- if($overlay !== null){
511
- var refs = $overlay.getAttribute('data-iziToast-ref');
512
- refs = refs.split(',');
513
- var index = refs.indexOf(settings.REF);
514
-
515
- if(index !== -1){
516
- refs.splice(index, 1);
517
- }
518
- $overlay.setAttribute('data-iziToast-ref', refs.join());
519
-
520
- if(refs.length === 0){
521
- $overlay.classList.remove('fadeIn');
522
- $overlay.classList.add('fadeOut');
523
- setTimeout(function() {
524
- $overlay.remove();
525
- }, 700);
526
- }
527
- }
528
-
529
- })();
530
-
531
- if(settings.transitionIn || settings.transitionInMobile){
532
- $toast.classList.remove(settings.transitionIn);
533
- $toast.classList.remove(settings.transitionInMobile);
534
- }
535
-
536
- if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
537
- if(settings.transitionOutMobile)
538
- $toast.classList.add(settings.transitionOutMobile);
539
- } else {
540
- if(settings.transitionOut)
541
- $toast.classList.add(settings.transitionOut);
542
- }
543
- var H = $toast.parentNode.offsetHeight;
544
- $toast.parentNode.style.height = H+'px';
545
- $toast.style.pointerEvents = 'none';
546
-
547
- if(!ISMOBILE || window.innerWidth > MOBILEWIDTH){
548
- $toast.parentNode.style.transitionDelay = '0.2s';
549
- }
550
-
551
- try {
552
- settings.closedBy = closedBy;
553
- var event = new CustomEvent(PLUGIN_NAME+'-closing', {detail: settings, bubbles: true, cancelable: true});
554
- document.dispatchEvent(event);
555
- } catch(ex){
556
- console.warn(ex);
557
- }
558
-
559
- setTimeout(function() {
560
-
561
- $toast.parentNode.style.height = '0px';
562
- $toast.parentNode.style.overflow = '';
563
-
564
- setTimeout(function(){
565
-
566
- $toast.parentNode.remove();
567
- try {
568
- settings.closedBy = closedBy;
569
- var event = new CustomEvent(PLUGIN_NAME+'-closed', {detail: settings, bubbles: true, cancelable: true});
570
- document.dispatchEvent(event);
571
- } catch(ex){
572
- console.warn(ex);
573
- }
574
-
575
- if(typeof settings.onClosed !== 'undefined'){
576
- settings.onClosed.apply(null, [settings, $toast, closedBy]);
577
- }
578
-
579
- }, 1000);
580
- }, 200);
581
-
582
-
583
- if(typeof settings.onClosing !== 'undefined'){
584
- settings.onClosing.apply(null, [settings, $toast, closedBy]);
585
- }
586
- };
587
-
588
- /**
589
- * Create and show the Toast
590
- * @public
591
- * @param {Object} options User settings
592
- */
593
- $iziToast.show = function (options) {
594
-
595
- var that = this;
596
-
597
- // Merge user options with defaults
598
- var settings = extend(CONFIG, options || {});
599
- settings = extend(defaults, settings);
600
-
601
- settings.TIME = {};
602
-
603
- if(settings.toastOnce && settings.id && document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id).length > 0){
604
- return false;
605
- }
606
-
607
- settings.REF = new Date().getTime() + Math.floor((Math.random() * 10000000) + 1);
608
-
609
- var $DOM = {
610
- body: document.querySelector('body'),
611
- overlay: document.createElement('div'),
612
- toast: document.createElement('div'),
613
- toastBody: document.createElement('div'),
614
- toastTexts: document.createElement('div'),
615
- toastCapsule: document.createElement('div'),
616
- icon: document.createElement('i'),
617
- cover: document.createElement('div'),
618
- buttons: document.createElement('div'),
619
- wrapper: null
620
- };
621
-
622
- $DOM.toast.setAttribute('data-iziToast-ref', settings.REF);
623
- $DOM.toast.appendChild($DOM.toastBody);
624
- $DOM.toastCapsule.appendChild($DOM.toast);
625
-
626
- // CSS Settings
627
- (function(){
628
-
629
- $DOM.toast.classList.add(PLUGIN_NAME);
630
- $DOM.toast.classList.add(PLUGIN_NAME+'-opening');
631
- $DOM.toastCapsule.classList.add(PLUGIN_NAME+'-capsule');
632
- $DOM.toastBody.classList.add(PLUGIN_NAME + '-body');
633
- $DOM.toastTexts.classList.add(PLUGIN_NAME + '-texts');
634
-
635
- if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
636
- if(settings.transitionInMobile)
637
- $DOM.toast.classList.add(settings.transitionInMobile);
638
- } else {
639
- if(settings.transitionIn)
640
- $DOM.toast.classList.add(settings.transitionIn);
641
- }
642
-
643
- if(settings.class){
644
- var classes = settings.class.split(' ');
645
- forEach(classes, function (value, index) {
646
- $DOM.toast.classList.add(value);
647
- });
648
- }
649
-
650
- if(settings.id){ $DOM.toast.id = settings.id; }
651
-
652
- if(settings.rtl){ $DOM.toast.classList.add(PLUGIN_NAME + '-rtl'); }
653
-
654
- if(settings.layout > 1){ $DOM.toast.classList.add(PLUGIN_NAME+'-layout'+settings.layout); }
655
-
656
- if(settings.balloon){ $DOM.toast.classList.add(PLUGIN_NAME+'-balloon'); }
657
-
658
- if(settings.maxWidth){
659
- if( !isNaN(settings.maxWidth) ){
660
- $DOM.toast.style.maxWidth = settings.maxWidth+'px';
661
- } else {
662
- $DOM.toast.style.maxWidth = settings.maxWidth;
663
- }
664
- }
665
-
666
- if(settings.theme !== '' || settings.theme !== 'light') {
667
-
668
- $DOM.toast.classList.add(PLUGIN_NAME+'-theme-'+settings.theme);
669
- }
670
-
671
- if(settings.color) { //#, rgb, rgba, hsl
672
-
673
- if( isColor(settings.color) ){
674
- $DOM.toast.style.background = settings.color;
675
- } else {
676
- $DOM.toast.classList.add(PLUGIN_NAME+'-color-'+settings.color);
677
- }
678
- }
679
-
680
- if(settings.backgroundColor) {
681
- $DOM.toast.style.background = settings.backgroundColor;
682
- if(settings.balloon){
683
- $DOM.toast.style.borderColor = settings.backgroundColor;
684
- }
685
- }
686
- })();
687
-
688
- // Cover image
689
- (function(){
690
- if(settings.image) {
691
- $DOM.cover.classList.add(PLUGIN_NAME + '-cover');
692
- $DOM.cover.style.width = settings.imageWidth + 'px';
693
-
694
- if(isBase64(settings.image.replace(/ /g,''))){
695
- $DOM.cover.style.backgroundImage = 'url(data:image/png;base64,' + settings.image.replace(/ /g,'') + ')';
696
- } else {
697
- $DOM.cover.style.backgroundImage = 'url(' + settings.image + ')';
698
- }
699
-
700
- if(settings.rtl){
701
- $DOM.toastBody.style.marginRight = (settings.imageWidth + 10) + 'px';
702
- } else {
703
- $DOM.toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';
704
- }
705
- $DOM.toast.appendChild($DOM.cover);
706
- }
707
- })();
708
-
709
- // Button close
710
- (function(){
711
- if(settings.close){
712
-
713
- $DOM.buttonClose = document.createElement('button');
714
-
715
- $DOM.buttonClose.classList.add(PLUGIN_NAME + '-close');
716
- $DOM.buttonClose.addEventListener('click', function (e) {
717
- var button = e.target;
718
- that.hide($DOM.toast, settings, 'button');
719
- });
720
- $DOM.toast.appendChild($DOM.buttonClose);
721
- } else {
722
- if(settings.rtl){
723
- $DOM.toast.style.paddingLeft = '20px';
724
- } else {
725
- $DOM.toast.style.paddingRight = '20px';
726
- }
727
- }
728
- })();
729
-
730
- // Progress Bar & Timeout
731
- (function(){
732
- if(settings.timeout) {
733
-
734
- if(settings.progressBar){
735
- $DOM.progressBar = document.createElement('div');
736
- $DOM.progressBarDiv = document.createElement('div');
737
- $DOM.progressBar.classList.add(PLUGIN_NAME + '-progressbar');
738
- $DOM.progressBarDiv.style.background = settings.progressBarColor;
739
- $DOM.progressBar.appendChild($DOM.progressBarDiv);
740
- $DOM.toast.appendChild($DOM.progressBar);
741
- }
742
-
743
- if(settings.pauseOnHover && !settings.resetOnHover){
744
-
745
- $DOM.toast.addEventListener('mouseenter', function (e) {
746
- this.classList.add(PLUGIN_NAME+'-paused');
747
-
748
- that.progress($DOM.toast, settings).pause();
749
- });
750
- $DOM.toast.addEventListener('mouseleave', function (e) {
751
- this.classList.remove(PLUGIN_NAME+'-paused');
752
-
753
- that.progress($DOM.toast, settings).resume();
754
- });
755
- }
756
-
757
- if(settings.resetOnHover){
758
-
759
- $DOM.toast.addEventListener('mouseenter', function (e) {
760
- this.classList.add(PLUGIN_NAME+'-reseted');
761
-
762
- that.progress($DOM.toast, settings).reset();
763
- });
764
- $DOM.toast.addEventListener('mouseleave', function (e) {
765
- this.classList.remove(PLUGIN_NAME+'-reseted');
766
-
767
- that.progress($DOM.toast, settings).start();
768
- });
769
- }
770
- }
771
- })();
772
-
773
- // Icon
774
- (function(){
775
- if(settings.icon) {
776
- $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon ' + settings.icon);
777
-
778
- if(settings.iconText){
779
- $DOM.icon.appendChild(document.createTextNode(settings.iconText));
780
- }
781
-
782
- if(settings.rtl){
783
- $DOM.toastBody.style.paddingRight = '33px';
784
- } else {
785
- $DOM.toastBody.style.paddingLeft = '33px';
786
- }
787
-
788
- if(settings.iconColor){
789
- $DOM.icon.style.color = settings.iconColor;
790
- }
791
- $DOM.toastBody.appendChild($DOM.icon);
792
- }
793
- })();
794
-
795
- // Title
796
- (function(){
797
- if(settings.title.length > 0) {
798
-
799
- $DOM.strong = document.createElement('strong');
800
- $DOM.strong.classList.add(PLUGIN_NAME + '-title');
801
- $DOM.strong.appendChild(createFragElem(settings.title));
802
- $DOM.toastTexts.appendChild($DOM.strong);
803
-
804
- if(settings.titleColor) {
805
- $DOM.strong.style.color = settings.titleColor;
806
- }
807
- if(settings.titleSize) {
808
- if( !isNaN(settings.titleSize) ){
809
- $DOM.strong.style.fontSize = settings.titleSize+'px';
810
- } else {
811
- $DOM.strong.style.fontSize = settings.titleSize;
812
- }
813
- }
814
- if(settings.titleLineHeight) {
815
- if( !isNaN(settings.titleSize) ){
816
- $DOM.strong.style.lineHeight = settings.titleLineHeight+'px';
817
- } else {
818
- $DOM.strong.style.lineHeight = settings.titleLineHeight;
819
- }
820
- }
821
- }
822
- })();
823
-
824
- // Message
825
- (function(){
826
- if(settings.message.length > 0) {
827
-
828
- $DOM.p = document.createElement('p');
829
- $DOM.p.classList.add(PLUGIN_NAME + '-message');
830
- $DOM.p.appendChild(createFragElem(settings.message));
831
- $DOM.toastTexts.appendChild($DOM.p);
832
-
833
- if(settings.messageColor) {
834
- $DOM.p.style.color = settings.messageColor;
835
- }
836
- if(settings.messageSize) {
837
- if( !isNaN(settings.titleSize) ){
838
- $DOM.p.style.fontSize = settings.messageSize+'px';
839
- } else {
840
- $DOM.p.style.fontSize = settings.messageSize;
841
- }
842
- }
843
- if(settings.messageLineHeight) {
844
-
845
- if( !isNaN(settings.titleSize) ){
846
- $DOM.p.style.lineHeight = settings.messageLineHeight+'px';
847
- } else {
848
- $DOM.p.style.lineHeight = settings.messageLineHeight;
849
- }
850
- }
851
- }
852
- })();
853
-
854
- if(settings.title.length > 0 && settings.message.length > 0) {
855
- if(settings.rtl){
856
- $DOM.strong.style.marginLeft = '10px';
857
- } else if(settings.layout !== 2 && !settings.rtl) {
858
- $DOM.strong.style.marginRight = '10px';
859
- }
860
- }
861
-
862
- $DOM.toastBody.appendChild($DOM.toastTexts);
863
-
864
- // Buttons
865
- (function(){
866
- if(settings.buttons.length > 0) {
867
-
868
- $DOM.buttons.classList.add(PLUGIN_NAME + '-buttons');
869
-
870
- if(settings.title.length > 0 && settings.message.length === 0) {
871
- if(settings.rtl){
872
- $DOM.strong.style.marginLeft = '15px';
873
- } else {
874
- $DOM.strong.style.marginRight = '15px';
875
- }
876
- }
877
- if(settings.message.length > 0) {
878
- if(settings.rtl){
879
- $DOM.p.style.marginLeft = '15px';
880
- } else {
881
- $DOM.p.style.marginRight = '15px';
882
- }
883
- $DOM.p.style.marginBottom = '0';
884
- }
885
-
886
- forEach(settings.buttons, function (value, index) {
887
- $DOM.buttons.appendChild(createFragElem(value[0]));
888
-
889
- var $btns = $DOM.buttons.childNodes;
890
-
891
- $btns[index].classList.add(PLUGIN_NAME + '-buttons-child');
892
-
893
- if(value[2]){
894
- setTimeout(function() {
895
- $btns[index].focus();
896
- }, 300);
897
- }
898
-
899
- $btns[index].addEventListener('click', function (e) {
900
- e.preventDefault();
901
- var ts = value[1];
902
- return ts(that, $DOM.toast);
903
- });
904
- });
905
- }
906
- $DOM.toastBody.appendChild($DOM.buttons);
907
- })();
908
-
909
- // Target
910
- (function(){
911
- $DOM.toastCapsule.style.visibility = 'hidden';
912
- setTimeout(function() {
913
- var H = $DOM.toast.offsetHeight;
914
- var style = $DOM.toast.currentStyle || window.getComputedStyle($DOM.toast);
915
- var marginTop = style.marginTop;
916
- marginTop = marginTop.split('px');
917
- marginTop = parseInt(marginTop[0]);
918
- var marginBottom = style.marginBottom;
919
- marginBottom = marginBottom.split('px');
920
- marginBottom = parseInt(marginBottom[0]);
921
-
922
- $DOM.toastCapsule.style.visibility = '';
923
- $DOM.toastCapsule.style.height = (H+marginBottom+marginTop)+'px';
924
-
925
- setTimeout(function() {
926
- $DOM.toastCapsule.style.height = 'auto';
927
- if(settings.target){
928
- $DOM.toastCapsule.style.overflow = 'visible';
929
- }
930
- }, 500);
931
-
932
- if(settings.timeout) {
933
- that.progress($DOM.toast, settings).start();
934
- }
935
- }, 100);
936
- })();
937
-
938
- // Target
939
- (function(){
940
- var position = settings.position;
941
-
942
- if(settings.target){
943
-
944
- $DOM.wrapper = document.querySelector(settings.target);
945
- $DOM.wrapper.classList.add(PLUGIN_NAME + '-target');
946
-
947
- if(settings.targetFirst) {
948
- $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
949
- } else {
950
- $DOM.wrapper.appendChild($DOM.toastCapsule);
951
- }
952
-
953
- } else {
954
-
955
- if( POSITIONS.indexOf(settings.position) == -1 ){
956
- console.warn('['+PLUGIN_NAME+'] Incorrect position.\nIt can be › ' + POSITIONS);
957
- return;
958
- }
959
-
960
- if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
961
- if(settings.position == 'bottomLeft' || settings.position == 'bottomRight' || settings.position == 'bottomCenter'){
962
- position = PLUGIN_NAME+'-wrapper-bottomCenter';
963
- }
964
- else if(settings.position == 'topLeft' || settings.position == 'topRight' || settings.position == 'topCenter'){
965
- position = PLUGIN_NAME+'-wrapper-topCenter';
966
- }
967
- else {
968
- position = PLUGIN_NAME+'-wrapper-center';
969
- }
970
- } else {
971
- position = PLUGIN_NAME+'-wrapper-'+position;
972
- }
973
- $DOM.wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position);
974
-
975
- if(!$DOM.wrapper) {
976
- $DOM.wrapper = document.createElement('div');
977
- $DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper');
978
- $DOM.wrapper.classList.add(position);
979
- document.body.appendChild($DOM.wrapper);
980
- }
981
- if(settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight'){
982
- $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
983
- } else {
984
- $DOM.wrapper.appendChild($DOM.toastCapsule);
985
- }
986
- }
987
-
988
- if(!isNaN(settings.zindex)) {
989
- $DOM.wrapper.style.zIndex = settings.zindex;
990
- } else {
991
- console.warn('['+PLUGIN_NAME+'] Invalid zIndex.');
992
- }
993
- })();
994
-
995
- // Overlay
996
- (function(){
997
-
998
- if(settings.overlay) {
999
-
1000
- if( document.querySelector('.'+PLUGIN_NAME+'-overlay.fadeIn') !== null ){
1001
-
1002
- $DOM.overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
1003
- $DOM.overlay.setAttribute('data-iziToast-ref', $DOM.overlay.getAttribute('data-iziToast-ref') + ',' + settings.REF);
1004
-
1005
- if(!isNaN(settings.zindex) && settings.zindex !== null) {
1006
- $DOM.overlay.style.zIndex = settings.zindex-1;
1007
- }
1008
- } else {
1009
-
1010
- $DOM.overlay.classList.add(PLUGIN_NAME+'-overlay');
1011
- $DOM.overlay.classList.add('fadeIn');
1012
- $DOM.overlay.style.background = settings.overlayColor;
1013
- $DOM.overlay.setAttribute('data-iziToast-ref', settings.REF);
1014
- if(!isNaN(settings.zindex) && settings.zindex !== null) {
1015
- $DOM.overlay.style.zIndex = settings.zindex-1;
1016
- }
1017
- document.querySelector('body').appendChild($DOM.overlay);
1018
- }
1019
-
1020
- if(settings.overlayClose) {
1021
-
1022
- $DOM.overlay.removeEventListener('click', {});
1023
- $DOM.overlay.addEventListener('click', function (e) {
1024
- that.hide($DOM.toast, settings, 'overlay');
1025
- });
1026
- } else {
1027
- $DOM.overlay.removeEventListener('click', {});
1028
- }
1029
-
1030
- }
1031
-
1032
- })();
1033
-
1034
- // Inside animations
1035
- (function(){
1036
- if(settings.animateInside){
1037
- $DOM.toast.classList.add(PLUGIN_NAME+'-animateInside');
1038
-
1039
- var animationTimes = [200, 100, 300];
1040
- if(settings.transitionIn == 'bounceInLeft'){
1041
- animationTimes = [400, 200, 400];
1042
- }
1043
-
1044
- if(settings.title.length > 0) {
1045
- setTimeout(function(){
1046
- $DOM.strong.classList.add('slideIn');
1047
- }, animationTimes[0]);
1048
- }
1049
-
1050
- if(settings.message.length > 0) {
1051
- setTimeout(function(){
1052
- $DOM.p.classList.add('slideIn');
1053
- }, animationTimes[1]);
1054
- }
1055
-
1056
- if(settings.icon) {
1057
- setTimeout(function(){
1058
- $DOM.icon.classList.add('revealIn');
1059
- }, animationTimes[2]);
1060
- }
1061
-
1062
- if(settings.buttons.length > 0 && $DOM.buttons) {
1063
- var counter = 150;
1064
- forEach($DOM.buttons.childNodes, function(element, index) {
1065
-
1066
- setTimeout(function(){
1067
- element.classList.add('revealIn');
1068
- }, counter);
1069
- counter = counter + 150;
1070
- });
1071
- }
1072
- }
1073
- })();
1074
-
1075
- settings.onOpening.apply(null, [settings, $DOM.toast]);
1076
-
1077
- try {
1078
- var event = new CustomEvent(PLUGIN_NAME + '-opening', {detail: settings, bubbles: true, cancelable: true});
1079
- document.dispatchEvent(event);
1080
- } catch(ex){
1081
- console.warn(ex);
1082
- }
1083
-
1084
- setTimeout(function() {
1085
-
1086
- $DOM.toast.classList.remove(PLUGIN_NAME+'-opening');
1087
- $DOM.toast.classList.add(PLUGIN_NAME+'-opened');
1088
-
1089
- try {
1090
- var event = new CustomEvent(PLUGIN_NAME + '-opened', {detail: settings, bubbles: true, cancelable: true});
1091
- document.dispatchEvent(event);
1092
- } catch(ex){
1093
- console.warn(ex);
1094
- }
1095
-
1096
- settings.onOpened.apply(null, [settings, $DOM.toast]);
1097
- }, 1000);
1098
-
1099
- if(settings.drag){
1100
-
1101
- if(ACCEPTSTOUCH) {
1102
-
1103
- $DOM.toast.addEventListener('touchstart', function(e) {
1104
- drag.startMoving(this, that, settings, e);
1105
- }, false);
1106
-
1107
- $DOM.toast.addEventListener('touchend', function(e) {
1108
- drag.stopMoving(this, e);
1109
- }, false);
1110
- } else {
1111
-
1112
- $DOM.toast.addEventListener('mousedown', function(e) {
1113
- e.preventDefault();
1114
- drag.startMoving(this, that, settings, e);
1115
- }, false);
1116
-
1117
- $DOM.toast.addEventListener('mouseup', function(e) {
1118
- e.preventDefault();
1119
- drag.stopMoving(this, e);
1120
- }, false);
1121
- }
1122
- }
1123
-
1124
- if(settings.closeOnEscape) {
1125
-
1126
- document.addEventListener('keyup', function (evt) {
1127
- evt = evt || window.event;
1128
- if(evt.keyCode == 27) {
1129
- that.hide($DOM.toast, settings, 'esc');
1130
- }
1131
- });
1132
- }
1133
-
1134
- that.toast = $DOM.toast;
1135
- };
1136
-
1137
-
1138
- return $iziToast;
1139
- });
420
+ this.show(settings);
421
+ };
422
+
423
+ });
424
+
425
+
426
+ /**
427
+ * Do the calculation to move the progress bar
428
+ * @private
429
+ */
430
+ $iziToast.progress = function (options, $toast, callback) {
431
+
432
+
433
+ var that = this,
434
+ ref = $toast.getAttribute('data-iziToast-ref'),
435
+ settings = extend(this.children[ref], options || {}),
436
+ $elem = $toast.querySelector('.'+PLUGIN_NAME+'-progressbar div');
437
+
438
+ return {
439
+ start: function() {
440
+
441
+ if(typeof settings.time.REMAINING == 'undefined'){
442
+
443
+ $toast.classList.remove(PLUGIN_NAME+'-reseted');
444
+
445
+ if($elem !== null){
446
+ $elem.style.transition = 'width '+ settings.timeout +'ms '+settings.progressBarEasing;
447
+ $elem.style.width = '0%';
448
+ }
449
+
450
+ settings.time.START = new Date().getTime();
451
+ settings.time.END = settings.time.START + settings.timeout;
452
+ settings.time.TIMER = setTimeout(function() {
453
+
454
+ clearTimeout(settings.time.TIMER);
455
+
456
+ if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
457
+
458
+ that.hide(settings, $toast, 'timeout');
459
+
460
+ if(typeof callback === 'function'){
461
+ callback.apply(that);
462
+ }
463
+ }
464
+
465
+ }, settings.timeout);
466
+ that.setSetting(ref, 'time', settings.time);
467
+ }
468
+ },
469
+ pause: function() {
470
+
471
+ if(typeof settings.time.START !== 'undefined' && !$toast.classList.contains(PLUGIN_NAME+'-paused') && !$toast.classList.contains(PLUGIN_NAME+'-reseted')){
472
+
473
+ $toast.classList.add(PLUGIN_NAME+'-paused');
474
+
475
+ settings.time.REMAINING = settings.time.END - new Date().getTime();
476
+
477
+ clearTimeout(settings.time.TIMER);
478
+
479
+ that.setSetting(ref, 'time', settings.time);
480
+
481
+ if($elem !== null){
482
+ var computedStyle = window.getComputedStyle($elem),
483
+ propertyWidth = computedStyle.getPropertyValue('width');
484
+
485
+ $elem.style.transition = 'none';
486
+ $elem.style.width = propertyWidth;
487
+ }
488
+
489
+ if(typeof callback === 'function'){
490
+ setTimeout(function() {
491
+ callback.apply(that);
492
+ }, 10);
493
+ }
494
+ }
495
+ },
496
+ resume: function() {
497
+
498
+ if(typeof settings.time.REMAINING !== 'undefined'){
499
+
500
+ $toast.classList.remove(PLUGIN_NAME+'-paused');
501
+
502
+ if($elem !== null){
503
+ $elem.style.transition = 'width '+ settings.time.REMAINING +'ms '+settings.progressBarEasing;
504
+ $elem.style.width = '0%';
505
+ }
506
+
507
+ settings.time.END = new Date().getTime() + settings.time.REMAINING;
508
+ settings.time.TIMER = setTimeout(function() {
509
+
510
+ clearTimeout(settings.time.TIMER);
511
+
512
+ if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
513
+
514
+ that.hide(settings, $toast, 'timeout');
515
+
516
+ if(typeof callback === 'function'){
517
+ callback.apply(that);
518
+ }
519
+ }
520
+
521
+
522
+ }, settings.time.REMAINING);
523
+
524
+ that.setSetting(ref, 'time', settings.time);
525
+ } else {
526
+ this.start();
527
+ }
528
+ },
529
+ reset: function(){
530
+
531
+ clearTimeout(settings.time.TIMER);
532
+
533
+ delete settings.time.REMAINING;
534
+
535
+ that.setSetting(ref, 'time', settings.time);
536
+
537
+ $toast.classList.add(PLUGIN_NAME+'-reseted');
538
+
539
+ $toast.classList.remove(PLUGIN_NAME+'-paused');
540
+
541
+ if($elem !== null){
542
+ $elem.style.transition = 'none';
543
+ $elem.style.width = '100%';
544
+ }
545
+
546
+ if(typeof callback === 'function'){
547
+ setTimeout(function() {
548
+ callback.apply(that);
549
+ }, 10);
550
+ }
551
+ }
552
+ };
553
+
554
+ };
555
+
556
+
557
+ /**
558
+ * Close the specific Toast
559
+ * @public
560
+ * @param {Object} options User settings
561
+ */
562
+ $iziToast.hide = function (options, $toast, closedBy) {
563
+
564
+ if(typeof $toast != 'object'){
565
+ $toast = document.querySelector($toast);
566
+ }
567
+
568
+ var that = this,
569
+ settings = extend(this.children[$toast.getAttribute('data-iziToast-ref')], options || {});
570
+ settings.closedBy = closedBy || null;
571
+
572
+ delete settings.time.REMAINING;
573
+
574
+ $toast.classList.add(PLUGIN_NAME+'-closing');
575
+
576
+ // Overlay
577
+ (function(){
578
+
579
+ var $overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
580
+ if($overlay !== null){
581
+ var refs = $overlay.getAttribute('data-iziToast-ref');
582
+ refs = refs.split(',');
583
+ var index = refs.indexOf(String(settings.ref));
584
+
585
+ if(index !== -1){
586
+ refs.splice(index, 1);
587
+ }
588
+ $overlay.setAttribute('data-iziToast-ref', refs.join());
589
+
590
+ if(refs.length === 0){
591
+ $overlay.classList.remove('fadeIn');
592
+ $overlay.classList.add('fadeOut');
593
+ setTimeout(function() {
594
+ $overlay.remove();
595
+ }, 700);
596
+ }
597
+ }
598
+
599
+ })();
600
+
601
+ if(settings.transitionIn){
602
+ $toast.classList.remove(settings.transitionIn);
603
+ }
604
+
605
+ if(settings.transitionInMobile){
606
+ $toast.classList.remove(settings.transitionInMobile);
607
+ }
608
+
609
+ if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
610
+ if(settings.transitionOutMobile)
611
+ $toast.classList.add(settings.transitionOutMobile);
612
+ } else {
613
+ if(settings.transitionOut)
614
+ $toast.classList.add(settings.transitionOut);
615
+ }
616
+ var H = $toast.parentNode.offsetHeight;
617
+ $toast.parentNode.style.height = H+'px';
618
+ $toast.style.pointerEvents = 'none';
619
+
620
+ if(!ISMOBILE || window.innerWidth > MOBILEWIDTH){
621
+ $toast.parentNode.style.transitionDelay = '0.2s';
622
+ }
623
+
624
+ try {
625
+ var event = new CustomEvent(PLUGIN_NAME+'-closing', {detail: settings, bubbles: true, cancelable: true});
626
+ document.dispatchEvent(event);
627
+ } catch(ex){
628
+ console.warn(ex);
629
+ }
630
+
631
+ setTimeout(function() {
632
+
633
+ $toast.parentNode.style.height = '0px';
634
+ $toast.parentNode.style.overflow = '';
635
+
636
+ setTimeout(function(){
637
+
638
+ delete that.children[settings.ref];
639
+
640
+ $toast.parentNode.remove();
641
+
642
+ try {
643
+ var event = new CustomEvent(PLUGIN_NAME+'-closed', {detail: settings, bubbles: true, cancelable: true});
644
+ document.dispatchEvent(event);
645
+ } catch(ex){
646
+ console.warn(ex);
647
+ }
648
+
649
+ if(typeof settings.onClosed !== 'undefined'){
650
+ settings.onClosed.apply(null, [settings, $toast, closedBy]);
651
+ }
652
+
653
+ }, 1000);
654
+ }, 200);
655
+
656
+
657
+ if(typeof settings.onClosing !== 'undefined'){
658
+ settings.onClosing.apply(null, [settings, $toast, closedBy]);
659
+ }
660
+ };
661
+
662
+ /**
663
+ * Create and show the Toast
664
+ * @public
665
+ * @param {Object} options User settings
666
+ */
667
+ $iziToast.show = function (options) {
668
+
669
+ var that = this;
670
+
671
+ // Merge user options with defaults
672
+ var settings = extend(CONFIG, options || {});
673
+ settings = extend(defaults, settings);
674
+ settings.time = {};
675
+
676
+ if(settings.id === null){
677
+ settings.id = generateId(settings.title+settings.message+settings.color);
678
+ }
679
+
680
+ if(settings.displayMode === 1 || settings.displayMode == 'once'){
681
+ try {
682
+ if(document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id).length > 0){
683
+ return false;
684
+ }
685
+ } catch (exc) {
686
+ console.warn('['+PLUGIN_NAME+'] Could not find an element with this selector: '+'#'+settings.id+'. Try to set an valid id.');
687
+ }
688
+ }
689
+
690
+ if(settings.displayMode === 2 || settings.displayMode == 'replace'){
691
+ try {
692
+ forEach(document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id), function(element, index) {
693
+ that.hide(settings, element, 'replaced');
694
+ });
695
+ } catch (exc) {
696
+ console.warn('['+PLUGIN_NAME+'] Could not find an element with this selector: '+'#'+settings.id+'. Try to set an valid id.');
697
+ }
698
+ }
699
+
700
+ settings.ref = new Date().getTime() + Math.floor((Math.random() * 10000000) + 1);
701
+
702
+ $iziToast.children[settings.ref] = settings;
703
+
704
+ var $DOM = {
705
+ body: document.querySelector('body'),
706
+ overlay: document.createElement('div'),
707
+ toast: document.createElement('div'),
708
+ toastBody: document.createElement('div'),
709
+ toastTexts: document.createElement('div'),
710
+ toastCapsule: document.createElement('div'),
711
+ cover: document.createElement('div'),
712
+ buttons: document.createElement('div'),
713
+ inputs: document.createElement('div'),
714
+ icon: !settings.iconUrl ? document.createElement('i') : document.createElement('img'),
715
+ wrapper: null
716
+ };
717
+
718
+ $DOM.toast.setAttribute('data-iziToast-ref', settings.ref);
719
+ $DOM.toast.appendChild($DOM.toastBody);
720
+ $DOM.toastCapsule.appendChild($DOM.toast);
721
+
722
+ // CSS Settings
723
+ (function(){
724
+
725
+ $DOM.toast.classList.add(PLUGIN_NAME);
726
+ $DOM.toast.classList.add(PLUGIN_NAME+'-opening');
727
+ $DOM.toastCapsule.classList.add(PLUGIN_NAME+'-capsule');
728
+ $DOM.toastBody.classList.add(PLUGIN_NAME + '-body');
729
+ $DOM.toastTexts.classList.add(PLUGIN_NAME + '-texts');
730
+
731
+ if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
732
+ if(settings.transitionInMobile)
733
+ $DOM.toast.classList.add(settings.transitionInMobile);
734
+ } else {
735
+ if(settings.transitionIn)
736
+ $DOM.toast.classList.add(settings.transitionIn);
737
+ }
738
+
739
+ if(settings.class){
740
+ var classes = settings.class.split(' ');
741
+ forEach(classes, function (value, index) {
742
+ $DOM.toast.classList.add(value);
743
+ });
744
+ }
745
+
746
+ if(settings.id){ $DOM.toast.id = settings.id; }
747
+
748
+ if(settings.rtl){
749
+ $DOM.toast.classList.add(PLUGIN_NAME + '-rtl');
750
+ $DOM.toast.setAttribute('dir', 'rtl');
751
+ }
752
+
753
+ if(settings.layout > 1){ $DOM.toast.classList.add(PLUGIN_NAME+'-layout'+settings.layout); }
754
+
755
+ if(settings.balloon){ $DOM.toast.classList.add(PLUGIN_NAME+'-balloon'); }
756
+
757
+ if(settings.maxWidth){
758
+ if( !isNaN(settings.maxWidth) ){
759
+ $DOM.toast.style.maxWidth = settings.maxWidth+'px';
760
+ } else {
761
+ $DOM.toast.style.maxWidth = settings.maxWidth;
762
+ }
763
+ }
764
+
765
+ if(settings.theme !== '' || settings.theme !== 'light') {
766
+
767
+ $DOM.toast.classList.add(PLUGIN_NAME+'-theme-'+settings.theme);
768
+ }
769
+
770
+ if(settings.color) { //#, rgb, rgba, hsl
771
+
772
+ if( isColor(settings.color) ){
773
+ $DOM.toast.style.background = settings.color;
774
+ } else {
775
+ $DOM.toast.classList.add(PLUGIN_NAME+'-color-'+settings.color);
776
+ }
777
+ }
778
+
779
+ if(settings.backgroundColor) {
780
+ $DOM.toast.style.background = settings.backgroundColor;
781
+ if(settings.balloon){
782
+ $DOM.toast.style.borderColor = settings.backgroundColor;
783
+ }
784
+ }
785
+ })();
786
+
787
+ // Cover image
788
+ (function(){
789
+ if(settings.image) {
790
+ $DOM.cover.classList.add(PLUGIN_NAME + '-cover');
791
+ $DOM.cover.style.width = settings.imageWidth + 'px';
792
+
793
+ if(isBase64(settings.image.replace(/ /g,''))){
794
+ $DOM.cover.style.backgroundImage = 'url(data:image/png;base64,' + settings.image.replace(/ /g,'') + ')';
795
+ } else {
796
+ $DOM.cover.style.backgroundImage = 'url(' + settings.image + ')';
797
+ }
798
+
799
+ if(settings.rtl){
800
+ $DOM.toastBody.style.marginRight = (settings.imageWidth + 10) + 'px';
801
+ } else {
802
+ $DOM.toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';
803
+ }
804
+ $DOM.toast.appendChild($DOM.cover);
805
+ }
806
+ })();
807
+
808
+ // Button close
809
+ (function(){
810
+ if(settings.close){
811
+
812
+ $DOM.buttonClose = document.createElement('button');
813
+ $DOM.buttonClose.type = 'button';
814
+ $DOM.buttonClose.classList.add(PLUGIN_NAME + '-close');
815
+ $DOM.buttonClose.addEventListener('click', function (e) {
816
+ var button = e.target;
817
+ that.hide(settings, $DOM.toast, 'button');
818
+ });
819
+ $DOM.toast.appendChild($DOM.buttonClose);
820
+ } else {
821
+ if(settings.rtl){
822
+ $DOM.toast.style.paddingLeft = '18px';
823
+ } else {
824
+ $DOM.toast.style.paddingRight = '18px';
825
+ }
826
+ }
827
+ })();
828
+
829
+ // Progress Bar & Timeout
830
+ (function(){
831
+
832
+ if(settings.progressBar){
833
+ $DOM.progressBar = document.createElement('div');
834
+ $DOM.progressBarDiv = document.createElement('div');
835
+ $DOM.progressBar.classList.add(PLUGIN_NAME + '-progressbar');
836
+ $DOM.progressBarDiv.style.background = settings.progressBarColor;
837
+ $DOM.progressBar.appendChild($DOM.progressBarDiv);
838
+ $DOM.toast.appendChild($DOM.progressBar);
839
+ }
840
+
841
+ if(settings.timeout) {
842
+
843
+ if(settings.pauseOnHover && !settings.resetOnHover){
844
+
845
+ $DOM.toast.addEventListener('mouseenter', function (e) {
846
+ that.progress(settings, $DOM.toast).pause();
847
+ });
848
+ $DOM.toast.addEventListener('mouseleave', function (e) {
849
+ that.progress(settings, $DOM.toast).resume();
850
+ });
851
+ }
852
+
853
+ if(settings.resetOnHover){
854
+
855
+ $DOM.toast.addEventListener('mouseenter', function (e) {
856
+ that.progress(settings, $DOM.toast).reset();
857
+ });
858
+ $DOM.toast.addEventListener('mouseleave', function (e) {
859
+ that.progress(settings, $DOM.toast).start();
860
+ });
861
+ }
862
+ }
863
+ })();
864
+
865
+ // Icon
866
+ (function(){
867
+
868
+ if(settings.iconUrl) {
869
+
870
+ $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon');
871
+ $DOM.icon.setAttribute('src', settings.iconUrl);
872
+
873
+ } else if(settings.icon) {
874
+ $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon ' + settings.icon);
875
+
876
+ if(settings.iconText){
877
+ $DOM.icon.appendChild(document.createTextNode(settings.iconText));
878
+ }
879
+
880
+ if(settings.iconColor){
881
+ $DOM.icon.style.color = settings.iconColor;
882
+ }
883
+ }
884
+
885
+ if(settings.icon || settings.iconUrl) {
886
+
887
+ if(settings.rtl){
888
+ $DOM.toastBody.style.paddingRight = '33px';
889
+ } else {
890
+ $DOM.toastBody.style.paddingLeft = '33px';
891
+ }
892
+
893
+ $DOM.toastBody.appendChild($DOM.icon);
894
+ }
895
+
896
+ })();
897
+
898
+ // Title & Message
899
+ (function(){
900
+ if(settings.title.length > 0) {
901
+
902
+ $DOM.strong = document.createElement('strong');
903
+ $DOM.strong.classList.add(PLUGIN_NAME + '-title');
904
+ $DOM.strong.appendChild(createFragElem(settings.title));
905
+ $DOM.toastTexts.appendChild($DOM.strong);
906
+
907
+ if(settings.titleColor) {
908
+ $DOM.strong.style.color = settings.titleColor;
909
+ }
910
+ if(settings.titleSize) {
911
+ if( !isNaN(settings.titleSize) ){
912
+ $DOM.strong.style.fontSize = settings.titleSize+'px';
913
+ } else {
914
+ $DOM.strong.style.fontSize = settings.titleSize;
915
+ }
916
+ }
917
+ if(settings.titleLineHeight) {
918
+ if( !isNaN(settings.titleSize) ){
919
+ $DOM.strong.style.lineHeight = settings.titleLineHeight+'px';
920
+ } else {
921
+ $DOM.strong.style.lineHeight = settings.titleLineHeight;
922
+ }
923
+ }
924
+ }
925
+
926
+ if(settings.message.length > 0) {
927
+
928
+ $DOM.p = document.createElement('p');
929
+ $DOM.p.classList.add(PLUGIN_NAME + '-message');
930
+ $DOM.p.appendChild(createFragElem(settings.message));
931
+ $DOM.toastTexts.appendChild($DOM.p);
932
+
933
+ if(settings.messageColor) {
934
+ $DOM.p.style.color = settings.messageColor;
935
+ }
936
+ if(settings.messageSize) {
937
+ if( !isNaN(settings.titleSize) ){
938
+ $DOM.p.style.fontSize = settings.messageSize+'px';
939
+ } else {
940
+ $DOM.p.style.fontSize = settings.messageSize;
941
+ }
942
+ }
943
+ if(settings.messageLineHeight) {
944
+
945
+ if( !isNaN(settings.titleSize) ){
946
+ $DOM.p.style.lineHeight = settings.messageLineHeight+'px';
947
+ } else {
948
+ $DOM.p.style.lineHeight = settings.messageLineHeight;
949
+ }
950
+ }
951
+ }
952
+
953
+ if(settings.title.length > 0 && settings.message.length > 0) {
954
+ if(settings.rtl){
955
+ $DOM.strong.style.marginLeft = '10px';
956
+ } else if(settings.layout !== 2 && !settings.rtl) {
957
+ $DOM.strong.style.marginRight = '10px';
958
+ }
959
+ }
960
+ })();
961
+
962
+ $DOM.toastBody.appendChild($DOM.toastTexts);
963
+
964
+ // Inputs
965
+ var $inputs;
966
+ (function(){
967
+ if(settings.inputs.length > 0) {
968
+
969
+ $DOM.inputs.classList.add(PLUGIN_NAME + '-inputs');
970
+
971
+ forEach(settings.inputs, function (value, index) {
972
+ $DOM.inputs.appendChild(createFragElem(value[0]));
973
+
974
+ $inputs = $DOM.inputs.childNodes;
975
+
976
+ $inputs[index].classList.add(PLUGIN_NAME + '-inputs-child');
977
+
978
+ if(value[3]){
979
+ setTimeout(function() {
980
+ $inputs[index].focus();
981
+ }, 300);
982
+ }
983
+
984
+ $inputs[index].addEventListener(value[1], function (e) {
985
+ var ts = value[2];
986
+ return ts(that, $DOM.toast, this, e);
987
+ });
988
+ });
989
+ $DOM.toastBody.appendChild($DOM.inputs);
990
+ }
991
+ })();
992
+
993
+ // Buttons
994
+ (function(){
995
+ if(settings.buttons.length > 0) {
996
+
997
+ $DOM.buttons.classList.add(PLUGIN_NAME + '-buttons');
998
+
999
+ forEach(settings.buttons, function (value, index) {
1000
+ $DOM.buttons.appendChild(createFragElem(value[0]));
1001
+
1002
+ var $btns = $DOM.buttons.childNodes;
1003
+
1004
+ $btns[index].classList.add(PLUGIN_NAME + '-buttons-child');
1005
+
1006
+ if(value[2]){
1007
+ setTimeout(function() {
1008
+ $btns[index].focus();
1009
+ }, 300);
1010
+ }
1011
+
1012
+ $btns[index].addEventListener('click', function (e) {
1013
+ e.preventDefault();
1014
+ var ts = value[1];
1015
+ return ts(that, $DOM.toast, this, e, $inputs);
1016
+ });
1017
+ });
1018
+ }
1019
+ $DOM.toastBody.appendChild($DOM.buttons);
1020
+ })();
1021
+
1022
+ if(settings.message.length > 0 && (settings.inputs.length > 0 || settings.buttons.length > 0)) {
1023
+ $DOM.p.style.marginBottom = '0';
1024
+ }
1025
+
1026
+ if(settings.inputs.length > 0 || settings.buttons.length > 0){
1027
+ if(settings.rtl){
1028
+ $DOM.toastTexts.style.marginLeft = '10px';
1029
+ } else {
1030
+ $DOM.toastTexts.style.marginRight = '10px';
1031
+ }
1032
+ if(settings.inputs.length > 0 && settings.buttons.length > 0){
1033
+ if(settings.rtl){
1034
+ $DOM.inputs.style.marginLeft = '8px';
1035
+ } else {
1036
+ $DOM.inputs.style.marginRight = '8px';
1037
+ }
1038
+ }
1039
+ }
1040
+
1041
+ // Wrap
1042
+ (function(){
1043
+ $DOM.toastCapsule.style.visibility = 'hidden';
1044
+ setTimeout(function() {
1045
+ var H = $DOM.toast.offsetHeight;
1046
+ var style = $DOM.toast.currentStyle || window.getComputedStyle($DOM.toast);
1047
+ var marginTop = style.marginTop;
1048
+ marginTop = marginTop.split('px');
1049
+ marginTop = parseInt(marginTop[0]);
1050
+ var marginBottom = style.marginBottom;
1051
+ marginBottom = marginBottom.split('px');
1052
+ marginBottom = parseInt(marginBottom[0]);
1053
+
1054
+ $DOM.toastCapsule.style.visibility = '';
1055
+ $DOM.toastCapsule.style.height = (H+marginBottom+marginTop)+'px';
1056
+
1057
+ setTimeout(function() {
1058
+ $DOM.toastCapsule.style.height = 'auto';
1059
+ if(settings.target){
1060
+ $DOM.toastCapsule.style.overflow = 'visible';
1061
+ }
1062
+ }, 500);
1063
+
1064
+ if(settings.timeout) {
1065
+ that.progress(settings, $DOM.toast).start();
1066
+ }
1067
+ }, 100);
1068
+ })();
1069
+
1070
+ // Target
1071
+ (function(){
1072
+ var position = settings.position;
1073
+
1074
+ if(settings.target){
1075
+
1076
+ $DOM.wrapper = document.querySelector(settings.target);
1077
+ $DOM.wrapper.classList.add(PLUGIN_NAME + '-target');
1078
+
1079
+ if(settings.targetFirst) {
1080
+ $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
1081
+ } else {
1082
+ $DOM.wrapper.appendChild($DOM.toastCapsule);
1083
+ }
1084
+
1085
+ } else {
1086
+
1087
+ if( POSITIONS.indexOf(settings.position) == -1 ){
1088
+ console.warn('['+PLUGIN_NAME+'] Incorrect position.\nIt can be › ' + POSITIONS);
1089
+ return;
1090
+ }
1091
+
1092
+ if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
1093
+ if(settings.position == 'bottomLeft' || settings.position == 'bottomRight' || settings.position == 'bottomCenter'){
1094
+ position = PLUGIN_NAME+'-wrapper-bottomCenter';
1095
+ }
1096
+ else if(settings.position == 'topLeft' || settings.position == 'topRight' || settings.position == 'topCenter'){
1097
+ position = PLUGIN_NAME+'-wrapper-topCenter';
1098
+ }
1099
+ else {
1100
+ position = PLUGIN_NAME+'-wrapper-center';
1101
+ }
1102
+ } else {
1103
+ position = PLUGIN_NAME+'-wrapper-'+position;
1104
+ }
1105
+ $DOM.wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position);
1106
+
1107
+ if(!$DOM.wrapper) {
1108
+ $DOM.wrapper = document.createElement('div');
1109
+ $DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper');
1110
+ $DOM.wrapper.classList.add(position);
1111
+ document.body.appendChild($DOM.wrapper);
1112
+ }
1113
+ if(settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight'){
1114
+ $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
1115
+ } else {
1116
+ $DOM.wrapper.appendChild($DOM.toastCapsule);
1117
+ }
1118
+ }
1119
+
1120
+ if(!isNaN(settings.zindex)) {
1121
+ $DOM.wrapper.style.zIndex = settings.zindex;
1122
+ } else {
1123
+ console.warn('['+PLUGIN_NAME+'] Invalid zIndex.');
1124
+ }
1125
+ })();
1126
+
1127
+ // Overlay
1128
+ (function(){
1129
+
1130
+ if(settings.overlay) {
1131
+
1132
+ if( document.querySelector('.'+PLUGIN_NAME+'-overlay.fadeIn') !== null ){
1133
+
1134
+ $DOM.overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
1135
+ $DOM.overlay.setAttribute('data-iziToast-ref', $DOM.overlay.getAttribute('data-iziToast-ref') + ',' + settings.ref);
1136
+
1137
+ if(!isNaN(settings.zindex) && settings.zindex !== null) {
1138
+ $DOM.overlay.style.zIndex = settings.zindex-1;
1139
+ }
1140
+
1141
+ } else {
1142
+
1143
+ $DOM.overlay.classList.add(PLUGIN_NAME+'-overlay');
1144
+ $DOM.overlay.classList.add('fadeIn');
1145
+ $DOM.overlay.style.background = settings.overlayColor;
1146
+ $DOM.overlay.setAttribute('data-iziToast-ref', settings.ref);
1147
+ if(!isNaN(settings.zindex) && settings.zindex !== null) {
1148
+ $DOM.overlay.style.zIndex = settings.zindex-1;
1149
+ }
1150
+ document.querySelector('body').appendChild($DOM.overlay);
1151
+ }
1152
+
1153
+ if(settings.overlayClose) {
1154
+
1155
+ $DOM.overlay.removeEventListener('click', {});
1156
+ $DOM.overlay.addEventListener('click', function (e) {
1157
+ that.hide(settings, $DOM.toast, 'overlay');
1158
+ });
1159
+ } else {
1160
+ $DOM.overlay.removeEventListener('click', {});
1161
+ }
1162
+ }
1163
+ })();
1164
+
1165
+ // Inside animations
1166
+ (function(){
1167
+ if(settings.animateInside){
1168
+ $DOM.toast.classList.add(PLUGIN_NAME+'-animateInside');
1169
+
1170
+ var animationTimes = [200, 100, 300];
1171
+ if(settings.transitionIn == 'bounceInLeft' || settings.transitionIn == 'bounceInRight'){
1172
+ animationTimes = [400, 200, 400];
1173
+ }
1174
+
1175
+ if(settings.title.length > 0) {
1176
+ setTimeout(function(){
1177
+ $DOM.strong.classList.add('slideIn');
1178
+ }, animationTimes[0]);
1179
+ }
1180
+
1181
+ if(settings.message.length > 0) {
1182
+ setTimeout(function(){
1183
+ $DOM.p.classList.add('slideIn');
1184
+ }, animationTimes[1]);
1185
+ }
1186
+
1187
+ if(settings.icon || settings.iconUrl) {
1188
+ setTimeout(function(){
1189
+ $DOM.icon.classList.add('revealIn');
1190
+ }, animationTimes[2]);
1191
+ }
1192
+
1193
+ var counter = 150;
1194
+ if(settings.buttons.length > 0 && $DOM.buttons) {
1195
+
1196
+ setTimeout(function(){
1197
+
1198
+ forEach($DOM.buttons.childNodes, function(element, index) {
1199
+
1200
+ setTimeout(function(){
1201
+ element.classList.add('revealIn');
1202
+ }, counter);
1203
+ counter = counter + 150;
1204
+ });
1205
+
1206
+ }, settings.inputs.length > 0 ? 150 : 0);
1207
+ }
1208
+
1209
+ if(settings.inputs.length > 0 && $DOM.inputs) {
1210
+ counter = 150;
1211
+ forEach($DOM.inputs.childNodes, function(element, index) {
1212
+
1213
+ setTimeout(function(){
1214
+ element.classList.add('revealIn');
1215
+ }, counter);
1216
+ counter = counter + 150;
1217
+ });
1218
+ }
1219
+ }
1220
+ })();
1221
+
1222
+ settings.onOpening.apply(null, [settings, $DOM.toast]);
1223
+
1224
+ try {
1225
+ var event = new CustomEvent(PLUGIN_NAME + '-opening', {detail: settings, bubbles: true, cancelable: true});
1226
+ document.dispatchEvent(event);
1227
+ } catch(ex){
1228
+ console.warn(ex);
1229
+ }
1230
+
1231
+ setTimeout(function() {
1232
+
1233
+ $DOM.toast.classList.remove(PLUGIN_NAME+'-opening');
1234
+ $DOM.toast.classList.add(PLUGIN_NAME+'-opened');
1235
+
1236
+ try {
1237
+ var event = new CustomEvent(PLUGIN_NAME + '-opened', {detail: settings, bubbles: true, cancelable: true});
1238
+ document.dispatchEvent(event);
1239
+ } catch(ex){
1240
+ console.warn(ex);
1241
+ }
1242
+
1243
+ settings.onOpened.apply(null, [settings, $DOM.toast]);
1244
+ }, 1000);
1245
+
1246
+ if(settings.drag){
1247
+
1248
+ if(ACCEPTSTOUCH) {
1249
+
1250
+ $DOM.toast.addEventListener('touchstart', function(e) {
1251
+ drag.startMoving(this, that, settings, e);
1252
+ }, false);
1253
+
1254
+ $DOM.toast.addEventListener('touchend', function(e) {
1255
+ drag.stopMoving(this, e);
1256
+ }, false);
1257
+ } else {
1258
+
1259
+ $DOM.toast.addEventListener('mousedown', function(e) {
1260
+ e.preventDefault();
1261
+ drag.startMoving(this, that, settings, e);
1262
+ }, false);
1263
+
1264
+ $DOM.toast.addEventListener('mouseup', function(e) {
1265
+ e.preventDefault();
1266
+ drag.stopMoving(this, e);
1267
+ }, false);
1268
+ }
1269
+ }
1270
+
1271
+ if(settings.closeOnEscape) {
1272
+
1273
+ document.addEventListener('keyup', function (evt) {
1274
+ evt = evt || window.event;
1275
+ if(evt.keyCode == 27) {
1276
+ that.hide(settings, $DOM.toast, 'esc');
1277
+ }
1278
+ });
1279
+ }
1280
+
1281
+ if(settings.closeOnClick) {
1282
+ $DOM.toast.addEventListener('click', function (evt) {
1283
+ that.hide(settings, $DOM.toast, 'toast');
1284
+ });
1285
+ }
1286
+
1287
+ that.toast = $DOM.toast;
1288
+ };
1289
+
1290
+
1291
+ return $iziToast;
1292
+ });