bootstrap-material-design 0.1.4 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0d9d03bd14c3050ee8956c07cd9dc4f9cc28316e
-  data.tar.gz: d1b763922760df4fdc8f7f5ab69fb4776d59a498
+  metadata.gz: e050d59b10f9e266f92d791194fe08178b9af7f1
+  data.tar.gz: 46ef06bf9319f1bb11d8f087dcb2efadb32c1a39
 SHA512:
-  metadata.gz: 249f6cd97977e2cff63113ba83715c5c55040c44f19419beadafad211b5986745d618780d1b5a7e8b09d0e944d1d4075ea89163630939b2f7ac56afa158e78c9
-  data.tar.gz: 1d5e1e74f4d7d4c1bfb419e8b5433f9ecc7d0665589daec9807a002854b7854438d1a4a565d1f9ccb35777e6a50068c8e79fbbfccc554370fec979be07a47ff7
+  metadata.gz: 040447111c651c8c4a419fc8ad4a40364c49a8bc00d6448ad9b2dbe014a0ba298d6c3caf3c064553deabb0415a549053184eea9bae53ad598aaaf83f63534ffa
+  data.tar.gz: d9463a3bf7f581a07a8194715e7763524de0cb65795af0c28772e8508ca94f7ed380593eb53e4b05506bc898e83b339e6ed98925bf9468effec6de896c5a03d4

data/app/assets/javascripts/bootstrap-material-design/material.js

@@ -1,80 +1,226 @@
-! function(a) {
-    function b(a) {
-        return "undefined" == typeof a.which ? !0 : "number" == typeof a.which && a.which > 0 ? !a.ctrlKey && !a.metaKey && !a.altKey && 8 != a.which : !1
+/* globals jQuery */
+
+(function($) {
+  // Selector to select only not already processed elements
+  $.expr[":"].notmdproc = function(obj){
+    if ($(obj).data("mdproc")) {
+      return false;
+    } else {
+      return true;
     }
-    a.expr[":"].notmdproc = function(b) {
-        return a(b).data("mdproc") ? !1 : !0
-    }, a.material = {
-        options: {
-            withRipples: [".btn:not(.btn-link)", ".card-image", ".navbar a:not(.withoutripple)", ".dropdown-menu a", ".nav-tabs a:not(.withoutripple)", ".withripple"].join(","),
-            inputElements: "input.form-control, textarea.form-control, select.form-control",
-            checkboxElements: ".checkbox > label > input[type=checkbox]",
-            radioElements: ".radio > label > input[type=radio]"
-        },
-        checkbox: function(b) {
-            a(b ? b : this.options.checkboxElements).filter(":notmdproc").data("mdproc", !0).after("<span class=ripple></span><span class=check></span>")
-        },
-        radio: function(b) {
-            a(b ? b : this.options.radioElements).filter(":notmdproc").data("mdproc", !0).after("<span class=circle></span><span class=check></span>")
-        },
-        input: function(c) {
-            a(c ? c : this.options.inputElements).filter(":notmdproc").data("mdproc", !0).each(function() {
-                var b = a(this);
-                if (b.wrap("<div class=form-control-wrapper></div>"), b.after("<span class=material-input></span>"), b.hasClass("floating-label")) {
-                    var c = b.attr("placeholder");
-                    b.attr("placeholder", null).removeClass("floating-label"), b.after("<div class=floating-label>" + c + "</div>")
-                }
-                if (b.attr("data-hint") && b.after("<div class=hint>" + b.attr("data-hint") + "</div>"), (null === b.val() || "undefined" == b.val() || "" === b.val()) && b.addClass("empty"), b.parent().next().is("[type=file]")) {
-                    b.parent().addClass("fileinput");
-                    var d = b.parent().next().detach();
-                    b.after(d)
-                }
-            }), a(document).on("change", ".checkbox input[type=checkbox]", function() {
-                a(this).blur()
-            }).on("keydown paste", ".form-control", function(c) {
-                b(c) && a(this).removeClass("empty")
-            }).on("keyup change", ".form-control", function() {
-                var b = a(this);
-                "" === b.val() ? b.addClass("empty") : b.removeClass("empty")
-            }).on("focus", ".form-control-wrapper.fileinput", function() {
-                a(this).find("input").addClass("focus")
-            }).on("blur", ".form-control-wrapper.fileinput", function() {
-                a(this).find("input").removeClass("focus")
-            }).on("change", ".form-control-wrapper.fileinput [type=file]", function() {
-                var b = "";
-                a.each(a(this)[0].files, function(a, c) {
-                    console.log(c), b += c.name + ", "
-                }), b = b.substring(0, b.length - 2), b ? a(this).prev().removeClass("empty") : a(this).prev().addClass("empty"), a(this).prev().val(b)
-            })
-        },
-        ripples: function(a) {
-            ripples.init(a ? a : this.options.withRipples)
-        },
-        init: function() {
-            this.ripples(), this.input(), this.checkbox(), this.radio(), document.arrive && document.arrive("input, textarea, select", function() {
-                    a.material.init()
-                }),
-                function() {
-                    var b = setInterval(function() {
-                        a("input[type!=checkbox]").each(function() {
-                            a(this).val() && a(this).val() !== a(this).attr("value") && a(this).trigger("change")
-                        })
-                    }, 100);
-                    setTimeout(function() {
-                        clearInterval(b)
-                    }, 1e4);
-                    var c;
-                    a(document).on("focus", "input", function() {
-                        var b = a(this).parents("form").find("input");
-                        c = setInterval(function() {
-                            b.each(function() {
-                                a(this).val() !== a(this).attr("value") && a(this).trigger("change")
-                            })
-                        }, 100)
-                    }).on("blur", "input", function() {
-                        clearInterval(c)
-                    })
-                }()
+  };
+
+  function _isChar(evt) {
+    if (typeof evt.which == "undefined") {
+      return true;
+    } else if (typeof evt.which == "number" && evt.which > 0) {
+      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
+    }
+    return false;
+  }
+
+  $.material =  {
+    "options": {
+      // These options set what will be started by $.material.init()
+      "input": true,
+      "ripples": true,
+      "checkbox": true,
+      "togglebutton": true,
+      "radio": true,
+      "arrive": true,
+      "autofill": false,
+
+      "withRipples": [
+        ".btn:not(.btn-link)",
+        ".card-image",
+        ".navbar a:not(.withoutripple)",
+        ".dropdown-menu a",
+        ".nav-tabs a:not(.withoutripple)",
+        ".withripple"
+      ].join(","),
+      "inputElements": "input.form-control, textarea.form-control, select.form-control",
+      "checkboxElements": ".checkbox > label > input[type=checkbox]",
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
+      "radioElements": ".radio > label > input[type=radio]"
+    },
+    "checkbox": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      $((selector) ? selector : this.options.checkboxElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=ripple></span><span class=check></span>");
+    },
+    "togglebutton": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      $((selector) ? selector : this.options.togglebuttonElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=toggle></span>");
+    },
+    "radio": function(selector) {
+      // Add fake-radio to material radios
+      $((selector) ? selector : this.options.radioElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=circle></span><span class=check></span>");
+    },
+    "input": function(selector) {
+      $((selector) ? selector : this.options.inputElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .each( function() {
+        var $this = $(this);
+
+        if (!$(this).attr("data-hint") && !$this.hasClass("floating-label")) {
+          return;
+        }
+        $this.wrap("<div class=form-control-wrapper></div>");
+        $this.after("<span class=material-input></span>");
+
+        // Add floating label if required
+        if ($this.hasClass("floating-label")) {
+          var placeholder = $this.attr("placeholder");
+          $this.attr("placeholder", null).removeClass("floating-label");
+          $this.after("<div class=floating-label>" + placeholder + "</div>");
+        }
+
+        // Add hint label if required
+        if ($this.attr("data-hint")) {
+          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+        }
+
+        // Set as empty if is empty (damn I must improve this...)
+        if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+          $this.addClass("empty");
+        }
+
+        // Support for file input
+        if ($this.parent().next().is("[type=file]")) {
+          $this.parent().addClass("fileinput");
+          var $input = $this.parent().next().detach();
+          $this.after($input);
+        }
+      });
+
+      $(document)
+      .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
+      .on("keydown paste", ".form-control", function(e) {
+        if(_isChar(e)) {
+          $(this).removeClass("empty");
+        }
+      })
+      .on("keyup change", ".form-control", function() {
+        var $this = $(this);
+        if($this.val() === "" && $this[0].checkValidity()) {
+          $this.addClass("empty");
+        } else {
+          $this.removeClass("empty");
+        }
+      })
+      .on("focus", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").addClass("focus");
+      })
+      .on("blur", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").removeClass("focus");
+      })
+      .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+        var value = "";
+        $.each($(this)[0].files, function(i, file) {
+          value += file.name + ", ";
+        });
+        value = value.substring(0, value.length - 2);
+        if (value) {
+          $(this).prev().removeClass("empty");
+        } else {
+          $(this).prev().addClass("empty");
+        }
+        $(this).prev().val(value);
+      });
+    },
+    "ripples": function(selector) {
+      $((selector) ? selector : this.options.withRipples).ripples();
+    },
+    "autofill": function() {
+
+      // This part of code will detect autofill when the page is loading (username and password inputs for example)
+      var loading = setInterval(function() {
+        $("input[type!=checkbox]").each(function() {
+          if ($(this).val() && $(this).val() !== $(this).attr("value")) {
+            $(this).trigger("change");
+          }
+        });
+      }, 100);
+
+      // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+      setTimeout(function() {
+        clearInterval(loading);
+      }, 10000);
+      // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
+      var focused;
+      $(document)
+      .on("focus", "input", function() {
+        var $inputs = $(this).parents("form").find("input").not("[type=file]");
+        focused = setInterval(function() {
+          $inputs.each(function() {
+            if ($(this).val() !== $(this).attr("value")) {
+              $(this).trigger("change");
+            }
+          });
+        }, 100);
+      })
+      .on("blur", "input", function() {
+        clearInterval(focused);
+      });
+    },
+    "init": function() {
+      if ($.fn.ripples && this.options.ripples) {
+        this.ripples();
+      }
+      if (this.options.input) {
+        this.input();
+      }
+      if (this.options.checkbox) {
+        this.checkbox();
+      }
+      if (this.options.togglebutton) {
+        this.togglebutton();
+      }
+      if (this.options.radio) {
+        this.radio();
+      }
+      if (this.options.autofill) {
+        this.autofill();
+      }
+
+      if (document.arrive && this.options.arrive) {
+        if ($.fn.ripples && this.options.ripples) {
+          $(document).arrive(this.options.withRipples, function() {
+            $.material.ripples($(this));
+          });
+        }
+        if (this.options.input) {
+          $(document).arrive(this.options.inputElements, function() {
+            $.material.input($(this));
+          });
+        }
+        if (this.options.checkbox) {
+          $(document).arrive(this.options.checkboxElements, function() {
+            $.material.checkbox($(this));
+          });
+        }
+        if (this.options.radio) {
+          $(document).arrive(this.options.radioElements, function() {
+            $.material.radio($(this));
+          });
+        }
+        if (this.options.togglebutton) {
+          $(document).arrive(this.options.togglebuttonElements, function() {
+            $.material.togglebutton($(this));
+          });
         }
+
+      }
     }
-}(jQuery);
+  };
+
+})(jQuery);

data/app/assets/javascripts/bootstrap-material-design/ripples.js

@@ -1,79 +1,324 @@
-window.ripples = {
-    done: !1,
-    init: function(a) {
-        "use strict";
-
-        function b(a, b) {
-            var c = a.matches || a.matchesSelector || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
-            return c.call(a, b)
+/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
+/* globals jQuery, navigator */
+
+(function($, window, document, undefined) {
+
+  "use strict";
+
+  /**
+   * Define the name of the plugin
+   */
+  var ripples = "ripples";
+
+
+  /**
+   * Get an instance of the plugin
+   */
+  var self = null;
+
+
+  /**
+   * Define the defaults of the plugin
+   */
+  var defaults = {};
+
+
+  /**
+   * Create the main plugin function
+   */
+  function Ripples(element, options) {
+    self = this;
+
+    this.element = $(element);
+
+    this.options = $.extend({}, defaults, options);
+
+    this._defaults = defaults;
+    this._name = ripples;
+
+    this.init();
+  }
+
+
+  /**
+   * Initialize the plugin
+   */
+  Ripples.prototype.init = function() {
+    var $element  = this.element;
+
+    $element.on("mousedown touchstart", function(event) {
+      /**
+       * Verify if the user is just touching on a device and return if so
+       */
+      if(self.isTouch() && event.type === "mousedown") {
+        return false;
+      }
+
+
+      /**
+       * Verify if the current element already has a ripple wrapper element and
+       * creates if it doesn't
+       */
+      if(!($element.find(".ripple-wrapper").length)) {
+        $element.append("<div class=\"ripple-wrapper\"></div>");
+      }
+
+
+      /**
+       * Find the ripple wrapper
+       */
+      var $wrapper = $element.children(".ripple-wrapper");
+
+
+      /**
+       * Get relY and relX positions
+       */
+      var relY = self.getRelY($wrapper, event);
+      var relX = self.getRelX($wrapper, event);
+
+
+      /**
+       * If relY and/or relX are false, return the event
+       */
+      if(!relY && !relX) {
+        return;
+      }
+
+
+      /**
+       * Get the ripple color
+       */
+      var rippleColor = self.getRipplesColor($element);
+
+
+      /**
+       * Create the ripple element
+       */
+      var $ripple = $("<div></div>");
+
+      $ripple
+      .addClass("ripple")
+      .css({
+        "left": relX,
+        "top": relY,
+        "background-color": rippleColor
+      });
+
+
+      /**
+       * Append the ripple to the wrapper
+       */
+      $wrapper.append($ripple);
+
+
+      /**
+       * Make sure the ripple has the styles applied (ugly hack but it works)
+       */
+      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
+
+
+      /**
+       * Turn on the ripple animation
+       */
+      self.rippleOn($element, $ripple);
+
+
+      /**
+       * Call the rippleEnd function when the transition "on" ends
+       */
+      setTimeout(function() {
+        self.rippleEnd($ripple);
+      }, 500);
+
+
+      /**
+       * Detect when the user leaves the element
+       */
+      $element.on("mouseup mouseleave touchend", function() {
+        $ripple.data("mousedown", "off");
+
+        if($ripple.data("animating") === "off") {
+          self.rippleOut($ripple);
         }
-        if (this.done) return console.log("Ripples.js was already initialzied.");
-        this.done = !0;
-        var c = 100,
-            d = 500,
-            e = function(a, c, d) {
-                "string" == typeof a && (a = [a]), a.forEach(function(a) {
-                    document.addEventListener(a, function(a) {
-                        var e = "number" != typeof a.detail ? a.detail : a.target;
-                        b(e, c) && d(a, e)
-                    })
-                })
-            },
-            f = function(a, b, c) {
-                var e, f = b,
-                    g = f.parentNode,
-                    h = document.createElement("div"),
-                    j = g.getBoundingClientRect(),
-                    k = {
-                        x: a.clientX - j.left,
-                        y: (window.ontouchstart ? a.clientY - window.scrollY : a.clientY) - j.top
-                    },
-                    l = "scale(" + Math.round(f.offsetWidth / 5) + ")",
-                    m = new CustomEvent("rippleEnd", {
-                        detail: h
-                    }),
-                    n = .3;
-                a.touches && (k = {
-                    x: a.touches[0].clientX - j.left,
-                    y: a.touches[0].clientY - j.top
-                }), i = h, h.className = "ripple", h.setAttribute("style", "left:" + k.x + "px; top:" + k.y + "px;");
-                var o = window.getComputedStyle(g).color;
-                if (o.indexOf("rgba") >= 0) {
-                    var p = o.lastIndexOf(",") + 1;
-                    o = o.substring(0, p) + n + ")"
-                } else o = o.replace("rgb", "rgba").replace(")", ", " + n + ")");
-                f.appendChild(h), e = window.getComputedStyle(h).opacity, h.dataset.animating = 1, h.className = "ripple ripple-on";
-                var q = [h.getAttribute("style"), "background-color: " + o, "-ms-transform: " + l, "-moz-transform: " + l, "-webkit-transform: " + l, "transform: " + l];
-                h.setAttribute("style", q.join(";")), setTimeout(function() {
-                    h.dataset.animating = 0, document.dispatchEvent(m), c && c()
-                }, d)
-            },
-            g = function(a) {
-                a.className = "ripple ripple-on ripple-out", setTimeout(function() {
-                    a.remove()
-                }, c)
-            },
-            h = !1;
-        e(["mousedown", "touchstart"], "*", function() {
-            h = !0
-        }), e(["mouseup", "touchend", "mouseout"], "*", function() {
-            h = !1
-        });
-        var i, j = function(a, b) {
-            if (0 === b.getElementsByClassName("ripple-wrapper").length) {
-                b.className += " withripple";
-                var c = document.createElement("div");
-                c.className = "ripple-wrapper", b.appendChild(c)
-            }
-        };
-        e(["mouseover"], a, j), e(["touchstart"], a, j), e(["mousedown", "touchstart"], ".ripple-wrapper", function(a, b) {
-            (0 === a.which || 1 === a.which || 2 === a.which) && f(a, b)
-        }), e("rippleEnd", ".ripple-wrapper .ripple", function(a, b) {
-            var c = b.parentNode.getElementsByClassName("ripple");
-            (!h || c[0] == b && c.length > 1) && g(b)
-        }), e(["mouseup", "touchend", "mouseout"], ".ripple-wrapper", function() {
-            var a = i;
-            a && 1 != a.dataset.animating && g(a)
-        })
+      });
+
+    });
+  };
+
+
+  /**
+   * Get the new size based on the element height/width and the ripple width
+   */
+  Ripples.prototype.getNewSize = function($element, $ripple) {
+
+    return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
+  };
+
+
+  /**
+   * Get the relX
+   */
+  Ripples.prototype.getRelX = function($wrapper,  event) {
+    var wrapperOffset = $wrapper.offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageX - wrapperOffset.left;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length !== 1) {
+        return event.touches[0].pageX - wrapperOffset.left;
+      }
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the relY
+   */
+  Ripples.prototype.getRelY = function($wrapper, event) {
+    var wrapperOffset = $wrapper.offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageY - wrapperOffset.top;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length !== 1) {
+        return event.touches[0].pageY - wrapperOffset.top;
+      }
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the ripple color
+   */
+  Ripples.prototype.getRipplesColor = function($element) {
+
+    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+
+    return color;
+  };
+
+
+  /**
+   * Verify if the client browser has transistion support
+   */
+  Ripples.prototype.hasTransitionSupport = function() {
+    var thisBody  = document.body || document.documentElement;
+    var thisStyle = thisBody.style;
+
+    var support = (
+      thisStyle.transition !== undefined ||
+      thisStyle.WebkitTransition !== undefined ||
+      thisStyle.MozTransition !== undefined ||
+      thisStyle.MsTransition !== undefined ||
+      thisStyle.OTransition !== undefined
+    );
+
+    return support;
+  };
+
+
+  /**
+   * Verify if the client is using a mobile device
+   */
+  Ripples.prototype.isTouch = function() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  };
+
+
+  /**
+   * End the animation of the ripple
+   */
+  Ripples.prototype.rippleEnd = function($ripple) {
+    $ripple.data("animating", "off");
+
+    if($ripple.data("mousedown") === "off") {
+      self.rippleOut($ripple);
+    }
+  };
+
+
+  /**
+   * Turn off the ripple effect
+   */
+  Ripples.prototype.rippleOut = function($ripple) {
+    $ripple.off();
+
+    if(self.hasTransitionSupport()) {
+      $ripple.addClass("ripple-out");
+    } else {
+      $ripple.animate({"opacity": 0}, 100, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+
+    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+      $ripple.remove();
+    });
+  };
+
+
+  /**
+   * Turn on the ripple effect
+   */
+  Ripples.prototype.rippleOn = function($element, $ripple) {
+    var size = self.getNewSize($element, $ripple);
+
+    if(self.hasTransitionSupport()) {
+      $ripple
+      .css({
+        "-ms-transform": "scale(" + size + ")",
+        "-moz-transform": "scale(" + size + ")",
+        "-webkit-transform": "scale(" + size + ")",
+        "transform": "scale(" + size + ")"
+      })
+      .addClass("ripple-on")
+      .data("animating", "on")
+      .data("mousedown", "on");
+    } else {
+      $ripple.animate({
+        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "opacity": 0.2
+      }, 500, function() {
+        $ripple.trigger("transitionend");
+      });
     }
-};
+  };
+
+
+  /**
+   * Create the jquery plugin function
+   */
+  $.fn.ripples = function(options) {
+    return this.each(function() {
+      if(!$.data(this, "plugin_" + ripples)) {
+        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+      }
+    });
+  };
+
+})(jQuery, window, document);