mui-sass 0.6.0 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f15b9a1fa1efa32c0e41fd7afbf1336ef50e1798
-  data.tar.gz: 3fc0508472fb1ca878e4b54286f74dd15b9dc9c6
+  metadata.gz: b9ce817312c52507d3f3802adf56ef3a1909ec19
+  data.tar.gz: c6f73b404233163cc052e563d48d6dfe30612703
 SHA512:
-  metadata.gz: a632e35f027d90eea201310351faf54f79ea151bcc6bc21471513c3cb9c6d854eaf6d07ef07c7562b3e987f5cbe53e2fa3e75a6050fad3305237a035902774c6
-  data.tar.gz: a9d6187606fecbc19fd673a7ef2ca70c5f3472c824303f4c6a32b4a21fe7f4bcd98a1f83f1cd49851d9408ce41feae67b8a1a0b905661099a4a9a1f491b3ec75
+  metadata.gz: 6f588b1fd60efca14a051a91a4a3fb8a37972150babc7eaff6a41e9e156ba69ebf66b58022194cc5644588de6b6554f60dd0fd951d205f5a080f5491835d4d8b
+  data.tar.gz: 244b9acf89a46b989d83cea87a0aa5c654093793698270de56f559f273146304790328cce85247617f7ec9e30e153dad543e293a3ff8e66c3516877f7fde7b9d

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.6.1 (2016-06-27)
+
+- Update assets to match upstream version
+
+Framework version: MUI v0.6.1
+
 ## 0.6.0 (2016-06-27)
 
 - Update assets to match upstream version

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.6.0'
+    VERSION = '0.6.1'
   end
 end

data/vendor/assets/javascripts/mui.js

@@ -217,72 +217,81 @@ function jqLiteType(somevar) {
 /**
  * Attach an event handler to a DOM element
  * @param {Element} element - The DOM element.
- * @param {string} type - The event type name.
+ * @param {string} events - Space separated event names.
  * @param {Function} callback - The callback function.
  * @param {Boolean} useCapture - Use capture flag.
  */
-function jqLiteOn(element, type, callback, useCapture) {
+function jqLiteOn(element, events, callback, useCapture) {
   useCapture = (useCapture === undefined) ? false : useCapture;
 
-  // add to DOM
-  element.addEventListener(type, callback, useCapture);
+  var cache = element._muiEventCache = element._muiEventCache || {};  
+
+  events.split(' ').map(function(event) {
+    // add to DOM
+    element.addEventListener(event, callback, useCapture);
 
-  // add to cache
-  var cache = element._muiEventCache = element._muiEventCache || {};
-  cache[type] = cache[type] || [];
-  cache[type].push([callback, useCapture]);
+    // add to cache
+    cache[event] = cache[event] || [];
+    cache[event].push([callback, useCapture]);
+  });
 }
 
 
 /**
  * Remove an event handler from a DOM element
  * @param {Element} element - The DOM element.
- * @param {string} type - The event type name.
+ * @param {string} events - Space separated event names.
  * @param {Function} callback - The callback function.
  * @param {Boolean} useCapture - Use capture flag.
  */
-function jqLiteOff(element, type, callback, useCapture) {
+function jqLiteOff(element, events, callback, useCapture) {
   useCapture = (useCapture === undefined) ? false : useCapture;
 
   // remove from cache
   var cache = element._muiEventCache = element._muiEventCache || {},
-      argsList = cache[type] || [],
+      argsList,
       args,
       i;
 
-  i = argsList.length;
-  while (i--) {
-    args = argsList[i];
+  events.split(' ').map(function(event) {
+    argsList = cache[event] || [];
 
-    // remove all events if callback is undefined
-    if (callback === undefined ||
-        (args[0] === callback && args[1] === useCapture)) {
+    i = argsList.length;
+    while (i--) {
+      args = argsList[i];
 
-      // remove from cache
-      argsList.splice(i, 1);
-      
-      // remove from DOM
-      element.removeEventListener(type, args[0], args[1]);
+      // remove all events if callback is undefined
+      if (callback === undefined ||
+          (args[0] === callback && args[1] === useCapture)) {
+
+        // remove from cache
+        argsList.splice(i, 1);
+        
+        // remove from DOM
+        element.removeEventListener(event, args[0], args[1]);
+      }
     }
-  }
+  });
 }
 
 
 /**
- * Attach an event hander which will only execute once
+ * Attach an event hander which will only execute once per element per event
  * @param {Element} element - The DOM element.
- * @param {string} type - The event type name.
+ * @param {string} events - Space separated event names.
  * @param {Function} callback - The callback function.
  * @param {Boolean} useCapture - Use capture flag.
  */
-function jqLiteOne(element, type, callback, useCapture) {
-  jqLiteOn(element, type, function onFn(ev) {
-    // execute callback
-    if (callback) callback.apply(this, arguments);
+function jqLiteOne(element, events, callback, useCapture) {
+  events.split(' ').map(function(event) {
+    jqLiteOn(element, event, function onFn(ev) {
+      // execute callback
+      if (callback) callback.apply(this, arguments);
 
-    // remove wrapper
-    jqLiteOff(element, type, onFn);
-  }, useCapture);
+      // remove wrapper
+      jqLiteOff(element, event, onFn);
+    }, useCapture);
+  });
 }
 
 
@@ -595,12 +604,10 @@ function onNodeInsertedFn(callbackFn) {
 
   // initalize listeners
   if (nodeInsertedCallbacks._initialized === undefined) {
-    var doc = document;
-
-    jqLite.on(doc, 'animationstart', animationHandlerFn);
-    jqLite.on(doc, 'mozAnimationStart', animationHandlerFn);
-    jqLite.on(doc, 'webkitAnimationStart', animationHandlerFn);
+    var doc = document,
+        events = 'animationstart mozAnimationStart webkitAnimationStart';
 
+    jqLite.on(doc, events, animationHandlerFn);
     nodeInsertedCallbacks._initialized = true;
   }
 }
@@ -728,6 +735,16 @@ function disableScrollLockFn() {
 }
 
 
+/**
+ * requestAnimationFrame polyfilled
+ * @param {Function} callback - The callback function
+ */
+function requestAnimationFrame(callback) {
+  if (window.requestAnimationFrame) requestAnimationFrame(callback);
+  else setTimeout(callback, 0);
+}
+
+
 /**
  * Define the module API
  */
@@ -759,6 +776,9 @@ module.exports = {
   /** Raise MUI error */
   raiseError: raiseErrorFn,
 
+  /** Request animation frame */
+  requestAnimationFrame: requestAnimationFrame,
+
   /** Support Pointer Events check */
   supportsPointerEvents: supportsPointerEventsFn
 };
@@ -1086,7 +1106,10 @@ var jqLite = require('./lib/jqLite'),
     btnClass = 'mui-btn',
     btnFABClass = 'mui-btn--fab',
     rippleClass = 'mui-ripple-effect',
-    animationName = 'mui-btn-inserted';
+    supportsTouch = 'ontouchstart' in document.documentElement,
+    mouseDownEvents = (supportsTouch) ? 'touchstart' : 'mousedown',
+    mouseUpEvents = (supportsTouch) ? 'touchend' : 'mouseup mouseleave',
+    animationDuration = 600;
 
 
 /**
@@ -1102,49 +1125,102 @@ function initialize(buttonEl) {
   if (buttonEl.tagName === 'INPUT') return;
 
   // attach event handler
-  jqLite.on(buttonEl, 'touchstart', eventHandler);
-  jqLite.on(buttonEl, 'mousedown', eventHandler);
+  jqLite.on(buttonEl, mouseDownEvents, mouseDownHandler);
 }
 
 
 /**
- * Event handler
+ * MouseDown Event handler.
  * @param {Event} ev - The DOM event
  */
-function eventHandler(ev) {
+function mouseDownHandler(ev) {
   // only left clicks
-  if (ev.button !== 0) return;
+  if (ev.type === 'mousedown' && ev.button !== 0) return;
 
   var buttonEl = this;
 
   // exit if button is disabled
   if (buttonEl.disabled === true) return;
 
-  // de-dupe touchstart and mousedown with 100msec flag
-  if (buttonEl.touchFlag === true) {
-    return;
-  } else {
-    buttonEl.touchFlag = true;
+  // add mouseup event to button once
+  if (!buttonEl.muiMouseUp) {
+    jqLite.on(buttonEl, mouseUpEvents, mouseUpHandler);
+    buttonEl.muiMouseUp = true;
+  }
+
+  // create ripple element
+  var rippleEl = createRippleEl(ev, buttonEl);
+
+  buttonEl.appendChild(rippleEl);
+
+  // animate in
+  util.requestAnimationFrame(function() {
+    jqLite.addClass(rippleEl, 'mui--animate-in mui--active');
+  });
+}
+
+
+/**
+ * MouseUp event handler.
+ * @param {Event} ev - The DOM event
+ */
+function mouseUpHandler(ev) {
+  var children = this.children,
+      i = children.length,
+      rippleEls = [],
+      el;
+
+  // animate out ripples
+  while (i--) {
+    el = children[i];
+    if (jqLite.hasClass(el, rippleClass)) {
+      jqLite.addClass(el, 'mui--animate-out');
+      rippleEls.push(el);
+    }
+  }
+
+  // remove ripples after animation
+  if (rippleEls.length) {
     setTimeout(function() {
-      buttonEl.touchFlag = false;
-    }, 100);
+      var i = rippleEls.length,
+          el,
+          parentNode;
+
+      // remove elements
+      while (i--) {
+        el = rippleEls[i];
+        parentNode = el.parentNode;
+        if (parentNode) parentNode.removeChild(el);
+      }
+    }, animationDuration);
   }
+}
 
-  var rippleEl = document.createElement('div');
-  rippleEl.className = rippleClass;
 
+/**
+ * Create ripple element  
+ * @param {Element} - buttonEl - The button element.
+ */
+function createRippleEl(ev, buttonEl) {
+  // get (x, y) position of click
   var offset = jqLite.offset(buttonEl),
-      xPos = ev.pageX - offset.left,
-      yPos = ev.pageY - offset.top,
+      clickEv = (ev.type === 'touchstart') ? ev.touches[0] : ev,
+      xPos = clickEv.pageX - offset.left,
+      yPos = clickEv.pageY - offset.top,
       diameter,
-      radius;
+      radius,
+      rippleEl;
 
-  // get height
+  // choose diameter
   if (jqLite.hasClass(buttonEl, btnFABClass)) diameter = offset.height / 2;
   else diameter = offset.height;
 
+  // create element
+  rippleEl = document.createElement('div'),
+  rippleEl.className = rippleClass;
+
   radius = diameter / 2;
-  
+
   jqLite.css(rippleEl, {
     height: diameter + 'px',
     width: diameter + 'px',
@@ -1152,12 +1228,7 @@ function eventHandler(ev) {
     left: xPos - radius + 'px'
   });
 
-  buttonEl.appendChild(rippleEl);
-  
-  window.setTimeout(function() {
-    var parentNode = rippleEl.parentNode;
-    if (parentNode) parentNode.removeChild(rippleEl);
-  }, 2000);
+  return rippleEl;
 }
 
 
@@ -1734,8 +1805,7 @@ function initialize(inputEl) {
   if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
   else jqLite.addClass(inputEl, emptyClass);
 
-  jqLite.on(inputEl, 'input', inputHandler);
-  jqLite.on(inputEl, 'change', inputHandler);
+  jqLite.on(inputEl, 'input change', inputHandler);
 
   // add dirty class on focus
   jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});

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

@@ -87,7 +87,7 @@
 
   }
   
-  &:active {
+  &:active:hover {
     @include x-btn-box-shadow-active();
   }
   
@@ -120,7 +120,8 @@
 
   &:hover,
   &:focus,
-  &:active {
+  &:active,
+  &:active:hover {
     box-shadow: none;
     background-color: $mui-btn-flat-bg-color-hover;
   }

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

@@ -9,24 +9,30 @@
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
-  opacity: 0;
-  animation: mui-ripple-animation 2s;
-}
 
-@keyframes mui-ripple-animation {
-  from {
-    transform: scale(1);
-    opacity: 0.4;
+  // initial properties
+  opacity: 0.4;
+  transform: scale(1);
+
+  &.mui--animate-in {
+    opacity: 0;
+    transform: scale(7);
+    transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1),
+                opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
   }
-  to {
-    transform: scale(100);
+
+  &.mui--active {
+    opacity: 0.3;
+  }
+
+  &.mui--animate-out {
     opacity: 0;
+    transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
   }
 }
 
 
 
-
 // ============================================================================
 // BUTTON-SPECIFIC STYLES
 // ============================================================================

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mui-sass
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.6.1
 platform: ruby
 authors:
 - Dmitriy Tarasov