alertifyjs-rails 0.1.0 → 0.1.1

data/README.md

@@ -1,6 +1,6 @@
 # alertifyjs-rails
 
-This gem provides [alertify.js](http://alertifyjs.com/) (v0.4.0) for Rails.
+This gem provides [alertify.js](http://alertifyjs.com/) (v0.6.0) for Rails.
 
 
 ## Installation

data/alertifyjs-rails.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |gem|
 
   gem.description   = %q{Use Alertify.js (alertifyjs.com) with Rails 3 and 4}
   gem.summary       = %q{This gem provides the Alertify.js (alertifyjs.com) for Rails applications}
-  gem.homepage      = ""
+  gem.homepage      = "https://github.com/mkhairi/alertifyjs-rails.git"
 
   gem.files         = `git ls-files`.split($/)
   gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }

data/lib/alertifyjs/rails/version.rb

@@ -1,6 +1,6 @@
 module Alertifyjs #:nodoc:
   module Rails #:nodoc:
-    VERSION = "0.1.0"
-    ALERTIFY_VERSION = "0.4.0"
+    VERSION = "0.1.1"
+    ALERTIFYJS_VERSION = "0.6.0"
   end
-end
+end

data/vendor/assets/javascripts/alertify.js

@@ -7,7 +7,7 @@
  * @license MIT <http://opensource.org/licenses/mit-license.php>
  * @link http://alertifyjs.com
  * @module AlertifyJS
- * @version 0.4.0
+ * @version 0.6.0
  */
 ( function ( window ) {
     'use strict';
@@ -34,9 +34,10 @@
         maximizable:true,
         pinnable:true,
         pinned:true,
-        transition:'pulse',
         padding: true,
         overflow:true,
+        maintainFocus:true,
+        transition:'pulse',
         notifier:{
             delay:5,
             position:'bottom-right'
@@ -178,16 +179,16 @@
     var transition = (function () {
         var t, type;
         var supported = false;
-        var el = document.createElement('fakeelement');
         var transitions = {
-            'WebkitTransition': 'webkitTransitionEnd',
-            'MozTransition': 'transitionend',
-            'OTransition': 'otransitionend',
-            'transition': 'transitionend'
+            'animation'        : 'animationend',
+            'OAnimation'       : 'oAnimationEnd oanimationend',
+            'msAnimation'      : 'MSAnimationEnd',
+            'MozAnimation'     : 'animationend',
+            'WebkitAnimation'  : 'webkitAnimationEnd'
         };
 
         for (t in transitions) {
-            if (el.style[t] !== undefined) {
+            if (document.body.style[t] !== undefined) {
                 type = transitions[t];
                 supported = true;
                 break;
@@ -340,6 +341,8 @@
                      * @type {Node}
                      */
                     activeElement:document.body,
+                    timerIn:undefined,
+                    timerOut:undefined,
                     buttons: setup.buttons,
                     focus: setup.focus,
                     options: {
@@ -1165,8 +1168,6 @@
                 setFocus(instance, resetTarget);
             }
         }
-        //animation timers
-        var transitionInTimeout, transitionOutTimeout;
         /**
          * Transition in transitionend event handler. 
          *
@@ -1177,7 +1178,7 @@
          */
         function handleTransitionInEvent(event, instance) {
             // clear the timer
-            clearTimeout(transitionInTimeout);
+            clearTimeout(instance.__internal.timerIn);
 
             // once transition is complete, set focus
             setFocus(instance);
@@ -1206,7 +1207,7 @@
          */
         function handleTransitionOutEvent(event, instance) {
             // clear the timer
-            clearTimeout(transitionOutTimeout);
+            clearTimeout(instance.__internal.timerOut);
             // unbind the event
             off(instance.elements.dialog, transition.type, instance.__internal.transitionOutHandler);
 
@@ -1221,7 +1222,10 @@
             }
 
             // return focus to the last active element
-            instance.__internal.activeElement.focus();
+            if (alertify.defaults.maintainFocus && instance.__internal.activeElement) {
+                instance.__internal.activeElement.focus();
+                instance.__internal.activeElement = null;
+            }
         }
         /* Controls moving a dialog around */
         //holde the current moving instance
@@ -1851,6 +1855,19 @@
                     return this;
                 }
             },
+            /**
+             * [Alias] Sets dialog settings/options 
+             */
+            set:function(key, value){
+                this.setting(key,value);
+                return this;
+            },
+            /**
+             * [Alias] Gets dialog settings/options 
+             */
+            get:function(key){
+                return this.setting(key);
+            },
             /**
             * Sets dialog header
             * @content {string or element}
@@ -1906,7 +1923,9 @@
                     openInstances.push(this);
 
                     // save last focused element
-                    this.__internal.activeElement = document.activeElement;
+                    if(alertify.defaults.maintainFocus){
+                        this.__internal.activeElement = document.activeElement;
+                    }
 
                     //allow custom dom manipulation updates before showing the dialog.
                     if(typeof this.prepare === 'function'){
@@ -1933,8 +1952,8 @@
                     addClass(this.elements.root, classes.animationIn);
 
                     // set 1s fallback in case transition event doesn't fire
-                    clearTimeout( transitionInTimeout );
-                    transitionInTimeout = setTimeout( this.__internal.transitionInHandler, transition.supported ? 1000 : 100 );
+                    clearTimeout( this.__internal.timerIn);
+                    this.__internal.timerIn = setTimeout( this.__internal.transitionInHandler, transition.supported ? 1000 : 100 );
 
                     if(isSafari){
                         // force desktop safari reflow
@@ -1981,9 +2000,8 @@
                     addClass(this.elements.root, classes.animationOut);
 
                     // set 1s fallback in case transition event doesn't fire
-                    clearTimeout( transitionOutTimeout );
-                    transitionOutTimeout = setTimeout( this.__internal.transitionOutHandler, transition.supported ? 1000 : 100 );
-
+                    clearTimeout( this.__internal.timerOut );
+                    this.__internal.timerOut = setTimeout( this.__internal.transitionOutHandler, transition.supported ? 1000 : 100 );
                     // hide dialog
                     addClass(this.elements.root, classes.hidden);
                     //reflow
@@ -2085,9 +2103,9 @@
 
             function transitionDone(event, instance) {
                 // unbind event
-                off(instance.__internal.element, transition.type, transitionDone);
+                off(instance.element, transition.type, transitionDone);
                 // remove the message
-                element.removeChild(instance.__internal.element);
+                element.removeChild(instance.element);
             }
 
             function initialize(instance) {
@@ -2096,7 +2114,6 @@
                         pushed: false,
                         delay : undefined,
                         timer: undefined,
-                        element: div,
                         clickHandler: undefined,
                         transitionEndHandler: undefined,
                         transitionTimeout: undefined
@@ -2111,6 +2128,8 @@
                 clearTimeout(instance.__internal.transitionTimeout);
             }
             return initialize({
+                /* notification DOM element*/
+                element: div,
                 /*
                  * Pushes a notification message 
                  * @param {string or DOMElement} content The notification message content
@@ -2133,6 +2152,7 @@
                                 wait = _content;
                             } else {
                                 content = _content;
+                                wait = this.__internal.delay;
                             }
                             break;
                         case 2:
@@ -2146,14 +2166,14 @@
                         }
                         // append or insert
                         if (notifier.__internal.position.indexOf('top') < 0) {
-                            element.appendChild(this.__internal.element);
+                            element.appendChild(this.element);
                         } else {
-                            element.insertBefore(this.__internal.element, element.firstChild);
+                            element.insertBefore(this.element, element.firstChild);
                         }
-                        reflow = this.__internal.element.offsetWidth;
-                        addClass(this.__internal.element, classes.visible);
+                        reflow = this.element.offsetWidth;
+                        addClass(this.element, classes.visible);
                         // attach click event
-                        on(this.__internal.element, 'click', this.__internal.clickHandler);
+                        on(this.element, 'click', this.__internal.clickHandler);
                         return this.delay(wait);
                     }
                     return this;
@@ -2179,12 +2199,12 @@
                         clearTimers(this);
                         if (!(typeof this.ondismiss === 'function' && this.ondismiss.call(this) === false)) {
                             //detach click event
-                            off(this.__internal.element, 'click', this.__internal.clickHandler);
+                            off(this.element, 'click', this.__internal.clickHandler);
                             // ensure element exists
-                            if (typeof this.__internal.element !== 'undefined' && this.__internal.element.parentNode === element) {
+                            if (typeof this.element !== 'undefined' && this.element.parentNode === element) {
                                 //transition end or fallback
                                 this.__internal.transitionTimeout = setTimeout(this.__internal.transitionEndHandler, transition.supported ? 1000 : 100);
-                                removeClass(this.__internal.element, classes.visible);
+                                removeClass(this.element, classes.visible);
 
                                 // custom callback on dismiss
                                 if (typeof this.callback === 'function') {
@@ -2217,9 +2237,9 @@
                  */
                 setContent: function (content) {
                     if (typeof content === 'string') {
-                        this.__internal.element.innerHTML = content;
+                        this.element.innerHTML = content;
                     } else {
-                        this.__internal.element.appendChild(content);
+                        this.element.appendChild(content);
                     }
                     return this;
                 }
@@ -2257,6 +2277,19 @@
                 }
                 return this;
             },
+            /**
+             * [Alias] Sets dialog settings/options 
+             */
+            set:function(key,value){
+                this.setting(key,value);
+                return this;
+            },
+            /**
+             * [Alias] Gets dialog settings/options 
+             */
+            get:function(key){
+                return this.setting(key);
+            },
             /**
              * Creates a new notification message
              *
@@ -2365,8 +2398,8 @@
              *
              * @param {string}      Dialog name.
              * @param {Function}    A Dialog factory function.
-             * @param {Boolean}     indicates whether to create a singleton or transient dialog.
-             * @type {Object}
+             * @param {Boolean}     Indicates whether to create a singleton or transient dialog.
+             * @param {String}      The name of the base type to inherit from.
              */
             dialog: function (name, Factory, transient, base) {
 
@@ -2437,17 +2470,29 @@
                     return dialog.setting(key, value);
                 }
             },
+            /**
+             * [Alias] Sets dialog settings/options 
+             */
+            set: function(name,key,value){
+                return this.setting(name, key,value);
+            },
+            /**
+             * [Alias] Gets dialog settings/options 
+             */
+            get: function(name, key){
+                return this.setting(name, key);
+            },
             /**
              * Creates a new notification message.
              * If a type is passed, a class name "ajs-{type}" will be added.
              * This allows for custom look and feel for various types of notifications.
              *
-             * @param  {String}		[message=undefined]		Message text
-             * @param  {String}		[type='']				Type of log message
-             * @param  {String}		[value='']				Time (in ms) to wait before auto-close
-             * @param  {Function}	[callback=undefined]	A callback function to be invoked when the log is closed.
+             * @param  {String | DOMElement}    [message=undefined]		Message text
+             * @param  {String}                 [type='']				Type of log message
+             * @param  {String}                 [wait='']				Time (in seconds) to wait before auto-close
+             * @param  {Function}               [callback=undefined]	A callback function to be invoked when the log is closed.
              *
-             * @return {undefined}
+             * @return {Object} Notification object.
              */
             notify: function (message, type, wait, callback) {
                 return notifier.create(type, callback).push(message, wait);
@@ -2456,11 +2501,10 @@
              * Creates a new notification message.
              *
              * @param  {String}		[message=undefined]		Message text
-             * @param  {String}		[type='']				Type of log message
-             * @param  {String}		[value='']				Time (in ms) to wait before auto-close
+             * @param  {String}     [wait='']				Time (in seconds) to wait before auto-close
              * @param  {Function}	[callback=undefined]	A callback function to be invoked when the log is closed.
              *
-             * @return {undefined}
+             * @return {Object} Notification object.
              */
             message: function (message, wait, callback) {
                 return notifier.create(null, callback).push(message, wait);
@@ -2469,11 +2513,10 @@
              * Creates a new notification message of type 'success'.
              *
              * @param  {String}		[message=undefined]		Message text
-             * @param  {String}		[type='']				Type of log message
-             * @param  {String}		[value='']				Time (in ms) to wait before auto-close
+             * @param  {String}     [wait='']				Time (in seconds) to wait before auto-close
              * @param  {Function}	[callback=undefined]	A callback function to be invoked when the log is closed.
              *
-             * @return {undefined}
+             * @return {Object} Notification object.
              */
             success: function (message, wait, callback) {
                 return notifier.create('success', callback).push(message, wait);
@@ -2482,11 +2525,10 @@
              * Creates a new notification message of type 'error'.
              *
              * @param  {String}		[message=undefined]		Message text
-             * @param  {String}		[type='']				Type of log message
-             * @param  {String}		[value='']				Time (in ms) to wait before auto-close
+             * @param  {String}     [wait='']				Time (in seconds) to wait before auto-close
              * @param  {Function}	[callback=undefined]	A callback function to be invoked when the log is closed.
              *
-             * @return {undefined}
+             * @return {Object} Notification object.
              */
             error: function (message, wait, callback) {
                 return notifier.create('error', callback).push(message, wait);
@@ -2495,11 +2537,10 @@
              * Creates a new notification message of type 'warning'.
              *
              * @param  {String}		[message=undefined]		Message text
-             * @param  {String}		[type='']				Type of log message
-             * @param  {String}		[value='']				Time (in ms) to wait before auto-close
+             * @param  {String}     [wait='']				Time (in seconds) to wait before auto-close
              * @param  {Function}	[callback=undefined]	A callback function to be invoked when the log is closed.
              *
-             * @return {undefined}
+             * @return {Object} Notification object.
              */
             warning: function (message, wait, callback) {
                 return notifier.create('warning', callback).push(message, wait);

data/vendor/assets/stylesheets/alertify.css

@@ -266,14 +266,14 @@
           animation-duration: 250ms;
 }
 .alertify .ajs-dialog.ajs-shake {
-  -webkit-animation-name: shake;
-          animation-name: shake;
+  -webkit-animation-name: ajs-shake;
+          animation-name: ajs-shake;
   -webkit-animation-duration: .1s;
           animation-duration: .1s;
   -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
 }
-@-webkit-keyframes shake {
+@-webkit-keyframes ajs-shake {
   0%,
   100% {
     -webkit-transform: translate3d(0, 0, 0);
@@ -295,7 +295,7 @@
             transform: translate3d(10px, 0, 0);
   }
 }
-@keyframes shake {
+@keyframes ajs-shake {
   0%,
   100% {
     -webkit-transform: translate3d(0, 0, 0);
@@ -317,66 +317,59 @@
             transform: translate3d(10px, 0, 0);
   }
 }
-.alertify.ajs-slide.ajs-hidden .ajs-dialog {
-  margin: -100% auto !important;
-}
-.alertify.ajs-slide .ajs-dialog {
-  -webkit-transition-property: margin, visibility;
-          transition-property: margin, visibility;
-}
 .alertify.ajs-slide.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-transition-duration: 500ms;
-          transition-duration: 500ms;
-  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -webkit-animation-name: ajs-slideIn;
+          animation-name: ajs-slideIn;
+  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+          animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 .alertify.ajs-slide.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-transition-duration: 250ms;
-          transition-duration: 250ms;
-  -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-          transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  -webkit-animation-name: ajs-slideOut;
+          animation-name: ajs-slideOut;
+  -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+          animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 .alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: zoomIn;
-          animation-name: zoomIn;
+  -webkit-animation-name: ajs-zoomIn;
+          animation-name: ajs-zoomIn;
 }
 .alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: zoomOut;
-          animation-name: zoomOut;
+  -webkit-animation-name: ajs-zoomOut;
+          animation-name: ajs-zoomOut;
 }
 .alertify.ajs-fade.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: fadeIn;
-          animation-name: fadeIn;
+  -webkit-animation-name: ajs-fadeIn;
+          animation-name: ajs-fadeIn;
 }
 .alertify.ajs-fade.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: fadeOut;
-          animation-name: fadeOut;
+  -webkit-animation-name: ajs-fadeOut;
+          animation-name: ajs-fadeOut;
 }
 .alertify.ajs-pulse.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: pulseIn;
-          animation-name: pulseIn;
+  -webkit-animation-name: ajs-pulseIn;
+          animation-name: ajs-pulseIn;
 }
 .alertify.ajs-pulse.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: pulseOut;
-          animation-name: pulseOut;
+  -webkit-animation-name: ajs-pulseOut;
+          animation-name: ajs-pulseOut;
 }
 .alertify.ajs-flipx.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: flipInX;
-          animation-name: flipInX;
+  -webkit-animation-name: ajs-flipInX;
+          animation-name: ajs-flipInX;
 }
 .alertify.ajs-flipx.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: flipOutX;
-          animation-name: flipOutX;
+  -webkit-animation-name: ajs-flipOutX;
+          animation-name: ajs-flipOutX;
 }
 .alertify.ajs-flipy.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: flipInY;
-          animation-name: flipInY;
+  -webkit-animation-name: ajs-flipInY;
+          animation-name: ajs-flipInY;
 }
 .alertify.ajs-flipy.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: flipOutY;
-          animation-name: flipOutY;
+  -webkit-animation-name: ajs-flipOutY;
+          animation-name: ajs-flipOutY;
 }
-@-webkit-keyframes pulseIn {
+@-webkit-keyframes ajs-pulseIn {
   0%,
   20%,
   40%,
@@ -414,7 +407,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@keyframes pulseIn {
+@keyframes ajs-pulseIn {
   0%,
   20%,
   40%,
@@ -452,7 +445,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@-webkit-keyframes pulseOut {
+@-webkit-keyframes ajs-pulseOut {
   20% {
     -webkit-transform: scale3d(0.9, 0.9, 0.9);
             transform: scale3d(0.9, 0.9, 0.9);
@@ -469,7 +462,7 @@
             transform: scale3d(0.3, 0.3, 0.3);
   }
 }
-@keyframes pulseOut {
+@keyframes ajs-pulseOut {
   20% {
     -webkit-transform: scale3d(0.9, 0.9, 0.9);
             transform: scale3d(0.9, 0.9, 0.9);
@@ -486,7 +479,7 @@
             transform: scale3d(0.3, 0.3, 0.3);
   }
 }
-@-webkit-keyframes zoomIn {
+@-webkit-keyframes ajs-zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale3d(0.25, 0.25, 0.25);
@@ -498,7 +491,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@keyframes zoomIn {
+@keyframes ajs-zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale3d(0.25, 0.25, 0.25);
@@ -510,7 +503,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@-webkit-keyframes zoomOut {
+@-webkit-keyframes ajs-zoomOut {
   0% {
     opacity: 1;
     -webkit-transform: scale3d(1, 1, 1);
@@ -522,7 +515,7 @@
             transform: scale3d(0.25, 0.25, 0.25);
   }
 }
-@keyframes zoomOut {
+@keyframes ajs-zoomOut {
   0% {
     opacity: 1;
     -webkit-transform: scale3d(1, 1, 1);
@@ -534,7 +527,7 @@
             transform: scale3d(0.25, 0.25, 0.25);
   }
 }
-@-webkit-keyframes fadeIn {
+@-webkit-keyframes ajs-fadeIn {
   0% {
     opacity: 0;
   }
@@ -542,7 +535,7 @@
     opacity: 1;
   }
 }
-@keyframes fadeIn {
+@keyframes ajs-fadeIn {
   0% {
     opacity: 0;
   }
@@ -550,7 +543,7 @@
     opacity: 1;
   }
 }
-@-webkit-keyframes fadeOut {
+@-webkit-keyframes ajs-fadeOut {
   0% {
     opacity: 1;
   }
@@ -558,7 +551,7 @@
     opacity: 0;
   }
 }
-@keyframes fadeOut {
+@keyframes ajs-fadeOut {
   0% {
     opacity: 1;
   }
@@ -566,7 +559,7 @@
     opacity: 0;
   }
 }
-@-webkit-keyframes flipInX {
+@-webkit-keyframes ajs-flipInX {
   0% {
     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
             transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
@@ -594,7 +587,7 @@
             transform: perspective(400px);
   }
 }
-@keyframes flipInX {
+@keyframes ajs-flipInX {
   0% {
     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
             transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
@@ -622,7 +615,7 @@
             transform: perspective(400px);
   }
 }
-@-webkit-keyframes flipOutX {
+@-webkit-keyframes ajs-flipOutX {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -638,7 +631,7 @@
     opacity: 0;
   }
 }
-@keyframes flipOutX {
+@keyframes ajs-flipOutX {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -654,7 +647,7 @@
     opacity: 0;
   }
 }
-@-webkit-keyframes flipInY {
+@-webkit-keyframes ajs-flipInY {
   0% {
     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
             transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
@@ -682,7 +675,7 @@
             transform: perspective(400px);
   }
 }
-@keyframes flipInY {
+@keyframes ajs-flipInY {
   0% {
     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
             transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
@@ -710,7 +703,7 @@
             transform: perspective(400px);
   }
 }
-@-webkit-keyframes flipOutY {
+@-webkit-keyframes ajs-flipOutY {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -726,7 +719,7 @@
     opacity: 0;
   }
 }
-@keyframes flipOutY {
+@keyframes ajs-flipOutY {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -742,6 +735,38 @@
     opacity: 0;
   }
 }
+@-webkit-keyframes ajs-slideIn {
+  0% {
+    margin-top: -100%;
+  }
+  100% {
+    margin-top: 5%;
+  }
+}
+@keyframes ajs-slideIn {
+  0% {
+    margin-top: -100%;
+  }
+  100% {
+    margin-top: 5%;
+  }
+}
+@-webkit-keyframes ajs-slideOut {
+  0% {
+    margin-top: 5%;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
+@keyframes ajs-slideOut {
+  0% {
+    margin-top: 5%;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
 .alertify-notifier {
   position: fixed;
   width: 0;

data/vendor/assets/stylesheets/alertify.rtl.css

@@ -266,14 +266,14 @@
           animation-duration: 250ms;
 }
 .alertify .ajs-dialog.ajs-shake {
-  -webkit-animation-name: shake;
-          animation-name: shake;
+  -webkit-animation-name: ajs-shake;
+          animation-name: ajs-shake;
   -webkit-animation-duration: .1s;
           animation-duration: .1s;
   -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
 }
-@-webkit-keyframes shake {
+@-webkit-keyframes ajs-shake {
   0%,
   100% {
     -webkit-transform: translate3d(0, 0, 0);
@@ -295,7 +295,7 @@
             transform: translate3d(-10px, 0, 0);
   }
 }
-@keyframes shake {
+@keyframes ajs-shake {
   0%,
   100% {
     -webkit-transform: translate3d(0, 0, 0);
@@ -317,66 +317,59 @@
             transform: translate3d(-10px, 0, 0);
   }
 }
-.alertify.ajs-slide.ajs-hidden .ajs-dialog {
-  margin: -100% auto !important;
-}
-.alertify.ajs-slide .ajs-dialog {
-  -webkit-transition-property: margin, visibility;
-          transition-property: margin, visibility;
-}
 .alertify.ajs-slide.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-transition-duration: 500ms;
-          transition-duration: 500ms;
-  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -webkit-animation-name: ajs-slideIn;
+          animation-name: ajs-slideIn;
+  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+          animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 .alertify.ajs-slide.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-transition-duration: 250ms;
-          transition-duration: 250ms;
-  -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-          transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  -webkit-animation-name: ajs-slideOut;
+          animation-name: ajs-slideOut;
+  -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+          animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 .alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: zoomIn;
-          animation-name: zoomIn;
+  -webkit-animation-name: ajs-zoomIn;
+          animation-name: ajs-zoomIn;
 }
 .alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: zoomOut;
-          animation-name: zoomOut;
+  -webkit-animation-name: ajs-zoomOut;
+          animation-name: ajs-zoomOut;
 }
 .alertify.ajs-fade.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: fadeIn;
-          animation-name: fadeIn;
+  -webkit-animation-name: ajs-fadeIn;
+          animation-name: ajs-fadeIn;
 }
 .alertify.ajs-fade.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: fadeOut;
-          animation-name: fadeOut;
+  -webkit-animation-name: ajs-fadeOut;
+          animation-name: ajs-fadeOut;
 }
 .alertify.ajs-pulse.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: pulseIn;
-          animation-name: pulseIn;
+  -webkit-animation-name: ajs-pulseIn;
+          animation-name: ajs-pulseIn;
 }
 .alertify.ajs-pulse.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: pulseOut;
-          animation-name: pulseOut;
+  -webkit-animation-name: ajs-pulseOut;
+          animation-name: ajs-pulseOut;
 }
 .alertify.ajs-flipx.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: flipInX;
-          animation-name: flipInX;
+  -webkit-animation-name: ajs-flipInX;
+          animation-name: ajs-flipInX;
 }
 .alertify.ajs-flipx.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: flipOutX;
-          animation-name: flipOutX;
+  -webkit-animation-name: ajs-flipOutX;
+          animation-name: ajs-flipOutX;
 }
 .alertify.ajs-flipy.ajs-in:not(.ajs-hidden) .ajs-dialog {
-  -webkit-animation-name: flipInY;
-          animation-name: flipInY;
+  -webkit-animation-name: ajs-flipInY;
+          animation-name: ajs-flipInY;
 }
 .alertify.ajs-flipy.ajs-out.ajs-hidden .ajs-dialog {
-  -webkit-animation-name: flipOutY;
-          animation-name: flipOutY;
+  -webkit-animation-name: ajs-flipOutY;
+          animation-name: ajs-flipOutY;
 }
-@-webkit-keyframes pulseIn {
+@-webkit-keyframes ajs-pulseIn {
   0%,
   20%,
   40%,
@@ -414,7 +407,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@keyframes pulseIn {
+@keyframes ajs-pulseIn {
   0%,
   20%,
   40%,
@@ -452,7 +445,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@-webkit-keyframes pulseOut {
+@-webkit-keyframes ajs-pulseOut {
   20% {
     -webkit-transform: scale3d(0.9, 0.9, 0.9);
             transform: scale3d(0.9, 0.9, 0.9);
@@ -469,7 +462,7 @@
             transform: scale3d(0.3, 0.3, 0.3);
   }
 }
-@keyframes pulseOut {
+@keyframes ajs-pulseOut {
   20% {
     -webkit-transform: scale3d(0.9, 0.9, 0.9);
             transform: scale3d(0.9, 0.9, 0.9);
@@ -486,7 +479,7 @@
             transform: scale3d(0.3, 0.3, 0.3);
   }
 }
-@-webkit-keyframes zoomIn {
+@-webkit-keyframes ajs-zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale3d(0.25, 0.25, 0.25);
@@ -498,7 +491,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@keyframes zoomIn {
+@keyframes ajs-zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale3d(0.25, 0.25, 0.25);
@@ -510,7 +503,7 @@
             transform: scale3d(1, 1, 1);
   }
 }
-@-webkit-keyframes zoomOut {
+@-webkit-keyframes ajs-zoomOut {
   0% {
     opacity: 1;
     -webkit-transform: scale3d(1, 1, 1);
@@ -522,7 +515,7 @@
             transform: scale3d(0.25, 0.25, 0.25);
   }
 }
-@keyframes zoomOut {
+@keyframes ajs-zoomOut {
   0% {
     opacity: 1;
     -webkit-transform: scale3d(1, 1, 1);
@@ -534,7 +527,7 @@
             transform: scale3d(0.25, 0.25, 0.25);
   }
 }
-@-webkit-keyframes fadeIn {
+@-webkit-keyframes ajs-fadeIn {
   0% {
     opacity: 0;
   }
@@ -542,7 +535,7 @@
     opacity: 1;
   }
 }
-@keyframes fadeIn {
+@keyframes ajs-fadeIn {
   0% {
     opacity: 0;
   }
@@ -550,7 +543,7 @@
     opacity: 1;
   }
 }
-@-webkit-keyframes fadeOut {
+@-webkit-keyframes ajs-fadeOut {
   0% {
     opacity: 1;
   }
@@ -558,7 +551,7 @@
     opacity: 0;
   }
 }
-@keyframes fadeOut {
+@keyframes ajs-fadeOut {
   0% {
     opacity: 1;
   }
@@ -566,7 +559,7 @@
     opacity: 0;
   }
 }
-@-webkit-keyframes flipInX {
+@-webkit-keyframes ajs-flipInX {
   0% {
     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
             transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
@@ -594,7 +587,7 @@
             transform: perspective(400px);
   }
 }
-@keyframes flipInX {
+@keyframes ajs-flipInX {
   0% {
     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
             transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
@@ -622,7 +615,7 @@
             transform: perspective(400px);
   }
 }
-@-webkit-keyframes flipOutX {
+@-webkit-keyframes ajs-flipOutX {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -638,7 +631,7 @@
     opacity: 0;
   }
 }
-@keyframes flipOutX {
+@keyframes ajs-flipOutX {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -654,7 +647,7 @@
     opacity: 0;
   }
 }
-@-webkit-keyframes flipInY {
+@-webkit-keyframes ajs-flipInY {
   0% {
     -webkit-transform: perspective(400px) rotate3d(0, -1, 0, -90deg);
             transform: perspective(400px) rotate3d(0, -1, 0, -90deg);
@@ -682,7 +675,7 @@
             transform: perspective(400px);
   }
 }
-@keyframes flipInY {
+@keyframes ajs-flipInY {
   0% {
     -webkit-transform: perspective(400px) rotate3d(0, -1, 0, -90deg);
             transform: perspective(400px) rotate3d(0, -1, 0, -90deg);
@@ -710,7 +703,7 @@
             transform: perspective(400px);
   }
 }
-@-webkit-keyframes flipOutY {
+@-webkit-keyframes ajs-flipOutY {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -726,7 +719,7 @@
     opacity: 0;
   }
 }
-@keyframes flipOutY {
+@keyframes ajs-flipOutY {
   0% {
     -webkit-transform: perspective(400px);
             transform: perspective(400px);
@@ -742,6 +735,38 @@
     opacity: 0;
   }
 }
+@-webkit-keyframes ajs-slideIn {
+  0% {
+    margin-top: -100%;
+  }
+  100% {
+    margin-top: 5%;
+  }
+}
+@keyframes ajs-slideIn {
+  0% {
+    margin-top: -100%;
+  }
+  100% {
+    margin-top: 5%;
+  }
+}
+@-webkit-keyframes ajs-slideOut {
+  0% {
+    margin-top: 5%;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
+@keyframes ajs-slideOut {
+  0% {
+    margin-top: 5%;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
 .alertify-notifier {
   position: fixed;
   width: 0;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: alertifyjs-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-19 00:00:00.000000000 Z
+date: 2014-09-22 00:00:00.000000000 Z
 dependencies: []
 description: Use Alertify.js (alertifyjs.com) with Rails 3 and 4
 email: 
@@ -38,7 +38,7 @@ files:
 - vendor/assets/stylesheets/alertify/default.rtl.css
 - vendor/assets/stylesheets/alertify/semantic.css
 - vendor/assets/stylesheets/alertify/semantic.rtl.css
-homepage: ''
+homepage: https://github.com/mkhairi/alertifyjs-rails.git
 licenses: []
 post_install_message: 
 rdoc_options: []