material-sass 4.0.0.alpha6 → 4.0.0.beta

data/app/assets/javascripts/material/components/tab-switch.js

@@ -0,0 +1,148 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+/*
+ * tab indicator animation
+ * requires bootstrap's (v4.0.0-beta) tab.js
+ */
+
+var TabSwitch = function ($) {
+
+  // constants >>>
+  var DATA_KEY = 'md.tabswitch';
+  var NAME = 'tabswitch';
+  var NO_CONFLICT = $.fn[NAME];
+  var TRANSITION_DURATION = 390;
+
+  var ClassName = {
+    ANIMATE: 'animate',
+    DROPDOWN_ITEM: 'dropdown-item',
+    INDICATOR: 'nav-tabs-indicator',
+    MATERIAL: 'nav-tabs-material',
+    SCROLLABLE: 'nav-tabs-scrollable',
+    SHOW: 'show'
+  };
+
+  var Event = {
+    SHOW_BS_TAB: 'show.bs.tab'
+  };
+
+  var Selector = {
+    DATA_TOGGLE: '.nav-tabs [data-toggle="tab"]',
+    DROPDOWN: '.dropdown',
+    NAV: '.nav-tabs'
+  };
+  // <<< constants
+
+  var TabSwitch = function () {
+    function TabSwitch(nav) {
+      _classCallCheck(this, TabSwitch);
+
+      if (typeof $.fn.tab === 'undefined') {
+        throw new Error('Material\'s JavaScript requires Bootstrap\'s tab.js');
+      }
+
+      this._nav = nav;
+      this._navindicator = null;
+    }
+
+    TabSwitch.prototype.switch = function _switch(element, relatedTarget) {
+      var _this = this;
+
+      var navLeft = $(this._nav).offset().left;
+      var navScrollLeft = $(this._nav).scrollLeft();
+      var navWidth = $(this._nav).outerWidth();
+      var supportsTransition = Util.supportsTransitionEnd();
+
+      if (!this._navindicator) {
+        this._createIndicator(navLeft, navScrollLeft, navWidth, relatedTarget);
+      }
+
+      if ($(element).hasClass(ClassName.DROPDOWN_ITEM)) {
+        element = $(element).closest(Selector.DROPDOWN);
+      }
+
+      var elLeft = $(element).offset().left;
+      var elWidth = $(element).outerWidth();
+
+      $(this._navindicator).addClass(ClassName.SHOW);
+      Util.reflow(this._navindicator);
+
+      if (supportsTransition) {
+        $(this._nav).addClass(ClassName.ANIMATE);
+      }
+
+      $(this._navindicator).css({
+        left: elLeft + navScrollLeft - navLeft,
+        right: navWidth - (elLeft + navScrollLeft - navLeft + elWidth)
+      });
+
+      var complete = function complete() {
+        $(_this._nav).removeClass(ClassName.ANIMATE);
+        $(_this._navindicator).removeClass(ClassName.SHOW);
+      };
+
+      if (!supportsTransition) {
+        complete();
+        return;
+      }
+
+      $(this._navindicator).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
+    };
+
+    TabSwitch.prototype._createIndicator = function _createIndicator(navLeft, navScrollLeft, navWidth, relatedTarget) {
+      this._navindicator = document.createElement('div');
+
+      $(this._navindicator).addClass(ClassName.INDICATOR).appendTo(this._nav);
+
+      if (relatedTarget !== undefined) {
+        if ($(relatedTarget).hasClass(ClassName.DROPDOWN_ITEM)) {
+          relatedTarget = $(relatedTarget).closest(Selector.DROPDOWN);
+        }
+
+        var relatedLeft = $(relatedTarget).offset().left;
+        var relatedWidth = $(relatedTarget).outerWidth();
+
+        $(this._navindicator).css({
+          left: relatedLeft + navScrollLeft - navLeft,
+          right: navWidth - (relatedLeft + navScrollLeft - navLeft + relatedWidth)
+        });
+      }
+
+      $(this._nav).addClass(ClassName.MATERIAL);
+    };
+
+    TabSwitch._jQueryInterface = function _jQueryInterface(relatedTarget) {
+      return this.each(function () {
+        var nav = $(this).closest(Selector.NAV)[0];
+
+        if (!nav) {
+          return;
+        }
+
+        var data = $(nav).data(DATA_KEY);
+
+        if (!data) {
+          data = new TabSwitch(nav);
+          $(nav).data(DATA_KEY, data);
+        }
+
+        data.switch(this, relatedTarget);
+      });
+    };
+
+    return TabSwitch;
+  }();
+
+  $(document).on(Event.SHOW_BS_TAB, Selector.DATA_TOGGLE, function (event) {
+    TabSwitch._jQueryInterface.call($(event.target), event.relatedTarget);
+  });
+
+  $.fn[NAME] = TabSwitch._jQueryInterface;
+  $.fn[NAME].Constructor = TabSwitch;
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = NO_CONFLICT;
+    return TabSwitch._jQueryInterface;
+  };
+
+  return TabSwitch;
+}(jQuery);

data/app/assets/javascripts/material/components/util.js

@@ -0,0 +1,133 @@
+/*
+ * global util js
+ * based on bootstrap's (v4.0.0-beta) util.js
+ */
+
+var Util = function ($) {
+
+  var MAX_UID = 1000000;
+  var transition = false;
+
+  var TransitionEndEvent = {
+    WebkitTransition: 'webkitTransitionEnd',
+    MozTransition: 'transitionend',
+    OTransition: 'oTransitionEnd otransitionend',
+    transition: 'transitionend'
+  };
+
+  function getSpecialTransitionEndEvent() {
+    return {
+      bindType: transition.end,
+      delegateType: transition.end,
+      handle: function handle(event) {
+        if ($(event.target).is(this)) {
+          // eslint-disable-next-line prefer-rest-params
+          return event.handleObj.handler.apply(this, arguments);
+        }
+        return undefined;
+      }
+    };
+  }
+
+  function isElement(obj) {
+    return (obj[0] || obj).nodeType;
+  }
+
+  function setTransitionEndSupport() {
+    transition = transitionEndTest();
+
+    $.fn.emulateTransitionEnd = transitionEndEmulator;
+
+    if (Util.supportsTransitionEnd()) {
+      $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
+    }
+  }
+
+  function toType(obj) {
+    return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
+  }
+
+  function transitionEndEmulator(duration) {
+    var _this = this;
+
+    var called = false;
+
+    $(this).one(Util.TRANSITION_END, function () {
+      called = true;
+    });
+
+    setTimeout(function () {
+      if (!called) {
+        Util.triggerTransitionEnd(_this);
+      }
+    }, duration);
+
+    return this;
+  }
+
+  function transitionEndTest() {
+    if (window.QUnit) {
+      return false;
+    }
+
+    var el = document.createElement('material');
+
+    for (var name in TransitionEndEvent) {
+      if (el.style[name] !== undefined) {
+        return {
+          end: TransitionEndEvent[name]
+        };
+      }
+    }
+
+    return false;
+  }
+
+  var Util = {
+    TRANSITION_END: 'mdTransitionEnd',
+
+    getSelectorFromElement: function getSelectorFromElement(element) {
+      var selector = element.getAttribute('data-target');
+
+      if (!selector) {
+        selector = element.getAttribute('href') || '';
+        selector = /^#[a-z]/i.test(selector) ? selector : null;
+      }
+
+      return selector;
+    },
+    getUID: function getUID(prefix) {
+      do {
+        // eslint-disable-next-line no-bitwise
+        prefix += ~~(Math.random() * MAX_UID);
+      } while (document.getElementById(prefix));
+      return prefix;
+    },
+    reflow: function reflow(element) {
+      new Function('md', 'return md')(element.offsetHeight);
+    },
+    supportsTransitionEnd: function supportsTransitionEnd() {
+      return Boolean(transition);
+    },
+    triggerTransitionEnd: function triggerTransitionEnd(element) {
+      $(element).trigger(transition.end);
+    },
+    typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
+      for (var property in configTypes) {
+        if (configTypes.hasOwnProperty(property)) {
+          var expectedTypes = configTypes[property];
+          var value = config[property];
+          var valueType = value && isElement(value) ? 'element' : toType(value);
+
+          if (!new RegExp(expectedTypes).test(valueType)) {
+            throw new Error(componentName.toUpperCase() + ': ' + ('Option "' + property + '" provided type "' + valueType + '" ') + ('but expected type "' + expectedTypes + '".'));
+          }
+        }
+      }
+    }
+  };
+
+  setTransitionEndSupport();
+
+  return Util;
+}(jQuery);

data/app/assets/javascripts/material/initializers/picker.js

@@ -0,0 +1,171 @@
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+/*
+ * customise pickadate js for material
+ * requires addons/picker.js and addons/picker.date.js
+ */
+
++function ($) {
+
+  'use strict';
+
+  var Datepicker = function Datepicker(element, options) {
+    this._element = element;
+    this._options = options;
+  };
+
+  if (typeof $.fn.pickadate === 'undefined') {
+    throw new Error('Material\'s JavaScript requires pickadate.js');
+  }
+
+  Datepicker.DEFAULTS = {
+    cancel: 'Cancel',
+    closeOnCancel: true,
+    closeOnSelect: false,
+    container: 'body',
+    disable: [],
+    firstDay: 0,
+    format: 'd/m/yyyy',
+    formatSubmit: '',
+    klass: {
+      // button
+      buttonClear: 'btn btn-outline-primary picker-button-clear',
+      buttonClose: 'btn btn-outline-primary picker-button-close',
+      buttonToday: 'btn btn-outline-primary picker-button-today',
+
+      // day
+      day: 'picker-day',
+      disabled: 'picker-day-disabled',
+      highlighted: 'picker-day-highlighted',
+      infocus: 'picker-day-infocus',
+      now: 'picker-day-today',
+      outfocus: 'picker-day-outfocus',
+      selected: 'picker-day-selected',
+      weekdays: 'picker-weekday',
+
+      // element
+      box: 'picker-box',
+      footer: 'picker-footer',
+      frame: 'picker-frame',
+      header: 'picker-header',
+      holder: 'picker-holder',
+      table: 'picker-table',
+      wrap: 'picker-wrap',
+
+      // input element
+      active: 'picker-input-active',
+      input: 'picker-input',
+
+      // month and year nav
+      month: 'picker-month',
+      navDisabled: 'picker-nav-disabled',
+      navNext: 'material-icons picker-nav-next',
+      navPrev: 'material-icons picker-nav-prev',
+      selectMonth: 'picker-select-month',
+      selectYear: 'picker-select-year',
+      year: 'picker-year',
+
+      // root picker
+      focused: 'picker-focused',
+      opened: 'picker-opened',
+      picker: 'picker'
+    },
+    max: false,
+    min: false,
+    monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    ok: 'OK',
+    onClose: false,
+    onOpen: false,
+    onRender: false,
+    onSet: false,
+    onStart: false,
+    onStop: false,
+    selectMonths: false,
+    selectYears: false,
+    today: '',
+    weekdaysFull: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+  };
+
+  Datepicker.prototype.display = function (datepickerApi, datepickerRoot, datepickerValue) {
+    $('.picker-date-display', datepickerRoot).remove();
+
+    $('.picker-wrap', datepickerRoot).prepend('<div class="picker-date-display">' + '<div class="picker-date-display-top">' + '<span class="picker-year-display">' + datepickerApi.get(datepickerValue, 'yyyy') + '</span>' + '</div>' + '<div class="picker-date-display-bottom">' + '<span class="picker-weekday-display">' + datepickerApi.get(datepickerValue, 'dddd') + '</span>' + '<span class="picker-day-display">' + datepickerApi.get(datepickerValue, 'd') + '</span>' + '<span class="picker-month-display">' + datepickerApi.get(datepickerValue, 'mmm') + '</span>' + '</div>' + '</div>');
+  };
+
+  Datepicker.prototype.show = function () {
+    var that = this;
+
+    $(this._element).pickadate({
+      clear: that._options.cancel,
+      close: that._options.ok,
+      closeOnClear: that._options.closeOnCancel,
+      closeOnSelect: that._options.closeOnSelect,
+      container: that._options.container,
+      disable: that._options.disable,
+      firstDay: that._options.firstDay,
+      format: that._options.format,
+      formatSubmit: that._options.formatSubmit,
+      klass: that._options.klass,
+      max: that._options.max,
+      min: that._options.min,
+      monthsFull: that._options.monthsFull,
+      monthsShort: that._options.monthsShort,
+      onClose: that._options.onClose,
+      onOpen: that._options.onOpen,
+      onRender: that._options.onRender,
+      onSet: that._options.onSet,
+      onStart: that._options.onStart,
+      onStop: that._options.onStop,
+      selectMonths: that._options.selectMonths,
+      selectYears: that._options.selectYears,
+      today: that._options.today,
+      weekdaysFull: that._options.weekdaysFull,
+      weekdaysShort: that._options.weekdaysShort
+    });
+
+    var datepickerApi = $(this._element).pickadate('picker'),
+        datepickerNode = datepickerApi.$node,
+        datepickerRoot = datepickerApi.$root;
+
+    datepickerApi.on({
+      close: function close() {
+        $(document.activeElement).blur();
+      },
+      open: function open() {
+        if (!$('.picker__date-display', datepickerRoot).length) {
+          that.display(datepickerApi, datepickerRoot, 'highlight');
+        }
+      },
+      set: function set() {
+        if (datepickerApi.get('select') !== null) {
+          that.display(datepickerApi, datepickerRoot, 'select');
+        }
+      }
+    });
+  };
+
+  function Plugin(option) {
+    return this.each(function () {
+      var data = $(this).data('bs.pickdate');
+      var options = $.extend({}, Datepicker.DEFAULTS, $(this).data(), (typeof option === 'undefined' ? 'undefined' : _typeof(option)) == 'object' && option);
+
+      if (!data) {
+        $(this).data('bs.pickdate', data = new Datepicker(this, options));
+      }
+
+      data.show();
+    });
+  }
+
+  var old = $.fn.pickdate;
+
+  $.fn.pickdate = Plugin;
+  $.fn.pickdate.Constructor = Datepicker;
+
+  $.fn.pickdate.noConflict = function () {
+    $.fn.pickdate = old;
+    return this;
+  };
+}(jQuery);