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 +4 -4
- data/CHANGELOG.md +4 -0
- data/lib/mui/sass/version.rb +1 -1
- data/vendor/assets/javascripts/mui.js +79 -43
- data/vendor/assets/stylesheets/mui/_select.scss +13 -4
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7f75a3be48972b8cc3371bb2d20d8cc6a8d972ab
|
4
|
+
data.tar.gz: 42237df40e0bf3bd4a5413b757b0b5fe8d3d0851
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 051f9175932d26e558f7108a4249ad2bd51dd036563782c60a514616c0e1b92d70c8a0bad936a4e506fb76932748b61bd1fdcd7f49a1352dfcdf0de3648dcac8
|
7
|
+
data.tar.gz: 05b834294eed0b11b2ff24e4aef7f72c1adc368e0a31bbae0415cb7ee1f52973f3850028c5b5d40c4713a62cbadfcdfaef861bb362957cd4e7bb3790a9169e01
|
data/CHANGELOG.md
CHANGED
data/lib/mui/sass/version.rb
CHANGED
@@ -58,7 +58,7 @@ module.exports = {
|
|
58
58
|
|
59
59
|
var wrapperPadding = 15, // from CSS
|
60
60
|
inputHeight = 32, // from CSS
|
61
|
-
|
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,
|
69
|
+
function getMenuPositionalCSSFn(wrapperEl, numRows, selectedRow) {
|
70
70
|
var viewHeight = document.documentElement.clientHeight;
|
71
71
|
|
72
72
|
// determine 'height'
|
73
|
-
var h =
|
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 +
|
80
|
-
initTop -=
|
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 + (
|
93
|
+
scrollIdeal = (menuPadding + (selectedRow + 1) * rowHeight) -
|
94
94
|
(-1 * top + wrapperPadding + inputHeight);
|
95
|
-
scrollMax =
|
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
|
-
|
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 =
|
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
|
-
|
1433
|
-
|
1434
|
-
|
1435
|
-
|
1436
|
-
|
1437
|
-
|
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
|
-
|
1442
|
-
|
1443
|
-
optionEl = optionEls[i];
|
1448
|
+
for (i=0, iMax=childEls.length; i < iMax; i++) {
|
1449
|
+
loopEl = childEls[i];
|
1444
1450
|
|
1445
|
-
|
1446
|
-
|
1447
|
-
|
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
|
-
|
1450
|
-
|
1451
|
-
|
1458
|
+
inGroup = true;
|
1459
|
+
optionEls = loopEl.children;
|
1460
|
+
} else {
|
1461
|
+
inGroup = false;
|
1462
|
+
optionEls = [loopEl];
|
1452
1463
|
}
|
1453
1464
|
|
1454
|
-
|
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
|
-
|
1459
|
-
|
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
|
-
|
1465
|
-
|
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
|
1547
|
+
var index = ev.target._muiIndex;
|
1512
1548
|
|
1513
1549
|
// ignore clicks on non-items
|
1514
|
-
if (
|
1550
|
+
if (index === undefined) return;
|
1515
1551
|
|
1516
1552
|
// select option
|
1517
|
-
this.currentIndex =
|
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.
|
1565
|
+
if (this.currentIndex === this.selectEl.length - 1) return;
|
1530
1566
|
|
1531
|
-
|
1532
|
-
|
1533
|
-
|
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(
|
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
|
-
|
1582
|
+
// un-select old row
|
1583
|
+
jqLite.removeClass(this.indexMap[this.currentIndex], selectedClass);
|
1546
1584
|
|
1547
|
-
|
1585
|
+
// select new row
|
1548
1586
|
this.currentIndex -= 1;
|
1549
|
-
jqLite.addClass(
|
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
|
-
|
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
|
+
}
|