rails-bootstrap-material-design 0.5.10

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 39fe8854485ed92b3141763acafcefd3316f7f50
+  data.tar.gz: 3e86639bf27c03bcc79719aac300cfdc8bbe271c
+SHA512:
+  metadata.gz: e7d18f4c71837c68b30fb9c5800b2970f7a632fbfe1bec64c1898b47daaa63d58a48e89ca20ce1662bde0bbcfac0d3961f0725bb22b7b6713c8a7e97fb11bf48
+  data.tar.gz: 7a943308fa14ac1f76994caa2c28ca17733013379a6775354e6e5dfcbf08bf5efe8f2879e7681e097f6888ae8382db6fa32a13666f5312c6c55125bf46c89ffd

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+source 'https://rails-assets.org'
+
+gemspec

data/README.md

@@ -0,0 +1,18 @@
+# rails-bootstrap-material-design
+
+## Usage
+
+Add rails-assets source block to your `Gemfile`:
+
+```ruby
+source "https://rails-assets.org" do
+  gem "rails-assets-bootstrap-material-design"
+end
+
+```
+
+Then, import the asset using Sprockets’ `require` directive:
+
+```js
+//= require "bootstrap-material-design"
+```

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

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

@@ -0,0 +1,2 @@
+//= require bootstrap-material-design/material.js
+//= require bootstrap-material-design/ripples.js

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

@@ -0,0 +1,350 @@
+/* globals jQuery */
+
+(function($) {
+  // Selector to select only not already processed elements
+  $.expr[":"].notmdproc = function(obj) {
+    if ($(obj).data("mdproc")) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+
+  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 // backspace
+        && evt.which != 9 // tab
+        && evt.which != 13 // enter
+        && evt.which != 16 // shift
+        && evt.which != 17 // ctrl
+        && evt.which != 20 // caps lock
+        && evt.which != 27 // escape
+      );
+    }
+    return false;
+  }
+
+  function _addFormGroupFocus(element) {
+    var $element = $(element);
+    if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
+      $element.closest(".form-group").addClass("is-focused");
+    }
+  }
+
+  function _toggleDisabledState($element, state) {
+    var $target;
+    if ($element.hasClass('checkbox-inline') || $element.hasClass('radio-inline')) {
+      $target = $element;
+    } else {
+      $target = $element.closest('.checkbox').length ? $element.closest('.checkbox') : $element.closest('.radio');
+    }
+    return $target.toggleClass('disabled', state);
+  }
+
+  function _toggleTypeFocus($input) {
+    var disabledToggleType = false;
+    if ($input.is($.material.options.checkboxElements) || $input.is($.material.options.radioElements)) {
+      disabledToggleType = true;
+    }
+    $input.closest('label').hover(function() {
+        var $i = $(this).find('input');
+        var isDisabled = $i.prop('disabled'); // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
+        if (disabledToggleType) {
+          _toggleDisabledState($(this), isDisabled);
+        }
+        if (!isDisabled) {
+          _addFormGroupFocus($i); // need to find the input so we can check disablement
+        }
+      },
+      function() {
+        _removeFormGroupFocus($(this).find('input'));
+      });
+  }
+
+  function _removeFormGroupFocus(element) {
+    $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
+  }
+
+  $.material = {
+    "options": {
+      // These options set what will be started by $.material.init()
+      "validate": true,
+      "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",
+        ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
+      ].join(","),
+      "inputElements": "input.form-control, textarea.form-control, select.form-control",
+      "checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]",
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
+      "radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]"
+    },
+    "checkbox": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      var $input = $((selector) ? selector : this.options.checkboxElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .after("<span class='checkbox-material'><span class='check'></span></span>");
+
+      _toggleTypeFocus($input);
+    },
+    "togglebutton": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      var $input = $((selector) ? selector : this.options.togglebuttonElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .after("<span class='toggle'></span>");
+
+      _toggleTypeFocus($input);
+    },
+    "radio": function(selector) {
+      // Add fake-radio to material radios
+      var $input = $((selector) ? selector : this.options.radioElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .after("<span class='circle'></span><span class='check'></span>");
+
+      _toggleTypeFocus($input);
+    },
+    "input": function(selector) {
+      $((selector) ? selector : this.options.inputElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .each(function() {
+          var $input = $(this);
+
+          // Requires form-group standard markup (will add it if necessary)
+          var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+          if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) {
+            $input.wrap("<div class='form-group'></div>");
+            $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
+          }
+
+          // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
+          if ($input.attr("data-hint")) {
+            $input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
+            $input.removeAttr("data-hint");
+          }
+
+          // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
+          var legacySizes = {
+            "input-lg": "form-group-lg",
+            "input-sm": "form-group-sm"
+          };
+          $.each(legacySizes, function(legacySize, standardSize) {
+            if ($input.hasClass(legacySize)) {
+              $input.removeClass(legacySize);
+              $formGroup.addClass(standardSize);
+            }
+          });
+
+          // Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
+          if ($input.hasClass("floating-label")) {
+            var placeholder = $input.attr("placeholder");
+            $input.attr("placeholder", null).removeClass("floating-label");
+            var id = $input.attr("id");
+            var forAttribute = "";
+            if (id) {
+              forAttribute = "for='" + id + "'";
+            }
+            $formGroup.addClass("label-floating");
+            $input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
+          }
+
+          // Set as empty if is empty (damn I must improve this...)
+          if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
+            $formGroup.addClass("is-empty");
+          }
+
+          // Support for file input
+          if ($formGroup.find("input[type=file]").length > 0) {
+            $formGroup.addClass("is-fileinput");
+          }
+        });
+    },
+    "attachInputEventHandlers": function() {
+      var validate = this.options.validate;
+
+      $(document)
+        .on("keydown paste", ".form-control", function(e) {
+          if (_isChar(e)) {
+            $(this).closest(".form-group").removeClass("is-empty");
+          }
+        })
+        .on("keyup change", ".form-control", function() {
+          var $input = $(this);
+          var $formGroup = $input.closest(".form-group");
+          var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
+
+          if ($input.val() === "") {
+            $formGroup.addClass("is-empty");
+          } else {
+            $formGroup.removeClass("is-empty");
+          }
+
+          // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
+          //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
+          //  the form-group on change.
+          //
+          // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
+          //        BUT, I've left it here for backwards compatibility.
+          if (validate) {
+            if (isValid) {
+              $formGroup.removeClass("has-error");
+            } else {
+              $formGroup.addClass("has-error");
+            }
+          }
+        })
+        .on("focus", ".form-control, .form-group.is-fileinput", function() {
+          _addFormGroupFocus(this);
+        })
+        .on("blur", ".form-control, .form-group.is-fileinput", function() {
+          _removeFormGroupFocus(this);
+        })
+        // make sure empty is added back when there is a programmatic value change.
+        //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
+        .on("change", ".form-group input", function() {
+          var $input = $(this);
+          if ($input.attr("type") == "file") {
+            return;
+          }
+
+          var $formGroup = $input.closest(".form-group");
+          var value = $input.val();
+          if (value) {
+            $formGroup.removeClass("is-empty");
+          } else {
+            $formGroup.addClass("is-empty");
+          }
+        })
+        // set the fileinput readonly field with the name of the file
+        .on("change", ".form-group.is-fileinput input[type='file']", function() {
+          var $input = $(this);
+          var $formGroup = $input.closest(".form-group");
+          var value = "";
+          $.each(this.files, function(i, file) {
+            value += file.name + ", ";
+          });
+          value = value.substring(0, value.length - 2);
+          if (value) {
+            $formGroup.removeClass("is-empty");
+          } else {
+            $formGroup.addClass("is-empty");
+          }
+          $formGroup.find("input.form-control[readonly]").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() {
+          var $this = $(this);
+          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);
+    },
+    "attachAutofillEventHandlers": function() {
+      // 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() {
+              var $this = $(this);
+              if ($this.val() !== $this.attr("value")) {
+                $this.trigger("change");
+              }
+            });
+          }, 100);
+        })
+        .on("blur", ".form-group input", function() {
+          clearInterval(focused);
+        });
+    },
+    "init": function(options) {
+      this.options = $.extend({}, this.options, options);
+      var $document = $(document);
+
+      if ($.fn.ripples && this.options.ripples) {
+        this.ripples();
+      }
+      if (this.options.input) {
+        this.input();
+        this.attachInputEventHandlers();
+      }
+      if (this.options.checkbox) {
+        this.checkbox();
+      }
+      if (this.options.togglebutton) {
+        this.togglebutton();
+      }
+      if (this.options.radio) {
+        this.radio();
+      }
+      if (this.options.autofill) {
+        this.autofill();
+        this.attachAutofillEventHandlers();
+      }
+
+      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);

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

@@ -0,0 +1,325 @@
+/* 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;
+      }
+
+
+      /**
+       * Verify if the current element already has a ripple wrapper element and
+       * creates if it doesn't
+       */
+      if (!($element.find(".ripple-container").length)) {
+        $element.append("<div class=\"ripple-container\"></div>");
+      }
+
+
+      /**
+       * Find the ripple wrapper
+       */
+      var $wrapper = $element.children(".ripple-container");
+
+
+      /**
+       * 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);
+        }
+      });
+
+    });
+  };
+
+
+  /**
+   * 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);