alertify-rails 0.1.0 → 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1c930f5a16b5d39584d064d045a7ab872ec67df1
+  data.tar.gz: d9cf0e54dac707cafd0e4493fb950e3db92e592d
+SHA512:
+  metadata.gz: e04d5fe1acb32540f8f52cdbe1c584ca7018f7f474ecdfd086d2f2b0d38552caac565d5972b13c4016717b581f37bbb8b61335983d5277b84e682efb22ca1822
+  data.tar.gz: af3cc1a64cbafa36048693d2abb91e211476719428e88a044f5dc6872bfebef938ac6ddebf8a0ae8eaca83f580b0396376cddd4d2974aa8c1afa80f31c89e5db

data/README.md

@@ -1,6 +1,6 @@
 # alertify-rails
 
-This gem provides [alertify.js](http://fabien-d.github.com/alertify.js) (v0.2.12) for Rails.
+This gem provides [alertify.js](http://fabien-d.github.com/alertify.js) (v0.3.11) for Rails.
 
 
 ## Installation

data/alertify-rails.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |gem|
   gem.version       = Alertify::Rails::VERSION
   gem.authors       = ["Rudolf Schmidt"]
 
-  gem.description   = %q{Use Alertify.js with Rails 3}
-  gem.summary       = %q{This gem provides the Alertify.js driver for Rails 3 applications}
+  gem.description   = %q{Use Alertify.js with Rails 3 and 4}
+  gem.summary       = %q{This gem provides the Alertify.js driver for Rails 3 and 4 applications}
   gem.homepage      = ""
 
   gem.files         = `git ls-files`.split($/)

data/app/helpers/alertify_helper.rb

@@ -0,0 +1,22 @@
+module AlertifyHelper
+  ALERT_TYPES = [:error, :info, :success, :warning] unless const_defined?(:ALERT_TYPES)
+
+  def alertify_flash
+    jsReturn = javascript_tag()
+    flash.each do |type, message|
+      # Skip empty messages, e.g. for devise messages set to nothing in a locale file.
+      next if message.blank?
+      
+      type = :success if type == :notice
+      type = :error   if type == :alert
+      next unless ALERT_TYPES.include?(type)
+
+      js_alertify = ""
+      Array(message).each do |msg|
+        js_alertify << "alertify.#{type}('#{msg}');\n" if msg;
+      end
+      jsReturn = javascript_tag(js_alertify)
+    end
+    jsReturn.html_safe()
+  end
+end

data/lib/alertify/rails/version.rb

@@ -1,7 +1,7 @@
 module Alertify #:nodoc:
   module Rails #:nodoc:
-    VERSION = "0.1.0"
-    ALERTIFY_VERSION = "0.2.12"
+    VERSION = "0.2.0"
+    ALERTIFY_VERSION = "0.3.11"
 
   end
 end

data/vendor/assets/javascripts/alertify.js

@@ -3,16 +3,14 @@
  * An unobtrusive customizable JavaScript notification system
  *
  * @author Fabien Doiron <fabien.doiron@gmail.com>
- * @copyright Fabien Doiron 2012
+ * @copyright Fabien Doiron 2013
  * @license MIT <http://opensource.org/licenses/mit-license.php>
- * @link http://www.github.com/fabien-d
+ * @link http://fabien-d.github.com/alertify.js/
  * @module alertify
- * @version 0.2.12
+ * @version 0.3.11
  */
-
-/*global define*/
 (function (global, undefined) {
-  "use strict";
+	"use strict";
 
 	var document = global.document,
 	    Alertify;
@@ -24,7 +22,7 @@
 		    isopen    = false,
 		    keys      = { ENTER: 13, ESC: 27, SPACE: 32 },
 		    queue     = [],
-		    $, elCallee, elCover, elDialog, elLog;
+		    $, btnCancel, btnOK, btnReset, btnResetBack, btnFocus, elCallee, elCover, elDialog, elLog, form, input, getTransitionEvent;
 
 		/**
 		 * Markup pieces
@@ -33,15 +31,45 @@
 		dialogs = {
 			buttons : {
 				holder : "<nav class=\"alertify-buttons\">{{buttons}}</nav>",
-				submit : "<button type=\"submit\" class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\" />{{ok}}</button>",
-				ok     : "<a href=\"#\" class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\">{{ok}}</a>",
-				cancel : "<a href=\"#\" class=\"alertify-button alertify-button-cancel\" id=\"alertify-cancel\">{{cancel}}</a>"
+				submit : "<button type=\"submit\" class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\">{{ok}}</button>",
+				ok     : "<button class=\"alertify-button alertify-button-ok\" id=\"alertify-ok\">{{ok}}</button>",
+				cancel : "<button class=\"alertify-button alertify-button-cancel\" id=\"alertify-cancel\">{{cancel}}</button>"
 			},
-			input   : "<input type=\"text\" class=\"alertify-text\" id=\"alertify-text\">",
+			input   : "<div class=\"alertify-text-wrapper\"><input type=\"text\" class=\"alertify-text\" id=\"alertify-text\"></div>",
 			message : "<p class=\"alertify-message\">{{message}}</p>",
 			log     : "<article class=\"alertify-log{{class}}\">{{message}}</article>"
 		};
 
+		/**
+		 * Return the proper transitionend event
+		 * @return {String}    Transition type string
+		 */
+		getTransitionEvent = function () {
+			var t,
+			    type,
+			    supported   = false,
+			    el          = document.createElement("fakeelement"),
+			    transitions = {
+				    "WebkitTransition" : "webkitTransitionEnd",
+				    "MozTransition"    : "transitionend",
+				    "OTransition"      : "otransitionend",
+				    "transition"       : "transitionend"
+			    };
+
+			for (t in transitions) {
+				if (el.style[t] !== undefined) {
+					type      = transitions[t];
+					supported = true;
+					break;
+				}
+			}
+
+			return {
+				type      : type,
+				supported : supported
+			};
+		};
+
 		/**
 		 * Shorthand for document.getElementById()
 		 *
@@ -73,6 +101,24 @@
 			 */
 			delay : 5000,
 
+			/**
+			 * Whether buttons are reversed (default is secondary/primary)
+			 * @type {Boolean}
+			 */
+			buttonReverse : false,
+
+			/**
+			 * Which button should be focused by default
+			 * @type {String}	"ok" (default), "cancel", or "none"
+			 */
+			buttonFocus : "ok",
+
+			/**
+			 * Set the transition event on load
+			 * @type {[type]}
+			 */
+			transition : undefined,
+
 			/**
 			 * Set the proper button click events
 			 *
@@ -81,12 +127,7 @@
 			 * @return {undefined}
 			 */
 			addListeners : function (fn) {
-				var btnReset  = $("alertify-resetFocus"),
-				    btnOK     = $("alertify-ok")     || undefined,
-				    btnCancel = $("alertify-cancel") || undefined,
-				    input     = $("alertify-text")   || undefined,
-				    form      = $("alertify-form")   || undefined,
-				    hasOK     = (typeof btnOK !== "undefined"),
+				var hasOK     = (typeof btnOK !== "undefined"),
 				    hasCancel = (typeof btnCancel !== "undefined"),
 				    hasInput  = (typeof input !== "undefined"),
 				    val       = "",
@@ -98,7 +139,13 @@
 					if (typeof event.preventDefault !== "undefined") event.preventDefault();
 					common(event);
 					if (typeof input !== "undefined") val = input.value;
-					if (typeof fn === "function") fn(true, val);
+					if (typeof fn === "function") {
+						if (typeof input !== "undefined") {
+							fn(true, val);
+						}
+						else fn(true);
+					}
+					return false;
 				};
 
 				// cancel event handler
@@ -106,6 +153,7 @@
 					if (typeof event.preventDefault !== "undefined") event.preventDefault();
 					common(event);
 					if (typeof fn === "function") fn(false);
+					return false;
 				};
 
 				// common event handler (keyup, ok and cancel)
@@ -113,7 +161,6 @@
 					self.hide();
 					self.unbind(document.body, "keyup", key);
 					self.unbind(btnReset, "focus", reset);
-					if (hasInput) self.unbind(form, "submit", ok);
 					if (hasOK) self.unbind(btnOK, "click", ok);
 					if (hasCancel) self.unbind(btnCancel, "click", cancel);
 				};
@@ -121,15 +168,15 @@
 				// keyup handler
 				key = function (event) {
 					var keyCode = event.keyCode;
-					if (keyCode === keys.SPACE && !hasInput) ok(event);
+					if ((keyCode === keys.SPACE && !hasInput) || (hasInput && keyCode === keys.ENTER)) ok(event);
 					if (keyCode === keys.ESC && hasCancel) cancel(event);
 				};
 
 				// reset focus to first item in the dialog
 				reset = function (event) {
 					if (hasInput) input.focus();
-					else if (hasCancel) btnCancel.focus();
-					else btnOK.focus();
+					else if (!hasCancel || self.buttonReverse) btnOK.focus();
+					else btnCancel.focus();
 				};
 
 				// handle reset focus link
@@ -137,22 +184,16 @@
 				// ever leave the dialog box until an action has
 				// been taken
 				this.bind(btnReset, "focus", reset);
+				this.bind(btnResetBack, "focus", reset);
 				// handle OK click
 				if (hasOK) this.bind(btnOK, "click", ok);
 				// handle Cancel click
 				if (hasCancel) this.bind(btnCancel, "click", cancel);
 				// listen for keys, Cancel => ESC
 				this.bind(document.body, "keyup", key);
-				// bind form submit
-				if (hasInput) this.bind(form, "submit", ok);
-				// set focus on OK button or the input text
-				global.setTimeout(function () {
-					if (input) {
-						input.focus();
-						input.select();
-					}
-					else btnOK.focus();
-				}, 50);
+				if (!this.transition.supported) {
+					this.setFocus();
+				}
 			},
 
 			/**
@@ -172,6 +213,35 @@
 				}
 			},
 
+			/**
+			 * Use alertify as the global error handler (using window.onerror)
+			 *
+			 * @return {boolean} success
+			 */
+			handleErrors : function () {
+				if (typeof global.onerror !== "undefined") {
+					var self = this;
+					global.onerror = function (msg, url, line) {
+						self.error("[" + msg + " on line " + line + " of " + url + "]", 0);
+					};
+					return true;
+				} else {
+					return false;
+				}
+			},
+
+			/**
+			 * Append button HTML strings
+			 *
+			 * @param {String} secondary    The secondary button HTML string
+			 * @param {String} primary      The primary button HTML string
+			 *
+			 * @return {String}             The appended button HTML strings
+			 */
+			appendButtons : function (secondary, primary) {
+				return this.buttonReverse ? primary + secondary : secondary + primary;
+			},
+
 			/**
 			 * Build the proper message box
 			 *
@@ -182,11 +252,16 @@
 			build : function (item) {
 				var html    = "",
 				    type    = item.type,
-				    message = item.message;
+				    message = item.message,
+				    css     = item.cssClass || "";
 
 				html += "<div class=\"alertify-dialog\">";
+				html += "<a id=\"alertify-resetFocusBack\" class=\"alertify-resetFocus\" href=\"#\">Reset Focus</a>";
 
-				if (type === "prompt") html += "<form id=\"alertify-form\">";
+				if (_alertify.buttonFocus === "none") html += "<a href=\"#\" id=\"alertify-noneFocus\" class=\"alertify-hidden\"></a>";
+
+				// doens't require an actual form
+				if (type === "prompt") html += "<div id=\"alertify-form\">";
 
 				html += "<article class=\"alertify-inner\">";
 				html += dialogs.message.replace("{{message}}", message);
@@ -196,18 +271,18 @@
 				html += dialogs.buttons.holder;
 				html += "</article>";
 
-				if (type === "prompt") html += "</form>";
+				if (type === "prompt") html += "</div>";
 
 				html += "<a id=\"alertify-resetFocus\" class=\"alertify-resetFocus\" href=\"#\">Reset Focus</a>";
 				html += "</div>";
 
 				switch (type) {
 				case "confirm":
-					html = html.replace("{{buttons}}", dialogs.buttons.cancel + dialogs.buttons.ok);
+					html = html.replace("{{buttons}}", this.appendButtons(dialogs.buttons.cancel, dialogs.buttons.ok));
 					html = html.replace("{{ok}}", this.labels.ok).replace("{{cancel}}", this.labels.cancel);
 					break;
 				case "prompt":
-					html = html.replace("{{buttons}}", dialogs.buttons.cancel + dialogs.buttons.submit);
+					html = html.replace("{{buttons}}", this.appendButtons(dialogs.buttons.cancel, dialogs.buttons.submit));
 					html = html.replace("{{ok}}", this.labels.ok).replace("{{cancel}}", this.labels.cancel);
 					break;
 				case "alert":
@@ -218,7 +293,7 @@
 					break;
 				}
 
-				elDialog.className = "alertify alertify-show alertify-" + type;
+				elDialog.className = "alertify alertify-" + type + " " + css;
 				elCover.className  = "alertify-cover";
 				return html;
 			},
@@ -227,18 +302,49 @@
 			 * Close the log messages
 			 *
 			 * @param  {Object} elem    HTML Element of log message to close
-			 * @param  {Number} wait    [optional] Time (in ms) to wait before automatically hiding the message
+			 * @param  {Number} wait    [optional] Time (in ms) to wait before automatically hiding the message, if 0 never hide
 			 *
 			 * @return {undefined}
 			 */
 			close : function (elem, wait) {
-				var timer = (wait && !isNaN(wait)) ? +wait : this.delay; // Unary Plus: +"2" === 2
+				// Unary Plus: +"2" === 2
+				var timer = (wait && !isNaN(wait)) ? +wait : this.delay,
+				    self  = this,
+				    hideElement, transitionDone;
+
+				// set click event on log messages
 				this.bind(elem, "click", function () {
-					elLog.removeChild(elem);
+					hideElement(elem);
 				});
-				setTimeout(function () {
-					if (typeof elem !== "undefined" && elem.parentNode === elLog) elLog.removeChild(elem);
-				}, timer);
+				// Hide the dialog box after transition
+				// This ensure it doens't block any element from being clicked
+				transitionDone = function (event) {
+					event.stopPropagation();
+					// unbind event so function only gets called once
+					self.unbind(this, self.transition.type, transitionDone);
+					// remove log message
+					elLog.removeChild(this);
+					if (!elLog.hasChildNodes()) elLog.className += " alertify-logs-hidden";
+				};
+				// this sets the hide class to transition out
+				// or removes the child if css transitions aren't supported
+				hideElement = function (el) {
+					// ensure element exists
+					if (typeof el !== "undefined" && el.parentNode === elLog) {
+						// whether CSS transition exists
+						if (self.transition.supported) {
+							self.bind(el, self.transition.type, transitionDone);
+							el.className += " alertify-log-hide";
+						} else {
+							elLog.removeChild(el);
+							if (!elLog.hasChildNodes()) elLog.className += " alertify-logs-hidden";
+						}
+					}
+				};
+				// never close (until click) if wait is set to 0
+				if (wait === 0) return;
+				// set timeout to auto close the log message
+				setTimeout(function () { hideElement(elem); }, timer);
 			},
 
 			/**
@@ -248,10 +354,11 @@
 			 * @param  {String}   type           Type of dialog to create
 			 * @param  {Function} fn             [Optional] Callback function
 			 * @param  {String}   placeholder    [Optional] Default value for prompt input field
+			 * @param  {String}   cssClass       [Optional] Class(es) to append to dialog box
 			 *
 			 * @return {Object}
 			 */
-			dialog : function (message, type, fn, placeholder) {
+			dialog : function (message, type, fn, placeholder, cssClass) {
 				// set the current active element
 				// this allows the keyboard focus to be resetted
 				// after the dialog box is closed
@@ -259,7 +366,7 @@
 				// check to ensure the alertify dialog element
 				// has been successfully created
 				var check = function () {
-					if (elDialog && elDialog.scrollTop !== null) return;
+					if ((elLog && elLog.scrollTop !== null) && (elCover && elCover.scrollTop !== null)) return;
 					else check();
 				};
 				// error catching
@@ -267,12 +374,10 @@
 				if (typeof type !== "string") throw new Error("type must be a string");
 				if (typeof fn !== "undefined" && typeof fn !== "function") throw new Error("fn must be a function");
 				// initialize alertify if it hasn't already been done
-				if (typeof this.init === "function") {
-					this.init();
-					check();
-				}
+				this.init();
+				check();
 
-				queue.push({ type: type, message: message, callback: fn, placeholder: placeholder });
+				queue.push({ type: type, message: message, callback: fn, placeholder: placeholder, cssClass: cssClass });
 				if (!isopen) this.setup();
 
 				return this;
@@ -286,7 +391,11 @@
 			 * @return {Function}
 			 */
 			extend : function (type) {
-				return function (message, wait) { this.log(message, type, wait); };
+				if (typeof type !== "string") throw new Error("extend method must have exactly one paramter");
+				return function (message, wait) {
+					this.log(message, type, wait);
+					return this;
+				};
 			},
 
 			/**
@@ -295,14 +404,29 @@
 			 * @return {undefined}
 			 */
 			hide : function () {
+				var transitionDone,
+				    self = this;
 				// remove reference from queue
 				queue.splice(0,1);
 				// if items remaining in the queue
-				if (queue.length > 0) this.setup();
+				if (queue.length > 0) this.setup(true);
 				else {
 					isopen = false;
-					elDialog.className = "alertify alertify-hide alertify-hidden";
-					elCover.className  = "alertify-cover alertify-hidden";
+					// Hide the dialog box after transition
+					// This ensure it doens't block any element from being clicked
+					transitionDone = function (event) {
+						event.stopPropagation();
+						// unbind event so function only gets called once
+						self.unbind(elDialog, self.transition.type, transitionDone);
+					};
+					// whether CSS transition exists
+					if (this.transition.supported) {
+						this.bind(elDialog, this.transition.type, transitionDone);
+						elDialog.className = "alertify alertify-hide alertify-hidden";
+					} else {
+						elDialog.className = "alertify alertify-hide alertify-hidden alertify-isHidden";
+					}
+					elCover.className  = "alertify-cover alertify-cover-hidden";
 					// set focus to the last element or body
 					// after the dialog is closed
 					elCallee.focus();
@@ -321,26 +445,34 @@
 				document.createElement("article");
 				document.createElement("section");
 				// cover
-				elCover = document.createElement("div");
-				elCover.setAttribute("id", "alertify-cover");
-				elCover.className = "alertify-cover alertify-hidden";
-				document.body.appendChild(elCover);
+				if ($("alertify-cover") == null) {
+					elCover = document.createElement("div");
+					elCover.setAttribute("id", "alertify-cover");
+					elCover.className = "alertify-cover alertify-cover-hidden";
+					document.body.appendChild(elCover);
+				}
 				// main element
-				elDialog = document.createElement("section");
-				elDialog.setAttribute("id", "alertify");
-				elDialog.className = "alertify alertify-hidden";
-				document.body.appendChild(elDialog);
+				if ($("alertify") == null) {
+					isopen = false;
+					queue = [];
+					elDialog = document.createElement("section");
+					elDialog.setAttribute("id", "alertify");
+					elDialog.className = "alertify alertify-hidden";
+					document.body.appendChild(elDialog);
+				}
 				// log element
-				elLog = document.createElement("section");
-				elLog.setAttribute("id", "alertify-logs");
-				elLog.className = "alertify-logs";
-				document.body.appendChild(elLog);
+				if ($("alertify-logs") == null) {
+					elLog = document.createElement("section");
+					elLog.setAttribute("id", "alertify-logs");
+					elLog.className = "alertify-logs alertify-logs-hidden";
+					document.body.appendChild(elLog);
+				}
 				// set tabindex attribute on body element
 				// this allows script to give it focus
 				// after the dialog is closed
 				document.body.setAttribute("tabindex", "0");
-				// clean up init method
-				delete this.init;
+				// set transition type
+				this.transition = getTransitionEvent();
 			},
 
 			/**
@@ -360,10 +492,10 @@
 					else check();
 				};
 				// initialize alertify if it hasn't already been done
-				if (typeof this.init === "function") {
-					this.init();
-					check();
-				}
+				this.init();
+				check();
+
+				elLog.className = "alertify-logs";
 				this.notify(message, type, wait);
 				return this;
 			},
@@ -383,8 +515,8 @@
 				var log = document.createElement("article");
 				log.className = "alertify-log" + ((typeof type === "string" && type !== "") ? " alertify-log-" + type : "");
 				log.innerHTML = message;
-				// prepend child
-				elLog.insertBefore(log, elLog.firstChild);
+				// append child
+				elLog.appendChild(log);
 				// triggers the CSS animation
 				setTimeout(function() { log.className = log.className + " alertify-log-show"; }, 50);
 				this.close(log, wait);
@@ -409,17 +541,55 @@
 				}
 			},
 
+			/**
+			 * Common place to set focus to proper element
+			 *
+			 * @return {undefined}
+			 */
+			setFocus : function () {
+				if (input) {
+					input.focus();
+					input.select();
+				}
+				else btnFocus.focus();
+			},
+
 			/**
 			 * Initiate all the required pieces for the dialog box
 			 *
 			 * @return {undefined}
 			 */
-			setup : function () {
-				var item = queue[0];
+			setup : function (fromQueue) {
+				var item = queue[0],
+				    self = this,
+				    transitionDone;
 
+				// dialog is open
 				isopen = true;
+				// Set button focus after transition
+				transitionDone = function (event) {
+					event.stopPropagation();
+					self.setFocus();
+					// unbind event so function only gets called once
+					self.unbind(elDialog, self.transition.type, transitionDone);
+				};
+				// whether CSS transition exists
+				if (this.transition.supported && !fromQueue) {
+					this.bind(elDialog, this.transition.type, transitionDone);
+				}
+				// build the proper dialog HTML
 				elDialog.innerHTML = this.build(item);
-				if (typeof item.placeholder === "string") $("alertify-text").value = item.placeholder;
+				// assign all the common elements
+				btnReset  = $("alertify-resetFocus");
+				btnResetBack  = $("alertify-resetFocusBack");
+				btnOK     = $("alertify-ok")     || undefined;
+				btnCancel = $("alertify-cancel") || undefined;
+				btnFocus  = (_alertify.buttonFocus === "cancel") ? btnCancel : ((_alertify.buttonFocus === "none") ? $("alertify-noneFocus") : btnOK),
+				input     = $("alertify-text")   || undefined;
+				form      = $("alertify-form")   || undefined;
+				// add placeholder value to the input field
+				if (typeof item.placeholder === "string" && item.placeholder !== "") input.value = item.placeholder;
+				if (fromQueue) this.setFocus();
 				this.addListeners(item.callback);
 			},
 
@@ -442,26 +612,25 @@
 		};
 
 		return {
-			alert   : function (message, fn) { _alertify.dialog(message, "alert", fn); return this; },
-			confirm : function (message, fn) { _alertify.dialog(message, "confirm", fn); return this; },
+			alert   : function (message, fn, cssClass) { _alertify.dialog(message, "alert", fn, "", cssClass); return this; },
+			confirm : function (message, fn, cssClass) { _alertify.dialog(message, "confirm", fn, "", cssClass); return this; },
 			extend  : _alertify.extend,
 			init    : _alertify.init,
 			log     : function (message, type, wait) { _alertify.log(message, type, wait); return this; },
-			prompt  : function (message, fn, placeholder) { _alertify.dialog(message, "prompt", fn, placeholder); return this; },
+			prompt  : function (message, fn, placeholder, cssClass) { _alertify.dialog(message, "prompt", fn, placeholder, cssClass); return this; },
 			success : function (message, wait) { _alertify.log(message, "success", wait); return this; },
 			error   : function (message, wait) { _alertify.log(message, "error", wait); return this; },
 			set     : function (args) { _alertify.set(args); },
-			labels  : _alertify.labels
+			labels  : _alertify.labels,
+			debug   : _alertify.handleErrors
 		};
 	};
 
 	// AMD and window support
 	if (typeof define === "function") {
 		define([], function () { return new Alertify(); });
-	} else {
-		if (typeof global.alertify === "undefined") {
-			global.alertify = new Alertify();
-		}
+	} else if (typeof global.alertify === "undefined") {
+		global.alertify = new Alertify();
 	}
 
 }(this));

data/vendor/assets/stylesheets/alertify.core.css.scss

@@ -1,6 +1,6 @@
+.alertify,
 .alertify-show,
 .alertify-log {
-	-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
 	-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 	   -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 	    -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
@@ -8,25 +8,48 @@
 	        transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
 }
 .alertify-hide {
-	-webkit-transition: all 250ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
 	-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 	   -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 	    -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 	     -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 	        transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
 }
+.alertify-log-hide {
+	-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+	   -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+	    -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+	     -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+	        transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
+}
 .alertify-cover {
 	position: fixed; z-index: 99999;
 	top: 0; right: 0; bottom: 0; left: 0;
+	background-color:white;
+	filter:alpha(opacity=0);
+	opacity:0;
 }
+	.alertify-cover-hidden {
+		display: none;
+	}
 .alertify {
 	position: fixed; z-index: 99999;
 	top: 50px; left: 50%;
 	width: 550px;
 	margin-left: -275px;
+	opacity: 1;
 }
 	.alertify-hidden {
-		top: -50px;
+		-webkit-transform: translate(0,-150px);
+		   -moz-transform: translate(0,-150px);
+		    -ms-transform: translate(0,-150px);
+		     -o-transform: translate(0,-150px);
+		        transform: translate(0,-150px);
+		opacity: 0;
+		display: none;
+	}
+	/* overwrite display: none; for everything except IE6-8 */
+	:root *> .alertify-hidden {
+		display: block;
 		visibility: hidden;
 	}
 .alertify-logs {
@@ -35,15 +58,28 @@
 	bottom: 10px;
 	right: 10px;
 	width: 300px;
+}
+.alertify-logs-hidden {
+	display: none;
 }
 	.alertify-log {
 		display: block;
 		margin-top: 10px;
 		position: relative;
 		right: -300px;
+		opacity: 0;
 	}
 	.alertify-log-show {
 		right: 0;
+		opacity: 1;
+	}
+	.alertify-log-hide {
+		-webkit-transform: translate(300px, 0);
+		   -moz-transform: translate(300px, 0);
+		    -ms-transform: translate(300px, 0);
+		     -o-transform: translate(300px, 0);
+		        transform: translate(300px, 0);
+		opacity: 0;
 	}
 	.alertify-dialog {
 		padding: 25px;
@@ -71,7 +107,13 @@
 		}
 		.alertify-buttons {
 		}
-			.alertify-button {
+			.alertify-button,
+			.alertify-button:hover,
+			.alertify-button:active,
+			.alertify-button:visited {
+				background: none;
+				text-decoration: none;
+				border: none;
 				/* line-height and font-size for input button */
 				line-height: 1.5;
 				font-size: 100%;
@@ -92,4 +134,4 @@
 		left: 5%;
 		margin: 0;
 	}
-}
+}

data/vendor/assets/stylesheets/alertify.default.css.scss

@@ -3,72 +3,79 @@
  */
 .alertify,
 .alertify-log {
-  font-family: sans-serif;
+	font-family: sans-serif;
 }
 .alertify {
-  background: #FFF;
-  border: 10px solid #333; /* browsers that don't support rgba */
-  border: 10px solid rgba(0,0,0,.7);
-  border-radius: 8px;
-  box-shadow: 0 3px 3px rgba(0,0,0,.3);
-  -webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
-  -moz-background-clip: padding;     /* Firefox 3.6 */
-  background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-}
-.alertify-text {
-  border: 1px solid #CCC;
-  padding: 10px;
-  border-radius: 4px;
-}
-.alertify-button {
-  border-radius: 4px;
-  color: #FFF;
-  font-weight: bold;
-  padding: 6px 15px;
-  text-decoration: none;
-  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
-  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
-  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
-  background-image:    -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
-  background-image:     -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
-  background-image:      -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
-  background-image:         linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
-}
-.alertify-button:hover,
-.alertify-button:focus {
-  outline: none;
-  box-shadow: 0 0 15px #2B72D5;
-  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:    -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:     -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:      -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:         linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
-}
-.alertify-button:active {
-  position: relative;
-  top: 1px;
-}
-.alertify-button-cancel {
-  background-color: #FE1A00;
-  border: 1px solid #D83526;
-}
-.alertify-button-ok {
-  background-color: #5CB811;
-  border: 1px solid #3B7808;
+	background: #FFF;
+	border: 10px solid #333; /* browsers that don't support rgba */
+	border: 10px solid rgba(0,0,0,.7);
+	border-radius: 8px;
+	box-shadow: 0 3px 3px rgba(0,0,0,.3);
+	-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
+	   -moz-background-clip: padding;     /* Firefox 3.6 */
+	        background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
 }
+	.alertify-text {
+		border: 1px solid #CCC;
+		padding: 10px;
+		border-radius: 4px;
+	}
+	.alertify-button {
+		border-radius: 4px;
+		color: #FFF;
+		font-weight: bold;
+		padding: 6px 15px;
+		text-decoration: none;
+		text-shadow: 1px 1px 0 rgba(0,0,0,.5);
+		box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
+		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+		background-image:    -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+		background-image:     -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+		background-image:      -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+		background-image:         linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+	}
+	.alertify-button:hover,
+	.alertify-button:focus {
+		outline: none;
+		background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+		background-image:    -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+		background-image:     -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+		background-image:      -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+		background-image:         linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
+	}
+	.alertify-button:focus {
+		box-shadow: 0 0 15px #2B72D5;
+	}
+	.alertify-button:active {
+		position: relative;
+		box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+	}
+		.alertify-button-cancel,
+		.alertify-button-cancel:hover,
+		.alertify-button-cancel:focus {
+			background-color: #FE1A00;
+			border: 1px solid #D83526;
+		}
+		.alertify-button-ok,
+		.alertify-button-ok:hover,
+		.alertify-button-ok:focus {
+			background-color: #5CB811;
+			border: 1px solid #3B7808;
+		}
+
 .alertify-log {
-  background: #1F1F1F;
-  background: rgba(0,0,0,.9);
-  padding: 15px;
-  border-radius: 4px;
-  color: #FFF;
-  text-shadow: -1px -1px 0 rgba(0,0,0,.5);
-}
-.alertify-log-error {
-  background: #FE1A00;
-  background: rgba(254,26,0,.9);
-}
-.alertify-log-success {
-  background: #5CB811;
-  background: rgba(92,184,17,.9);
+	background: #1F1F1F;
+	background: rgba(0,0,0,.9);
+	padding: 15px;
+	border-radius: 4px;
+	color: #FFF;
+	text-shadow: -1px -1px 0 rgba(0,0,0,.5);
 }
+	.alertify-log-error {
+		background: #FE1A00;
+		background: rgba(254,26,0,.9);
+	}
+	.alertify-log-success {
+		background: #5CB811;
+		background: rgba(92,184,17,.9);
+	}

metadata

@@ -1,17 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: alertify-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
-  prerelease: 
+  version: 0.2.0
 platform: ruby
 authors:
 - Rudolf Schmidt
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-17 00:00:00.000000000 Z
+date: 2014-04-09 00:00:00.000000000 Z
 dependencies: []
-description: Use Alertify.js with Rails 3
+description: Use Alertify.js with Rails 3 and 4
 email: 
 executables: []
 extensions: []
@@ -23,6 +22,7 @@ files:
 - README.md
 - Rakefile
 - alertify-rails.gemspec
+- app/helpers/alertify_helper.rb
 - lib/alertify-rails.rb
 - lib/alertify/rails.rb
 - lib/alertify/rails/engine.rb
@@ -34,27 +34,26 @@ files:
 - vendor/assets/stylesheets/alertify.default.css.scss
 homepage: ''
 licenses: []
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.24
+rubygems_version: 2.2.2
 signing_key: 
-specification_version: 3
-summary: This gem provides the Alertify.js driver for Rails 3 applications
+specification_version: 4
+summary: This gem provides the Alertify.js driver for Rails 3 and 4 applications
 test_files: []
 has_rdoc: