sweet-alert 0.0.4
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.
- checksums.yaml +7 -0
- data/.gitignore +3 -0
- data/Gemfile +3 -0
- data/LICENSE +21 -0
- data/README.md +39 -0
- data/Rakefile +1 -0
- data/app/assets/javascripts/sweet-alert/index.js +1 -0
- data/app/assets/javascripts/sweet-alert/sweet-alert.js +745 -0
- data/app/assets/stylesheets/sweet-alert/index.css +3 -0
- data/app/assets/stylesheets/sweet-alert/sweet-alert.css +605 -0
- data/app/assets/stylesheets/sweet-alert/sweet-alert.scss +432 -0
- data/lib/sweet-alert.rb +3 -0
- data/lib/sweet-alert/engine.rb +4 -0
- data/lib/sweet-alert/version.rb +3 -0
- data/sweet-alert-rails.gemspec +16 -0
- metadata +57 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 25afb8f75d4bc1974f5c7b8c0e3fd9beae8a9469
|
|
4
|
+
data.tar.gz: 9fe98ba7dc12bb73cae8e0e11178ac28d00d923a
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 201016af60556fe287dfb24af9d796ca3255aaf2c0084366a79053f705cf28c4fefee9b3c2475038350df4cc60999594fa9d4b45c6a8d27656644456dfbba0fb
|
|
7
|
+
data.tar.gz: 95f0143c275d132dae53c73a5bac6812b0cc720db58b60299d197b2e39a038f09a3ef47aa956572e448a27c8c4fec6d6610fb445465a23acd9b1726ad9556075
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
Copyright (c) 2014 Najtmare
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
The above copyright notice and this permission notice shall be included in
|
|
12
|
+
all copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
Sweet Alert for Rails
|
|
2
|
+
===========================
|
|
3
|
+
|
|
4
|
+
[](http://badge.fury.io/rb/sweet-alert)
|
|
5
|
+
|
|
6
|
+
An awesome replacement for JavaScript's alert.
|
|
7
|
+
|
|
8
|
+
[See it in action](http://tristanedwards.me/sweetalert).
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
Add this line to your application's Gemfile:
|
|
13
|
+
|
|
14
|
+
gem 'sweet-alert'
|
|
15
|
+
|
|
16
|
+
And then execute:
|
|
17
|
+
|
|
18
|
+
$ bundle
|
|
19
|
+
|
|
20
|
+
Or install it yourself as:
|
|
21
|
+
|
|
22
|
+
$ gem install sweet-alert
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
Just like this:
|
|
27
|
+
|
|
28
|
+
application.js:
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
//= require sweet-alert
|
|
32
|
+
```
|
|
33
|
+
application.css:
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
/*
|
|
37
|
+
*= require sweet-alert
|
|
38
|
+
*/
|
|
39
|
+
```
|
data/Rakefile
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require "bundler/gem_tasks"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//= require ./sweet-alert
|
|
@@ -0,0 +1,745 @@
|
|
|
1
|
+
// SweetAlert
|
|
2
|
+
// 2014 (c) - Tristan Edwards
|
|
3
|
+
// github.com/t4t5/sweetalert
|
|
4
|
+
(function(window, document) {
|
|
5
|
+
|
|
6
|
+
var modalClass = '.sweet-alert',
|
|
7
|
+
overlayClass = '.sweet-overlay',
|
|
8
|
+
alertTypes = ['error', 'warning', 'info', 'success'],
|
|
9
|
+
defaultParams = {
|
|
10
|
+
title: '',
|
|
11
|
+
text: '',
|
|
12
|
+
type: null,
|
|
13
|
+
allowOutsideClick: false,
|
|
14
|
+
showCancelButton: false,
|
|
15
|
+
closeOnConfirm: true,
|
|
16
|
+
closeOnCancel: true,
|
|
17
|
+
confirmButtonText: 'OK',
|
|
18
|
+
confirmButtonColor: '#AEDEF4',
|
|
19
|
+
cancelButtonText: 'Cancel',
|
|
20
|
+
imageUrl: null,
|
|
21
|
+
imageSize: null,
|
|
22
|
+
timer: null
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
* Manipulate DOM
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
var getModal = function() {
|
|
31
|
+
return document.querySelector(modalClass);
|
|
32
|
+
},
|
|
33
|
+
getOverlay = function() {
|
|
34
|
+
return document.querySelector(overlayClass);
|
|
35
|
+
},
|
|
36
|
+
hasClass = function(elem, className) {
|
|
37
|
+
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
|
|
38
|
+
},
|
|
39
|
+
addClass = function(elem, className) {
|
|
40
|
+
if (!hasClass(elem, className)) {
|
|
41
|
+
elem.className += ' ' + className;
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
removeClass = function(elem, className) {
|
|
45
|
+
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
|
|
46
|
+
if (hasClass(elem, className)) {
|
|
47
|
+
while (newClass.indexOf(' ' + className + ' ') >= 0) {
|
|
48
|
+
newClass = newClass.replace(' ' + className + ' ', ' ');
|
|
49
|
+
}
|
|
50
|
+
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
escapeHtml = function(str) {
|
|
54
|
+
var div = document.createElement('div');
|
|
55
|
+
div.appendChild(document.createTextNode(str));
|
|
56
|
+
return div.innerHTML;
|
|
57
|
+
},
|
|
58
|
+
_show = function(elem) {
|
|
59
|
+
elem.style.opacity = '';
|
|
60
|
+
elem.style.display = 'block';
|
|
61
|
+
},
|
|
62
|
+
show = function(elems) {
|
|
63
|
+
if (elems && !elems.length) {
|
|
64
|
+
return _show(elems);
|
|
65
|
+
}
|
|
66
|
+
for (var i = 0; i < elems.length; ++i) {
|
|
67
|
+
_show(elems[i]);
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
_hide = function(elem) {
|
|
71
|
+
elem.style.opacity = '';
|
|
72
|
+
elem.style.display = 'none';
|
|
73
|
+
},
|
|
74
|
+
hide = function(elems) {
|
|
75
|
+
if (elems && !elems.length) {
|
|
76
|
+
return _hide(elems);
|
|
77
|
+
}
|
|
78
|
+
for (var i = 0; i < elems.length; ++i) {
|
|
79
|
+
_hide(elems[i]);
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
isDescendant = function(parent, child) {
|
|
83
|
+
var node = child.parentNode;
|
|
84
|
+
while (node !== null) {
|
|
85
|
+
if (node === parent) {
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
node = node.parentNode;
|
|
89
|
+
}
|
|
90
|
+
return false;
|
|
91
|
+
},
|
|
92
|
+
getTopMargin = function(elem) {
|
|
93
|
+
elem.style.left = '-9999px';
|
|
94
|
+
elem.style.display = 'block';
|
|
95
|
+
|
|
96
|
+
var height = elem.clientHeight;
|
|
97
|
+
var padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10);
|
|
98
|
+
|
|
99
|
+
elem.style.left = '';
|
|
100
|
+
elem.style.display = 'none';
|
|
101
|
+
return ('-' + parseInt(height / 2 + padding) + 'px');
|
|
102
|
+
},
|
|
103
|
+
fadeIn = function(elem, interval) {
|
|
104
|
+
if(+elem.style.opacity < 1) {
|
|
105
|
+
interval = interval || 16;
|
|
106
|
+
elem.style.opacity = 0;
|
|
107
|
+
elem.style.display = 'block';
|
|
108
|
+
var last = +new Date();
|
|
109
|
+
var tick = function() {
|
|
110
|
+
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
|
|
111
|
+
last = +new Date();
|
|
112
|
+
|
|
113
|
+
if (+elem.style.opacity < 1) {
|
|
114
|
+
setTimeout(tick, interval);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
tick();
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
fadeOut = function(elem, interval) {
|
|
121
|
+
interval = interval || 16;
|
|
122
|
+
elem.style.opacity = 1;
|
|
123
|
+
var last = +new Date();
|
|
124
|
+
var tick = function() {
|
|
125
|
+
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
|
|
126
|
+
last = +new Date();
|
|
127
|
+
|
|
128
|
+
if (+elem.style.opacity > 0) {
|
|
129
|
+
setTimeout(tick, interval);
|
|
130
|
+
} else {
|
|
131
|
+
elem.style.display = 'none';
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
tick();
|
|
135
|
+
},
|
|
136
|
+
fireClick = function(node) {
|
|
137
|
+
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
|
|
138
|
+
// Then fixed for today's Chrome browser.
|
|
139
|
+
if (MouseEvent) {
|
|
140
|
+
// Up-to-date approach
|
|
141
|
+
var mevt = new MouseEvent('click', {
|
|
142
|
+
view: window,
|
|
143
|
+
bubbles: false,
|
|
144
|
+
cancelable: true
|
|
145
|
+
});
|
|
146
|
+
node.dispatchEvent(mevt);
|
|
147
|
+
} else if ( document.createEvent ) {
|
|
148
|
+
// Fallback
|
|
149
|
+
var evt = document.createEvent('MouseEvents');
|
|
150
|
+
evt.initEvent('click', false, false);
|
|
151
|
+
node.dispatchEvent(evt);
|
|
152
|
+
} else if( document.createEventObject ) {
|
|
153
|
+
node.fireEvent('onclick') ;
|
|
154
|
+
} else if (typeof node.onclick === 'function' ) {
|
|
155
|
+
node.onclick();
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
stopEventPropagation = function(e) {
|
|
159
|
+
// In particular, make sure the space bar doesn't scroll the main window.
|
|
160
|
+
if (typeof e.stopPropagation === 'function') {
|
|
161
|
+
e.stopPropagation();
|
|
162
|
+
e.preventDefault();
|
|
163
|
+
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
|
|
164
|
+
window.event.cancelBubble = true;
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
// Remember state in cases where opening and handling a modal will fiddle with it.
|
|
169
|
+
var previousActiveElement,
|
|
170
|
+
previousDocumentClick,
|
|
171
|
+
previousWindowKeyDown,
|
|
172
|
+
lastFocusedButton;
|
|
173
|
+
|
|
174
|
+
/*
|
|
175
|
+
* Add modal + overlay to DOM
|
|
176
|
+
*/
|
|
177
|
+
|
|
178
|
+
window.sweetAlertInitialize = function() {
|
|
179
|
+
var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',
|
|
180
|
+
sweetWrap = document.createElement('div');
|
|
181
|
+
|
|
182
|
+
sweetWrap.innerHTML = sweetHTML;
|
|
183
|
+
|
|
184
|
+
// For readability: check sweet-alert.html
|
|
185
|
+
document.body.appendChild(sweetWrap);
|
|
186
|
+
|
|
187
|
+
// For development use only!
|
|
188
|
+
/*jQuery.ajax({
|
|
189
|
+
url: '../lib/sweet-alert.html', // Change path depending on file location
|
|
190
|
+
dataType: 'html'
|
|
191
|
+
})
|
|
192
|
+
.done(function(html) {
|
|
193
|
+
jQuery('body').append(html);
|
|
194
|
+
});*/
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/*
|
|
198
|
+
* Global sweetAlert function
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
window.sweetAlert = window.swal = function() {
|
|
202
|
+
if (arguments[0] === undefined) {
|
|
203
|
+
window.console.error('sweetAlert expects at least 1 attribute!');
|
|
204
|
+
return false;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
var params = extend({}, defaultParams);
|
|
208
|
+
|
|
209
|
+
switch (typeof arguments[0]) {
|
|
210
|
+
|
|
211
|
+
case 'string':
|
|
212
|
+
params.title = arguments[0];
|
|
213
|
+
params.text = arguments[1] || '';
|
|
214
|
+
params.type = arguments[2] || '';
|
|
215
|
+
|
|
216
|
+
break;
|
|
217
|
+
|
|
218
|
+
case 'object':
|
|
219
|
+
if (arguments[0].title === undefined) {
|
|
220
|
+
window.console.error('Missing "title" argument!');
|
|
221
|
+
return false;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
params.title = arguments[0].title;
|
|
225
|
+
params.text = arguments[0].text || defaultParams.text;
|
|
226
|
+
params.type = arguments[0].type || defaultParams.type;
|
|
227
|
+
params.allowOutsideClick = arguments[0].allowOutsideClick || defaultParams.allowOutsideClick;
|
|
228
|
+
params.showCancelButton = arguments[0].showCancelButton !== undefined ? arguments[0].showCancelButton : defaultParams.showCancelButton;
|
|
229
|
+
params.closeOnConfirm = arguments[0].closeOnConfirm !== undefined ? arguments[0].closeOnConfirm : defaultParams.closeOnConfirm;
|
|
230
|
+
params.closeOnCancel = arguments[0].closeOnCancel !== undefined ? arguments[0].closeOnCancel : defaultParams.closeOnCancel;
|
|
231
|
+
params.timer = arguments[0].timer || defaultParams.timer;
|
|
232
|
+
|
|
233
|
+
// Show "Confirm" instead of "OK" if cancel button is visible
|
|
234
|
+
params.confirmButtonText = (defaultParams.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText;
|
|
235
|
+
params.confirmButtonText = arguments[0].confirmButtonText || defaultParams.confirmButtonText;
|
|
236
|
+
params.confirmButtonColor = arguments[0].confirmButtonColor || defaultParams.confirmButtonColor;
|
|
237
|
+
params.cancelButtonText = arguments[0].cancelButtonText || defaultParams.cancelButtonText;
|
|
238
|
+
params.imageUrl = arguments[0].imageUrl || defaultParams.imageUrl;
|
|
239
|
+
params.imageSize = arguments[0].imageSize || defaultParams.imageSize;
|
|
240
|
+
params.doneFunction = arguments[1] || null;
|
|
241
|
+
|
|
242
|
+
break;
|
|
243
|
+
|
|
244
|
+
default:
|
|
245
|
+
window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
|
|
246
|
+
return false;
|
|
247
|
+
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
setParameters(params);
|
|
251
|
+
fixVerticalPosition();
|
|
252
|
+
openModal();
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
// Modal interactions
|
|
256
|
+
var modal = getModal();
|
|
257
|
+
|
|
258
|
+
// Mouse interactions
|
|
259
|
+
var onButtonEvent = function(e) {
|
|
260
|
+
|
|
261
|
+
var target = e.target || e.srcElement,
|
|
262
|
+
targetedConfirm = (target.className === 'confirm'),
|
|
263
|
+
modalIsVisible = hasClass(modal, 'visible'),
|
|
264
|
+
doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');
|
|
265
|
+
|
|
266
|
+
switch (e.type) {
|
|
267
|
+
case ("mouseover"):
|
|
268
|
+
if (targetedConfirm) {
|
|
269
|
+
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
|
|
270
|
+
}
|
|
271
|
+
break;
|
|
272
|
+
case ("mouseout"):
|
|
273
|
+
if (targetedConfirm) {
|
|
274
|
+
e.target.style.backgroundColor = params.confirmButtonColor;
|
|
275
|
+
}
|
|
276
|
+
break;
|
|
277
|
+
case ("mousedown"):
|
|
278
|
+
if (targetedConfirm) {
|
|
279
|
+
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.14);
|
|
280
|
+
}
|
|
281
|
+
break;
|
|
282
|
+
case ("mouseup"):
|
|
283
|
+
if (targetedConfirm) {
|
|
284
|
+
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
|
|
285
|
+
}
|
|
286
|
+
break;
|
|
287
|
+
case ("focus"):
|
|
288
|
+
var $confirmButton = modal.querySelector('button.confirm'),
|
|
289
|
+
$cancelButton = modal.querySelector('button.cancel');
|
|
290
|
+
|
|
291
|
+
if (targetedConfirm) {
|
|
292
|
+
$cancelButton.style.boxShadow = 'none';
|
|
293
|
+
} else {
|
|
294
|
+
$confirmButton.style.boxShadow = 'none';
|
|
295
|
+
}
|
|
296
|
+
break;
|
|
297
|
+
case ("click"):
|
|
298
|
+
if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm"
|
|
299
|
+
|
|
300
|
+
params.doneFunction(true);
|
|
301
|
+
|
|
302
|
+
if (params.closeOnConfirm) {
|
|
303
|
+
closeModal();
|
|
304
|
+
}
|
|
305
|
+
} else if (doneFunctionExists && modalIsVisible) { // Clicked "cancel"
|
|
306
|
+
|
|
307
|
+
// Check if callback function expects a parameter (to track cancel actions)
|
|
308
|
+
var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
|
|
309
|
+
var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")";
|
|
310
|
+
|
|
311
|
+
if (functionHandlesCancel) {
|
|
312
|
+
params.doneFunction(false);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
if (params.closeOnCancel) {
|
|
316
|
+
closeModal();
|
|
317
|
+
}
|
|
318
|
+
} else {
|
|
319
|
+
closeModal();
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
break;
|
|
323
|
+
}
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
var $buttons = modal.querySelectorAll('button');
|
|
327
|
+
for (var i = 0; i < $buttons.length; i++) {
|
|
328
|
+
$buttons[i].onclick = onButtonEvent;
|
|
329
|
+
$buttons[i].onmouseover = onButtonEvent;
|
|
330
|
+
$buttons[i].onmouseout = onButtonEvent;
|
|
331
|
+
$buttons[i].onmousedown = onButtonEvent;
|
|
332
|
+
//$buttons[i].onmouseup = onButtonEvent;
|
|
333
|
+
$buttons[i].onfocus = onButtonEvent;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
// Remember the current document.onclick event.
|
|
337
|
+
previousDocumentClick = document.onclick;
|
|
338
|
+
document.onclick = function(e) {
|
|
339
|
+
var target = e.target || e.srcElement;
|
|
340
|
+
|
|
341
|
+
var clickedOnModal = (modal === target),
|
|
342
|
+
clickedOnModalChild = isDescendant(modal, e.target),
|
|
343
|
+
modalIsVisible = hasClass(modal, 'visible'),
|
|
344
|
+
outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true';
|
|
345
|
+
|
|
346
|
+
if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) {
|
|
347
|
+
closeModal();
|
|
348
|
+
}
|
|
349
|
+
};
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
// Keyboard interactions
|
|
353
|
+
var $okButton = modal.querySelector('button.confirm'),
|
|
354
|
+
$cancelButton = modal.querySelector('button.cancel'),
|
|
355
|
+
$modalButtons = modal.querySelectorAll('button:not([type=hidden])');
|
|
356
|
+
|
|
357
|
+
|
|
358
|
+
function handleKeyDown(e) {
|
|
359
|
+
var keyCode = e.keyCode || e.which;
|
|
360
|
+
|
|
361
|
+
if ([9,13,32,27].indexOf(keyCode) === -1) {
|
|
362
|
+
// Don't do work on keys we don't care about.
|
|
363
|
+
return;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
var $targetElement = e.target || e.srcElement;
|
|
367
|
+
|
|
368
|
+
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
|
369
|
+
for (var i = 0; i < $modalButtons.length; i++) {
|
|
370
|
+
if ($targetElement === $modalButtons[i]) {
|
|
371
|
+
btnIndex = i;
|
|
372
|
+
break;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
if (keyCode === 9) {
|
|
377
|
+
// TAB
|
|
378
|
+
if (btnIndex === -1) {
|
|
379
|
+
// No button focused. Jump to the confirm button.
|
|
380
|
+
$targetElement = $okButton;
|
|
381
|
+
} else {
|
|
382
|
+
// Cycle to the next button
|
|
383
|
+
if (btnIndex === $modalButtons.length - 1) {
|
|
384
|
+
$targetElement = $modalButtons[0];
|
|
385
|
+
} else {
|
|
386
|
+
$targetElement = $modalButtons[btnIndex + 1];
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
stopEventPropagation(e);
|
|
391
|
+
$targetElement.focus();
|
|
392
|
+
setFocusStyle($targetElement, params.confirmButtonColor); // TODO
|
|
393
|
+
|
|
394
|
+
} else {
|
|
395
|
+
if (keyCode === 13 || keyCode === 32) {
|
|
396
|
+
if (btnIndex === -1) {
|
|
397
|
+
// ENTER/SPACE clicked outside of a button.
|
|
398
|
+
$targetElement = $okButton;
|
|
399
|
+
} else {
|
|
400
|
+
// Do nothing - let the browser handle it.
|
|
401
|
+
$targetElement = undefined;
|
|
402
|
+
}
|
|
403
|
+
} else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) {
|
|
404
|
+
// ESC to cancel only if there's a cancel button displayed (like the alert() window).
|
|
405
|
+
$targetElement = $cancelButton;
|
|
406
|
+
} else {
|
|
407
|
+
// Fallback - let the browser handle it.
|
|
408
|
+
$targetElement = undefined;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
if ($targetElement !== undefined) {
|
|
412
|
+
fireClick($targetElement, e);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
previousWindowKeyDown = window.onkeydown;
|
|
418
|
+
window.onkeydown = handleKeyDown;
|
|
419
|
+
|
|
420
|
+
function handleOnBlur(e) {
|
|
421
|
+
var $targetElement = e.target || e.srcElement,
|
|
422
|
+
$focusElement = e.relatedTarget,
|
|
423
|
+
modalIsVisible = hasClass(modal, 'visible');
|
|
424
|
+
|
|
425
|
+
if (modalIsVisible) {
|
|
426
|
+
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
|
427
|
+
|
|
428
|
+
if ($focusElement !== null) {
|
|
429
|
+
// If we picked something in the DOM to focus to, let's see if it was a button.
|
|
430
|
+
for (var i = 0; i < $modalButtons.length; i++) {
|
|
431
|
+
if ($focusElement === $modalButtons[i]) {
|
|
432
|
+
btnIndex = i;
|
|
433
|
+
break;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
if (btnIndex === -1) {
|
|
438
|
+
// Something in the dom, but not a visible button. Focus back on the button.
|
|
439
|
+
$targetElement.focus();
|
|
440
|
+
}
|
|
441
|
+
} else {
|
|
442
|
+
// Exiting the DOM (e.g. clicked in the URL bar);
|
|
443
|
+
lastFocusedButton = $targetElement;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
$okButton.onblur = handleOnBlur;
|
|
449
|
+
$cancelButton.onblur = handleOnBlur;
|
|
450
|
+
|
|
451
|
+
window.onfocus = function() {
|
|
452
|
+
// When the user has focused away and focused back from the whole window.
|
|
453
|
+
window.setTimeout(function() {
|
|
454
|
+
// Put in a timeout to jump out of the event sequence. Calling focus() in the event
|
|
455
|
+
// sequence confuses things.
|
|
456
|
+
if (lastFocusedButton !== undefined) {
|
|
457
|
+
lastFocusedButton.focus();
|
|
458
|
+
lastFocusedButton = undefined;
|
|
459
|
+
}
|
|
460
|
+
}, 0);
|
|
461
|
+
};
|
|
462
|
+
};
|
|
463
|
+
|
|
464
|
+
/**
|
|
465
|
+
* Set default params for each popup
|
|
466
|
+
* @param {Object} userParams
|
|
467
|
+
*/
|
|
468
|
+
window.swal.setDefaults = function(userParams) {
|
|
469
|
+
if (!userParams) {
|
|
470
|
+
throw new Error('userParams is required');
|
|
471
|
+
}
|
|
472
|
+
if (typeof userParams !== 'object') {
|
|
473
|
+
throw new Error('userParams has to be a object');
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
extend(defaultParams, userParams);
|
|
477
|
+
};
|
|
478
|
+
|
|
479
|
+
/*
|
|
480
|
+
* Set type, text and actions on modal
|
|
481
|
+
*/
|
|
482
|
+
|
|
483
|
+
function setParameters(params) {
|
|
484
|
+
var modal = getModal();
|
|
485
|
+
|
|
486
|
+
var $title = modal.querySelector('h2'),
|
|
487
|
+
$text = modal.querySelector('p'),
|
|
488
|
+
$cancelBtn = modal.querySelector('button.cancel'),
|
|
489
|
+
$confirmBtn = modal.querySelector('button.confirm');
|
|
490
|
+
|
|
491
|
+
// Title
|
|
492
|
+
$title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
|
|
493
|
+
|
|
494
|
+
// Text
|
|
495
|
+
$text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
|
|
496
|
+
if (params.text) {
|
|
497
|
+
show($text);
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
// Icon
|
|
501
|
+
hide(modal.querySelectorAll('.icon'));
|
|
502
|
+
if (params.type) {
|
|
503
|
+
var validType = false;
|
|
504
|
+
for (var i = 0; i < alertTypes.length; i++) {
|
|
505
|
+
if (params.type === alertTypes[i]) {
|
|
506
|
+
validType = true;
|
|
507
|
+
break;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
if (!validType) {
|
|
511
|
+
window.console.error('Unknown alert type: ' + params.type);
|
|
512
|
+
return false;
|
|
513
|
+
}
|
|
514
|
+
var $icon = modal.querySelector('.icon.' + params.type);
|
|
515
|
+
show($icon);
|
|
516
|
+
|
|
517
|
+
// Animate icon
|
|
518
|
+
switch (params.type) {
|
|
519
|
+
case "success":
|
|
520
|
+
addClass($icon, 'animate');
|
|
521
|
+
addClass($icon.querySelector('.tip'), 'animateSuccessTip');
|
|
522
|
+
addClass($icon.querySelector('.long'), 'animateSuccessLong');
|
|
523
|
+
break;
|
|
524
|
+
case "error":
|
|
525
|
+
addClass($icon, 'animateErrorIcon');
|
|
526
|
+
addClass($icon.querySelector('.x-mark'), 'animateXMark');
|
|
527
|
+
break;
|
|
528
|
+
case "warning":
|
|
529
|
+
addClass($icon, 'pulseWarning');
|
|
530
|
+
addClass($icon.querySelector('.body'), 'pulseWarningIns');
|
|
531
|
+
addClass($icon.querySelector('.dot'), 'pulseWarningIns');
|
|
532
|
+
break;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
// Custom image
|
|
538
|
+
if (params.imageUrl) {
|
|
539
|
+
var $customIcon = modal.querySelector('.icon.custom');
|
|
540
|
+
|
|
541
|
+
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
|
|
542
|
+
show($customIcon);
|
|
543
|
+
|
|
544
|
+
var _imgWidth = 80,
|
|
545
|
+
_imgHeight = 80;
|
|
546
|
+
|
|
547
|
+
if (params.imageSize) {
|
|
548
|
+
var imgWidth = params.imageSize.split('x')[0];
|
|
549
|
+
var imgHeight = params.imageSize.split('x')[1];
|
|
550
|
+
|
|
551
|
+
if (!imgWidth || !imgHeight) {
|
|
552
|
+
window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
|
|
553
|
+
} else {
|
|
554
|
+
_imgWidth = imgWidth;
|
|
555
|
+
_imgHeight = imgHeight;
|
|
556
|
+
|
|
557
|
+
$customIcon.css({
|
|
558
|
+
'width': imgWidth + 'px',
|
|
559
|
+
'height': imgHeight + 'px'
|
|
560
|
+
});
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
|
+
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
// Cancel button
|
|
567
|
+
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
|
|
568
|
+
if (params.showCancelButton) {
|
|
569
|
+
$cancelBtn.style.display = 'inline-block';
|
|
570
|
+
} else {
|
|
571
|
+
hide($cancelBtn);
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
// Edit text on cancel and confirm buttons
|
|
575
|
+
if (params.cancelButtonText) {
|
|
576
|
+
$cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
|
|
577
|
+
}
|
|
578
|
+
if (params.confirmButtonText) {
|
|
579
|
+
$confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
// Set confirm button to selected background color
|
|
583
|
+
$confirmBtn.style.backgroundColor = params.confirmButtonColor;
|
|
584
|
+
|
|
585
|
+
// Set box-shadow to default focused button
|
|
586
|
+
setFocusStyle($confirmBtn, params.confirmButtonColor);
|
|
587
|
+
|
|
588
|
+
// Allow outside click?
|
|
589
|
+
modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);
|
|
590
|
+
|
|
591
|
+
// Done-function
|
|
592
|
+
var hasDoneFunction = (params.doneFunction) ? true : false;
|
|
593
|
+
modal.setAttribute('data-has-done-function', hasDoneFunction);
|
|
594
|
+
|
|
595
|
+
// Close timer
|
|
596
|
+
modal.setAttribute('data-timer', params.timer);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
|
|
600
|
+
/*
|
|
601
|
+
* Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
|
|
602
|
+
*/
|
|
603
|
+
|
|
604
|
+
function colorLuminance(hex, lum) {
|
|
605
|
+
// Validate hex string
|
|
606
|
+
hex = String(hex).replace(/[^0-9a-f]/gi, '');
|
|
607
|
+
if (hex.length < 6) {
|
|
608
|
+
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
|
|
609
|
+
}
|
|
610
|
+
lum = lum || 0;
|
|
611
|
+
|
|
612
|
+
// Convert to decimal and change luminosity
|
|
613
|
+
var rgb = "#", c, i;
|
|
614
|
+
for (i = 0; i < 3; i++) {
|
|
615
|
+
c = parseInt(hex.substr(i*2,2), 16);
|
|
616
|
+
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
|
|
617
|
+
rgb += ("00"+c).substr(c.length);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
return rgb;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
function extend(a, b){
|
|
624
|
+
for (var key in b) {
|
|
625
|
+
if (b.hasOwnProperty(key)) {
|
|
626
|
+
a[key] = b[key];
|
|
627
|
+
}
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
return a;
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
function hexToRgb(hex) {
|
|
634
|
+
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
635
|
+
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
// Add box-shadow style to button (depending on its chosen bg-color)
|
|
639
|
+
function setFocusStyle($button, bgColor) {
|
|
640
|
+
var rgbColor = hexToRgb(bgColor);
|
|
641
|
+
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor +', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
|
|
645
|
+
|
|
646
|
+
/*
|
|
647
|
+
* Animations
|
|
648
|
+
*/
|
|
649
|
+
|
|
650
|
+
function openModal() {
|
|
651
|
+
var modal = getModal();
|
|
652
|
+
fadeIn(getOverlay(), 10);
|
|
653
|
+
show(modal);
|
|
654
|
+
addClass(modal, 'showSweetAlert');
|
|
655
|
+
removeClass(modal, 'hideSweetAlert');
|
|
656
|
+
|
|
657
|
+
previousActiveElement = document.activeElement;
|
|
658
|
+
var $okButton = modal.querySelector('button.confirm');
|
|
659
|
+
$okButton.focus();
|
|
660
|
+
|
|
661
|
+
setTimeout(function() {
|
|
662
|
+
addClass(modal, 'visible');
|
|
663
|
+
}, 500);
|
|
664
|
+
|
|
665
|
+
var timer = modal.getAttribute('data-timer');
|
|
666
|
+
if (timer !== "null") {
|
|
667
|
+
setTimeout(function() {
|
|
668
|
+
closeModal();
|
|
669
|
+
}, timer);
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
function closeModal() {
|
|
674
|
+
var modal = getModal();
|
|
675
|
+
fadeOut(getOverlay(), 5);
|
|
676
|
+
fadeOut(modal, 5);
|
|
677
|
+
removeClass(modal, 'showSweetAlert');
|
|
678
|
+
addClass(modal, 'hideSweetAlert');
|
|
679
|
+
removeClass(modal, 'visible');
|
|
680
|
+
|
|
681
|
+
|
|
682
|
+
// Reset icon animations
|
|
683
|
+
|
|
684
|
+
var $successIcon = modal.querySelector('.icon.success');
|
|
685
|
+
removeClass($successIcon, 'animate');
|
|
686
|
+
removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip');
|
|
687
|
+
removeClass($successIcon.querySelector('.long'), 'animateSuccessLong');
|
|
688
|
+
|
|
689
|
+
var $errorIcon = modal.querySelector('.icon.error');
|
|
690
|
+
removeClass($errorIcon, 'animateErrorIcon');
|
|
691
|
+
removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark');
|
|
692
|
+
|
|
693
|
+
var $warningIcon = modal.querySelector('.icon.warning');
|
|
694
|
+
removeClass($warningIcon, 'pulseWarning');
|
|
695
|
+
removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns');
|
|
696
|
+
removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns');
|
|
697
|
+
|
|
698
|
+
|
|
699
|
+
// Reset the page to its previous state
|
|
700
|
+
window.onkeydown = previousWindowKeyDown;
|
|
701
|
+
document.onclick = previousDocumentClick;
|
|
702
|
+
if (previousActiveElement) {
|
|
703
|
+
previousActiveElement.focus();
|
|
704
|
+
}
|
|
705
|
+
lastFocusedButton = undefined;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
|
|
709
|
+
/*
|
|
710
|
+
* Set "margin-top"-property on modal based on its computed height
|
|
711
|
+
*/
|
|
712
|
+
|
|
713
|
+
function fixVerticalPosition() {
|
|
714
|
+
var modal = getModal();
|
|
715
|
+
|
|
716
|
+
modal.style.marginTop = getTopMargin(getModal());
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
|
|
720
|
+
|
|
721
|
+
/*
|
|
722
|
+
* If library is injected after page has loaded
|
|
723
|
+
*/
|
|
724
|
+
|
|
725
|
+
(function () {
|
|
726
|
+
if (document.readyState === "complete" || document.readyState === "interactive" && document.body) {
|
|
727
|
+
sweetAlertInitialize();
|
|
728
|
+
} else {
|
|
729
|
+
if (document.addEventListener) {
|
|
730
|
+
document.addEventListener('DOMContentLoaded', function factorial() {
|
|
731
|
+
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
|
|
732
|
+
sweetAlertInitialize();
|
|
733
|
+
}, false);
|
|
734
|
+
} else if (document.attachEvent) {
|
|
735
|
+
document.attachEvent('onreadystatechange', function() {
|
|
736
|
+
if (document.readyState === 'complete') {
|
|
737
|
+
document.detachEvent('onreadystatechange', arguments.callee);
|
|
738
|
+
sweetAlertInitialize();
|
|
739
|
+
}
|
|
740
|
+
});
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
})();
|
|
744
|
+
|
|
745
|
+
})(window, document);
|