mui-sass 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b6acc3165ff8c408c699f44001f77a3e6347c5e0
-  data.tar.gz: 1845264b55d6120e6a44cb9d7a10e3d438b05603
+  metadata.gz: 3a4272e0e52e983333bf417400980642c0b03e7b
+  data.tar.gz: 98a3cbf642c51b9efd3a9928c78dc8bb5395ac97
 SHA512:
-  metadata.gz: 55b35d3b93405b36d376117b064ea399ee870ce9b947002daa861c10fb5e7fc7a06c8a8c76519834e450b1c019ee6723f5958451ca27c3f549e06041fcb23cba
-  data.tar.gz: 1592dd27f1dbcad6ba07e21623679a0e5d94991828fc71f46d2e05b6befbd9d43542a312f6475a55865b5a077c67b0a709604ed5f4b26d2f381fd013e8ce6ca0
+  metadata.gz: 43dff835385fe5d7788173893eca604fb16345cf44ea74aea259873ac9fe3c594dce03f20e408ec8ec70481fd6f4769473ede4cf64483688c1f79025fb65dc90
+  data.tar.gz: e05c667c0e919277f35a882bf1a7aca472c4d2551c2a52b54bedd89e9c3c9eac3eeae9ae8fb91f9b26e6f66f2f349fbab749ee73c78684f91377173f557b0814

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.2.2 (2015-11-22)
+
+- Update assets to match upstream version
+
+Framework version: MUI v0.2.2
+
 ## 0.2.1 (2015-10-17)
 
 - Update assets to match upstream version

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.2.1'
+    VERSION = '0.2.2'
   end
 end

data/vendor/assets/javascripts/mui.js

@@ -138,11 +138,14 @@ var jqLite = require('../lib/jqLite.js'),
     wrapperClass = 'mui-select',
     cssSelector = '.mui-select > select',
     menuClass = 'mui-select__menu',
+    wrapperPadding = 15,  // from CSS
+    inputHeight = 32,  // from CSS
     optionHeight = 42,  // from CSS
     menuPadding = 8,  // from CSS
     doc = document,
     win = window;
 
+
 /**
  * Initialize select element.
  * @param {Element} selectEl - The select element.
@@ -261,7 +264,7 @@ Select.prototype.renderMenu = function() {
   // check and reset flag
   if (this.useDefault === true) return this.useDefault = false;
 
-  new Menu(this.selectEl);
+  new Menu(this.wrapperEl, this.selectEl);
 }
 
 
@@ -269,18 +272,22 @@ Select.prototype.renderMenu = function() {
  * Creates a new Menu
  * @class
  */
-function Menu(selectEl) {
+function Menu(wrapperEl, selectEl) {
+  // add scroll lock
+  util.enableScrollLock();
+
   // instance variables
   this.origIndex = null;
   this.currentIndex = null;
   this.selectEl = selectEl;
-  this.menuEl = this._createMenuEl(selectEl);
+  this.menuEl = this._createMenuEl(wrapperEl, selectEl);
   this.clickCallbackFn = util.callback(this, 'clickHandler');
   this.keydownCallbackFn = util.callback(this, 'keydownHandler');
   this.destroyCallbackFn = util.callback(this, 'destroy');
 
   // add to DOM
-  selectEl.parentNode.appendChild(this.menuEl);
+  wrapperEl.appendChild(this.menuEl);
+  jqLite.scrollTop(this.menuEl, this.menuEl._muiScrollTop);
 
   // blur active element
   setTimeout(function() {
@@ -289,7 +296,7 @@ function Menu(selectEl) {
       doc.activeElement.blur();
     }
   }, 0);
-  
+
   // attach event handlers
   jqLite.on(this.menuEl, 'click', this.clickCallbackFn);
   jqLite.on(doc, 'keydown', this.keydownCallbackFn);
@@ -305,15 +312,14 @@ function Menu(selectEl) {
  * Create menu element
  * @param {Element} selectEl - The select element
  */
-Menu.prototype._createMenuEl = function(selectEl) {
+Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
   var optionEl, itemEl, i, minTop, maxTop, top;
 
   var menuEl = doc.createElement('div'),
       optionList = selectEl.children,
       m = optionList.length,
       selectedPos = 0,
-      idealTop = 13;
-  
+      initTop = (menuPadding + optionHeight) - (wrapperPadding + inputHeight);
 
   // create element
   menuEl.className = menuClass;
@@ -341,26 +347,43 @@ Menu.prototype._createMenuEl = function(selectEl) {
   var viewHeight = doc.documentElement.clientHeight;
 
   // set height (use viewport as maximum height)
-  var height = m * optionHeight + 2 * menuPadding;
+  var height = m * optionHeight + 2 * menuPadding,
+      isOverflow = height > viewHeight;
+
   height = Math.min(height, viewHeight);
   jqLite.css(menuEl, 'height', height + 'px');
 
   // ideal position
-  idealTop += selectedPos * optionHeight;
-  idealTop = -1 * idealTop;
+  initTop -= selectedPos * optionHeight;
 
   // minimum position
-  minTop = -1 * selectEl.getBoundingClientRect().top;
+  minTop = -1 * wrapperEl.getBoundingClientRect().top;
 
   // maximium position
   maxTop = (viewHeight - height) + minTop;
 
   // prevent overflow-y
-  top = Math.max(idealTop, minTop);
+  top = Math.max(initTop, minTop);
   top = Math.min(top, maxTop);
 
   jqLite.css(menuEl, 'top', top + 'px');
 
+  // set menu scroll position
+  if (isOverflow) {
+    var scrollIdeal, scrollMax;
+
+    scrollIdeal = (menuPadding + (selectedPos + 1) * optionHeight) - 
+      (-1 * top + wrapperPadding + inputHeight);
+
+    scrollMax = m * optionHeight + 2 * menuPadding - height;
+
+    menuEl._muiHasOverflow = true;
+    menuEl._muiScrollTop = Math.min(scrollIdeal, scrollMax);
+  } else {
+    menuEl._muiHasOverflow = false;
+    menuEl._muiScrollTop = 0;
+  }
+
   return menuEl;
 }
 
@@ -460,7 +483,10 @@ Menu.prototype.destroy = function() {
   // remove element and focus element
   this.menuEl.parentNode.removeChild(this.menuEl);
   this.selectEl.focus();
-  
+
+  // remove scroll lock
+  util.disableScrollLock();
+
   // remove event handlers
   jqLite.off(this.menuEl, 'click', this.clickCallbackFn);
   jqLite.off(doc, 'keydown', this.keydownCallbackFn);
@@ -596,6 +622,11 @@ module.exports = {
 
 'use strict';
 
+// Global vars
+var gDoc = document,
+    gDocEl = gDoc.documentElement,
+    gWin = window;
+
 
 /**
  * Add a class to an element.
@@ -765,23 +796,63 @@ function jqLiteOne(element, type, callback, useCapture) {
 }
 
 
+/**
+ * Get or set horizontal scroll position
+ * @param {Element} element - The DOM element
+ * @param {number} [value] - The scroll position
+ */
+function jqLiteScrollLeft(element, value) {
+  // get
+  if (value === undefined) {
+    if (element === gWin) {
+      var t = (gWin.pageXOffset || gDocEl.scrollLeft)
+      return t - (gDocEl.clientLeft || 0);
+    } else {
+      return element.scrollLeft;
+    }
+  }
+
+  // set
+  if (element === gWin) gWin.scrollTo(value, jqLiteScrollTop(gWin));
+  else element.scrollLeft = value;
+}
+
+
+/**
+ * Get or set vertical scroll position
+ * @param {Element} element - The DOM element
+ * @param {number} value - The scroll position
+ */
+function jqLiteScrollTop(element, value) {
+  //return _scrollPos(element, 'top', value);
+
+  // get
+  if (value === undefined) {
+    if (element === gWin) {
+      return (gWin.pageYOffset || gDocEl.scrollTop) - (gDocEl.clientTop || 0);
+    } else {
+      return element.scrollTop;
+    }
+  }
+
+  // set
+  if (element === gWin) gWin.scrollTo(jqLiteScrollLeft(gWin), value);
+  else element.scrollTop = value;
+}
+
+
 /**
  * Return object representing top/left offset and element height/width.
  * @param {Element} element - The DOM element.
  */
 function jqLiteOffset(element) {
-  var win = window,
-      docEl = document.documentElement,
-      rect = element.getBoundingClientRect(),
-      viewLeft,
-      viewTop;
-
-  viewLeft = (win.pageXOffset || docEl.scrollLeft) - (docEl.clientLeft || 0);
-  viewTop = (win.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
+  var rect = element.getBoundingClientRect(),
+      scrollTop = jqLiteScrollTop(gWin),
+      scrollLeft = jqLiteScrollLeft(gWin);
 
   return {
-    top: rect.top + viewTop,
-    left: rect.left + viewLeft,
+    top: rect.top + scrollTop,
+    left: rect.left + scrollLeft,
     height: rect.height,
     width: rect.width
   };
@@ -938,7 +1009,13 @@ module.exports = {
   removeClass: jqLiteRemoveClass,
 
   /** Check JavaScript variable instance type */
-  type: jqLiteType
+  type: jqLiteType,
+
+  /** Get or set horizontal scroll position */
+  scrollLeft: jqLiteScrollLeft,
+
+  /** Get or set vertical scroll position */
+  scrollTop: jqLiteScrollTop
 };
 
 },{}],6:[function(require,module,exports){
@@ -953,12 +1030,14 @@ module.exports = {
 var config = require('../config.js'),
     jqLite = require('./jqLite.js'),
     win = window,
-    doc = window.document,
+    doc = document,
     nodeInsertedCallbacks = [],
+    scrollLock = 0,
+    scrollLockPos,
+    scrollLockEl,
     head,
     _supportsPointerEvents;
 
-
 head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement;
 
 
@@ -982,18 +1061,16 @@ function logFn() {
  * @param {string} cssText - The css text.
  */
 function loadStyleFn(cssText) {
-  if (doc.createStyleSheet) {
-    doc.createStyleSheet().cssText = cssText;
-  } else {
-    var e = doc.createElement('style');
-    e.type = 'text/css';
-    
-    if (e.styleSheet) e.styleSheet.cssText = cssText;
-    else e.appendChild(doc.createTextNode(cssText));
+  var e = doc.createElement('style');
+  e.type = 'text/css';
     
-    // add to document
-    head.insertBefore(e, head.firstChild);
-  }
+  if (e.styleSheet) e.styleSheet.cssText = cssText;
+  else e.appendChild(doc.createTextNode(cssText));
+  
+  // add to document
+  head.insertBefore(e, head.firstChild);
+
+  return e;
 }
 
 
@@ -1106,6 +1183,41 @@ function dispatchEventFn(element, eventType, bubbles, cancelable, data) {
 }
 
 
+/**
+ * Turn on window scroll lock.
+ */
+function enableScrollLockFn() {
+  // increment counter
+  scrollLock += 1
+
+  // add lock
+  if (scrollLock === 1) {
+    scrollLockPos = {left: jqLite.scrollLeft(win), top: jqLite.scrollTop(win)};
+    scrollLockEl = loadStyleFn('body{overflow:hidden!important;}');
+    win.scrollTo(scrollLockPos.left, scrollLockPos.top);
+  }
+}
+
+
+/**
+ * Turn off window scroll lock.
+ */
+function disableScrollLockFn() {
+  // ignore
+  if (scrollLock === 0) return;
+
+  // decrement counter
+  scrollLock -= 1
+
+  // remove lock 
+  if (scrollLock === 0) {
+    scrollLockEl.parentNode.removeChild(scrollLockEl);
+    win.scrollTo(scrollLockPos.left, scrollLockPos.top);
+    scrollLockEl = null;
+  }
+}
+
+
 /**
  * Define the module API
  */
@@ -1116,9 +1228,15 @@ module.exports = {
   /** Classnames object to string */
   classNames: classNamesFn,
 
+  /** Disable scroll lock */
+  disableScrollLock: disableScrollLockFn,
+
   /** Dispatch event */
   dispatchEvent: dispatchEventFn,
   
+  /** Enable scroll lock */
+  enableScrollLock: enableScrollLockFn,
+
   /** Log messages to the console when debug is turned on */
   log: logFn,
 
@@ -1244,7 +1362,8 @@ function overlayOn(options, childElement) {
       overlayEl = document.getElementById(overlayId);
     
   // add overlay
-  jqLite.addClass(bodyEl, bodyClass);
+  util.enableScrollLock();
+  //jqLite.addClass(bodyEl, bodyClass);
 
   if (!overlayEl) {
     // create overlayEl
@@ -1301,7 +1420,7 @@ function overlayOff() {
     callbackFn = overlayEl.muiOptions.onclose;
   }
 
-  jqLite.removeClass(document.body, bodyClass);
+  util.disableScrollLock();
 
   // remove option handlers
   removeKeyupHandler();

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

@@ -2,15 +2,31 @@
  * MUI Buttons
  */
 
-$mui-btn-box-shadow-raised: 
-  0 0px 2px rgba(mui-color('black'), 0.12),
-  0 2px 2px rgba(mui-color('black'), 0.20);
-
-$mui-btn-box-shadow-active:
-  0 10px 20px rgba(mui-color('black'), 0.19),
-  0 6px 6px rgba(mui-color('black'), 0.23);
+@mixin x-btn-box-shadow-raised() {
+  box-shadow: 0 0px 2px rgba(mui-color('black'), 0.12),
+              0 2px 2px rgba(mui-color('black'), 0.20);
+  
+  // IE10+
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
+                -1px 0px 2px rgba(mui-color('black'), 0.12),
+                0 0px 2px rgba(mui-color('black'), 0.12),
+                0 2px 2px rgba(mui-color('black'), 0.20);
+  }
+}
 
+@mixin x-btn-box-shadow-active() {
+  box-shadow: 0 10px 20px rgba(mui-color('black'), 0.19),
+              0 6px 6px rgba(mui-color('black'), 0.23);
 
+  // IE10+
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
+                -1px 0px 2px rgba(mui-color('black'), 0.12),
+                0 10px 20px rgba(mui-color('black'), 0.19),
+                0 6px 6px rgba(mui-color('black'), 0.23);
+  }
+}
 
 // ============================================================================
 // DEFAULT-BUTTON
@@ -67,11 +83,12 @@ $mui-btn-box-shadow-active:
 
   &:hover,
   &:focus {
-    box-shadow: $mui-btn-box-shadow-raised;
+    @include x-btn-box-shadow-raised();
+
   }
   
   &:active {
-    box-shadow: $mui-btn-box-shadow-active;
+    @include x-btn-box-shadow-active();
   }
   
   &:disabled,
@@ -115,10 +132,10 @@ $mui-btn-box-shadow-active:
 // ----------------------------------------------------------------------------
 
 .mui-btn--raised {
-  box-shadow: $mui-btn-box-shadow-raised;
+  @include x-btn-box-shadow-raised();
 
   &:active {
-    box-shadow: $mui-btn-box-shadow-active;
+    @include x-btn-box-shadow-active();
   }
 }
 

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

@@ -342,6 +342,12 @@ input[type="checkbox"]:disabled {
   background-color: mui-color('white');
   font-size: $mui-input-font-size;
 
+  // IE10+ bugfix
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    border-left: 1px solid mui-color('black-alpha-12');
+    border-top: 1px solid mui-color('black-alpha-12');
+  }
+
   > div {
     padding: 0 22px;
     height: $mui-input-font-size + 26px;

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

@@ -196,6 +196,14 @@
   overflow: hidden !important;
 }
 
+.mui--overflow-hidden-x {
+  overflow-x: hidden !important;
+}
+
+.mui--overflow-hidden-y {
+  overflow-y: hidden !important;
+}
+
 
 
 // ============================================================================

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

@@ -9,6 +9,14 @@
   margin-bottom: $mui-base-line-height-computed;
   border-radius: $mui-panel-border-radius;
   background-color: $mui-panel-bg-color;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16),
-              0 0px 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 2px 0 rgba(mui-color('black'), 0.16),
+              0 0px 2px 0 rgba(mui-color('black'), 0.12);
+
+  // IE10+ bugfix
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    box-shadow: 0 -1px 2px 0 rgba(mui-color('black'), 0.12),
+                -1px 0px 2px 0 rgba(mui-color('black'), 0.12),
+                0 2px 2px 0 rgba(mui-color('black'), 0.16),
+                0 0px 2px 0 rgba(mui-color('black'), 0.12);
+  }
 }

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

@@ -8,6 +8,7 @@
   margin-bottom: 0;
   background-color: transparent;
   white-space: nowrap;
+  overflow-x: auto;
   
   > li {
     display: inline-block;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mui-sass
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-10-17 00:00:00.000000000 Z
+date: 2015-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass