alertify-rails 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +1 -1
- data/alertify-rails.gemspec +2 -2
- data/app/helpers/alertify_helper.rb +22 -0
- data/lib/alertify/rails/version.rb +2 -2
- data/vendor/assets/javascripts/alertify.js +255 -86
- data/vendor/assets/stylesheets/alertify.core.css.scss +47 -5
- data/vendor/assets/stylesheets/alertify.default.css.scss +71 -64
- metadata +10 -11
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 1c930f5a16b5d39584d064d045a7ab872ec67df1
|
4
|
+
data.tar.gz: d9cf0e54dac707cafd0e4493fb950e3db92e592d
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: e04d5fe1acb32540f8f52cdbe1c584ca7018f7f474ecdfd086d2f2b0d38552caac565d5972b13c4016717b581f37bbb8b61335983d5277b84e682efb22ca1822
|
7
|
+
data.tar.gz: af3cc1a64cbafa36048693d2abb91e211476719428e88a044f5dc6872bfebef938ac6ddebf8a0ae8eaca83f580b0396376cddd4d2974aa8c1afa80f31c89e5db
|
data/README.md
CHANGED
data/alertify-rails.gemspec
CHANGED
@@ -8,8 +8,8 @@ Gem::Specification.new do |gem|
|
|
8
8
|
gem.version = Alertify::Rails::VERSION
|
9
9
|
gem.authors = ["Rudolf Schmidt"]
|
10
10
|
|
11
|
-
gem.description = %q{Use Alertify.js with Rails 3}
|
12
|
-
gem.summary = %q{This gem provides the Alertify.js driver for Rails 3 applications}
|
11
|
+
gem.description = %q{Use Alertify.js with Rails 3 and 4}
|
12
|
+
gem.summary = %q{This gem provides the Alertify.js driver for Rails 3 and 4 applications}
|
13
13
|
gem.homepage = ""
|
14
14
|
|
15
15
|
gem.files = `git ls-files`.split($/)
|
@@ -0,0 +1,22 @@
|
|
1
|
+
module AlertifyHelper
|
2
|
+
ALERT_TYPES = [:error, :info, :success, :warning] unless const_defined?(:ALERT_TYPES)
|
3
|
+
|
4
|
+
def alertify_flash
|
5
|
+
jsReturn = javascript_tag()
|
6
|
+
flash.each do |type, message|
|
7
|
+
# Skip empty messages, e.g. for devise messages set to nothing in a locale file.
|
8
|
+
next if message.blank?
|
9
|
+
|
10
|
+
type = :success if type == :notice
|
11
|
+
type = :error if type == :alert
|
12
|
+
next unless ALERT_TYPES.include?(type)
|
13
|
+
|
14
|
+
js_alertify = ""
|
15
|
+
Array(message).each do |msg|
|
16
|
+
js_alertify << "alertify.#{type}('#{msg}');\n" if msg;
|
17
|
+
end
|
18
|
+
jsReturn = javascript_tag(js_alertify)
|
19
|
+
end
|
20
|
+
jsReturn.html_safe()
|
21
|
+
end
|
22
|
+
end
|
@@ -3,16 +3,14 @@
|
|
3
3
|
* An unobtrusive customizable JavaScript notification system
|
4
4
|
*
|
5
5
|
* @author Fabien Doiron <fabien.doiron@gmail.com>
|
6
|
-
* @copyright Fabien Doiron
|
6
|
+
* @copyright Fabien Doiron 2013
|
7
7
|
* @license MIT <http://opensource.org/licenses/mit-license.php>
|
8
|
-
* @link http://
|
8
|
+
* @link http://fabien-d.github.com/alertify.js/
|
9
9
|
* @module alertify
|
10
|
-
* @version 0.
|
10
|
+
* @version 0.3.11
|
11
11
|
*/
|
12
|
-
|
13
|
-
/*global define*/
|
14
12
|
(function (global, undefined) {
|
15
|
-
|
13
|
+
"use strict";
|
16
14
|
|
17
15
|
var document = global.document,
|
18
16
|
Alertify;
|
@@ -24,7 +22,7 @@
|
|
24
22
|
isopen = false,
|
25
23
|
keys = { ENTER: 13, ESC: 27, SPACE: 32 },
|
26
24
|
queue = [],
|
27
|
-
$, elCallee, elCover, elDialog, elLog;
|
25
|
+
$, btnCancel, btnOK, btnReset, btnResetBack, btnFocus, elCallee, elCover, elDialog, elLog, form, input, getTransitionEvent;
|
28
26
|
|
29
27
|
/**
|
30
28
|
* Markup pieces
|
@@ -33,15 +31,45 @@
|
|
33
31
|
dialogs = {
|
34
32
|
buttons : {
|
35
33
|
holder : "<nav class=\"alertify-buttons\">{{buttons}}</nav>",
|
36
|
-
submit : "<button type=\"submit\" class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\"
|
37
|
-
ok : "<
|
38
|
-
cancel : "<
|
34
|
+
submit : "<button type=\"submit\" class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\">{{ok}}</button>",
|
35
|
+
ok : "<button class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\">{{ok}}</button>",
|
36
|
+
cancel : "<button class=\"alertify-button alertify-button-cancel\" id=\"alertify-cancel\">{{cancel}}</button>"
|
39
37
|
},
|
40
|
-
input : "<input type=\"text\" class=\"alertify-text\" id=\"alertify-text\">",
|
38
|
+
input : "<div class=\"alertify-text-wrapper\"><input type=\"text\" class=\"alertify-text\" id=\"alertify-text\"></div>",
|
41
39
|
message : "<p class=\"alertify-message\">{{message}}</p>",
|
42
40
|
log : "<article class=\"alertify-log{{class}}\">{{message}}</article>"
|
43
41
|
};
|
44
42
|
|
43
|
+
/**
|
44
|
+
* Return the proper transitionend event
|
45
|
+
* @return {String} Transition type string
|
46
|
+
*/
|
47
|
+
getTransitionEvent = function () {
|
48
|
+
var t,
|
49
|
+
type,
|
50
|
+
supported = false,
|
51
|
+
el = document.createElement("fakeelement"),
|
52
|
+
transitions = {
|
53
|
+
"WebkitTransition" : "webkitTransitionEnd",
|
54
|
+
"MozTransition" : "transitionend",
|
55
|
+
"OTransition" : "otransitionend",
|
56
|
+
"transition" : "transitionend"
|
57
|
+
};
|
58
|
+
|
59
|
+
for (t in transitions) {
|
60
|
+
if (el.style[t] !== undefined) {
|
61
|
+
type = transitions[t];
|
62
|
+
supported = true;
|
63
|
+
break;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
return {
|
68
|
+
type : type,
|
69
|
+
supported : supported
|
70
|
+
};
|
71
|
+
};
|
72
|
+
|
45
73
|
/**
|
46
74
|
* Shorthand for document.getElementById()
|
47
75
|
*
|
@@ -73,6 +101,24 @@
|
|
73
101
|
*/
|
74
102
|
delay : 5000,
|
75
103
|
|
104
|
+
/**
|
105
|
+
* Whether buttons are reversed (default is secondary/primary)
|
106
|
+
* @type {Boolean}
|
107
|
+
*/
|
108
|
+
buttonReverse : false,
|
109
|
+
|
110
|
+
/**
|
111
|
+
* Which button should be focused by default
|
112
|
+
* @type {String} "ok" (default), "cancel", or "none"
|
113
|
+
*/
|
114
|
+
buttonFocus : "ok",
|
115
|
+
|
116
|
+
/**
|
117
|
+
* Set the transition event on load
|
118
|
+
* @type {[type]}
|
119
|
+
*/
|
120
|
+
transition : undefined,
|
121
|
+
|
76
122
|
/**
|
77
123
|
* Set the proper button click events
|
78
124
|
*
|
@@ -81,12 +127,7 @@
|
|
81
127
|
* @return {undefined}
|
82
128
|
*/
|
83
129
|
addListeners : function (fn) {
|
84
|
-
var
|
85
|
-
btnOK = $("alertify-ok") || undefined,
|
86
|
-
btnCancel = $("alertify-cancel") || undefined,
|
87
|
-
input = $("alertify-text") || undefined,
|
88
|
-
form = $("alertify-form") || undefined,
|
89
|
-
hasOK = (typeof btnOK !== "undefined"),
|
130
|
+
var hasOK = (typeof btnOK !== "undefined"),
|
90
131
|
hasCancel = (typeof btnCancel !== "undefined"),
|
91
132
|
hasInput = (typeof input !== "undefined"),
|
92
133
|
val = "",
|
@@ -98,7 +139,13 @@
|
|
98
139
|
if (typeof event.preventDefault !== "undefined") event.preventDefault();
|
99
140
|
common(event);
|
100
141
|
if (typeof input !== "undefined") val = input.value;
|
101
|
-
if (typeof fn === "function")
|
142
|
+
if (typeof fn === "function") {
|
143
|
+
if (typeof input !== "undefined") {
|
144
|
+
fn(true, val);
|
145
|
+
}
|
146
|
+
else fn(true);
|
147
|
+
}
|
148
|
+
return false;
|
102
149
|
};
|
103
150
|
|
104
151
|
// cancel event handler
|
@@ -106,6 +153,7 @@
|
|
106
153
|
if (typeof event.preventDefault !== "undefined") event.preventDefault();
|
107
154
|
common(event);
|
108
155
|
if (typeof fn === "function") fn(false);
|
156
|
+
return false;
|
109
157
|
};
|
110
158
|
|
111
159
|
// common event handler (keyup, ok and cancel)
|
@@ -113,7 +161,6 @@
|
|
113
161
|
self.hide();
|
114
162
|
self.unbind(document.body, "keyup", key);
|
115
163
|
self.unbind(btnReset, "focus", reset);
|
116
|
-
if (hasInput) self.unbind(form, "submit", ok);
|
117
164
|
if (hasOK) self.unbind(btnOK, "click", ok);
|
118
165
|
if (hasCancel) self.unbind(btnCancel, "click", cancel);
|
119
166
|
};
|
@@ -121,15 +168,15 @@
|
|
121
168
|
// keyup handler
|
122
169
|
key = function (event) {
|
123
170
|
var keyCode = event.keyCode;
|
124
|
-
if (keyCode === keys.SPACE && !hasInput) ok(event);
|
171
|
+
if ((keyCode === keys.SPACE && !hasInput) || (hasInput && keyCode === keys.ENTER)) ok(event);
|
125
172
|
if (keyCode === keys.ESC && hasCancel) cancel(event);
|
126
173
|
};
|
127
174
|
|
128
175
|
// reset focus to first item in the dialog
|
129
176
|
reset = function (event) {
|
130
177
|
if (hasInput) input.focus();
|
131
|
-
else if (hasCancel)
|
132
|
-
else
|
178
|
+
else if (!hasCancel || self.buttonReverse) btnOK.focus();
|
179
|
+
else btnCancel.focus();
|
133
180
|
};
|
134
181
|
|
135
182
|
// handle reset focus link
|
@@ -137,22 +184,16 @@
|
|
137
184
|
// ever leave the dialog box until an action has
|
138
185
|
// been taken
|
139
186
|
this.bind(btnReset, "focus", reset);
|
187
|
+
this.bind(btnResetBack, "focus", reset);
|
140
188
|
// handle OK click
|
141
189
|
if (hasOK) this.bind(btnOK, "click", ok);
|
142
190
|
// handle Cancel click
|
143
191
|
if (hasCancel) this.bind(btnCancel, "click", cancel);
|
144
192
|
// listen for keys, Cancel => ESC
|
145
193
|
this.bind(document.body, "keyup", key);
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
global.setTimeout(function () {
|
150
|
-
if (input) {
|
151
|
-
input.focus();
|
152
|
-
input.select();
|
153
|
-
}
|
154
|
-
else btnOK.focus();
|
155
|
-
}, 50);
|
194
|
+
if (!this.transition.supported) {
|
195
|
+
this.setFocus();
|
196
|
+
}
|
156
197
|
},
|
157
198
|
|
158
199
|
/**
|
@@ -172,6 +213,35 @@
|
|
172
213
|
}
|
173
214
|
},
|
174
215
|
|
216
|
+
/**
|
217
|
+
* Use alertify as the global error handler (using window.onerror)
|
218
|
+
*
|
219
|
+
* @return {boolean} success
|
220
|
+
*/
|
221
|
+
handleErrors : function () {
|
222
|
+
if (typeof global.onerror !== "undefined") {
|
223
|
+
var self = this;
|
224
|
+
global.onerror = function (msg, url, line) {
|
225
|
+
self.error("[" + msg + " on line " + line + " of " + url + "]", 0);
|
226
|
+
};
|
227
|
+
return true;
|
228
|
+
} else {
|
229
|
+
return false;
|
230
|
+
}
|
231
|
+
},
|
232
|
+
|
233
|
+
/**
|
234
|
+
* Append button HTML strings
|
235
|
+
*
|
236
|
+
* @param {String} secondary The secondary button HTML string
|
237
|
+
* @param {String} primary The primary button HTML string
|
238
|
+
*
|
239
|
+
* @return {String} The appended button HTML strings
|
240
|
+
*/
|
241
|
+
appendButtons : function (secondary, primary) {
|
242
|
+
return this.buttonReverse ? primary + secondary : secondary + primary;
|
243
|
+
},
|
244
|
+
|
175
245
|
/**
|
176
246
|
* Build the proper message box
|
177
247
|
*
|
@@ -182,11 +252,16 @@
|
|
182
252
|
build : function (item) {
|
183
253
|
var html = "",
|
184
254
|
type = item.type,
|
185
|
-
message = item.message
|
255
|
+
message = item.message,
|
256
|
+
css = item.cssClass || "";
|
186
257
|
|
187
258
|
html += "<div class=\"alertify-dialog\">";
|
259
|
+
html += "<a id=\"alertify-resetFocusBack\" class=\"alertify-resetFocus\" href=\"#\">Reset Focus</a>";
|
188
260
|
|
189
|
-
if (
|
261
|
+
if (_alertify.buttonFocus === "none") html += "<a href=\"#\" id=\"alertify-noneFocus\" class=\"alertify-hidden\"></a>";
|
262
|
+
|
263
|
+
// doens't require an actual form
|
264
|
+
if (type === "prompt") html += "<div id=\"alertify-form\">";
|
190
265
|
|
191
266
|
html += "<article class=\"alertify-inner\">";
|
192
267
|
html += dialogs.message.replace("{{message}}", message);
|
@@ -196,18 +271,18 @@
|
|
196
271
|
html += dialogs.buttons.holder;
|
197
272
|
html += "</article>";
|
198
273
|
|
199
|
-
if (type === "prompt") html += "</
|
274
|
+
if (type === "prompt") html += "</div>";
|
200
275
|
|
201
276
|
html += "<a id=\"alertify-resetFocus\" class=\"alertify-resetFocus\" href=\"#\">Reset Focus</a>";
|
202
277
|
html += "</div>";
|
203
278
|
|
204
279
|
switch (type) {
|
205
280
|
case "confirm":
|
206
|
-
html = html.replace("{{buttons}}", dialogs.buttons.cancel
|
281
|
+
html = html.replace("{{buttons}}", this.appendButtons(dialogs.buttons.cancel, dialogs.buttons.ok));
|
207
282
|
html = html.replace("{{ok}}", this.labels.ok).replace("{{cancel}}", this.labels.cancel);
|
208
283
|
break;
|
209
284
|
case "prompt":
|
210
|
-
html = html.replace("{{buttons}}", dialogs.buttons.cancel
|
285
|
+
html = html.replace("{{buttons}}", this.appendButtons(dialogs.buttons.cancel, dialogs.buttons.submit));
|
211
286
|
html = html.replace("{{ok}}", this.labels.ok).replace("{{cancel}}", this.labels.cancel);
|
212
287
|
break;
|
213
288
|
case "alert":
|
@@ -218,7 +293,7 @@
|
|
218
293
|
break;
|
219
294
|
}
|
220
295
|
|
221
|
-
elDialog.className = "alertify alertify-
|
296
|
+
elDialog.className = "alertify alertify-" + type + " " + css;
|
222
297
|
elCover.className = "alertify-cover";
|
223
298
|
return html;
|
224
299
|
},
|
@@ -227,18 +302,49 @@
|
|
227
302
|
* Close the log messages
|
228
303
|
*
|
229
304
|
* @param {Object} elem HTML Element of log message to close
|
230
|
-
* @param {Number} wait [optional] Time (in ms) to wait before automatically hiding the message
|
305
|
+
* @param {Number} wait [optional] Time (in ms) to wait before automatically hiding the message, if 0 never hide
|
231
306
|
*
|
232
307
|
* @return {undefined}
|
233
308
|
*/
|
234
309
|
close : function (elem, wait) {
|
235
|
-
|
310
|
+
// Unary Plus: +"2" === 2
|
311
|
+
var timer = (wait && !isNaN(wait)) ? +wait : this.delay,
|
312
|
+
self = this,
|
313
|
+
hideElement, transitionDone;
|
314
|
+
|
315
|
+
// set click event on log messages
|
236
316
|
this.bind(elem, "click", function () {
|
237
|
-
|
317
|
+
hideElement(elem);
|
238
318
|
});
|
239
|
-
|
240
|
-
|
241
|
-
|
319
|
+
// Hide the dialog box after transition
|
320
|
+
// This ensure it doens't block any element from being clicked
|
321
|
+
transitionDone = function (event) {
|
322
|
+
event.stopPropagation();
|
323
|
+
// unbind event so function only gets called once
|
324
|
+
self.unbind(this, self.transition.type, transitionDone);
|
325
|
+
// remove log message
|
326
|
+
elLog.removeChild(this);
|
327
|
+
if (!elLog.hasChildNodes()) elLog.className += " alertify-logs-hidden";
|
328
|
+
};
|
329
|
+
// this sets the hide class to transition out
|
330
|
+
// or removes the child if css transitions aren't supported
|
331
|
+
hideElement = function (el) {
|
332
|
+
// ensure element exists
|
333
|
+
if (typeof el !== "undefined" && el.parentNode === elLog) {
|
334
|
+
// whether CSS transition exists
|
335
|
+
if (self.transition.supported) {
|
336
|
+
self.bind(el, self.transition.type, transitionDone);
|
337
|
+
el.className += " alertify-log-hide";
|
338
|
+
} else {
|
339
|
+
elLog.removeChild(el);
|
340
|
+
if (!elLog.hasChildNodes()) elLog.className += " alertify-logs-hidden";
|
341
|
+
}
|
342
|
+
}
|
343
|
+
};
|
344
|
+
// never close (until click) if wait is set to 0
|
345
|
+
if (wait === 0) return;
|
346
|
+
// set timeout to auto close the log message
|
347
|
+
setTimeout(function () { hideElement(elem); }, timer);
|
242
348
|
},
|
243
349
|
|
244
350
|
/**
|
@@ -248,10 +354,11 @@
|
|
248
354
|
* @param {String} type Type of dialog to create
|
249
355
|
* @param {Function} fn [Optional] Callback function
|
250
356
|
* @param {String} placeholder [Optional] Default value for prompt input field
|
357
|
+
* @param {String} cssClass [Optional] Class(es) to append to dialog box
|
251
358
|
*
|
252
359
|
* @return {Object}
|
253
360
|
*/
|
254
|
-
dialog : function (message, type, fn, placeholder) {
|
361
|
+
dialog : function (message, type, fn, placeholder, cssClass) {
|
255
362
|
// set the current active element
|
256
363
|
// this allows the keyboard focus to be resetted
|
257
364
|
// after the dialog box is closed
|
@@ -259,7 +366,7 @@
|
|
259
366
|
// check to ensure the alertify dialog element
|
260
367
|
// has been successfully created
|
261
368
|
var check = function () {
|
262
|
-
if (
|
369
|
+
if ((elLog && elLog.scrollTop !== null) && (elCover && elCover.scrollTop !== null)) return;
|
263
370
|
else check();
|
264
371
|
};
|
265
372
|
// error catching
|
@@ -267,12 +374,10 @@
|
|
267
374
|
if (typeof type !== "string") throw new Error("type must be a string");
|
268
375
|
if (typeof fn !== "undefined" && typeof fn !== "function") throw new Error("fn must be a function");
|
269
376
|
// initialize alertify if it hasn't already been done
|
270
|
-
|
271
|
-
|
272
|
-
check();
|
273
|
-
}
|
377
|
+
this.init();
|
378
|
+
check();
|
274
379
|
|
275
|
-
queue.push({ type: type, message: message, callback: fn, placeholder: placeholder });
|
380
|
+
queue.push({ type: type, message: message, callback: fn, placeholder: placeholder, cssClass: cssClass });
|
276
381
|
if (!isopen) this.setup();
|
277
382
|
|
278
383
|
return this;
|
@@ -286,7 +391,11 @@
|
|
286
391
|
* @return {Function}
|
287
392
|
*/
|
288
393
|
extend : function (type) {
|
289
|
-
|
394
|
+
if (typeof type !== "string") throw new Error("extend method must have exactly one paramter");
|
395
|
+
return function (message, wait) {
|
396
|
+
this.log(message, type, wait);
|
397
|
+
return this;
|
398
|
+
};
|
290
399
|
},
|
291
400
|
|
292
401
|
/**
|
@@ -295,14 +404,29 @@
|
|
295
404
|
* @return {undefined}
|
296
405
|
*/
|
297
406
|
hide : function () {
|
407
|
+
var transitionDone,
|
408
|
+
self = this;
|
298
409
|
// remove reference from queue
|
299
410
|
queue.splice(0,1);
|
300
411
|
// if items remaining in the queue
|
301
|
-
if (queue.length > 0) this.setup();
|
412
|
+
if (queue.length > 0) this.setup(true);
|
302
413
|
else {
|
303
414
|
isopen = false;
|
304
|
-
|
305
|
-
|
415
|
+
// Hide the dialog box after transition
|
416
|
+
// This ensure it doens't block any element from being clicked
|
417
|
+
transitionDone = function (event) {
|
418
|
+
event.stopPropagation();
|
419
|
+
// unbind event so function only gets called once
|
420
|
+
self.unbind(elDialog, self.transition.type, transitionDone);
|
421
|
+
};
|
422
|
+
// whether CSS transition exists
|
423
|
+
if (this.transition.supported) {
|
424
|
+
this.bind(elDialog, this.transition.type, transitionDone);
|
425
|
+
elDialog.className = "alertify alertify-hide alertify-hidden";
|
426
|
+
} else {
|
427
|
+
elDialog.className = "alertify alertify-hide alertify-hidden alertify-isHidden";
|
428
|
+
}
|
429
|
+
elCover.className = "alertify-cover alertify-cover-hidden";
|
306
430
|
// set focus to the last element or body
|
307
431
|
// after the dialog is closed
|
308
432
|
elCallee.focus();
|
@@ -321,26 +445,34 @@
|
|
321
445
|
document.createElement("article");
|
322
446
|
document.createElement("section");
|
323
447
|
// cover
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
448
|
+
if ($("alertify-cover") == null) {
|
449
|
+
elCover = document.createElement("div");
|
450
|
+
elCover.setAttribute("id", "alertify-cover");
|
451
|
+
elCover.className = "alertify-cover alertify-cover-hidden";
|
452
|
+
document.body.appendChild(elCover);
|
453
|
+
}
|
328
454
|
// main element
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
455
|
+
if ($("alertify") == null) {
|
456
|
+
isopen = false;
|
457
|
+
queue = [];
|
458
|
+
elDialog = document.createElement("section");
|
459
|
+
elDialog.setAttribute("id", "alertify");
|
460
|
+
elDialog.className = "alertify alertify-hidden";
|
461
|
+
document.body.appendChild(elDialog);
|
462
|
+
}
|
333
463
|
// log element
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
464
|
+
if ($("alertify-logs") == null) {
|
465
|
+
elLog = document.createElement("section");
|
466
|
+
elLog.setAttribute("id", "alertify-logs");
|
467
|
+
elLog.className = "alertify-logs alertify-logs-hidden";
|
468
|
+
document.body.appendChild(elLog);
|
469
|
+
}
|
338
470
|
// set tabindex attribute on body element
|
339
471
|
// this allows script to give it focus
|
340
472
|
// after the dialog is closed
|
341
473
|
document.body.setAttribute("tabindex", "0");
|
342
|
-
//
|
343
|
-
|
474
|
+
// set transition type
|
475
|
+
this.transition = getTransitionEvent();
|
344
476
|
},
|
345
477
|
|
346
478
|
/**
|
@@ -360,10 +492,10 @@
|
|
360
492
|
else check();
|
361
493
|
};
|
362
494
|
// initialize alertify if it hasn't already been done
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
495
|
+
this.init();
|
496
|
+
check();
|
497
|
+
|
498
|
+
elLog.className = "alertify-logs";
|
367
499
|
this.notify(message, type, wait);
|
368
500
|
return this;
|
369
501
|
},
|
@@ -383,8 +515,8 @@
|
|
383
515
|
var log = document.createElement("article");
|
384
516
|
log.className = "alertify-log" + ((typeof type === "string" && type !== "") ? " alertify-log-" + type : "");
|
385
517
|
log.innerHTML = message;
|
386
|
-
//
|
387
|
-
elLog.
|
518
|
+
// append child
|
519
|
+
elLog.appendChild(log);
|
388
520
|
// triggers the CSS animation
|
389
521
|
setTimeout(function() { log.className = log.className + " alertify-log-show"; }, 50);
|
390
522
|
this.close(log, wait);
|
@@ -409,17 +541,55 @@
|
|
409
541
|
}
|
410
542
|
},
|
411
543
|
|
544
|
+
/**
|
545
|
+
* Common place to set focus to proper element
|
546
|
+
*
|
547
|
+
* @return {undefined}
|
548
|
+
*/
|
549
|
+
setFocus : function () {
|
550
|
+
if (input) {
|
551
|
+
input.focus();
|
552
|
+
input.select();
|
553
|
+
}
|
554
|
+
else btnFocus.focus();
|
555
|
+
},
|
556
|
+
|
412
557
|
/**
|
413
558
|
* Initiate all the required pieces for the dialog box
|
414
559
|
*
|
415
560
|
* @return {undefined}
|
416
561
|
*/
|
417
|
-
setup : function () {
|
418
|
-
var item = queue[0]
|
562
|
+
setup : function (fromQueue) {
|
563
|
+
var item = queue[0],
|
564
|
+
self = this,
|
565
|
+
transitionDone;
|
419
566
|
|
567
|
+
// dialog is open
|
420
568
|
isopen = true;
|
569
|
+
// Set button focus after transition
|
570
|
+
transitionDone = function (event) {
|
571
|
+
event.stopPropagation();
|
572
|
+
self.setFocus();
|
573
|
+
// unbind event so function only gets called once
|
574
|
+
self.unbind(elDialog, self.transition.type, transitionDone);
|
575
|
+
};
|
576
|
+
// whether CSS transition exists
|
577
|
+
if (this.transition.supported && !fromQueue) {
|
578
|
+
this.bind(elDialog, this.transition.type, transitionDone);
|
579
|
+
}
|
580
|
+
// build the proper dialog HTML
|
421
581
|
elDialog.innerHTML = this.build(item);
|
422
|
-
|
582
|
+
// assign all the common elements
|
583
|
+
btnReset = $("alertify-resetFocus");
|
584
|
+
btnResetBack = $("alertify-resetFocusBack");
|
585
|
+
btnOK = $("alertify-ok") || undefined;
|
586
|
+
btnCancel = $("alertify-cancel") || undefined;
|
587
|
+
btnFocus = (_alertify.buttonFocus === "cancel") ? btnCancel : ((_alertify.buttonFocus === "none") ? $("alertify-noneFocus") : btnOK),
|
588
|
+
input = $("alertify-text") || undefined;
|
589
|
+
form = $("alertify-form") || undefined;
|
590
|
+
// add placeholder value to the input field
|
591
|
+
if (typeof item.placeholder === "string" && item.placeholder !== "") input.value = item.placeholder;
|
592
|
+
if (fromQueue) this.setFocus();
|
423
593
|
this.addListeners(item.callback);
|
424
594
|
},
|
425
595
|
|
@@ -442,26 +612,25 @@
|
|
442
612
|
};
|
443
613
|
|
444
614
|
return {
|
445
|
-
alert : function (message, fn) { _alertify.dialog(message, "alert", fn); return this; },
|
446
|
-
confirm : function (message, fn) { _alertify.dialog(message, "confirm", fn); return this; },
|
615
|
+
alert : function (message, fn, cssClass) { _alertify.dialog(message, "alert", fn, "", cssClass); return this; },
|
616
|
+
confirm : function (message, fn, cssClass) { _alertify.dialog(message, "confirm", fn, "", cssClass); return this; },
|
447
617
|
extend : _alertify.extend,
|
448
618
|
init : _alertify.init,
|
449
619
|
log : function (message, type, wait) { _alertify.log(message, type, wait); return this; },
|
450
|
-
prompt : function (message, fn, placeholder) { _alertify.dialog(message, "prompt", fn, placeholder); return this; },
|
620
|
+
prompt : function (message, fn, placeholder, cssClass) { _alertify.dialog(message, "prompt", fn, placeholder, cssClass); return this; },
|
451
621
|
success : function (message, wait) { _alertify.log(message, "success", wait); return this; },
|
452
622
|
error : function (message, wait) { _alertify.log(message, "error", wait); return this; },
|
453
623
|
set : function (args) { _alertify.set(args); },
|
454
|
-
labels : _alertify.labels
|
624
|
+
labels : _alertify.labels,
|
625
|
+
debug : _alertify.handleErrors
|
455
626
|
};
|
456
627
|
};
|
457
628
|
|
458
629
|
// AMD and window support
|
459
630
|
if (typeof define === "function") {
|
460
631
|
define([], function () { return new Alertify(); });
|
461
|
-
} else {
|
462
|
-
|
463
|
-
global.alertify = new Alertify();
|
464
|
-
}
|
632
|
+
} else if (typeof global.alertify === "undefined") {
|
633
|
+
global.alertify = new Alertify();
|
465
634
|
}
|
466
635
|
|
467
636
|
}(this));
|
@@ -1,6 +1,6 @@
|
|
1
|
+
.alertify,
|
1
2
|
.alertify-show,
|
2
3
|
.alertify-log {
|
3
|
-
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
|
4
4
|
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
5
5
|
-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
6
6
|
-ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
@@ -8,25 +8,48 @@
|
|
8
8
|
transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
|
9
9
|
}
|
10
10
|
.alertify-hide {
|
11
|
-
-webkit-transition: all 250ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
|
12
11
|
-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
13
12
|
-moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
14
13
|
-ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
15
14
|
-o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
16
15
|
transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
|
17
16
|
}
|
17
|
+
.alertify-log-hide {
|
18
|
+
-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
19
|
+
-moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
20
|
+
-ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
21
|
+
-o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
22
|
+
transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
|
23
|
+
}
|
18
24
|
.alertify-cover {
|
19
25
|
position: fixed; z-index: 99999;
|
20
26
|
top: 0; right: 0; bottom: 0; left: 0;
|
27
|
+
background-color:white;
|
28
|
+
filter:alpha(opacity=0);
|
29
|
+
opacity:0;
|
21
30
|
}
|
31
|
+
.alertify-cover-hidden {
|
32
|
+
display: none;
|
33
|
+
}
|
22
34
|
.alertify {
|
23
35
|
position: fixed; z-index: 99999;
|
24
36
|
top: 50px; left: 50%;
|
25
37
|
width: 550px;
|
26
38
|
margin-left: -275px;
|
39
|
+
opacity: 1;
|
27
40
|
}
|
28
41
|
.alertify-hidden {
|
29
|
-
|
42
|
+
-webkit-transform: translate(0,-150px);
|
43
|
+
-moz-transform: translate(0,-150px);
|
44
|
+
-ms-transform: translate(0,-150px);
|
45
|
+
-o-transform: translate(0,-150px);
|
46
|
+
transform: translate(0,-150px);
|
47
|
+
opacity: 0;
|
48
|
+
display: none;
|
49
|
+
}
|
50
|
+
/* overwrite display: none; for everything except IE6-8 */
|
51
|
+
:root *> .alertify-hidden {
|
52
|
+
display: block;
|
30
53
|
visibility: hidden;
|
31
54
|
}
|
32
55
|
.alertify-logs {
|
@@ -35,15 +58,28 @@
|
|
35
58
|
bottom: 10px;
|
36
59
|
right: 10px;
|
37
60
|
width: 300px;
|
61
|
+
}
|
62
|
+
.alertify-logs-hidden {
|
63
|
+
display: none;
|
38
64
|
}
|
39
65
|
.alertify-log {
|
40
66
|
display: block;
|
41
67
|
margin-top: 10px;
|
42
68
|
position: relative;
|
43
69
|
right: -300px;
|
70
|
+
opacity: 0;
|
44
71
|
}
|
45
72
|
.alertify-log-show {
|
46
73
|
right: 0;
|
74
|
+
opacity: 1;
|
75
|
+
}
|
76
|
+
.alertify-log-hide {
|
77
|
+
-webkit-transform: translate(300px, 0);
|
78
|
+
-moz-transform: translate(300px, 0);
|
79
|
+
-ms-transform: translate(300px, 0);
|
80
|
+
-o-transform: translate(300px, 0);
|
81
|
+
transform: translate(300px, 0);
|
82
|
+
opacity: 0;
|
47
83
|
}
|
48
84
|
.alertify-dialog {
|
49
85
|
padding: 25px;
|
@@ -71,7 +107,13 @@
|
|
71
107
|
}
|
72
108
|
.alertify-buttons {
|
73
109
|
}
|
74
|
-
.alertify-button
|
110
|
+
.alertify-button,
|
111
|
+
.alertify-button:hover,
|
112
|
+
.alertify-button:active,
|
113
|
+
.alertify-button:visited {
|
114
|
+
background: none;
|
115
|
+
text-decoration: none;
|
116
|
+
border: none;
|
75
117
|
/* line-height and font-size for input button */
|
76
118
|
line-height: 1.5;
|
77
119
|
font-size: 100%;
|
@@ -92,4 +134,4 @@
|
|
92
134
|
left: 5%;
|
93
135
|
margin: 0;
|
94
136
|
}
|
95
|
-
}
|
137
|
+
}
|
@@ -3,72 +3,79 @@
|
|
3
3
|
*/
|
4
4
|
.alertify,
|
5
5
|
.alertify-log {
|
6
|
-
|
6
|
+
font-family: sans-serif;
|
7
7
|
}
|
8
8
|
.alertify {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
}
|
18
|
-
.alertify-text {
|
19
|
-
border: 1px solid #CCC;
|
20
|
-
padding: 10px;
|
21
|
-
border-radius: 4px;
|
22
|
-
}
|
23
|
-
.alertify-button {
|
24
|
-
border-radius: 4px;
|
25
|
-
color: #FFF;
|
26
|
-
font-weight: bold;
|
27
|
-
padding: 6px 15px;
|
28
|
-
text-decoration: none;
|
29
|
-
text-shadow: 1px 1px 0 rgba(0,0,0,.5);
|
30
|
-
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
|
31
|
-
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
32
|
-
background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
33
|
-
background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
34
|
-
background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
35
|
-
background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
36
|
-
}
|
37
|
-
.alertify-button:hover,
|
38
|
-
.alertify-button:focus {
|
39
|
-
outline: none;
|
40
|
-
box-shadow: 0 0 15px #2B72D5;
|
41
|
-
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
42
|
-
background-image: -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
43
|
-
background-image: -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
44
|
-
background-image: -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
45
|
-
background-image: linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
46
|
-
}
|
47
|
-
.alertify-button:active {
|
48
|
-
position: relative;
|
49
|
-
top: 1px;
|
50
|
-
}
|
51
|
-
.alertify-button-cancel {
|
52
|
-
background-color: #FE1A00;
|
53
|
-
border: 1px solid #D83526;
|
54
|
-
}
|
55
|
-
.alertify-button-ok {
|
56
|
-
background-color: #5CB811;
|
57
|
-
border: 1px solid #3B7808;
|
9
|
+
background: #FFF;
|
10
|
+
border: 10px solid #333; /* browsers that don't support rgba */
|
11
|
+
border: 10px solid rgba(0,0,0,.7);
|
12
|
+
border-radius: 8px;
|
13
|
+
box-shadow: 0 3px 3px rgba(0,0,0,.3);
|
14
|
+
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
|
15
|
+
-moz-background-clip: padding; /* Firefox 3.6 */
|
16
|
+
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
|
58
17
|
}
|
18
|
+
.alertify-text {
|
19
|
+
border: 1px solid #CCC;
|
20
|
+
padding: 10px;
|
21
|
+
border-radius: 4px;
|
22
|
+
}
|
23
|
+
.alertify-button {
|
24
|
+
border-radius: 4px;
|
25
|
+
color: #FFF;
|
26
|
+
font-weight: bold;
|
27
|
+
padding: 6px 15px;
|
28
|
+
text-decoration: none;
|
29
|
+
text-shadow: 1px 1px 0 rgba(0,0,0,.5);
|
30
|
+
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
|
31
|
+
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
32
|
+
background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
33
|
+
background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
34
|
+
background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
35
|
+
background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
|
36
|
+
}
|
37
|
+
.alertify-button:hover,
|
38
|
+
.alertify-button:focus {
|
39
|
+
outline: none;
|
40
|
+
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
41
|
+
background-image: -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
42
|
+
background-image: -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
43
|
+
background-image: -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
44
|
+
background-image: linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
|
45
|
+
}
|
46
|
+
.alertify-button:focus {
|
47
|
+
box-shadow: 0 0 15px #2B72D5;
|
48
|
+
}
|
49
|
+
.alertify-button:active {
|
50
|
+
position: relative;
|
51
|
+
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
52
|
+
}
|
53
|
+
.alertify-button-cancel,
|
54
|
+
.alertify-button-cancel:hover,
|
55
|
+
.alertify-button-cancel:focus {
|
56
|
+
background-color: #FE1A00;
|
57
|
+
border: 1px solid #D83526;
|
58
|
+
}
|
59
|
+
.alertify-button-ok,
|
60
|
+
.alertify-button-ok:hover,
|
61
|
+
.alertify-button-ok:focus {
|
62
|
+
background-color: #5CB811;
|
63
|
+
border: 1px solid #3B7808;
|
64
|
+
}
|
65
|
+
|
59
66
|
.alertify-log {
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
}
|
67
|
-
.alertify-log-error {
|
68
|
-
background: #FE1A00;
|
69
|
-
background: rgba(254,26,0,.9);
|
70
|
-
}
|
71
|
-
.alertify-log-success {
|
72
|
-
background: #5CB811;
|
73
|
-
background: rgba(92,184,17,.9);
|
67
|
+
background: #1F1F1F;
|
68
|
+
background: rgba(0,0,0,.9);
|
69
|
+
padding: 15px;
|
70
|
+
border-radius: 4px;
|
71
|
+
color: #FFF;
|
72
|
+
text-shadow: -1px -1px 0 rgba(0,0,0,.5);
|
74
73
|
}
|
74
|
+
.alertify-log-error {
|
75
|
+
background: #FE1A00;
|
76
|
+
background: rgba(254,26,0,.9);
|
77
|
+
}
|
78
|
+
.alertify-log-success {
|
79
|
+
background: #5CB811;
|
80
|
+
background: rgba(92,184,17,.9);
|
81
|
+
}
|
metadata
CHANGED
@@ -1,17 +1,16 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: alertify-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
5
|
-
prerelease:
|
4
|
+
version: 0.2.0
|
6
5
|
platform: ruby
|
7
6
|
authors:
|
8
7
|
- Rudolf Schmidt
|
9
8
|
autorequire:
|
10
9
|
bindir: bin
|
11
10
|
cert_chain: []
|
12
|
-
date:
|
11
|
+
date: 2014-04-09 00:00:00.000000000 Z
|
13
12
|
dependencies: []
|
14
|
-
description: Use Alertify.js with Rails 3
|
13
|
+
description: Use Alertify.js with Rails 3 and 4
|
15
14
|
email:
|
16
15
|
executables: []
|
17
16
|
extensions: []
|
@@ -23,6 +22,7 @@ files:
|
|
23
22
|
- README.md
|
24
23
|
- Rakefile
|
25
24
|
- alertify-rails.gemspec
|
25
|
+
- app/helpers/alertify_helper.rb
|
26
26
|
- lib/alertify-rails.rb
|
27
27
|
- lib/alertify/rails.rb
|
28
28
|
- lib/alertify/rails/engine.rb
|
@@ -34,27 +34,26 @@ files:
|
|
34
34
|
- vendor/assets/stylesheets/alertify.default.css.scss
|
35
35
|
homepage: ''
|
36
36
|
licenses: []
|
37
|
+
metadata: {}
|
37
38
|
post_install_message:
|
38
39
|
rdoc_options: []
|
39
40
|
require_paths:
|
40
41
|
- lib
|
41
42
|
required_ruby_version: !ruby/object:Gem::Requirement
|
42
|
-
none: false
|
43
43
|
requirements:
|
44
|
-
- -
|
44
|
+
- - '>='
|
45
45
|
- !ruby/object:Gem::Version
|
46
46
|
version: '0'
|
47
47
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
48
|
-
none: false
|
49
48
|
requirements:
|
50
|
-
- -
|
49
|
+
- - '>='
|
51
50
|
- !ruby/object:Gem::Version
|
52
51
|
version: '0'
|
53
52
|
requirements: []
|
54
53
|
rubyforge_project:
|
55
|
-
rubygems_version:
|
54
|
+
rubygems_version: 2.2.2
|
56
55
|
signing_key:
|
57
|
-
specification_version:
|
58
|
-
summary: This gem provides the Alertify.js driver for Rails 3 applications
|
56
|
+
specification_version: 4
|
57
|
+
summary: This gem provides the Alertify.js driver for Rails 3 and 4 applications
|
59
58
|
test_files: []
|
60
59
|
has_rdoc:
|