mtl 1.1.0 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 08081cb22a5be14a4c4414c87e810b81ef1e6583
-  data.tar.gz: 20c8e64b6ef82f5e99497509e52d1c9b6ad2102d
+  metadata.gz: 58be2225ba79d3bbbb74d40af9f194ef4f841e73
+  data.tar.gz: 0ef8ff2feb48bd40ab7af804238575f52f3e8a5a
 SHA512:
-  metadata.gz: 2e1758ed56f6ed803ee82fed48b5a4c456dab5c643289e3abc3fbb4098f32109983c663b40d70d6d17390b97a0a54fec6f7ce7d4ab3aea1276337769f35c642e
-  data.tar.gz: 922222e382812a4274e2040619c4c91676537b1e1b5bb9d2793767187f8964d5d2879bd9246c5747b35e2844039408ea9cb33b1c52b551597c53430d9b3616a1
+  metadata.gz: 2a3d69bb43e9b7abef1f5f6adcb7dd9f42fb1d1ae8ce560f2a5e19421b542b9d2f8ffd7e069549a7fa939544250f5e9a35f7c0ded7950505018bb1327bb917ef
+  data.tar.gz: 89c4eba164571e5aa964f5f8e8a727b5110c51e1eea6b889f72b284a8c7d4a00f5dafd2cdcdb7a9bcd5951fe20c736c54cc84d889e95db0bd9bb6a0b98922468

data/app/assets/javascripts/mtl/dropdown.coffee

@@ -14,7 +14,7 @@ activator = ($el) ->
 init = ->
   $('[data-mtl-dropdown]').each ->
     $el = $(this)
-    updateAttrs($el).dropdown(constrain_width: false)
+    updateAttrs($el).dropdown(constrainWidth: false)
     $el.siblings('input.select-dropdown').on 'mousedown', (e) ->
       e.preventDefault() if e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight
 

data/app/assets/stylesheets/mtl/extend/_chips.scss

@@ -1,3 +1,23 @@
 .chip {
+  border-radius: $chip-border-radius;
+  height: $chip-height;
+  line-height: $chip-line-height;
+  font-size: $chip-font-size;
+  font-weight: $chip-font-weight;
   white-space: nowrap;
+  padding-right: $chip-height / 2;
+
+  > img {
+    border-radius: $chip-border-radius;
+    height: $chip-height;
+    margin-right: $chip-height / 4;
+    width: $chip-height;
+  }
+
+  .close {
+    font-size: $chip-font-size + 3px;
+    height: $chip-height;
+    line-height: $chip-line-height;
+    padding-left: ($chip-font-size + 3px) / 2;
+  }
 }

data/app/assets/stylesheets/mtl/extend/_side-nav.scss

@@ -2,11 +2,13 @@
 .side-nav {
 
   // scss-lint:disable QualifyingElement
-  li.active > a,
-  li.active > a i.material-icons {
+  li.active > a {
   // scss-lint:enable QualifyingElement
     background-color: $mtl-sidenav-bg-active-color;
     color: $mtl-sidenav-font-active-color;
+    .material-icons {
+      color: $mtl-sidenav-font-active-color;
+    }
   }
 
   ul {

data/lib/generators/mtl/templates/_variables.scss

@@ -108,6 +108,11 @@ $chip-bg-color: #e4e4e4 !default;
 $chip-border-color: #9e9e9e !default;
 $chip-selected-color: #26a69a !default;
 $chip-margin: 5px !default;
+$chip-height: 32px !default;
+$chip-line-height: 32px !default;
+$chip-font-size: 13px !default;
+$chip-font-weight: 500 !default;
+$chip-border-radius: 16px !default;
 
 
 // 7. Date Picker ===========================================================

data/lib/mtl/version.rb

@@ -1,6 +1,6 @@
 module Mtl
-  VERSION = '1.1.0'.freeze
-  MATERIALIZE_VERSION = '0.97.8'.freeze
+  VERSION = '1.1.1'.freeze
+  MATERIALIZE_VERSION = '0.98.0'.freeze
   ICONS_VERSION = '2.2.3'.freeze
   LODASH_VERSION = '4.14.1'.freeze
   PDFOBJECT_VERSION = '2.0.201604172'.freeze

data/mtl.gemspec

@@ -32,4 +32,15 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'rspec', '> 3.0'
   spec.add_development_dependency 'actionview'
   spec.add_development_dependency 'simple_form', '>= 3.3'
+
+  spec.post_install_message = %q{
+    Some component have been extend with configuration variables, don't forget to re-generate the scss configuration or
+    add the following values to your existing one:
+
+      $chip-height: 32px !default;
+      $chip-line-height: 32px !default;
+      $chip-font-size: 13px !default;
+      $chip-font-weight: 500 !default;
+      $chip-border-radius: 16px !default;
+  }
 end

data/package.json

@@ -6,6 +6,6 @@
     "pdfobject": "2.0",
     "lodash": "4.14.1",
     "material-design-icons": "2.2.3",
-    "materialize-css": "https://github.com/Dogfalo/materialize.git#fda1e45"
+    "materialize-css": "https://github.com/Dogfalo/materialize.git#v0.98.0"
   }
 }

data/vendor/assets/javascripts/materialize/animation.js

@@ -1,9 +1,8 @@
-    // Custom Easing
-    jQuery.extend( jQuery.easing,
-    {
-      easeInOutMaterial: function (x, t, b, c, d) {
-        if ((t/=d/2) < 1) return c/2*t*t + b;
-        return c/4*((t-=2)*t*t + 2) + b;
-      }
-    });
-
+// Custom Easing
+jQuery.extend( jQuery.easing,
+{
+  easeInOutMaterial: function (x, t, b, c, d) {
+    if ((t/=d/2) < 1) return c/2*t*t + b;
+    return c/4*((t-=2)*t*t + 2) + b;
+  }
+});

data/vendor/assets/javascripts/materialize/carousel.js

@@ -4,19 +4,20 @@
 
     init : function(options) {
       var defaults = {
-        time_constant: 200, // ms
+        duration: 200, // ms
         dist: -100, // zoom scale TODO: make this more intuitive as an option
         shift: 0, // spacing for center image
         padding: 0, // Padding between non center items
-        full_width: false, // Change to full width styles
+        fullWidth: false, // Change to full width styles
         indicators: false, // Toggle indicators
-        no_wrap: false // Don't wrap around and cycle through items.
+        noWrap: false, // Don't wrap around and cycle through items.
+        onCycleTo: null // Callback for when a new slide is cycled to.
       };
       options = $.extend(defaults, options);
 
       return this.each(function() {
 
-        var images, offset, center, pressed, dim, count,
+        var images, item_width, item_height, offset, center, pressed, dim, count,
             reference, referenceY, amplitude, target, velocity,
             xform, frame, timestamp, ticker, dragged, vertical_dragged;
         var $indicators = $('<ul class="indicators"></ul>');
@@ -35,7 +36,7 @@
 
 
         // Options
-        if (options.full_width) {
+        if (options.fullWidth) {
           options.dist = 0;
           var firstImage = view.find('.carousel-item img').first();
           if (firstImage.length) {
@@ -59,6 +60,7 @@
         offset = target = 0;
         images = [];
         item_width = view.find('.carousel-item').first().innerWidth();
+        item_height = view.find('.carousel-item').first().innerHeight();
         dim = item_width * 2 + options.padding;
 
         view.find('.carousel-item').each(function (i) {
@@ -72,7 +74,9 @@
             }
 
             // Handle clicks on indicators.
-            $indicator.click(function () {
+            $indicator.click(function (e) {
+              e.stopPropagation();
+
               var index = $(this).index();
               cycleTo(index);
             });
@@ -125,6 +129,7 @@
 
         function scroll(x) {
           var i, half, delta, dir, tween, el, alignment, xTranslation;
+          var lastCenter = center;
 
           offset = (typeof x === 'number') ? x : offset;
           center = Math.floor((offset + dim / 2) / dim);
@@ -133,9 +138,9 @@
           tween = -dir * delta * 2 / dim;
           half = count >> 1;
 
-          if (!options.full_width) {
+          if (!options.fullWidth) {
             alignment = 'translateX(' + (view[0].clientWidth - item_width) / 2 + 'px) ';
-            alignment += 'translateY(' + (view[0].clientHeight - item_width) / 2 + 'px)';
+            alignment += 'translateY(' + (view[0].clientHeight - item_height) / 2 + 'px)';
           } else {
             alignment = 'translateX(0)';
           }
@@ -152,14 +157,20 @@
 
           // center
           // Don't show wrapped items.
-          if (!options.no_wrap || (center >= 0 && center < count)) {
+          if (!options.noWrap || (center >= 0 && center < count)) {
             el = images[wrap(center)];
+
+            // Add active class to center item.
+            if (!$(el).hasClass('active')) {
+              view.find('.carousel-item').removeClass('active');
+              $(el).addClass('active');
+            }
             el.style[xform] = alignment +
               ' translateX(' + (-delta / 2) + 'px)' +
               ' translateX(' + (dir * options.shift * tween * i) + 'px)' +
               ' translateZ(' + (options.dist * tween) + 'px)';
             el.style.zIndex = 0;
-            if (options.full_width) { tweenedOpacity = 1; }
+            if (options.fullWidth) { tweenedOpacity = 1; }
             else { tweenedOpacity = 1 - 0.2 * tween; }
             el.style.opacity = tweenedOpacity;
             el.style.display = 'block';
@@ -167,7 +178,7 @@
 
           for (i = 1; i <= half; ++i) {
             // right side
-            if (options.full_width) {
+            if (options.fullWidth) {
               zTranslation = options.dist;
               tweenedOpacity = (i === half && delta < 0) ? 1 - tween : 1;
             } else {
@@ -175,7 +186,7 @@
               tweenedOpacity = 1 - 0.2 * (i * 2 + tween * dir);
             }
             // Don't show wrapped items.
-            if (!options.no_wrap || center + i < count) {
+            if (!options.noWrap || center + i < count) {
               el = images[wrap(center + i)];
               el.style[xform] = alignment +
                 ' translateX(' + (options.shift + (dim * i - delta) / 2) + 'px)' +
@@ -187,7 +198,7 @@
 
 
             // left side
-            if (options.full_width) {
+            if (options.fullWidth) {
               zTranslation = options.dist;
               tweenedOpacity = (i === half && delta > 0) ? 1 - tween : 1;
             } else {
@@ -195,7 +206,7 @@
               tweenedOpacity = 1 - 0.2 * (i * 2 - tween * dir);
             }
             // Don't show wrapped items.
-            if (!options.no_wrap || center - i >= 0) {
+            if (!options.noWrap || center - i >= 0) {
               el = images[wrap(center - i)];
               el.style[xform] = alignment +
                 ' translateX(' + (-options.shift + (-dim * i - delta) / 2) + 'px)' +
@@ -208,18 +219,25 @@
 
           // center
           // Don't show wrapped items.
-          if (!options.no_wrap || (center >= 0 && center < count)) {
+          if (!options.noWrap || (center >= 0 && center < count)) {
             el = images[wrap(center)];
             el.style[xform] = alignment +
               ' translateX(' + (-delta / 2) + 'px)' +
               ' translateX(' + (dir * options.shift * tween) + 'px)' +
               ' translateZ(' + (options.dist * tween) + 'px)';
             el.style.zIndex = 0;
-            if (options.full_width) { tweenedOpacity = 1; }
+            if (options.fullWidth) { tweenedOpacity = 1; }
             else { tweenedOpacity = 1 - 0.2 * tween; }
             el.style.opacity = tweenedOpacity;
             el.style.display = 'block';
           }
+
+          // onCycleTo callback
+          if (lastCenter !== center &&
+              typeof(options.onCycleTo) === "function") {
+            var $curr_item = view.find('.carousel-item').eq(wrap(center));
+            options.onCycleTo.call(this, $curr_item, dragged);
+          }
         }
 
         function track() {
@@ -240,7 +258,7 @@
 
           if (amplitude) {
             elapsed = Date.now() - timestamp;
-            delta = amplitude * Math.exp(-elapsed / options.time_constant);
+            delta = amplitude * Math.exp(-elapsed / options.duration);
             if (delta > 2 || delta < -2) {
                 scroll(target - delta);
                 requestAnimationFrame(autoScroll);
@@ -257,7 +275,7 @@
             e.stopPropagation();
             return false;
 
-          } else if (!options.full_width) {
+          } else if (!options.fullWidth) {
             var clickedIndex = $(e.target).closest('.carousel-item').index();
             var diff = (center % count) - clickedIndex;
 
@@ -274,7 +292,7 @@
           var diff = (center % count) - n;
 
           // Account for wraparound.
-          if (!options.no_wrap) {
+          if (!options.noWrap) {
             if (diff < 0) {
               if (Math.abs(diff + count) < Math.abs(diff)) { diff += count; }
 
@@ -358,7 +376,7 @@
           target = Math.round(target / dim) * dim;
 
           // No wrap of items.
-          if (options.no_wrap) {
+          if (options.noWrap) {
             if (target >= dim * (count - 1)) {
               target = dim * (count - 1);
             } else if (target < 0) {
@@ -387,8 +405,17 @@
         });
 
 
-
-        window.onresize = scroll;
+        $(window).on('resize.carousel', function() {
+          if (options.fullWidth) {
+            item_width = view.find('.carousel-item').first().innerWidth();
+            item_height = view.find('.carousel-item').first().innerHeight();
+            dim = item_width * 2 + options.padding;
+            offset = center * 2 * item_width;
+            target = offset;
+          } else {
+            scroll();
+          }
+        });
 
         setupEvents();
         scroll(offset);
@@ -397,7 +424,7 @@
           if (n === undefined) {
             n = 1;
           }
-          target = offset + dim * n;
+          target = (dim * Math.round(offset / dim)) + (dim * n);
           if (offset !== target) {
             amplitude = target - offset;
             timestamp = Date.now();
@@ -409,7 +436,7 @@
           if (n === undefined) {
             n = 1;
           }
-          target = offset - dim * n;
+          target = (dim * Math.round(offset / dim)) - (dim * n);
           if (offset !== target) {
             amplitude = target - offset;
             timestamp = Date.now();

data/vendor/assets/javascripts/materialize/character_counter.js

@@ -10,7 +10,7 @@
         return;
       }
 
-      var itHasLengthAttribute = $input.attr('length') !== undefined;
+      var itHasLengthAttribute = $input.attr('data-length') !== undefined;
 
       if(itHasLengthAttribute){
         $input.on('input', updateCounter);
@@ -24,7 +24,7 @@
   };
 
   function updateCounter(){
-    var maxLength     = +$(this).attr('length'),
+    var maxLength     = +$(this).attr('data-length'),
     actualLength      = +$(this).val().length,
     isValidLength     = actualLength <= maxLength;
 

data/vendor/assets/javascripts/materialize/chips.js

@@ -1,9 +1,10 @@
 (function ($) {
-  var chipsHandleEvents = false;
   var materialChipsDefaults = {
     data: [],
     placeholder: '',
     secondaryPlaceholder: '',
+    autocompleteData: {},
+    autocompleteLimit: Infinity,
   };
 
   $(document).ready(function() {
@@ -34,7 +35,7 @@
     }
 
     var curr_options = $.extend({}, materialChipsDefaults, options);
-
+    self.hasAutocomplete = !$.isEmptyObject(curr_options.autocompleteData);
 
     // Initialize
     this.init = function() {
@@ -43,6 +44,7 @@
       self.$el.each(function(){
         var $chips = $(this);
         var chipId = Materialize.guid();
+        self.chipId = chipId;
 
         if (!curr_options.data || !(curr_options.data instanceof Array)) {
           curr_options.data = [];
@@ -60,7 +62,7 @@
       });
     };
 
-    this.handleEvents = function(){
+    this.handleEvents = function() {
       var SELS = self.SELS;
 
       self.$document.off('click.chips-focus', SELS.CHIPS).on('click.chips-focus', SELS.CHIPS, function(e){
@@ -68,8 +70,16 @@
       });
 
       self.$document.off('click.chips-select', SELS.CHIP).on('click.chips-select', SELS.CHIP, function(e){
-        $(SELS.CHIP).removeClass('selected');
-        $(this).toggleClass('selected');
+        var $chip = $(e.target);
+        if ($chip.length) {
+          var wasSelected = $chip.hasClass('selected');
+          var $chips = $chip.closest(SELS.CHIPS);
+          $(SELS.CHIP).removeClass('selected');
+
+          if (!wasSelected) {
+            self.selectChip($chip.index(), $chips);
+          }
+        }
       });
 
       self.$document.off('keydown.chips').on('keydown.chips', function(e){
@@ -153,6 +163,13 @@
 
         // enter
         if (13 === e.which) {
+          // Override enter if autocompleting.
+          if (self.hasAutocomplete &&
+              $chips.find('.autocomplete-content.dropdown-content').length &&
+              $chips.find('.autocomplete-content.dropdown-content').children().length) {
+            return;
+          }
+
           e.preventDefault();
           self.addChip({tag: $target.val()}, $chips);
           $target.val('');
@@ -160,7 +177,8 @@
         }
 
         // delete or left
-         if ((8 === e.keyCode || 37 === e.keyCode) && '' === $target.val() && chipsLength) {
+        if ((8 === e.keyCode || 37 === e.keyCode) && '' === $target.val() && chipsLength) {
+          e.preventDefault();
           self.selectChip(chipsLength - 1, $chips);
           $target.blur();
           return;
@@ -196,6 +214,20 @@
           label.addClass('active');
         }
       }
+
+      // Setup autocomplete if needed.
+      var input = $('#' + chipId);
+      if (self.hasAutocomplete) {
+        input.autocomplete({
+          data: curr_options.autocompleteData,
+          limit: curr_options.autocompleteLimit,
+          onAutocomplete: function(val) {
+            self.addChip({tag: val}, $chips);
+            input.val('');
+            input.focus();
+          },
+        })
+      }
     };
 
     this.renderChip = function(elem) {
@@ -281,9 +313,6 @@
     // init
     this.init();
 
-    if (!chipsHandleEvents) {
-      this.handleEvents();
-      chipsHandleEvents = true;
-    }
+    this.handleEvents();
   };
-}( jQuery ));
+}( jQuery ));

data/vendor/assets/javascripts/materialize/dropdown.js

@@ -11,7 +11,7 @@
     var defaults = {
       inDuration: 300,
       outDuration: 225,
-      constrain_width: true, // Constrains width of dropdown to the activator
+      constrainWidth: true, // Constrains width of dropdown to the activator
       hover: false,
       gutter: 0, // Spacing from edge
       belowOrigin: false,
@@ -49,7 +49,7 @@
         if (origin.data('outduration') !== undefined)
           curr_options.outDuration = origin.data('outduration');
         if (origin.data('constrainwidth') !== undefined)
-          curr_options.constrain_width = origin.data('constrainwidth');
+          curr_options.constrainWidth = origin.data('constrainwidth');
         if (origin.data('hover') !== undefined)
           curr_options.hover = origin.data('hover');
         if (origin.data('gutter') !== undefined)
@@ -85,7 +85,7 @@
         origin.addClass('active');
 
         // Constrain width
-        if (curr_options.constrain_width === true) {
+        if (curr_options.constrainWidth === true) {
           activates.css('width', origin.outerWidth());
 
         } else {
@@ -174,6 +174,14 @@
             }
           })
           .animate( {opacity: 1}, {queue: false, duration: curr_options.inDuration, easing: 'easeOutSine'});
+
+        // Add click close handler to document
+        $(document).bind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) {
+          if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length) ) {
+            hideDropdown();
+            $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
+          }
+        });
       }
 
       function hideDropdown() {
@@ -182,6 +190,7 @@
         activates.fadeOut(curr_options.outDuration);
         activates.removeClass('active');
         origin.removeClass('active');
+        $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
         setTimeout(function() { activates.css('max-height', ''); }, curr_options.outDuration);
       }
 
@@ -235,15 +244,6 @@
               hideDropdown();
               $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
             }
-            // If menu open, add click close handler to document
-            if (activates.hasClass('active')) {
-              $(document).bind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) {
-                if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length) ) {
-                  hideDropdown();
-                  $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
-                }
-              });
-            }
           }
         });