mui-sass 0.7.2 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 8400cb1705e8d6109e0cc081cf7ac991cdc518dc
4
- data.tar.gz: 12a9878c235f2022c166764ea2eac6b3b0258a97
3
+ metadata.gz: 7f75a3be48972b8cc3371bb2d20d8cc6a8d972ab
4
+ data.tar.gz: 42237df40e0bf3bd4a5413b757b0b5fe8d3d0851
5
5
  SHA512:
6
- metadata.gz: a730cfc2c2d8da39b41c5fbeb8f8aaeaabfcade04c717ff5e756cac50af9e03b4a803abf66d6f2763108153cd8be4036306369d59226c1e78b7b80bf4dcde39c
7
- data.tar.gz: 42c5d15d505ca317aa1405054864dd1232674dc803b3899cdfdc71f925bc9ccd8b1a0b36a26c26eb46580a9e5e59593eeb0912075cd906c1bf20f1cf32eb8e96
6
+ metadata.gz: 051f9175932d26e558f7108a4249ad2bd51dd036563782c60a514616c0e1b92d70c8a0bad936a4e506fb76932748b61bd1fdcd7f49a1352dfcdf0de3648dcac8
7
+ data.tar.gz: 05b834294eed0b11b2ff24e4aef7f72c1adc368e0a31bbae0415cb7ee1f52973f3850028c5b5d40c4713a62cbadfcdfaef861bb362957cd4e7bb3790a9169e01
data/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## 0.7.4 (2016-09-16)
2
+
3
+ - Update assets to match upstream version
4
+
1
5
  ## 0.7.2 (2016-09-16)
2
6
 
3
7
  - Drop Compass support
@@ -1,5 +1,5 @@
1
1
  module Mui
2
2
  module Sass
3
- VERSION = '0.7.2'
3
+ VERSION = '0.7.4'
4
4
  end
5
5
  end
@@ -58,7 +58,7 @@ module.exports = {
58
58
 
59
59
  var wrapperPadding = 15, // from CSS
60
60
  inputHeight = 32, // from CSS
61
- optionHeight = 42, // from CSS
61
+ rowHeight = 42, // from CSS
62
62
  menuPadding = 8; // from CSS
63
63
 
64
64
 
@@ -66,18 +66,18 @@ var wrapperPadding = 15, // from CSS
66
66
  * Menu position/size/scroll helper
67
67
  * @returns {Object} Object with keys 'height', 'top', 'scrollTop'
68
68
  */
69
- function getMenuPositionalCSSFn(wrapperEl, numOptions, currentIndex) {
69
+ function getMenuPositionalCSSFn(wrapperEl, numRows, selectedRow) {
70
70
  var viewHeight = document.documentElement.clientHeight;
71
71
 
72
72
  // determine 'height'
73
- var h = numOptions * optionHeight + 2 * menuPadding,
73
+ var h = numRows * rowHeight + 2 * menuPadding,
74
74
  height = Math.min(h, viewHeight);
75
75
 
76
76
  // determine 'top'
77
77
  var top, initTop, minTop, maxTop;
78
78
 
79
- initTop = (menuPadding + optionHeight) - (wrapperPadding + inputHeight);
80
- initTop -= currentIndex * optionHeight;
79
+ initTop = (menuPadding + rowHeight) - (wrapperPadding + inputHeight);
80
+ initTop -= selectedRow * rowHeight;
81
81
 
82
82
  minTop = -1 * wrapperEl.getBoundingClientRect().top;
83
83
  maxTop = (viewHeight - height) + minTop;
@@ -90,9 +90,9 @@ function getMenuPositionalCSSFn(wrapperEl, numOptions, currentIndex) {
90
90
  scrollMax;
91
91
 
92
92
  if (h > viewHeight) {
93
- scrollIdeal = (menuPadding + (currentIndex + 1) * optionHeight) -
93
+ scrollIdeal = (menuPadding + (selectedRow + 1) * rowHeight) -
94
94
  (-1 * top + wrapperPadding + inputHeight);
95
- scrollMax = numOptions * optionHeight + 2 * menuPadding - height;
95
+ scrollMax = numRows * rowHeight + 2 * menuPadding - height;
96
96
  scrollTop = Math.min(scrollIdeal, scrollMax);
97
97
  }
98
98
 
@@ -1318,7 +1318,7 @@ Select.prototype.focusHandler = function(ev) {
1318
1318
 
1319
1319
  var selectEl = this.selectEl,
1320
1320
  wrapperEl = this.wrapperEl,
1321
- origIndex = selectEl.tabIndex,
1321
+ tabIndex = selectEl.tabIndex,
1322
1322
  keydownFn = util.callback(this, 'keydownHandler');
1323
1323
 
1324
1324
  // attach keydown handler
@@ -1327,7 +1327,7 @@ Select.prototype.focusHandler = function(ev) {
1327
1327
  // disable tabfocus once
1328
1328
  selectEl.tabIndex = -1;
1329
1329
  jqLite.one(wrapperEl, 'blur', function() {
1330
- selectEl.tabIndex = origIndex;
1330
+ selectEl.tabIndex = tabIndex;
1331
1331
  jqLite.off(doc, 'keydown', keydownFn);
1332
1332
  });
1333
1333
 
@@ -1392,6 +1392,7 @@ function Menu(wrapperEl, selectEl) {
1392
1392
  util.enableScrollLock();
1393
1393
 
1394
1394
  // instance variables
1395
+ this.indexMap = {};
1395
1396
  this.origIndex = null;
1396
1397
  this.currentIndex = null;
1397
1398
  this.selectEl = selectEl;
@@ -1429,40 +1430,75 @@ function Menu(wrapperEl, selectEl) {
1429
1430
  */
1430
1431
  Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
1431
1432
  var menuEl = doc.createElement('div'),
1432
- optionEls = selectEl.children,
1433
- numOptions = optionEls.length,
1434
- selectedPos = 0,
1435
- optionEl,
1436
- itemEl,
1437
- i;
1433
+ childEls = selectEl.children,
1434
+ indexNum = 0,
1435
+ indexMap = this.indexMap,
1436
+ selectedRow = 0,
1437
+ loopEl,
1438
+ rowEl,
1439
+ optionEls,
1440
+ inGroup,
1441
+ i,
1442
+ iMax,
1443
+ j,
1444
+ jMax;
1438
1445
 
1439
1446
  menuEl.className = menuClass;
1440
1447
 
1441
- // add options
1442
- for (i=0; i < numOptions; i++) {
1443
- optionEl = optionEls[i];
1448
+ for (i=0, iMax=childEls.length; i < iMax; i++) {
1449
+ loopEl = childEls[i];
1444
1450
 
1445
- itemEl = doc.createElement('div');
1446
- itemEl.textContent = optionEl.textContent;
1447
- itemEl._muiPos = i;
1451
+ if (loopEl.tagName === 'OPTGROUP') {
1452
+ // add row item to menu
1453
+ rowEl = doc.createElement('div');
1454
+ rowEl.textContent = loopEl.label;
1455
+ rowEl.className = 'mui-optgroup__label';
1456
+ menuEl.appendChild(rowEl);
1448
1457
 
1449
- if (optionEl.selected) {
1450
- itemEl.setAttribute('class', selectedClass);
1451
- selectedPos = i;
1458
+ inGroup = true;
1459
+ optionEls = loopEl.children;
1460
+ } else {
1461
+ inGroup = false;
1462
+ optionEls = [loopEl];
1452
1463
  }
1453
1464
 
1454
- menuEl.appendChild(itemEl);
1465
+ // loop through option elements
1466
+ for (j=0, jMax=optionEls.length; j < jMax; j++) {
1467
+ loopEl = optionEls[j];
1468
+
1469
+ // add row item to menu
1470
+ rowEl = doc.createElement('div');
1471
+ rowEl.textContent = loopEl.textContent;
1472
+ rowEl._muiIndex = indexNum;
1473
+
1474
+ // handle selected options
1475
+ if (loopEl.selected) {
1476
+ rowEl.className = selectedClass;
1477
+ selectedRow = menuEl.children.length;
1478
+ }
1479
+
1480
+ // handle optgroup options
1481
+ if (inGroup) jqLite.addClass(rowEl, 'mui-optgroup__option');
1482
+
1483
+ menuEl.appendChild(rowEl);
1484
+
1485
+ // add to index map
1486
+ indexMap[indexNum] = rowEl;
1487
+ indexNum += 1;
1488
+ }
1455
1489
  }
1456
1490
 
1457
1491
  // save indices
1458
- this.origIndex = selectedPos;
1459
- this.currentIndex = selectedPos;
1492
+ var selectedIndex = selectEl.selectedIndex;
1493
+
1494
+ this.origIndex = selectedIndex;
1495
+ this.currentIndex = selectedIndex;
1460
1496
 
1461
1497
  // set position
1462
1498
  var props = formlib.getMenuPositionalCSS(
1463
1499
  wrapperEl,
1464
- numOptions,
1465
- selectedPos
1500
+ menuEl.children.length,
1501
+ selectedRow
1466
1502
  );
1467
1503
 
1468
1504
  jqLite.css(menuEl, props);
@@ -1508,13 +1544,13 @@ Menu.prototype.clickHandler = function(ev) {
1508
1544
  // don't allow events to bubble
1509
1545
  ev.stopPropagation();
1510
1546
 
1511
- var pos = ev.target._muiPos;
1547
+ var index = ev.target._muiIndex;
1512
1548
 
1513
1549
  // ignore clicks on non-items
1514
- if (pos === undefined) return;
1550
+ if (index === undefined) return;
1515
1551
 
1516
1552
  // select option
1517
- this.currentIndex = pos;
1553
+ this.currentIndex = index;
1518
1554
  this.selectCurrent();
1519
1555
 
1520
1556
  // destroy menu
@@ -1526,13 +1562,14 @@ Menu.prototype.clickHandler = function(ev) {
1526
1562
  * Increment selected item
1527
1563
  */
1528
1564
  Menu.prototype.increment = function() {
1529
- if (this.currentIndex === this.menuEl.children.length - 1) return;
1565
+ if (this.currentIndex === this.selectEl.length - 1) return;
1530
1566
 
1531
- var optionEls = this.menuEl.children;
1532
-
1533
- jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
1567
+ // un-select old row
1568
+ jqLite.removeClass(this.indexMap[this.currentIndex], selectedClass);
1569
+
1570
+ // select new row
1534
1571
  this.currentIndex += 1;
1535
- jqLite.addClass(optionEls[this.currentIndex], selectedClass);
1572
+ jqLite.addClass(this.indexMap[this.currentIndex], selectedClass);
1536
1573
  }
1537
1574
 
1538
1575
 
@@ -1542,11 +1579,12 @@ Menu.prototype.increment = function() {
1542
1579
  Menu.prototype.decrement = function() {
1543
1580
  if (this.currentIndex === 0) return;
1544
1581
 
1545
- var optionEls = this.menuEl.children;
1582
+ // un-select old row
1583
+ jqLite.removeClass(this.indexMap[this.currentIndex], selectedClass);
1546
1584
 
1547
- jqLite.removeClass(optionEls[this.currentIndex], selectedClass);
1585
+ // select new row
1548
1586
  this.currentIndex -= 1;
1549
- jqLite.addClass(optionEls[this.currentIndex], selectedClass);
1587
+ jqLite.addClass(this.indexMap[this.currentIndex], selectedClass);
1550
1588
  }
1551
1589
 
1552
1590
 
@@ -1555,9 +1593,7 @@ Menu.prototype.decrement = function() {
1555
1593
  */
1556
1594
  Menu.prototype.selectCurrent = function() {
1557
1595
  if (this.currentIndex !== this.origIndex) {
1558
- var optionEls = this.selectEl.children;
1559
- optionEls[this.origIndex].selected = false;
1560
- optionEls[this.currentIndex].selected = true;
1596
+ this.selectEl.selectedIndex = this.currentIndex;
1561
1597
 
1562
1598
  // trigger change event
1563
1599
  util.dispatchEvent(this.selectEl, 'change');
@@ -109,12 +109,21 @@ $xFormLabelLineHeight: floor($mui-label-font-size * 1.25);
109
109
  cursor: pointer;
110
110
  white-space: nowrap;
111
111
 
112
- &:hover {
113
- background-color: mui-color('grey', '300');
114
- }
115
-
116
112
  &.mui--is-selected {
117
113
  background-color: mui-color('grey', '200');
118
114
  }
115
+
116
+ &:not(.mui-optgroup__label):hover {
117
+ background-color: mui-color('grey', '300');
118
+ }
119
119
  }
120
120
  }
121
+
122
+ .mui-optgroup__option {
123
+ text-indent: 1em;
124
+ }
125
+
126
+ .mui-optgroup__label {
127
+ color: $mui-text-dark-secondary;
128
+ font-size: 0.9em;
129
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mui-sass
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.7.2
4
+ version: 0.7.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dmitriy Tarasov