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