mtl 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4dc441000080bcf25ab6100aa8c9b90d7e3f7757
-  data.tar.gz: ff95abadcccab9596fdf8c4a1f49f9d279a4f6bd
+  metadata.gz: 08081cb22a5be14a4c4414c87e810b81ef1e6583
+  data.tar.gz: 20c8e64b6ef82f5e99497509e52d1c9b6ad2102d
 SHA512:
-  metadata.gz: 1411a73aad207b27e030de39222445fff380e8ec18a43d0e6b5f4f04c5affe5916f9f2d7362dc9bdeb8edaf4e8093e08e571932cca56acd2db7a0bd9ab32abe9
-  data.tar.gz: c2d3f10ec312f4bb65096602bd27bca814f240c31ed76ec84ae31827893868cb9cb8c6bf19bc7b3a8c8b1a2f36e00bca5cd81419dbe576cbf5ae0ced737a2c88
+  metadata.gz: 2e1758ed56f6ed803ee82fed48b5a4c456dab5c643289e3abc3fbb4098f32109983c663b40d70d6d17390b97a0a54fec6f7ce7d4ab3aea1276337769f35c642e
+  data.tar.gz: 922222e382812a4274e2040619c4c91676537b1e1b5bb9d2793767187f8964d5d2879bd9246c5747b35e2844039408ea9cb33b1c52b551597c53430d9b3616a1

data/Gemfile

@@ -4,6 +4,6 @@ source 'https://rubygems.org'
 gemspec
 
 # Linters
+gem 'coffeelint', require: false
 gem 'rubocop', require: false
 gem 'scss_lint', require: false
-gem 'coffeelint', require: false

data/app/assets/javascripts/mtl.js

@@ -9,7 +9,7 @@
 
 //=require "materialize/collapsible"
 //=require "materialize/dropdown"
-//=require "materialize/leanModal"
+//=require "materialize/modal"
 //=require "materialize/materialbox"
 //=require "materialize/parallax"
 //=require "materialize/tabs"

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

@@ -1,7 +1,6 @@
 updateAttrs = ($el) ->
   $el
     .on('click', -> false)
-    .attr('data-constrainwidth', 'false')
     .attr('data-beloworigin', 'true')
     .attr('data-alignment', alignment($el))
     .attr('data-activates', activator($el))
@@ -15,7 +14,9 @@ activator = ($el) ->
 init = ->
   $('[data-mtl-dropdown]').each ->
     $el = $(this)
-    updateAttrs($el).dropdown()
+    updateAttrs($el).dropdown(constrain_width: false)
+    $el.siblings('input.select-dropdown').on 'mousedown', (e) ->
+      e.preventDefault() if e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight
 
 closeAll = ->
   setTimeout -> $('[data-mtl-dropdown]').dropdown('close')

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

@@ -7,10 +7,6 @@ MODAL_TEMPLATE = '
 </div>
 '
 
-initModal = ($el) ->
-  return initXhrModal($el) if $el.data('mtl-modal') == 'xhr'
-  return initDefaultModal($el) if $el.data('mtl-modal') == 'default'
-
 initXhrModal = ($el) ->
   modalId = 'mtl-modal-' + (MODAL_IDS++)
   ds = $el.prop('href')
@@ -18,15 +14,14 @@ initXhrModal = ($el) ->
   $modal.appendTo('body')
   $modal.addClass(modalClass) if modalClass = $el.data('mtl-modal-class')
   $el.prop('href', "##{modalId}")
-
-  initDefaultModal $el,
-    ready: -> $modal.load(ds)
-
-initDefaultModal = ($el, options = {}) -> $el.leanModal(options)
+  $modal.modal ready: -> $modal.load(ds)
 
 $(document).on 'click', '[data-mtl-modal="close"]', (e) ->
   e.preventDefault()
-  $(this).parents('.modal:first').closeModal()
+  $(this).parents('.modal:first').modal('close')
+
+init = ->
+  $('[data-mtl-modal="inline"]').modal()
+  $('[data-mtl-modal="xhr"]').each -> initXhrModal($(this))
 
-init = -> $('[data-mtl-modal]').each -> initModal($(this))
 if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)

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

@@ -5,7 +5,6 @@
 
 .dropdown-content li > a > .material-icons {
   float: left;
-  width: auto;
   color: lighten($dropdown-color, 30%);
   font-size: 1.4rem;
   margin-right: 8px;

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

@@ -1,8 +1,18 @@
 // scss-lint:disable QualifyingElement SelectorFormat
 
-// caret fix
-.select-wrapper span.caret {
-  color: inherit;
+// select/dropdown hotfixes
+.select-wrapper {
+  // caret fix
+  span.caret {
+    color: inherit;
+  }
+  // ellipsis of selected option
+  input.select-dropdown {
+    padding-right: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+  }
 }
 
 .radio_buttons {

data/lib/mtl/version.rb

@@ -1,6 +1,7 @@
 module Mtl
-  VERSION = '1.0.3'.freeze
-  MATERIALIZE_VERSION = '0.97.7'.freeze
+  VERSION = '1.1.0'.freeze
+  MATERIALIZE_VERSION = '0.97.8'.freeze
   ICONS_VERSION = '2.2.3'.freeze
   LODASH_VERSION = '4.14.1'.freeze
+  PDFOBJECT_VERSION = '2.0.201604172'.freeze
 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#171a9ef"
+    "materialize-css": "https://github.com/Dogfalo/materialize.git#fda1e45"
   }
 }

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

@@ -5,17 +5,17 @@
     $.fn.reverse = [].reverse;
 
     // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
-    $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
+    $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function(e) {
       var $this = $(this);
       openFABMenu($this);
     });
-    $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
+    $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function(e) {
       var $this = $(this);
       closeFABMenu($this);
     });
 
     // Toggle-on-click behaviour.
-    $(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) {
+    $(document).on('click.fabClickToggle', '.fixed-action-btn.click-to-toggle > a', function(e) {
       var $this = $(this);
       var $menu = $this.parent();
       if ($menu.hasClass('active')) {
@@ -25,6 +25,13 @@
       }
     });
 
+    // Toolbar transition behaviour.
+    $(document).on('click.fabToolbar', '.fixed-action-btn.toolbar > a', function(e) {
+      var $this = $(this);
+      var $menu = $this.parent();
+      FABtoToolbar($menu);
+    });
+
   });
 
   $.fn.extend({
@@ -33,12 +40,18 @@
     },
     closeFAB: function() {
       closeFABMenu($(this));
+    },
+    openToolbar: function() {
+      FABtoToolbar($(this));
+    },
+    closeToolbar: function() {
+      toolbarToFAB($(this));
     }
   });
 
 
   var openFABMenu = function (btn) {
-    $this = btn;
+    var $this = btn;
     if ($this.hasClass('active') === false) {
 
       // Get direction option
@@ -67,7 +80,7 @@
   };
 
   var closeFABMenu = function (btn) {
-    $this = btn;
+    var $this = btn;
     // Get direction option
     var horizontal = $this.hasClass('horizontal');
     var offsetY, offsetX;
@@ -88,4 +101,167 @@
   };
 
 
+  /**
+   * Transform FAB into toolbar
+   * @param  {Object}  object jQuery object
+   */
+  var FABtoToolbar = function(btn) {
+    if (btn.attr('data-open') === "true") {
+      return;
+    }
+
+    var offsetX, offsetY, scaleFactor;
+    var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+    var btnRect = btn[0].getBoundingClientRect();
+    var anchor = btn.find('> a').first();
+    var menu = btn.find('> ul').first();
+    var backdrop = $('<div class="fab-backdrop"></div>');
+    var fabColor = anchor.css('background-color');
+    anchor.append(backdrop);
+
+    offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
+    offsetY = windowHeight - btnRect.bottom;
+    scaleFactor = windowWidth / backdrop.width();
+    btn.attr('data-origin-bottom', btnRect.bottom);
+    btn.attr('data-origin-left', btnRect.left);
+    btn.attr('data-origin-width', btnRect.width);
+
+    // Set initial state
+    btn.addClass('active');
+    btn.attr('data-open', true);
+    btn.css({
+      'text-align': 'center',
+      width: '100%',
+      bottom: 0,
+      left: 0,
+      transform: 'translateX(' + offsetX + 'px)',
+      transition: 'none'
+    });
+    anchor.css({
+      transform: 'translateY(' + -offsetY + 'px)',
+      transition: 'none'
+    });
+    backdrop.css({
+      'background-color': fabColor
+    });
+
+
+    setTimeout(function() {
+      btn.css({
+        transform: '',
+        transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
+      });
+      anchor.css({
+        overflow: 'visible',
+        transform: '',
+        transition: 'transform .2s'
+      });
+
+      setTimeout(function() {
+        btn.css({
+          overflow: 'hidden',
+          'background-color': fabColor
+        });
+        backdrop.css({
+          transform: 'scale(' + scaleFactor + ')',
+          transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+        });
+        menu.find('> li > a').css({
+          opacity: 1
+        });
+
+        // Scroll to close.
+        $(window).on('scroll.fabToolbarClose', function() {
+          toolbarToFAB(btn);
+          $(window).off('scroll.fabToolbarClose');
+          $(document).off('click.fabToolbarClose');
+        });
+
+        $(document).on('click.fabToolbarClose', function(e) {
+          if (!$(e.target).closest(menu).length) {
+            toolbarToFAB(btn);
+            $(window).off('scroll.fabToolbarClose');
+            $(document).off('click.fabToolbarClose');
+          }
+        });
+      }, 100);
+    }, 0);
+  };
+
+  /**
+   * Transform toolbar back into FAB
+   * @param  {Object}  object jQuery object
+   */
+  var toolbarToFAB = function(btn) {
+    if (btn.attr('data-open') !== "true") {
+      return;
+    }
+
+    var offsetX, offsetY, scaleFactor;
+    var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+    var btnWidth = btn.attr('data-origin-width');
+    var btnBottom = btn.attr('data-origin-bottom');
+    var btnLeft = btn.attr('data-origin-left');
+    var anchor = btn.find('> .btn-floating').first();
+    var menu = btn.find('> ul').first();
+    var backdrop = btn.find('.fab-backdrop');
+    var fabColor = anchor.css('background-color');
+
+    offsetX = btnLeft - (windowWidth / 2) + (btnWidth / 2);
+    offsetY = windowHeight - btnBottom;
+    scaleFactor = windowWidth / backdrop.width();
+
+
+    // Hide backdrop
+    btn.removeClass('active');
+    btn.attr('data-open', false);
+    btn.css({
+      'background-color': 'transparent',
+      transition: 'none'
+    });
+    anchor.css({
+      transition: 'none'
+    });
+    backdrop.css({
+      transform: 'scale(0)',
+      'background-color': fabColor
+    });
+    menu.find('> li > a').css({
+      opacity: ''
+    });
+
+    setTimeout(function() {
+      backdrop.remove();
+
+      // Set initial state.
+      btn.css({
+        'text-align': '',
+        width: '',
+        bottom: '',
+        left: '',
+        overflow: '',
+        'background-color': '',
+        transform: 'translate3d(' + -offsetX + 'px,0,0)'
+      });
+      anchor.css({
+        overflow: '',
+        transform: 'translate3d(0,' + offsetY + 'px,0)'
+      });
+
+      setTimeout(function() {
+        btn.css({
+          transform: 'translate3d(0,0,0)',
+          transition: 'transform .2s'
+        });
+        anchor.css({
+          transform: 'translate3d(0,0,0)',
+          transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+        });
+      }, 20);
+    }, 200);
+  };
+
+
 }( jQuery ));

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

@@ -39,7 +39,7 @@
           options.dist = 0;
           var firstImage = view.find('.carousel-item img').first();
           if (firstImage.length) {
-            imageHeight = firstImage.load(function(){
+            imageHeight = firstImage.on('load', function(){
               view.css('height', $(this).height());
             });
           } else {

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

@@ -6,11 +6,11 @@
     secondaryPlaceholder: '',
   };
 
-  $(document).ready(function(){
+  $(document).ready(function() {
     // Handle removal of static chips.
     $(document).on('click', '.chip .close', function(e){
       var $chips = $(this).closest('.chips');
-      if ($chips.data('initialized')) {
+      if ($chips.attr('data-initialized')) {
         return;
       }
       $(this).closest('.chip').remove();
@@ -33,11 +33,8 @@
       return this.$el.data('chips');
     }
 
-    if ('options' === options) {
-      return this.$el.data('options');
-    }
+    var curr_options = $.extend({}, materialChipsDefaults, options);
 
-    this.$el.data('options', $.extend({}, materialChipsDefaults, options));
 
     // Initialize
     this.init = function() {
@@ -45,23 +42,20 @@
       var chips;
       self.$el.each(function(){
         var $chips = $(this);
-        if ($chips.data('initialized')) {
-          // Prevent double initialization.
-          return;
-        }
-        var options = $chips.data('options');
-        if (!options.data || !options.data instanceof Array) {
-          options.data = [];
+        var chipId = Materialize.guid();
+
+        if (!curr_options.data || !(curr_options.data instanceof Array)) {
+          curr_options.data = [];
         }
-        $chips.data('chips', options.data);
-        $chips.data('index', i);
-        $chips.data('initialized', true);
+        $chips.data('chips', curr_options.data);
+        $chips.attr('data-index', i);
+        $chips.attr('data-initialized', true);
 
         if (!$chips.hasClass(self.SELS.CHIPS)) {
           $chips.addClass('chips');
         }
 
-        self.chips($chips);
+        self.chips($chips, chipId);
         i++;
       });
     };
@@ -69,16 +63,16 @@
     this.handleEvents = function(){
       var SELS = self.SELS;
 
-      self.$document.on('click', SELS.CHIPS, function(e){
+      self.$document.off('click.chips-focus', SELS.CHIPS).on('click.chips-focus', SELS.CHIPS, function(e){
         $(e.target).find(SELS.INPUT).focus();
       });
 
-      self.$document.on('click', SELS.CHIP, function(e){
+      self.$document.off('click.chips-select', SELS.CHIP).on('click.chips-select', SELS.CHIP, function(e){
         $(SELS.CHIP).removeClass('selected');
         $(this).toggleClass('selected');
       });
 
-      self.$document.on('keydown', function(e){
+      self.$document.off('keydown.chips').on('keydown.chips', function(e){
         if ($(e.target).is('input, textarea')) {
           return;
         }
@@ -95,10 +89,9 @@
 
         if (e.which === 8 || e.which === 46) {
           e.preventDefault();
-          var chipsIndex = $chips.data('index');
 
           index = $chip.index();
-          self.deleteChip(chipsIndex, index, $chips);
+          self.deleteChip(index, $chips);
 
           var selectIndex = null;
           if ((index + 1) < length) {
@@ -110,7 +103,7 @@
           if (selectIndex < 0) selectIndex = null;
 
           if (null !== selectIndex) {
-            self.selectChip(chipsIndex, selectIndex, $chips);
+            self.selectChip(selectIndex, $chips);
           }
           if (!length) $chips.find('input').focus();
 
@@ -121,7 +114,7 @@
             return;
           }
           $(SELS.CHIP).removeClass('selected');
-          self.selectChip($chips.data('index'), index, $chips);
+          self.selectChip(index, $chips);
 
         // right
         } else if (e.which === 39) {
@@ -131,64 +124,78 @@
             $chips.find('input').focus();
             return;
           }
-          self.selectChip($chips.data('index'), index, $chips);
+          self.selectChip(index, $chips);
         }
       });
 
-      self.$document.on('focusin', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
-        $(e.target).closest(SELS.CHIPS).addClass('focus');
+      self.$document.off('focusin.chips', SELS.CHIPS + ' ' + SELS.INPUT).on('focusin.chips', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
+        var $currChips = $(e.target).closest(SELS.CHIPS);
+        $currChips.addClass('focus');
+        $currChips.siblings('label, .prefix').addClass('active');
         $(SELS.CHIP).removeClass('selected');
       });
 
-      self.$document.on('focusout', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
-        $(e.target).closest(SELS.CHIPS).removeClass('focus');
+      self.$document.off('focusout.chips', SELS.CHIPS + ' ' + SELS.INPUT).on('focusout.chips', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
+        var $currChips = $(e.target).closest(SELS.CHIPS);
+        $currChips.removeClass('focus');
+
+        // Remove active if empty
+        if (!$currChips.data('chips').length) {
+          $currChips.siblings('label').removeClass('active');
+        }
+        $currChips.siblings('.prefix').removeClass('active');
       });
 
-      self.$document.on('keydown', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
+      self.$document.off('keydown.chips-add', SELS.CHIPS + ' ' + SELS.INPUT).on('keydown.chips-add', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
         var $target = $(e.target);
         var $chips = $target.closest(SELS.CHIPS);
-        var chipsIndex = $chips.data('index');
         var chipsLength = $chips.children(SELS.CHIP).length;
 
         // enter
         if (13 === e.which) {
           e.preventDefault();
-          self.addChip(chipsIndex, {tag: $target.val()}, $chips);
+          self.addChip({tag: $target.val()}, $chips);
           $target.val('');
           return;
         }
 
         // delete or left
          if ((8 === e.keyCode || 37 === e.keyCode) && '' === $target.val() && chipsLength) {
-          self.selectChip(chipsIndex, chipsLength - 1, $chips);
+          self.selectChip(chipsLength - 1, $chips);
           $target.blur();
           return;
         }
       });
 
-      self.$document.on('click', SELS.CHIPS + ' ' + SELS.DELETE, function(e) {
+      // Click on delete icon in chip.
+      self.$document.off('click.chips-delete', SELS.CHIPS + ' ' + SELS.DELETE).on('click.chips-delete', SELS.CHIPS + ' ' + SELS.DELETE, function(e) {
         var $target = $(e.target);
         var $chips = $target.closest(SELS.CHIPS);
         var $chip = $target.closest(SELS.CHIP);
         e.stopPropagation();
-        self.deleteChip(
-          $chips.data('index'),
-          $chip.index(),
-          $chips
-        );
+        self.deleteChip($chip.index(), $chips);
         $chips.find('input').focus();
       });
     };
 
-    this.chips = function($chips) {
+    this.chips = function($chips, chipId) {
       var html = '';
-      var options = $chips.data('options');
       $chips.data('chips').forEach(function(elem){
         html += self.renderChip(elem);
       });
-      html += '<input class="input" placeholder="">';
+      html += '<input id="' + chipId +'" class="input" placeholder="">';
       $chips.html(html);
       self.setPlaceholder($chips);
+
+      // Set for attribute for label
+      var label = $chips.next('label');
+      if (label.length) {
+        label.attr('for', chipId);
+
+        if ($chips.data('chips').length) {
+          label.addClass('active');
+        }
+      }
     };
 
     this.renderChip = function(elem) {
@@ -204,11 +211,11 @@
     };
 
     this.setPlaceholder = function($chips) {
-      var options = $chips.data('options');
-      if ($chips.data('chips').length && options.placeholder) {
-        $chips.find('input').prop('placeholder', options.placeholder);
-      } else if (!$chips.data('chips').length && options.secondaryPlaceholder) {
-        $chips.find('input').prop('placeholder', options.secondaryPlaceholder);
+      if ($chips.data('chips').length && curr_options.placeholder) {
+        $chips.find('input').prop('placeholder', curr_options.placeholder);
+
+      } else if (!$chips.data('chips').length && curr_options.secondaryPlaceholder) {
+        $chips.find('input').prop('placeholder', curr_options.secondaryPlaceholder);
       }
     };
 
@@ -224,27 +231,42 @@
       return '' !== elem.tag && !exists;
     };
 
-    this.addChip = function(chipsIndex, elem, $chips) {
+    this.addChip = function(elem, $chips) {
       if (!self.isValid($chips, elem)) {
         return;
       }
-      var options = $chips.data('options');
       var chipHtml = self.renderChip(elem);
-      $chips.data('chips').push(elem);
+      var newData = [];
+      var oldData = $chips.data('chips');
+      for (var i = 0; i < oldData.length; i++) {
+        newData.push(oldData[i]);
+      }
+      newData.push(elem);
+
+      $chips.data('chips', newData);
       $(chipHtml).insertBefore($chips.find('input'));
       $chips.trigger('chip.add', elem);
       self.setPlaceholder($chips);
     };
 
-    this.deleteChip = function(chipsIndex, chipIndex, $chips) {
+    this.deleteChip = function(chipIndex, $chips) {
       var chip = $chips.data('chips')[chipIndex];
       $chips.find('.chip').eq(chipIndex).remove();
-      $chips.data('chips').splice(chipIndex, 1);
+
+      var newData = [];
+      var oldData = $chips.data('chips');
+      for (var i = 0; i < oldData.length; i++) {
+        if (i !== chipIndex) {
+          newData.push(oldData[i]);
+        }
+      }
+
+      $chips.data('chips', newData);
       $chips.trigger('chip.delete', chip);
       self.setPlaceholder($chips);
     };
 
-    this.selectChip = function(chipsIndex, chipIndex, $chips) {
+    this.selectChip = function(chipIndex, $chips) {
       var $chip = $chips.find('.chip').eq(chipIndex);
       if ($chip && false === $chip.hasClass('selected')) {
         $chip.addClass('selected');