mui-sass 0.7.2 → 0.7.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8400cb1705e8d6109e0cc081cf7ac991cdc518dc
-  data.tar.gz: 12a9878c235f2022c166764ea2eac6b3b0258a97
+  metadata.gz: 7f75a3be48972b8cc3371bb2d20d8cc6a8d972ab
+  data.tar.gz: 42237df40e0bf3bd4a5413b757b0b5fe8d3d0851
 SHA512:
-  metadata.gz: a730cfc2c2d8da39b41c5fbeb8f8aaeaabfcade04c717ff5e756cac50af9e03b4a803abf66d6f2763108153cd8be4036306369d59226c1e78b7b80bf4dcde39c
-  data.tar.gz: 42c5d15d505ca317aa1405054864dd1232674dc803b3899cdfdc71f925bc9ccd8b1a0b36a26c26eb46580a9e5e59593eeb0912075cd906c1bf20f1cf32eb8e96
+  metadata.gz: 051f9175932d26e558f7108a4249ad2bd51dd036563782c60a514616c0e1b92d70c8a0bad936a4e506fb76932748b61bd1fdcd7f49a1352dfcdf0de3648dcac8
+  data.tar.gz: 05b834294eed0b11b2ff24e4aef7f72c1adc368e0a31bbae0415cb7ee1f52973f3850028c5b5d40c4713a62cbadfcdfaef861bb362957cd4e7bb3790a9169e01

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.7.4 (2016-09-16)
+
+- Update assets to match upstream version
+
 ## 0.7.2 (2016-09-16)
 
 - Drop Compass support

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.7.2'
+    VERSION = '0.7.4'
   end
 end

data/vendor/assets/javascripts/mui.js

@@ -58,7 +58,7 @@ module.exports = {
 
 var wrapperPadding = 15,  // from CSS
     inputHeight = 32,  // from CSS
-    optionHeight = 42,  // from CSS
+    rowHeight = 42,  // from CSS
     menuPadding = 8;  // from CSS
 
 
@@ -66,18 +66,18 @@ var wrapperPadding = 15,  // from CSS
  * Menu position/size/scroll helper
  * @returns {Object} Object with keys 'height', 'top', 'scrollTop'
  */
-function getMenuPositionalCSSFn(wrapperEl, numOptions, currentIndex) {
+function getMenuPositionalCSSFn(wrapperEl, numRows, selectedRow) {
   var viewHeight = document.documentElement.clientHeight;
 
   // determine 'height'
-  var h = numOptions * optionHeight + 2 * menuPadding,
+  var h = numRows * rowHeight + 2 * menuPadding,
       height = Math.min(h, viewHeight);
 
   // determine 'top'
   var top, initTop, minTop, maxTop;
 
-  initTop = (menuPadding + optionHeight) - (wrapperPadding + inputHeight);
-  initTop -= currentIndex * optionHeight;
+  initTop = (menuPadding + rowHeight) - (wrapperPadding + inputHeight);
+  initTop -= selectedRow * rowHeight;
 
   minTop = -1 * wrapperEl.getBoundingClientRect().top;
   maxTop = (viewHeight - height) + minTop;
@@ -90,9 +90,9 @@ function getMenuPositionalCSSFn(wrapperEl, numOptions, currentIndex) {
       scrollMax;
 
   if (h > viewHeight) {
-    scrollIdeal = (menuPadding + (currentIndex + 1) * optionHeight) -
+    scrollIdeal = (menuPadding + (selectedRow + 1) * rowHeight) -
       (-1 * top + wrapperPadding + inputHeight);
-    scrollMax = numOptions * optionHeight + 2 * menuPadding - height;
+    scrollMax = numRows * rowHeight + 2 * menuPadding - height;
     scrollTop = Math.min(scrollIdeal, scrollMax);
   }
 
@@ -1318,7 +1318,7 @@ Select.prototype.focusHandler = function(ev) {
 
   var selectEl = this.selectEl,
       wrapperEl = this.wrapperEl,
-      origIndex = selectEl.tabIndex,
+      tabIndex = selectEl.tabIndex,
       keydownFn = util.callback(this, 'keydownHandler');
 
   // attach keydown handler
@@ -1327,7 +1327,7 @@ Select.prototype.focusHandler = function(ev) {
   // disable tabfocus once
   selectEl.tabIndex = -1;
   jqLite.one(wrapperEl, 'blur', function() {
-    selectEl.tabIndex = origIndex;
+    selectEl.tabIndex = tabIndex;
     jqLite.off(doc, 'keydown', keydownFn);
   });
   
@@ -1392,6 +1392,7 @@ function Menu(wrapperEl, selectEl) {
   util.enableScrollLock();
 
   // instance variables
+  this.indexMap = {};
   this.origIndex = null;
   this.currentIndex = null;
   this.selectEl = selectEl;
@@ -1429,40 +1430,75 @@ function Menu(wrapperEl, selectEl) {
  */
 Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
   var menuEl = doc.createElement('div'),
-      optionEls = selectEl.children,
-      numOptions = optionEls.length,
-      selectedPos = 0,
-      optionEl,
-      itemEl,
-      i;
+      childEls = selectEl.children,
+      indexNum = 0,
+      indexMap = this.indexMap,
+      selectedRow = 0,
+      loopEl,
+      rowEl,
+      optionEls,
+      inGroup,
+      i,
+      iMax,
+      j,
+      jMax;
 
   menuEl.className = menuClass;
 
-  // add options
-  for (i=0; i < numOptions; i++) {
-    optionEl = optionEls[i];
+  for (i=0, iMax=childEls.length; i < iMax; i++) {
+    loopEl = childEls[i];
 
-    itemEl = doc.createElement('div');
-    itemEl.textContent = optionEl.textContent;
-    itemEl._muiPos = i;
+    if (loopEl.tagName === 'OPTGROUP') {
+      // add row item to menu
+      rowEl = doc.createElement('div');
+      rowEl.textContent = loopEl.label;
+      rowEl.className = 'mui-optgroup__label';
+      menuEl.appendChild(rowEl);
 
-    if (optionEl.selected) {
-      itemEl.setAttribute('class', selectedClass);
-      selectedPos = i;
+      inGroup = true;
+      optionEls = loopEl.children;
+    } else {
+      inGroup = false;
+      optionEls = [loopEl];
     }
 
-    menuEl.appendChild(itemEl);
+    // loop through option elements
+    for (j=0, jMax=optionEls.length; j < jMax; j++) {
+      loopEl = optionEls[j];
+
+      // add row item to menu
+      rowEl = doc.createElement('div');
+      rowEl.textContent = loopEl.textContent;
+      rowEl._muiIndex = indexNum;
+
+      // handle selected options
+      if (loopEl.selected) {
+        rowEl.className = selectedClass;
+        selectedRow = menuEl.children.length;
+      }
+
+      // handle optgroup options
+      if (inGroup) jqLite.addClass(rowEl, 'mui-optgroup__option');
+
+      menuEl.appendChild(rowEl);
+
+      // add to index map
+      indexMap[indexNum] = rowEl;
+      indexNum += 1;
+    }
   }
 
   // save indices
-  this.origIndex = selectedPos;
-  this.currentIndex = selectedPos;
+  var selectedIndex = selectEl.selectedIndex;
+
+  this.origIndex = selectedIndex;
+  this.currentIndex = selectedIndex;
 
   // set position
   var props = formlib.getMenuPositionalCSS(
     wrapperEl,
-    numOptions,
-    selectedPos
+    menuEl.children.length,
+    selectedRow
   );
 
   jqLite.css(menuEl, props);
@@ -1508,13 +1544,13 @@ Menu.prototype.clickHandler = function(ev) {
   // don't allow events to bubble
   ev.stopPropagation();
 
-  var pos = ev.target._muiPos;
+  var index = ev.target._muiIndex;
 
   // ignore clicks on non-items                                               
-  if (pos === undefined) return;
+  if (index === undefined) return;
 
   // select option
-  this.currentIndex = pos;
+  this.currentIndex = index;
   this.selectCurrent();
 
   // destroy menu
@@ -1526,13 +1562,14 @@ Menu.prototype.clickHandler = function(ev) {
  * Increment selected item
  */
 Menu.prototype.increment = function() {
-  if (this.currentIndex === this.menuEl.children.length - 1) return;
+  if (this.currentIndex === this.selectEl.length - 1) return;
 
-  var optionEls = this.menuEl.children;
-  
-  jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
+  // un-select old row
+  jqLite.removeClass(this.indexMap[this.currentIndex], selectedClass);
+
+  // select new row
   this.currentIndex += 1;
-  jqLite.addClass(optionEls[this.currentIndex], selectedClass);
+  jqLite.addClass(this.indexMap[this.currentIndex], selectedClass);
 }
 
 
@@ -1542,11 +1579,12 @@ Menu.prototype.increment = function() {
 Menu.prototype.decrement = function() {
   if (this.currentIndex === 0) return;
 
-  var optionEls = this.menuEl.children;
+  // un-select old row
+  jqLite.removeClass(this.indexMap[this.currentIndex], selectedClass);
 
-  jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
+  // select new row
   this.currentIndex -= 1;
-  jqLite.addClass(optionEls[this.currentIndex], selectedClass);
+  jqLite.addClass(this.indexMap[this.currentIndex], selectedClass);
 }
 
 
@@ -1555,9 +1593,7 @@ Menu.prototype.decrement = function() {
  */
 Menu.prototype.selectCurrent = function() {
   if (this.currentIndex !== this.origIndex) {
-    var optionEls = this.selectEl.children;
-    optionEls[this.origIndex].selected = false;
-    optionEls[this.currentIndex].selected = true;
+    this.selectEl.selectedIndex = this.currentIndex;
 
     // trigger change event
     util.dispatchEvent(this.selectEl, 'change');

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

@@ -109,12 +109,21 @@ $xFormLabelLineHeight: floor($mui-label-font-size * 1.25);
     cursor: pointer;
     white-space: nowrap;
 
-    &:hover {
-      background-color: mui-color('grey', '300');
-    }
-
     &.mui--is-selected {
       background-color: mui-color('grey', '200');
     }
+
+    &:not(.mui-optgroup__label):hover {
+      background-color: mui-color('grey', '300');
+    }
   }
 }
+
+.mui-optgroup__option {
+  text-indent: 1em;
+}
+
+.mui-optgroup__label {
+  color: $mui-text-dark-secondary;
+  font-size: 0.9em;
+}

metadata

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