mui-sass 0.8.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 812fecbc763791d5dd154a8d92e723f02664c562
-  data.tar.gz: 8d7bc80f1f71e491fc86cfc80564d93663402eec
+  metadata.gz: ca588b1fb4d1950493e5489d4a00fd9afeda6ab8
+  data.tar.gz: a715bffc484664c19a83f46480a4223af0e68a01
 SHA512:
-  metadata.gz: d9e1fea5fbd2f770c09278891da775a9503c82a54fbceba9842e21e6c719429f459ab747cafbbef04ad79b20328f9a0bbb48a84e644b1ef5e9cd2d293d67085f
-  data.tar.gz: 03409819887debb1c88e63538189be9aacff1c385d10b5764c7a45f338cb7af78b8c350ca5ae67b4b83f4f58ed5753c5b0df969c006e3a73e7ce45b79fb3d191
+  metadata.gz: e89a129c0681eb4259e2086f873f68bbddb4d0479fd60ea9985521228e5285d17d1d6f73f7202eecbd29dde77e298179a82fbbff06509dc7b891ec1a3116679f
+  data.tar.gz: 77778a4cf09be21cfd299b933fafbb52612c97321551a20dd71363d241cf339542bf0bca007e60658f3988bf14b04c2f008b911e865fd590c9b29a24966d25ad

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.9.0 (2016-10-21)
+
+- Update assets to match upstream version
+
 ## 0.8.1 (2016-09-21)
 
 - Update assets to match upstream version

data/lib/mui-sass.rb

@@ -2,9 +2,7 @@ module Mui
   module Sass
     class << self
       def load!
-        if defined?(::Compass::Frameworks)
-          register_compass_extension
-        elsif defined?(::Rails)
+        if defined?(::Rails)
           register_rails_engine
         elsif defined?(::Sprockets)
           register_sprockets
@@ -33,18 +31,6 @@ module Mui
           ::Sass.load_paths << stylesheets_path
         end
 
-        def register_compass_extension
-          require 'mui/sass/version'
-
-          ::Compass::Frameworks.register(
-              'mui',
-              version:               Mui::Sass::VERSION,
-              path:                  gem_path,
-              stylesheets_directory: stylesheets_path,
-              templates_directory:   File.join(gem_path, 'templates')
-          )
-        end
-
         def register_rails_engine
           require 'mui/sass/engine'
         end

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.8.1'
+    VERSION = '0.9.0'
   end
 end

data/mui-sass.gemspec

@@ -21,8 +21,8 @@ Gem::Specification.new do |spec|
 
   spec.required_ruby_version = '>= 2.0.0'
 
-  spec.add_runtime_dependency 'sass', '~> 3.4'
+  spec.add_runtime_dependency 'sass', '~> 3.3'
 
-  spec.add_development_dependency 'rspec', '~> 3.5'
-  spec.add_development_dependency 'rails', '~> 4.2'
+  spec.add_development_dependency 'rspec', '~> 3.3'
+  spec.add_development_dependency 'rails', '~> 5.0'
 end

data/vendor/assets/javascripts/mui.js

@@ -289,7 +289,7 @@ function jqLiteOne(element, events, callback, useCapture) {
       if (callback) callback.apply(this, arguments);
 
       // remove wrapper
-      jqLiteOff(element, event, onFn);
+      jqLiteOff(element, event, onFn, useCapture);
     }, useCapture);
   });
 }
@@ -520,6 +520,7 @@ module.exports = {
 
 var config = require('../config'),
     jqLite = require('./jqLite'),
+    animationEvents = 'animationstart mozAnimationStart webkitAnimationStart',
     nodeInsertedCallbacks = [],
     scrollLock = 0,
     scrollLockCls = 'mui-body--scroll-lock',
@@ -591,12 +592,9 @@ function onNodeInsertedFn(callbackFn) {
   nodeInsertedCallbacks.push(callbackFn);
 
   // initalize listeners
-  if (nodeInsertedCallbacks._initialized === undefined) {
-    var doc = document,
-        events = 'animationstart mozAnimationStart webkitAnimationStart';
-
-    jqLite.on(doc, events, animationHandlerFn);
-    nodeInsertedCallbacks._initialized = true;
+  if (!this.initialized) {
+    jqLite.on(document, animationEvents, animationHandlerFn);
+    this.initialized = true;
   }
 }
 
@@ -609,12 +607,11 @@ function animationHandlerFn(ev) {
   // check animation name
   if (ev.animationName !== 'mui-node-inserted') return;
 
-  var el = ev.target;
+  var el = ev.target,
+      i = nodeInsertedCallbacks.length;
 
   // iterate through callbacks
-  for (var i=nodeInsertedCallbacks.length - 1; i >= 0; i--) {
-    nodeInsertedCallbacks[i](el);
-  }
+  while (i--) nodeInsertedCallbacks[i](el);
 }
 
 
@@ -739,6 +736,9 @@ function requestAnimationFrameFn(callback) {
  * Define the module API
  */
 module.exports = {
+  /** List cross-browser animation events */
+  animationEvents: animationEvents,
+
   /** Create callback closures */
   callback: callbackFn,
   
@@ -1286,6 +1286,9 @@ function initialize(selectEl) {
 
   // initialize element
   new Select(selectEl);
+
+  // set flag
+  selectEl._muiJs = true;
 }
 
 
@@ -1294,93 +1297,130 @@ function initialize(selectEl) {
  * @class
  */
 function Select(selectEl) {
+  var wrapperEl = selectEl.parentNode;
+
   // instance variables
   this.selectEl = selectEl;
-  this.wrapperEl = selectEl.parentNode;
+  this.wrapperEl = wrapperEl;
   this.useDefault = false;  // currently unused but let's keep just in case
+  this.isOpen = false;
+  this.menu = null;
 
-  // attach event handlers
-  jqLite.on(selectEl, 'mousedown', util.callback(this, 'mousedownHandler'));
-  jqLite.on(selectEl, 'focus', util.callback(this, 'focusHandler'));
-  jqLite.on(selectEl, 'click', util.callback(this, 'clickHandler'));
-  
-  // make wrapper focusable and fix firefox bug
-  this.wrapperEl.tabIndex = -1;
-  var callbackFn = util.callback(this, 'wrapperFocusHandler');
-  jqLite.on(this.wrapperEl, 'focus', callbackFn);
+  // NOTE: To get around cross-browser issues with <select> behavior we will
+  //       defer focus to the parent element and handle events there
+
+  // make wrapper tab focusable, remove tab focus from <select>
+  if (!selectEl.disabled) wrapperEl.tabIndex = 0;
+  if (!this.useDefault) selectEl.tabIndex = -1;
+
+  var cb = util.callback;
+
+  // prevent built-in menu from opening on <select>
+  jqLite.on(selectEl, 'mousedown', cb(this, 'onInnerMouseDown'));
+
+  // attach event listeners for custom menu
+  jqLite.on(wrapperEl, 'click', cb(this, 'onWrapperClick'));
+  jqLite.on(wrapperEl, 'blur focus', cb(this, 'onWrapperBlurOrFocus'));
+  jqLite.on(wrapperEl, 'keydown', cb(this, 'onWrapperKeyDown'));
+
+  // add element to detect 'disabled' change (using sister element due to 
+  // IE/Firefox issue
+  var el = document.createElement('div');
+  el.className = 'mui-event-trigger';
+  wrapperEl.appendChild(el);
+
+  // handle 'disabled' add/remove
+  jqLite.on(el, util.animationEvents, function(ev) {
+    // no need to propagate
+    ev.stopPropagation();
+
+    if (ev.animationName === 'mui-node-disabled') {
+      ev.target.parentNode.removeAttribute('tabIndex');
+    } else {
+      ev.target.parentNode.tabIndex = 0;
+    }    
+  });
 }
 
 
 /**
- * Disable default dropdown on mousedown.
+ * Dispatch focus and blur events on inner <select> element.
  * @param {Event} ev - The DOM event
  */
-Select.prototype.mousedownHandler = function(ev) {
-  if (ev.button !== 0 || this.useDefault === true) return;
-  ev.preventDefault();
+Select.prototype.onWrapperBlurOrFocus = function(ev) {
+  util.dispatchEvent(this.selectEl, ev.type, false, false);
 }
 
 
+
 /**
- * Handle focus event on select element.
+ * Disable default dropdown on mousedown.
  * @param {Event} ev - The DOM event
  */
-Select.prototype.focusHandler = function(ev) {
-  // check flag
-  if (this.useDefault === true) return;
-
-  var selectEl = this.selectEl,
-      wrapperEl = this.wrapperEl,
-      tabIndex = selectEl.tabIndex,
-      keydownFn = util.callback(this, 'keydownHandler');
-
-  // attach keydown handler
-  jqLite.on(doc, 'keydown', keydownFn);
+Select.prototype.onInnerMouseDown = function(ev) {
+  // only left clicks
+  if (ev.button !== 0 || this.useDefault) return;
 
-  // disable tabfocus once
-  selectEl.tabIndex = -1;
-  jqLite.one(wrapperEl, 'blur', function() {
-    selectEl.tabIndex = tabIndex;
-    jqLite.off(doc, 'keydown', keydownFn);
-  });
-  
-  // defer focus to parent
-  wrapperEl.focus();
+  // prevent built-in menu from opening
+  ev.preventDefault();
 }
 
 
 /**
- * Handle keydown events on doc
+ * Handle keydown events when wrapper is focused
  **/
-Select.prototype.keydownHandler = function(ev) {
+Select.prototype.onWrapperKeyDown = function(ev) {
+  // check flag
+  if (this.useDefault || ev.defaultPrevented) return;
+
   var keyCode = ev.keyCode;
 
-  // spacebar, down, up
-  if (keyCode === 32 || keyCode === 38 || keyCode === 40) {
-    // prevent win scroll
-    ev.preventDefault();
-    
-    if (this.selectEl.disabled !== true) this.renderMenu();
-  }
-}
+  if (this.isOpen === false) {
+    // spacebar, down, up
+    if (keyCode === 32 || keyCode === 38 || keyCode === 40) {
+      ev.preventDefault();
 
+      // open custom menu
+      this.renderMenu();
+    }
 
-/**
- * Handle focus event on wrapper element.
- */
-Select.prototype.wrapperFocusHandler = function() {
-  // firefox bugfix
-  if (this.selectEl.disabled) return this.wrapperEl.blur();
+  } else {
+    var menu = this.menu;
+
+    // tab
+    if (keyCode === 9) return menu.destroy();
+  
+    // escape | up | down | enter
+    if (keyCode === 27 || keyCode === 40 || keyCode === 38 || keyCode === 13) {
+      ev.preventDefault();
+    }
+
+    if (keyCode === 27) {
+      menu.destroy();
+    } else if (keyCode === 40) {
+      menu.increment();
+    } else if (keyCode === 38) {
+      menu.decrement();
+    } else if (keyCode === 13) {
+      menu.selectCurrent();
+      menu.destroy();
+    }
+  }
 }
 
 
 /**
- * Handle click events on select element.
+ * Handle click events on wrapper element.
  * @param {Event} ev - The DOM event
  */
-Select.prototype.clickHandler = function(ev) {
-  // only left clicks
-  if (ev.button !== 0) return;
+Select.prototype.onWrapperClick = function(ev) {
+  // only left clicks, check default and disabled flags
+  if (ev.button !== 0 || this.useDefault || this.selectEl.disabled) return;
+
+  // focus wrapper
+  this.wrapperEl.focus();
+
+  // open menu
   this.renderMenu();
 }
 
@@ -1389,10 +1429,19 @@ Select.prototype.clickHandler = function(ev) {
  * Render options dropdown.
  */
 Select.prototype.renderMenu = function() {
-  // check and reset flag
-  if (this.useDefault === true) return this.useDefault = false;
+  // check flag
+  if (this.isOpen) return;
+
+  // render custom menu and reset flag
+  var self = this;
+  this.menu = new Menu(this.wrapperEl, this.selectEl, function() {
+    self.isOpen = false;
+    self.menu = null;
+    self.wrapperEl.focus();
+  });
 
-  new Menu(this.wrapperEl, this.selectEl);
+  // set flag
+  this.isOpen = true;
 }
 
 
@@ -1400,7 +1449,7 @@ Select.prototype.renderMenu = function() {
  * Creates a new Menu
  * @class
  */
-function Menu(wrapperEl, selectEl) {
+function Menu(wrapperEl, selectEl, wrapperCallbackFn) {
   // add scroll lock
   util.enableScrollLock();
 
@@ -1409,30 +1458,25 @@ function Menu(wrapperEl, selectEl) {
   this.origPos = null;
   this.currentPos = null;
   this.selectEl = selectEl;
+  this.wrapperEl = wrapperEl;
   this.menuEl = this._createMenuEl(wrapperEl, selectEl);
-  this.clickCallbackFn = util.callback(this, 'clickHandler');
-  this.keydownCallbackFn = util.callback(this, 'keydownHandler');
-  this.destroyCallbackFn = util.callback(this, 'destroy');
+
+  var cb = util.callback;
+
+  this.onClickCB = cb(this, 'onClick');
+  this.destroyCB = cb(this, 'destroy');
+  this.wrapperCallbackFn = wrapperCallbackFn;
 
   // add to DOM
   wrapperEl.appendChild(this.menuEl);
   jqLite.scrollTop(this.menuEl, this.menuEl._muiScrollTop);
 
-  // blur active element
-  setTimeout(function() {
-    // ie10 bugfix
-    if (doc.activeElement.nodeName.toLowerCase() !== "body") {
-      doc.activeElement.blur();
-    }
-  }, 0);
-
   // attach event handlers
-  jqLite.on(this.menuEl, 'click', this.clickCallbackFn);
-  jqLite.on(doc, 'keydown', this.keydownCallbackFn);
-  jqLite.on(win, 'resize', this.destroyCallbackFn);
+  jqLite.on(this.menuEl, 'click', this.onClickCB);
+  jqLite.on(win, 'resize', this.destroyCB);
 
   // attach event handler after current event loop exits
-  var fn = this.destroyCallbackFn;
+  var fn = this.destroyCB;
   setTimeout(function() {jqLite.on(doc, 'click', fn);}, 0);
 }
 
@@ -1529,39 +1573,11 @@ Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
 }
 
 
-/**
- * Handle keydown events on doc element.
- * @param {Event} ev - The DOM event
- */
-Menu.prototype.keydownHandler = function(ev) {
-  var keyCode = ev.keyCode;
-
-  // tab
-  if (keyCode === 9) return this.destroy();
-  
-  // escape | up | down | enter
-  if (keyCode === 27 || keyCode === 40 || keyCode === 38 || keyCode === 13) {
-    ev.preventDefault();
-  }
-
-  if (keyCode === 27) {
-    this.destroy();
-  } else if (keyCode === 40) {
-    this.increment();
-  } else if (keyCode === 38) {
-    this.decrement();
-  } else if (keyCode === 13) {
-    this.selectCurrent();
-    this.destroy();
-  }
-}
-
-
 /**
  * Handle click events on menu element.
  * @param {Event} ev - The DOM event
  */
-Menu.prototype.clickHandler = function(ev) {
+Menu.prototype.onClick = function(ev) {
   // don't allow events to bubble
   ev.stopPropagation();
 
@@ -1618,7 +1634,7 @@ Menu.prototype.selectCurrent = function() {
     this.selectEl.selectedIndex = this.itemArray[this.currentPos]._muiIndex;
 
     // trigger change event
-    util.dispatchEvent(this.selectEl, 'change');
+    util.dispatchEvent(this.selectEl, 'change', false, false);
   }
 }
 
@@ -1627,20 +1643,20 @@ Menu.prototype.selectCurrent = function() {
  * Destroy menu and detach event handlers
  */
 Menu.prototype.destroy = function() {
-  // remove element and focus element
-  var parentNode = this.menuEl.parentNode;
-  if (parentNode) parentNode.removeChild(this.menuEl);
-
-  this.selectEl.focus();
-
   // remove scroll lock
   util.disableScrollLock(true);
 
   // remove event handlers
   jqLite.off(this.menuEl, 'click', this.clickCallbackFn);
-  jqLite.off(doc, 'keydown', this.keydownCallbackFn);
-  jqLite.off(doc, 'click', this.destroyCallbackFn);
-  jqLite.off(win, 'resize', this.destroyCallbackFn);
+  jqLite.off(doc, 'click', this.destroyCB);
+  jqLite.off(win, 'resize', this.destroyCB);
+
+  // remove element and execute wrapper callback
+  var parentNode = this.menuEl.parentNode;
+  if (parentNode) {
+    parentNode.removeChild(this.menuEl);
+    this.wrapperCallbackFn();
+  }
 }
 
 
@@ -1652,7 +1668,7 @@ module.exports = {
     var elList = doc.querySelectorAll(cssSelector);
     for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
 
-    // listen for new elements
+    // listen for mui-node-inserted events
     util.onNodeInserted(function(el) {
       if (el.tagName === 'SELECT' &&
           jqLite.hasClass(el.parentNode, wrapperClass)) {

data/vendor/assets/stylesheets/mui/_helpers.scss

@@ -11,6 +11,11 @@
   to { opacity: 1; }
 }
 
+@keyframes mui-node-disabled {
+  from { opacity: 0.99; }
+  to { opacity: 1;}
+}
+
 
 
 

data/vendor/assets/stylesheets/mui/_select.scss

@@ -68,6 +68,18 @@ $xFormLabelLineHeight: floor($mui-label-font-size * 1.25);
       background-color: $mui-input-bg-color-disabled;
       opacity: 1;  // iOS fix for unreadable disabled content
     }
+
+    // disable focus ring in Firefox
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 #000;
+    }
+
+    // prevent IE background color
+    &:focus::-ms-value {
+      background: none;
+      color: $mui-text-dark;
+    }
   }
 
   > label {
@@ -80,6 +92,20 @@ $xFormLabelLineHeight: floor($mui-label-font-size * 1.25);
   color: $mui-input-border-color-focus;
 }
 
+// 'disabled' animations (uses separate element for Firefox/IE)
+.mui-select > select {
+  // re-paint
+  & ~ .mui-event-trigger {
+    @include mui-node-inserted();
+  }
+  
+  // disable
+  &:disabled ~ .mui-event-trigger {
+    @include mui-node-disabled();
+  }
+}
+
+
 .mui-select__menu {
   @extend .mui--z1;
 

data/vendor/assets/stylesheets/mui/mixins/_util.scss

@@ -3,6 +3,11 @@
   animation-name: mui-node-inserted;
 }
 
+@mixin mui-node-disabled() {
+  animation-duration: 0.0001s;
+  animation-name: mui-node-disabled;
+}
+
 // Clearfix
 //
 // For modern browsers

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mui-sass
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-09-21 00:00:00.000000000 Z
+date: 2016-10-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -16,42 +16,42 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.4'
+        version: '3.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.4'
+        version: '3.3'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: '3.3'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: '3.3'
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.2'
+        version: '5.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.2'
+        version: '5.0'
 description: MUI is a lightweight framework that follows Google's Material Design
   guidelines
 email:
@@ -74,8 +74,6 @@ files:
 - lib/mui/sass/engine.rb
 - lib/mui/sass/version.rb
 - mui-sass.gemspec
-- templates/project/manifest.rb
-- templates/project/styles.sass
 - vendor/assets/javascripts/mui.js
 - vendor/assets/stylesheets/_mui.scss
 - vendor/assets/stylesheets/mui/_appbar.scss

data/templates/project/manifest.rb

@@ -1,2 +0,0 @@
-description 'MUI CSS for Sass'
-stylesheet 'styles.sass'

data/templates/project/styles.sass

@@ -1 +0,0 @@
-@import 'mui'