rails-alertify 0.2.13 → 0.3.2

data/Gemfile

@@ -3,4 +3,8 @@ source "http://rubygems.org"
 # Declare your gem's dependencies in alertify-rails.gemspec.
 # Bundler will treat runtime dependencies like base dependencies, and
 # development dependencies will be added by default to the :development group.
-gemspec
+gemspec
+
+group :development do
+  gem "rake"
+end

data/README.md

@@ -24,7 +24,7 @@ If your manifest is written in CoffeeScript:
 #= require alertify
 ```
 
-Last step is to add the <code>core</code> and <code>default</code> stylesheets tou your application if you want to use the default ones.
+Last step is to add the <code>core</code> and <code>default</code> or <code>bootstrap</code> stylesheets tou your application if you want to use the default ones.
 
 ```css
 /*
@@ -34,6 +34,16 @@ Last step is to add the <code>core</code> and <code>default</code> stylesheets t
  */
 ```
 
+If you want to use the bootstrap theme instead:
+
+```css
+/*
+ *= require alertify/core
+ *= require alertify/bootstrap
+ *
+ */
+```
+
 ### About me
 
 Senior Developer @ Datenspiel GmbH (Leipzig/Germany)

data/lib/rails-alertify/version.rb

@@ -1,3 +1,3 @@
 module AlertifyRails
-  VERSION = "0.2.13"
+  VERSION = "0.3.2"
 end

data/vendor/assets/javascripts/alertify.js

@@ -5,9 +5,9 @@
  * @author Fabien Doiron <fabien.doiron@gmail.com>
  * @copyright Fabien Doiron 2012
  * @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.2
  */
 
 /*global define*/
@@ -24,7 +24,7 @@
         isopen    = false,
         keys      = { ENTER: 13, ESC: 27, SPACE: 32 },
         queue     = [],
-        $, elCallee, elCover, elDialog, elLog;
+        $, elCallee, elCover, elDialog, elLog, getTransitionEvent;
 
     /**
      * Markup pieces
@@ -37,11 +37,31 @@
         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>"
       },
-      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,
+          el = document.createElement("fakeelement"),
+          transitions = {
+          "transition"       : "transitionend",
+          "OTransition"      : "otransitionend",
+          "MSTransition"     : "msTransitionEnd",
+          "MozTransition"    : "transitionend",
+          "WebkitTransition" : "webkitTransitionEnd"
+        };
+
+      for (t in transitions) {
+        if (el.style[t] !== undefined) return transitions[t];
+      }
+    };
+
     /**
      * Shorthand for document.getElementById()
      *
@@ -73,6 +93,18 @@
        */
       delay : 5000,
 
+      /**
+       * Whether buttons are reversed (default is secondary/primary)
+       * @type {Boolean}
+       */
+      buttonReverse : false,
+
+      /**
+       * Set the transition event on load
+       * @type {[type]}
+       */
+      transition : undefined,
+
       /**
        * Set the proper button click events
        *
@@ -172,6 +204,18 @@
         }
       },
 
+      /**
+       * 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,7 +226,8 @@
       build : function (item) {
         var html    = "",
             type    = item.type,
-            message = item.message;
+            message = item.message,
+            css     = item.cssClass || "";
 
         html += "<div class=\"alertify-dialog\">";
 
@@ -203,11 +248,11 @@
 
         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 +263,7 @@
           break;
         }
 
-        elDialog.className = "alertify alertify-show alertify-" + type;
+        elDialog.className = "alertify alertify-show alertify-" + type + " " + css;
         elCover.className  = "alertify-cover";
         return html;
       },
@@ -227,17 +272,42 @@
        * 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,
+            removeElement;
+
         this.bind(elem, "click", function () {
           elLog.removeChild(elem);
         });
+
+        // Remove element after transition is done
+        removeElement = function (event) {
+          event.stopPropagation();
+          // transitionend event gets fired for every property
+          // this ensures it only tries to remove the element once
+          if (event.propertyName === "opacity") elLog.removeChild(this);
+        };
+
+        // never close (until click) if wait is set to 0
+        if (wait === 0) return;
+
         setTimeout(function () {
-          if (typeof elem !== "undefined" && elem.parentNode === elLog) elLog.removeChild(elem);
+          // ensure element exists
+          if (typeof elem !== "undefined" && elem.parentNode === elLog) {
+            // whether CSS transition exists
+            if (typeof self.transition !== "undefined") {
+              self.bind(elem, self.transition, removeElement);
+              elem.className += " alertify-log-hide";
+            } else {
+              elLog.removeChild(elem);
+            }
+          }
         }, timer);
       },
 
@@ -248,10 +318,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
@@ -272,7 +343,7 @@
           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 +357,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;
+        };
       },
 
       /**
@@ -339,6 +414,8 @@
         // this allows script to give it focus
         // after the dialog is closed
         document.body.setAttribute("tabindex", "0");
+        // set transition type
+        this.transition = getTransitionEvent();
         // clean up init method
         delete this.init;
       },
@@ -419,7 +496,7 @@
 
         isopen = true;
         elDialog.innerHTML = this.build(item);
-        if (typeof item.placeholder === "string") $("alertify-text").value = item.placeholder;
+        if (typeof item.placeholder === "string" && item.placeholder !== "") $("alertify-text").value = item.placeholder;
         this.addListeners(item.callback);
       },
 
@@ -442,12 +519,12 @@
     };
 
     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); },

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

@@ -0,0 +1,118 @@
+/**
+ * Twitter Bootstrap Look and Feel
+ * Based on http://twitter.github.com/bootstrap/
+ */
+.alertify,
+.alertify-log {
+  font-family: sans-serif;
+}
+.alertify {
+  background: #FFF;
+  border: 1px solid #8E8E8E; /* browsers that don't support rgba */
+  border: 1px solid rgba(0,0,0,.3);
+  border-radius: 6px;
+  box-shadow: 0 3px 7px 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-dialog {
+  padding: 0;
+}
+  .alertify-inner {
+    text-align: left;
+  }
+    .alertify-message {
+      padding: 15px;
+      margin: 0;
+    }
+    .alertify-text-wrapper {
+      padding: 0 15px;
+    }
+      .alertify-text {
+        color: #555;
+        border-radius: 4px;
+        padding: 8px;
+        background-color: #FFF;
+        border: 1px solid #CCC;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+      }
+      .alertify-text:focus {
+        border-color: rgba(82,168,236,.8);
+        outline: 0;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+      }
+
+    .alertify-buttons {
+      padding: 14px 15px 15px;
+      background: #F5F5F5;
+      border-top: 1px solid #DDD;
+      border-radius: 0 0 6px 6px;
+      box-shadow: inset 0 1px 0 #FFF;
+      text-align: right;
+    }
+      .alertify-button {
+        margin-left: 10px;
+        border-radius: 4px;
+        font-weight: normal;
+        padding: 4px 12px;
+        text-decoration: none;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
+        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:focus {
+        outline: none;
+        box-shadow: 0 0 5px #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 {
+          text-shadow: 0 -1px 0 rgba(255,255,255,.75);
+          background-color: #E6E6E6;
+          border: 1px solid #BBB;
+          color: #333;
+          background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
+          background-image:    -moz-linear-gradient(top, #FFF, #E6E6E6);
+          background-image:     -ms-linear-gradient(top, #FFF, #E6E6E6);
+          background-image:      -o-linear-gradient(top, #FFF, #E6E6E6);
+          background-image:         linear-gradient(top, #FFF, #E6E6E6);
+        }
+        .alertify-button-cancel:hover {
+          background: #E6E6E6;
+        }
+        .alertify-button-ok {
+          text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+          background-color: #04C;
+          border: 1px solid #04C;
+          border-color: #04C #04C #002A80;
+          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+          color: #FFF;
+        }
+        .alertify-button-ok:hover {
+          background: #04C;
+        }
+
+.alertify-log {
+  background: #D9EDF7;
+  padding: 8px 14px;
+  border-radius: 4px;
+  color: #3A8ABF;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  border: 1px solid #BCE8F1;
+}
+  .alertify-log-error {
+    color: #B94A48;
+    background: #F2DEDE;
+    border: 1px solid #EED3D7;
+  }
+  .alertify-log-success {
+    color: #468847;
+    background: #DFF0D8;
+    border: 1px solid #D6E9C6;
+  }

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

@@ -15,6 +15,14 @@
        -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, 0.735, 0.045); /* older webkit */
+  -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;
@@ -26,7 +34,11 @@
   margin-left: -275px;
 }
   .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);
     visibility: hidden;
   }
 .alertify-logs {
@@ -41,9 +53,19 @@
     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;

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

@@ -15,47 +15,48 @@
      -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-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-ok {
-    background-color: #5CB811;
-    border: 1px solid #3B7808;
+  .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;
+    }
+    
 .alertify-log {
   background: #1F1F1F;
   background: rgba(0,0,0,.9);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-alertify
 version: !ruby/object:Gem::Version
-  version: 0.2.13
+  version: 0.3.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-12 00:00:00.000000000 Z
+date: 2013-01-09 00:00:00.000000000 Z
 dependencies: []
 description: 
 email:
@@ -27,6 +27,7 @@ files:
 - lib/rails-alertify/version.rb
 - rails-alertify.gemspec
 - vendor/assets/javascripts/alertify.js
+- vendor/assets/stylesheets/alertify/bootstrap.css
 - vendor/assets/stylesheets/alertify/core.css
 - vendor/assets/stylesheets/alertify/default.css
 homepage: https://github.com/dsci/rails-alertify
@@ -41,12 +42,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: -1108957417410191220
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: -1108957417410191220
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.24