@materializecss/materialize 1.1.0 → 1.2.0

package/extras/noUiSlider/nouislider.css

@@ -6,7 +6,6 @@
 
 /*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */
 
-
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
@@ -66,6 +65,7 @@
     left: -15px;
     top: -15px;
 }
+
 /* Painting and performance;
  * Browsers can paint handles in their own layer.
  */
@@ -161,7 +161,6 @@
 
 /* Disabled state;
  */
-
 [disabled] .noUi-connect {
   background: #B8B8B8;
 }
@@ -369,7 +368,6 @@
   transform: rotate(135deg);
 }
 
-
 .noUi-target.noUi-vertical .noUi-tooltip {
   position: absolute;
   height: 30px;
@@ -403,4 +401,4 @@
 .noUi-horizontal .noUi-active .noUi-tooltip span,
 .noUi-vertical .noUi-active .noUi-tooltip span {
   opacity: 1;
-}
+}

package/js/forms.js

@@ -1,9 +1,23 @@
 (function($) {
+  const TEXT_BASED_INPUT_SELECTOR = [
+    'input:not([type])',
+    'input[type=text]',
+    'input[type=password]',
+    'input[type=email]',
+    'input[type=url]',
+    'input[type=tel]',
+    'input[type=number]',
+    'input[type=search]',
+    'input[type=date]',
+    'input[type=time]',
+    'input[type=month]',
+    'input[type=datetime-local]',
+    'textarea'
+  ].join(',');
+
   // Function to update labels of text fields
   M.updateTextFields = function() {
-    let input_selector =
-      'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea';
-    $(input_selector).each(function(element, index) {
+    $(TEXT_BASED_INPUT_SELECTOR).each(function(element, index) {
       let $this = $(this);
       if (
         element.value.length > 0 ||
@@ -138,12 +152,8 @@
   };
 
   $(document).ready(function() {
-    // Text based inputs
-    let input_selector =
-      'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea';
-
     // Add active if form auto complete
-    $(document).on('change', input_selector, function() {
+    $(document).on('change', TEXT_BASED_INPUT_SELECTOR, function() {
       if (this.value.length !== 0 || $(this).attr('placeholder') !== null) {
         $(this)
           .siblings('label')
@@ -162,10 +172,10 @@
       let formReset = $(e.target);
       if (formReset.is('form')) {
         formReset
-          .find(input_selector)
+          .find(TEXT_BASED_INPUT_SELECTOR)
           .removeClass('valid')
           .removeClass('invalid');
-        formReset.find(input_selector).each(function(e) {
+        formReset.find(TEXT_BASED_INPUT_SELECTOR).each(function(e) {
           if (this.value.length) {
             $(this)
               .siblings('label')
@@ -192,7 +202,7 @@
     document.addEventListener(
       'focus',
       function(e) {
-        if ($(e.target).is(input_selector)) {
+        if ($(e.target).is(TEXT_BASED_INPUT_SELECTOR)) {
           $(e.target)
             .siblings('label, .prefix')
             .addClass('active');
@@ -209,7 +219,7 @@
       'blur',
       function(e) {
         let $inputElement = $(e.target);
-        if ($inputElement.is(input_selector)) {
+        if ($inputElement.is(TEXT_BASED_INPUT_SELECTOR)) {
           let selector = '.prefix';
 
           if (

package/js/global.js

@@ -24,7 +24,7 @@ if (typeof define === 'function' && define.amd) {
   exports.default = M;
 }
 
-M.version = '1.0.0';
+M.version = '1.2.0';
 
 M.keys = {
   TAB: 9,
@@ -416,9 +416,13 @@ M.throttle = function(func, wait, options) {
 /* Feature detection */
 var passiveIfSupported = false;
 try {
-    window.addEventListener("test", null, 
-        Object.defineProperty({}, "passive", {
-            get: function() { passiveIfSupported = { passive: false }; }
-        }
-    ));
-} catch(err) {}
+  window.addEventListener(
+    'test',
+    null,
+    Object.defineProperty({}, 'passive', {
+      get: function() {
+        passiveIfSupported = { passive: false };
+      }
+    })
+  );
+} catch (err) {}

package/js/select.js

@@ -15,6 +15,8 @@
       this.isMultiple = this.$el.prop('multiple');
       this.el.tabIndex = -1;
       this._values = [];
+      this.labelEl = null;
+      this._labelFor = false;
       this._setupDropdown();
       this._setupEventHandlers();
     }
@@ -29,6 +31,8 @@
       return domElem.M_FormSelect;
     }
     destroy() {
+      // Returns label to its original owner
+      if (this._labelFor) this.labelEl.setAttribute("for", this.el.id);
       this._removeEventHandlers();
       this._removeDropdown();
       this.el.M_FormSelect = undefined;
@@ -41,6 +45,9 @@
         .find('li:not(.optgroup)')
         .each((el) => {
           el.addEventListener('click', this._handleOptionClickBound);
+          el.addEventListener('keydown', (e) => {
+            if (e.key === " " || e.key === "Enter") this._handleOptionClickBound(e);
+          });
         });
       this.el.addEventListener('change', this._handleSelectChangeBound);
       this.input.addEventListener('click', this._handleInputClickBound);
@@ -95,7 +102,7 @@
       if (!this.isMultiple) this.dropdown.close();
     }
     _handleInputClick() {
-      if (this.dropdown && this.dropdown.isOpen) {
+      if (this.dropdown && this.dropdown.isOpen) {  
         this._setValueToInput();
         this._setSelectedStates();
       }
@@ -119,6 +126,9 @@
       $(this.dropdownOptions).addClass(
         'dropdown-content select-dropdown ' + (this.isMultiple ? 'multiple-select-dropdown' : '')
       );
+      this.dropdownOptions.setAttribute("role", "listbox");
+      this.dropdownOptions.setAttribute("aria-required", this.el.hasAttribute("required"));
+      this.dropdownOptions.setAttribute("aria-multiselectable", this.isMultiple);
 
       // Create dropdown structure
       if (this.$selectOptions.length) {
@@ -133,18 +143,23 @@
           } else if ($(realOption).is('optgroup')) {
             // Optgroup
             const selectOptions = $(realOption).children('option');
-            $(this.dropdownOptions).append(
-              $(
-                '<li class="optgroup"><span>' + realOption.getAttribute('label') + '</span></li>'
-              )[0]
-            );
+            let lId = "opt-group-" + M.guid();
+            let groupParent = $(
+              `<li class="optgroup" role="group" aria-labelledby="${lId}" tabindex="-1"><span id="${lId}" role="presentation">${realOption.getAttribute('label')}</span></li>`
+            )[0];
+            let groupChildren = [];
+            $(this.dropdownOptions).append(groupParent);
             selectOptions.each((realOption) => {
               const virtualOption = this._createAndAppendOptionWithIcon(
                 realOption,
                 'optgroup-option'
               );
+              let cId = "opt-child-" + M.guid();
+              virtualOption.id = cId;
+              groupChildren.push(cId);
               this._addOptionToValues(realOption, virtualOption);
             });
+            groupParent.setAttribute("aria-owns", groupChildren.join(" "));
           }
         });
       }
@@ -152,18 +167,62 @@
 
       // Add input dropdown
       this.input = document.createElement('input');
+      this.input.id = "m_select-input-" + M.guid();
       $(this.input).addClass('select-dropdown dropdown-trigger');
       this.input.setAttribute('type', 'text');
       this.input.setAttribute('readonly', 'true');
       this.input.setAttribute('data-target', this.dropdownOptions.id);
+      this.input.setAttribute('aria-readonly', 'true');
       if (this.el.disabled) $(this.input).prop('disabled', 'true');
 
+      // Makes new element to assume HTML's select label and
+      //   aria-attributes, if exists
+      if (this.el.hasAttribute("aria-labelledby")){
+        this.labelEl = document.getElementById(this.el.getAttribute("aria-labelledby"));
+      }
+      else if (this.el.id != ""){
+        let lbl = $(`label[for='${this.el.id}']`);
+        if (lbl.length){
+          this.labelEl = lbl[0];
+          this.labelEl.removeAttribute("for");
+          this._labelFor = true;
+        }
+      }
+      // Tries to find a valid label in parent element
+      if (!this.labelEl){
+        let el = this.el.parentElement;
+        if (el) el = el.getElementsByTagName("label")[0];
+        if (el) this.labelEl = el;
+      }
+      if (this.labelEl && this.labelEl.id == ""){
+        this.labelEl.id = "m_select-label-" + M.guid();
+      }
+
+      if (this.labelEl){
+        this.labelEl.setAttribute("for", this.input.id);
+        this.dropdownOptions.setAttribute("aria-labelledby", this.labelEl.id);
+      }
+      else this.dropdownOptions.setAttribute("aria-label", "");
+
+      let attrs = this.el.attributes;
+      for (let i = 0; i < attrs.length; ++i){
+        const attr = attrs[i];
+        if (attr.name.startsWith("aria-"))
+          this.input.setAttribute(attr.name, attr.value);
+      }
+
+      // Adds aria-attributes to input element
+      this.input.setAttribute("role", "combobox");
+      this.input.setAttribute("aria-owns", this.dropdownOptions.id);
+      this.input.setAttribute("aria-controls", this.dropdownOptions.id);
+      this.input.setAttribute("aria-expanded", false);
+
       $(this.wrapper).prepend(this.input);
       this._setValueToInput();
 
       // Add caret
       let dropdownIcon = $(
-        '<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'
+        '<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'
       );
       $(this.wrapper).prepend(dropdownIcon[0]);
       // Initialize dropdown
@@ -171,6 +230,7 @@
         let dropdownOptions = $.extend({}, this.options.dropdownOptions);
         dropdownOptions.coverTrigger = false;
         let userOnOpenEnd = dropdownOptions.onOpenEnd;
+        let userOnCloseEnd = dropdownOptions.onCloseEnd;
         // Add callback for centering selected option when dropdown content is scrollable
         dropdownOptions.onOpenEnd = (el) => {
           let selectedOption = $(this.dropdownOptions)
@@ -191,10 +251,20 @@
               this.dropdownOptions.scrollTop = scrollOffset;
             }
           }
+          // Sets "aria-expanded" to "true"
+          this.input.setAttribute("aria-expanded", true);
           // Handle user declared onOpenEnd if needed
           if (userOnOpenEnd && typeof userOnOpenEnd === 'function')
             userOnOpenEnd.call(this.dropdown, this.el);
         };
+        // Add callback for reseting "expanded" state
+        dropdownOptions.onCloseEnd = (el) => {
+          // Sets "aria-expanded" to "false"
+          this.input.setAttribute("aria-expanded", false);
+          // Handle user declared onOpenEnd if needed
+          if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
+            userOnCloseEnd.call(this.dropdown, this.el);
+        };
         // Prevent dropdown from closing too early
         dropdownOptions.closeOnClick = false;
         this.dropdown = M.Dropdown.init(this.input, dropdownOptions);
@@ -216,7 +286,11 @@
     }
     _createAndAppendOptionWithIcon(realOption, type) {
       const li = document.createElement('li');
-      if (realOption.disabled) li.classList.add('disabled');
+      li.setAttribute("role", "option");
+      if (realOption.disabled){
+        li.classList.add('disabled');
+        li.setAttribute("aria-disabled", true);
+      }
       if (type === 'optgroup-option') li.classList.add(type);
       // Text / Checkbox
       const span = document.createElement('span');
@@ -231,6 +305,7 @@
       const classes = realOption.getAttribute('class');
       if (iconUrl) {
         const img = $(`<img alt="" class="${classes}" src="${iconUrl}">`);
+        img[0].setAttribute("aria-hidden", true);
         li.prepend(img[0]);
       }
       // Check for multiple type
@@ -241,12 +316,14 @@
     _selectValue(value) {
       value.el.selected = true;
       value.optionEl.classList.add('selected');
+      value.optionEl.setAttribute("aria-selected", true);
       const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
       if (checkbox) checkbox.checked = true;
     }
     _deselectValue(value) {
       value.el.selected = false;
       value.optionEl.classList.remove('selected');
+      value.optionEl.setAttribute("aria-selected", false);
       const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
       if (checkbox) checkbox.checked = false;
     }
@@ -290,13 +367,17 @@
           .prop('checked', optionIsSelected);
         if (optionIsSelected) {
           this._activateOption($(this.dropdownOptions), $(value.optionEl));
-        } else $(value.optionEl).removeClass('selected');
+        } else {
+          $(value.optionEl).removeClass('selected');
+          $(value.optionEl).attr("aria-selected", false);
+        }
       });
     }
     _activateOption(ul, li) {
       if (!li) return;
       if (!this.isMultiple) ul.find('li.selected').removeClass('selected');
       $(li).addClass('selected');
+      $(li).attr("aria-selected", true);
     }
 
     getSelectedValues() {

package/js/timepicker.js

@@ -116,14 +116,16 @@
       this._handleClockClickStartBound = this._handleClockClickStart.bind(this);
       this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this);
       this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this);
+      this._inputFromTextFieldBound = this._handleTimeInputEnterKey.bind(this);
 
       this.el.addEventListener('click', this._handleInputClickBound);
       this.el.addEventListener('keydown', this._handleInputKeydownBound);
       this.plate.addEventListener('mousedown', this._handleClockClickStartBound);
       this.plate.addEventListener('touchstart', this._handleClockClickStartBound);
+      this.digitalClock.addEventListener('keyup', this._inputFromTextFieldBound);
 
-      $(this.spanHours).on('click', this.showView.bind(this, 'hours'));
-      $(this.spanMinutes).on('click', this.showView.bind(this, 'minutes'));
+      $(this.inputHours).on('click', this.showView.bind(this, 'hours'));
+      $(this.inputMinutes).on('click', this.showView.bind(this, 'minutes'));
     }
 
     _removeEventHandlers() {
@@ -142,6 +144,13 @@
       }
     }
 
+    _handleTimeInputEnterKey(e) {
+      if (e.which === M.keys.ENTER) {
+        e.preventDefault();
+        this._inputFromTextField();
+      }
+    }
+
     _handleClockClickStart(e) {
       e.preventDefault();
       let clockPlateBR = this.plate.getBoundingClientRect();
@@ -211,7 +220,7 @@
 
       // Append popover to input by default
       const optEl = this.options.container;
-      let containerEl = (optEl instanceof HTMLElement?optEl:document.querySelector(optEl));
+      let containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
       if (this.options.container && !!containerEl) {
         this.$modalEl.appendTo(containerEl);
       } else {
@@ -238,16 +247,17 @@
       this.vibrate = navigator.vibrate
         ? 'vibrate'
         : navigator.webkitVibrate
-          ? 'webkitVibrate'
-          : null;
+        ? 'webkitVibrate'
+        : null;
 
       this._canvas = this.modalEl.querySelector('.timepicker-canvas');
       this.plate = this.modalEl.querySelector('.timepicker-plate');
+      this.digitalClock = this.modalEl.querySelector('.timepicker-display-column');
 
       this.hoursView = this.modalEl.querySelector('.timepicker-hours');
       this.minutesView = this.modalEl.querySelector('.timepicker-minutes');
-      this.spanHours = this.modalEl.querySelector('.timepicker-span-hours');
-      this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes');
+      this.inputHours = this.modalEl.querySelector('.timepicker-input-hours');
+      this.inputMinutes = this.modalEl.querySelector('.timepicker-input-minutes');
       this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm');
       this.footer = this.modalEl.querySelector('.timepicker-footer');
       this.amOrPm = 'PM';
@@ -341,7 +351,7 @@
       if (this.options.twelveHour) {
         for (let i = 1; i < 13; i += 1) {
           let tick = $tick.clone();
-          let radian = i / 6 * Math.PI;
+          let radian = (i / 6) * Math.PI;
           let radius = this.options.outerRadius;
           tick.css({
             left:
@@ -356,7 +366,7 @@
       } else {
         for (let i = 0; i < 24; i += 1) {
           let tick = $tick.clone();
-          let radian = i / 6 * Math.PI;
+          let radian = (i / 6) * Math.PI;
           let inner = i > 0 && i < 13;
           let radius = inner ? this.options.innerRadius : this.options.outerRadius;
           tick.css({
@@ -377,7 +387,7 @@
       // Minutes view
       for (let i = 0; i < 60; i += 5) {
         let tick = $tick.clone();
-        let radian = i / 30 * Math.PI;
+        let radian = (i / 30) * Math.PI;
         tick.css({
           left:
             this.options.dialRadius +
@@ -428,8 +438,8 @@
       }
       this.hours = +value[0] || 0;
       this.minutes = +value[1] || 0;
-      this.spanHours.innerHTML = this.hours;
-      this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes);
+      this.inputHours.value = this.hours;
+      this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);
 
       this._updateAmPmView();
     }
@@ -443,8 +453,8 @@
         hideView = isHours ? this.minutesView : this.hoursView;
       this.currentView = view;
 
-      $(this.spanHours).toggleClass('text-primary', isHours);
-      $(this.spanMinutes).toggleClass('text-primary', !isHours);
+      $(this.inputHours).toggleClass('text-primary', isHours);
+      $(this.inputMinutes).toggleClass('text-primary', !isHours);
 
       // Transition view
       hideView.classList.add('timepicker-dial-out');
@@ -485,6 +495,60 @@
       }
     }
 
+    _inputFromTextField() {
+      const isHours = this.currentView === 'hours';
+
+      if (isHours) {
+        const value = this['inputHours'].value;
+
+        if (value > 0 && value < 13) {
+          this.drawClockFromTimeInput(value, isHours);
+
+          this.showView('minutes', this.options.duration / 2);
+
+          this.hours = value;
+          this.inputMinutes.focus();
+        } else {
+          const hour = new Date().getHours();
+          this['inputHours'].value = hour % 12;
+        }
+      } else {
+        const value = this['inputMinutes'].value;
+
+        if (value >= 0 && value < 60) {
+          this['inputMinutes'].value = Timepicker._addLeadingZero(value);
+
+          this.drawClockFromTimeInput(value, isHours);
+
+          this.minutes = value;
+          this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus();
+        } else {
+          const minutes = new Date().getMinutes();
+          this['inputMinutes'].value = Timepicker._addLeadingZero(minutes);
+        }
+      }
+    }
+
+    drawClockFromTimeInput(value, isHours) {
+      const unit = Math.PI / (isHours ? 6 : 30);
+      const radian = value * unit;
+      let radius;
+
+      if (this.options.twelveHour) {
+        radius = this.options.outerRadius;
+      }
+
+      let cx1 = Math.sin(radian) * (radius - this.options.tickRadius),
+        cy1 = -Math.cos(radian) * (radius - this.options.tickRadius),
+        cx2 = Math.sin(radian) * radius,
+        cy2 = -Math.cos(radian) * radius;
+
+      this.hand.setAttribute('x2', cx1);
+      this.hand.setAttribute('y2', cy1);
+      this.bg.setAttribute('cx', cx2);
+      this.bg.setAttribute('cy', cy2);
+    }
+
     setHand(x, y, roundBy5) {
       let radian = Math.atan2(x, -y),
         isHours = this.currentView === 'hours',
@@ -547,9 +611,9 @@
 
       this[this.currentView] = value;
       if (isHours) {
-        this['spanHours'].innerHTML = value;
+        this['inputHours'].value = value;
       } else {
-        this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value);
+        this['inputMinutes'].value = Timepicker._addLeadingZero(value);
       }
 
       // Set clock hand and others' position
@@ -619,9 +683,9 @@
     '<div class="timepicker-digital-display">',
     '<div class="timepicker-text-container">',
     '<div class="timepicker-display-column">',
-    '<span class="timepicker-span-hours text-primary"></span>',
+    '<input type="text" maxlength="2" autofocus class="timepicker-input-hours text-primary" />',
     ':',
-    '<span class="timepicker-span-minutes"></span>',
+    '<input type="text" maxlength="2" class="timepicker-input-minutes" />',
     '</div>',
     '<div class="timepicker-display-column timepicker-display-am-pm">',
     '<div class="timepicker-span-am-pm"></div>',

package/js/toasts.js

@@ -194,6 +194,9 @@
     _createToast() {
       let toast = document.createElement('div');
       toast.classList.add('toast');
+      toast.setAttribute('role', 'alert');
+      toast.setAttribute('aria-live', 'assertive');
+      toast.setAttribute('aria-atomic', true);
 
       // Add custom classes onto toast
       if (!!this.options.classes.length) {