mui-sass 0.7.2 → 0.7.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|