dlegr250_material_design 0.1.59 → 0.1.61

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8bf6da79da1bf273f083fdb0c44be82c99cf040d
-  data.tar.gz: 3ca862e3c95f40121e0542a827ef2e39972e4ec0
+  metadata.gz: aff99f073ff52ad07423f91f0e80ddf980bca4c1
+  data.tar.gz: c9b69348aa8e8ff4f72e53c6ea4d37d12a6f1f62
 SHA512:
-  metadata.gz: d40d80e66d98f8923e1a4aba2bf1e8e20b1a06e006526482dd3de71b001843f95a4040e0a630fc4c33773ae7e2c01f300e1e468f1d6d9b257acbf54d8ea47431
-  data.tar.gz: 5723cc10dd16233816d64d92a3546f11c39a0b8080344b2438b0de55456d87c0fa43deff6a6c799df0a2b89a89239e5663b77c4fbc9f7f7134321f696554cda7
+  metadata.gz: f0dd54dac34f4b3ff3e20785e0e79504c85da5f53dcc76e5fb8fcd30c8b16b22a0e0dd4b0bd2be3b02d84656f2cec1066bf497e50725e62ffe875dbbe5a88911
+  data.tar.gz: c393fab81a5391254dcd74da843bf22026ff5bf012cf4126bdf500da3456ea8e1c9000671f566f43479dfb2cda9f6aea24916ea3a63f105d40cdeb1ad66698f5

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.1.59"
+  VERSION = "0.1.61"
 end

data/vendor/assets/javascripts/base/init.js.coffee

@@ -11,5 +11,6 @@ $(document).on "ready page:load", ->
   App.MD.Dialog.init()
   App.MD.Tabs.init()
   App.MD.Forms.init()
-  # App.MD.InputMasks.init()
+  App.MD.InputMasks.init()
+  App.MD.Toggles.init()
   App.MD.SnackbarHandler.init()

data/vendor/assets/javascripts/components/forms.coffee

@@ -9,6 +9,12 @@ class App.MD.Forms
   @setVariables: () ->
 
   @setEvents: () ->
+    # Autosubmit a parent form when a field changes
+    # (applied to individual fields)
+    $("body").on "change", ":input[data-auto-submit-on-change='true']", =>
+      $(this).parents("form").submit()
+
+    # Focus cursor
     $(".auto-focus").focus()
 
     # Mark changed inputs as dirty
@@ -27,4 +33,5 @@ class App.MD.Forms
         $field.removeClass("has-errors")
         $field.find(".error-messages").hide() #css("visibility", "hidden")
 
+    # Add class to style invalid inputs
     $("select.invalid, input.invalid").closest(".field-with-validations").addClass("has-errors")

data/vendor/assets/javascripts/components/input_masks.coffee

@@ -9,3 +9,50 @@ class App.MD.InputMasks
   @setVariables: () ->
 
   @setEvents: () ->
+    # Input masks
+    Inputmask.extendDefaults({
+      showMaskOnHover: false
+    })
+
+    $(":input").inputmask()
+
+    # Format: "[1-99]"
+    $(":input[data-mask='years']").inputmask("9[9]", {
+      placeholder: "",
+      greedy: false
+    })
+
+    # Format: "[1-11]"
+    # Do not let user put in 12 months because that is 1 year
+    $(":input[data-mask='months']").inputmask("Regex", {
+      regex: "[1-9]|1[0-1]"
+    })
+
+    # Format: "[1-168]" (24 hrs * 7 days = 168 max hours)
+    $(":input[data-mask='hours']").inputmask("Regex", {
+      regex: "[0-9][0-9]|1[0-5][0-9]|16[0-8]"
+    })
+
+    # Format: "123 - 45 - 6789"
+    $(":input[data-mask='ssn']").inputmask("999 - 99 - 9999")
+
+    # Format: "(123) 456 - 7890"
+    $(":input[data-mask='phone']").inputmask("(999) 999 - 9999")
+
+    # Format: "12/1975"
+    $(":input[data-mask='date-my']").inputmask("mm/yyyy", { placeholder: "__/____" })
+
+    # Format: "01/25/1947"
+    $(":input[data-mask='date-mdy']").inputmask("mm/dd/yyyy", { placeholder: "__/__/____" })
+
+    # Format: "$ 123,456"
+    $(":input[data-mask='currency']").inputmask("currency", {
+      rightAlign: false,
+      greedy: true,
+      placeholder: "",
+      digits: 0,
+      allowPlus: false,
+      allowMinus: false,
+      prefix: "$ ",
+      min: 0
+    })

data/vendor/assets/javascripts/components/toggles.coffee

@@ -0,0 +1,19 @@
+#======================================================================
+# Add triggers to show/hide elements based on a provided DOM ID.
+#======================================================================
+class App.MD.Toggles
+  @init: () ->
+    @setVariables()
+    @setEvents()
+
+  @setVariables: () ->
+
+  @setEvents: () ->
+    # Toggle to show/hide elements
+    $("body").on "click select", "[data-show-element]", (event) =>
+      domId = $(event.target).data("show-element")
+      $("#{domId}").removeClass("hidden")
+
+    $("body").on "click select", "[data-hide-element]", (event) =>
+      domId = $(event.target).data("hide-element")
+      $("#{domId}").addClass("hidden")

data/vendor/assets/javascripts/dlegr250_material_design.js

@@ -15,5 +15,7 @@
 //= require components/dialog
 //= require components/tabs
 //= require components/forms
+//= require components/input_masks
+//= require components/toggles
 //= require components/snackbar_handler
 //= require components/utility

data/vendor/assets/stylesheets/components/forms/selects.scss

@@ -3,7 +3,7 @@
 
 select {
   border: 1px solid rgba(0, 0, 0, .12);
-  height: $input-height - 4;
+  height: $input-height;
   min-height: $button-height;
   outline: none;
   @include rounded-corners;

data/vendor/assets/stylesheets/components/lists.scss

@@ -1,6 +1,6 @@
 //======================================================================
 // EXAMPLE:
-// <div class="list list-bordered list-hoverable rounded-corners constrained constrained-large">
+// <div class="list list-bordered list-divided list-hoverable rounded-corners">
 //   <div class="list-item" id="list-item-ID">
 //     <div class="list-item-icon">
 //       <i class="zmdi zmdi-star"></i>
@@ -75,22 +75,22 @@ ol {
 
 .list {
   background-color: color("white");
+}
 
-  &.bordered {
-    border: 1px solid color("divider");
-  }
+.list-bordered {
+  border: 1px solid color("divider");
+}
 
-  &.divided {
-    .list-header,
-    .list-item {
-      border-bottom: 1px solid color("divider");
-    }
+.list-divided {
+  .list-header,
+  .list-item {
+    border-bottom: 1px solid color("divider");
   }
+}
 
-  // Don't have double lines on last item for bordered and divided
-  &.bordered .list-item:last-child {
-    border-bottom: none;
-  }
+// Don't have double lines on last item for bordered and divided
+.list-bordered .list-item:last-child {
+  border-bottom: none;
 }
 
 // Lists - list item
@@ -162,59 +162,33 @@ ol {
   text-align: right;
 }
 
-// Lists - list item action
-// For list items that are links/actions
-//----------------------------------------------------------------------
-
-.list-item-action {
-  color: color("primary");
-  font-weight: bold;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-
-  .list-item-icon {
-    color: color("primary");
-  }
-
-  &:hover {
-    background-color: color("hover");
-  }
-
-  &:active {
-    background-color: darken(color("hover"), 10%);
-  }
-}
-
 // Lists - sizes
 //----------------------------------------------------------------------
 
-.list {
-  &.dense {
-    .list-header {
-      min-height: 40px;
-
-      .list-header-title,
-      .list-header-secondary {
-        padding-bottom: $spacing-small;
-        padding-top: $spacing-small;
-      }
+.list-dense {
+  .list-header {
+    min-height: 40px;
+
+    .list-header-title,
+    .list-header-secondary {
+      padding-bottom: $spacing-small;
+      padding-top: $spacing-small;
     }
+  }
 
-    .list-item {
-      .list-item-icon,
-      .list-item-primary,
-      .list-item-secondary {
-        padding-bottom: $spacing-small;
-        padding-top: $spacing-small;
-      }
+  .list-item {
+    .list-item-icon,
+    .list-item-primary,
+    .list-item-secondary {
+      padding-bottom: $spacing-small;
+      padding-top: $spacing-small;
     }
   }
 }
-
 // Lists - hoverable
 //----------------------------------------------------------------------
 
-.list.hoverable .list-item {
+.list-hoverable .list-item {
   &:hover,
   :active {
     background-color: color("hover");

data/vendor/assets/stylesheets/components/tabs.scss

@@ -77,7 +77,8 @@
 
 .tabs.disabled .tab,
 .tab:disabled,
-.tab.disabled {
+.tab.disabled,
+.tab.disabled .tab-icon {
   color: color("disabled");
   cursor: default;
   pointer-events: none;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.1.59
+  version: 0.1.61
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-05-05 00:00:00.000000000 Z
+date: 2016-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -84,6 +84,7 @@ files:
 - vendor/assets/javascripts/components/menus.coffee
 - vendor/assets/javascripts/components/snackbar_handler.coffee
 - vendor/assets/javascripts/components/tabs.coffee
+- vendor/assets/javascripts/components/toggles.coffee
 - vendor/assets/javascripts/components/utility.coffee
 - vendor/assets/javascripts/dlegr250_material_design.js
 - vendor/assets/javascripts/extensions/coffeescript.js.coffee