mui-sass 0.9.5 → 0.9.6
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 +54 -90
- data/vendor/assets/stylesheets/mui/_ripple.scss +2 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 611f5bb7db3d89f99ea3570b356d32d8df107219
|
4
|
+
data.tar.gz: 017f19e6cf0aef2bc414a5e357276acde6f4d645
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 887aa81ffb2778dd2927c2a4c50de61c8941aa06056d3f2bfa93855c05fef8533245f92365d62156d17e6c1980e8a0c2a421f54f4288c164237fb8947342d69b
|
7
|
+
data.tar.gz: 2ae48990a5eb3d48b211c96046274f218047dc37d8ffec4e6e1e164d1f903fa1aa114502acf68dde772648c3a99ed6e61f233935e86ecf819e757881ac6060fc
|
data/CHANGELOG.md
CHANGED
data/lib/mui/sass/version.rb
CHANGED
@@ -1271,38 +1271,28 @@ function mouseDownHandler(ev) {
|
|
1271
1271
|
// get ripple element offset values and (x, y) position of click
|
1272
1272
|
var offset = jqLite.offset(buttonEl),
|
1273
1273
|
clickEv = (ev.type === 'touchstart') ? ev.touches[0] : ev,
|
1274
|
-
|
1275
|
-
yPos = Math.round(clickEv.pageY - offset.top),
|
1274
|
+
radius,
|
1276
1275
|
diameter;
|
1277
1276
|
|
1278
|
-
// calculate
|
1279
|
-
|
1280
|
-
|
1277
|
+
// calculate radius
|
1278
|
+
radius = Math.sqrt(offset.height * offset.height +
|
1279
|
+
offset.width * offset.width);
|
1281
1280
|
|
1282
|
-
|
1283
|
-
var tEnd = 'translate(-50%, -50%) translate(' + xPos + 'px,' + yPos + 'px)',
|
1284
|
-
tStart = tEnd + ' scale(0.0001, 0.0001)';
|
1281
|
+
diameter = radius * 2 + 'px';
|
1285
1282
|
|
1286
|
-
// set position and
|
1283
|
+
// set position and dimensions
|
1287
1284
|
jqLite.css(rippleEl, {
|
1288
1285
|
width: diameter,
|
1289
1286
|
height: diameter,
|
1290
|
-
|
1291
|
-
|
1292
|
-
transform: tStart
|
1287
|
+
top: Math.round(clickEv.pageY - offset.top - radius) + 'px',
|
1288
|
+
left: Math.round(clickEv.pageX - offset.left - radius) + 'px'
|
1293
1289
|
});
|
1294
1290
|
|
1295
|
-
jqLite.addClass(rippleEl, 'mui--is-visible');
|
1296
1291
|
jqLite.removeClass(rippleEl, 'mui--is-animating');
|
1292
|
+
jqLite.addClass(rippleEl, 'mui--is-visible');
|
1297
1293
|
|
1298
1294
|
// start animation
|
1299
1295
|
util.requestAnimationFrame(function() {
|
1300
|
-
jqLite.css(rippleEl, {
|
1301
|
-
webkitTransform: tEnd,
|
1302
|
-
msTransform: tEnd,
|
1303
|
-
transform: tEnd
|
1304
|
-
});
|
1305
|
-
|
1306
1296
|
jqLite.addClass(rippleEl, 'mui--is-animating');
|
1307
1297
|
});
|
1308
1298
|
}
|
@@ -1374,44 +1364,26 @@ function initialize(selectEl) {
|
|
1374
1364
|
// use default behavior on touch devices
|
1375
1365
|
if ('ontouchstart' in doc.documentElement) return;
|
1376
1366
|
|
1377
|
-
//
|
1378
|
-
|
1379
|
-
|
1380
|
-
// set flag
|
1381
|
-
selectEl._muiJs = true;
|
1382
|
-
}
|
1383
|
-
|
1367
|
+
// NOTE: To get around cross-browser issues with <select> behavior we will
|
1368
|
+
// defer focus to the parent element and handle events there
|
1384
1369
|
|
1385
|
-
/**
|
1386
|
-
* Creates a new Select object
|
1387
|
-
* @class
|
1388
|
-
*/
|
1389
|
-
function Select(selectEl) {
|
1390
1370
|
var wrapperEl = selectEl.parentNode;
|
1391
1371
|
|
1392
|
-
//
|
1393
|
-
|
1394
|
-
|
1395
|
-
this.useDefault = false; // currently unused but let's keep just in case
|
1396
|
-
this.isOpen = false;
|
1397
|
-
this.menu = null;
|
1398
|
-
|
1399
|
-
// NOTE: To get around cross-browser issues with <select> behavior we will
|
1400
|
-
// defer focus to the parent element and handle events there
|
1372
|
+
// initialize variables
|
1373
|
+
wrapperEl._selectEl = selectEl;
|
1374
|
+
wrapperEl._menu = null;
|
1401
1375
|
|
1402
1376
|
// make wrapper tab focusable, remove tab focus from <select>
|
1403
1377
|
if (!selectEl.disabled) wrapperEl.tabIndex = 0;
|
1404
|
-
|
1405
|
-
|
1406
|
-
var cb = util.callback;
|
1378
|
+
selectEl.tabIndex = -1;
|
1407
1379
|
|
1408
1380
|
// prevent built-in menu from opening on <select>
|
1409
|
-
jqLite.on(selectEl, 'mousedown',
|
1381
|
+
jqLite.on(selectEl, 'mousedown', onInnerMouseDown);
|
1410
1382
|
|
1411
1383
|
// attach event listeners for custom menu
|
1412
|
-
jqLite.on(wrapperEl, 'click',
|
1413
|
-
jqLite.on(wrapperEl, 'blur focus',
|
1414
|
-
jqLite.on(wrapperEl, 'keydown',
|
1384
|
+
jqLite.on(wrapperEl, 'click', onWrapperClick);
|
1385
|
+
jqLite.on(wrapperEl, 'blur focus', onWrapperBlurOrFocus);
|
1386
|
+
jqLite.on(wrapperEl, 'keydown', onWrapperKeyDown);
|
1415
1387
|
|
1416
1388
|
// add element to detect 'disabled' change (using sister element due to
|
1417
1389
|
// IE/Firefox issue
|
@@ -1434,49 +1406,46 @@ function Select(selectEl) {
|
|
1434
1406
|
|
1435
1407
|
|
1436
1408
|
/**
|
1437
|
-
*
|
1409
|
+
* Disable default dropdown on mousedown.
|
1438
1410
|
* @param {Event} ev - The DOM event
|
1439
1411
|
*/
|
1440
|
-
|
1441
|
-
|
1442
|
-
|
1412
|
+
function onInnerMouseDown(ev) {
|
1413
|
+
// only left clicks
|
1414
|
+
if (ev.button !== 0) return;
|
1443
1415
|
|
1416
|
+
// prevent built-in menu from opening
|
1417
|
+
ev.preventDefault();
|
1418
|
+
}
|
1444
1419
|
|
1445
1420
|
|
1446
1421
|
/**
|
1447
|
-
*
|
1422
|
+
* Dispatch focus and blur events on inner <select> element.
|
1448
1423
|
* @param {Event} ev - The DOM event
|
1449
1424
|
*/
|
1450
|
-
|
1451
|
-
|
1452
|
-
if (ev.button !== 0 || this.useDefault) return;
|
1453
|
-
|
1454
|
-
// prevent built-in menu from opening
|
1455
|
-
ev.preventDefault();
|
1425
|
+
function onWrapperBlurOrFocus(ev) {
|
1426
|
+
util.dispatchEvent(this._selectEl, ev.type, false, false);
|
1456
1427
|
}
|
1457
1428
|
|
1458
1429
|
|
1459
1430
|
/**
|
1460
1431
|
* Handle keydown events when wrapper is focused
|
1461
1432
|
**/
|
1462
|
-
|
1463
|
-
|
1464
|
-
if (this.useDefault || ev.defaultPrevented) return;
|
1433
|
+
function onWrapperKeyDown(ev) {
|
1434
|
+
if (ev.defaultPrevented) return;
|
1465
1435
|
|
1466
|
-
var keyCode = ev.keyCode
|
1436
|
+
var keyCode = ev.keyCode,
|
1437
|
+
menu = this._menu;
|
1467
1438
|
|
1468
|
-
if (
|
1439
|
+
if (!menu) {
|
1469
1440
|
// spacebar, down, up
|
1470
1441
|
if (keyCode === 32 || keyCode === 38 || keyCode === 40) {
|
1471
1442
|
ev.preventDefault();
|
1472
1443
|
|
1473
1444
|
// open custom menu
|
1474
|
-
|
1445
|
+
renderMenu(this);
|
1475
1446
|
}
|
1476
1447
|
|
1477
1448
|
} else {
|
1478
|
-
var menu = this.menu;
|
1479
|
-
|
1480
1449
|
// tab
|
1481
1450
|
if (keyCode === 9) return menu.destroy();
|
1482
1451
|
|
@@ -1503,35 +1472,30 @@ Select.prototype.onWrapperKeyDown = function(ev) {
|
|
1503
1472
|
* Handle click events on wrapper element.
|
1504
1473
|
* @param {Event} ev - The DOM event
|
1505
1474
|
*/
|
1506
|
-
|
1475
|
+
function onWrapperClick(ev) {
|
1507
1476
|
// only left clicks, check default and disabled flags
|
1508
|
-
if (ev.button !== 0 || this.
|
1477
|
+
if (ev.button !== 0 || this._selectEl.disabled) return;
|
1509
1478
|
|
1510
1479
|
// focus wrapper
|
1511
|
-
this.
|
1480
|
+
this.focus();
|
1512
1481
|
|
1513
1482
|
// open menu
|
1514
|
-
|
1483
|
+
renderMenu(this);
|
1515
1484
|
}
|
1516
1485
|
|
1517
1486
|
|
1518
1487
|
/**
|
1519
|
-
* Render options
|
1488
|
+
* Render options menu
|
1520
1489
|
*/
|
1521
|
-
|
1522
|
-
// check
|
1523
|
-
if (
|
1524
|
-
|
1525
|
-
// render custom menu and reset flag
|
1526
|
-
var self = this;
|
1527
|
-
this.menu = new Menu(this.wrapperEl, this.selectEl, function() {
|
1528
|
-
self.isOpen = false;
|
1529
|
-
self.menu = null;
|
1530
|
-
self.wrapperEl.focus();
|
1531
|
-
});
|
1490
|
+
function renderMenu(wrapperEl) {
|
1491
|
+
// check instance
|
1492
|
+
if (wrapperEl._menu) return;
|
1532
1493
|
|
1533
|
-
//
|
1534
|
-
|
1494
|
+
// render custom menu
|
1495
|
+
wrapperEl._menu = new Menu(wrapperEl, wrapperEl._selectEl, function() {
|
1496
|
+
wrapperEl._menu = null; // de-reference instance
|
1497
|
+
wrapperEl.focus();
|
1498
|
+
});
|
1535
1499
|
}
|
1536
1500
|
|
1537
1501
|
|
@@ -1559,15 +1523,15 @@ function Menu(wrapperEl, selectEl, wrapperCallbackFn) {
|
|
1559
1523
|
|
1560
1524
|
// add to DOM
|
1561
1525
|
wrapperEl.appendChild(this.menuEl);
|
1562
|
-
jqLite.scrollTop(this.menuEl, this.menuEl.
|
1526
|
+
jqLite.scrollTop(this.menuEl, this.menuEl._scrollTop);
|
1563
1527
|
|
1564
1528
|
// attach event handlers
|
1529
|
+
var destroyCB = this.destroyCB;
|
1565
1530
|
jqLite.on(this.menuEl, 'click', this.onClickCB);
|
1566
|
-
jqLite.on(win, 'resize',
|
1531
|
+
jqLite.on(win, 'resize', destroyCB);
|
1567
1532
|
|
1568
1533
|
// attach event handler after current event loop exits
|
1569
|
-
|
1570
|
-
setTimeout(function() {jqLite.on(doc, 'click', fn);}, 0);
|
1534
|
+
setTimeout(function() {jqLite.on(doc, 'click', destroyCB);}, 0);
|
1571
1535
|
}
|
1572
1536
|
|
1573
1537
|
|
@@ -1661,7 +1625,7 @@ Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
|
|
1661
1625
|
);
|
1662
1626
|
|
1663
1627
|
jqLite.css(menuEl, props);
|
1664
|
-
menuEl.
|
1628
|
+
menuEl._scrollTop = props.scrollTop;
|
1665
1629
|
|
1666
1630
|
return menuEl;
|
1667
1631
|
}
|
@@ -1966,7 +1930,7 @@ function initialize(inputEl) {
|
|
1966
1930
|
jqLite.on(inputEl, 'input change', inputHandler);
|
1967
1931
|
|
1968
1932
|
// add dirty class on focus
|
1969
|
-
jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
|
1933
|
+
jqLite.on(inputEl, 'focus', function() {jqLite.addClass(this, dirtyClass);});
|
1970
1934
|
}
|
1971
1935
|
|
1972
1936
|
|
@@ -20,8 +20,10 @@
|
|
20
20
|
border-radius: 50%;
|
21
21
|
opacity: 0;
|
22
22
|
pointer-events: none;
|
23
|
+
transform: scale(0.0001, 0.0001);
|
23
24
|
|
24
25
|
&.mui--is-animating {
|
26
|
+
transform: none;
|
25
27
|
transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1),
|
26
28
|
width 0.3s cubic-bezier(0, 0, 0.2, 1),
|
27
29
|
height 0.3s cubic-bezier(0, 0, 0.2, 1),
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: mui-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.9.
|
4
|
+
version: 0.9.6
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dmitriy Tarasov
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-
|
11
|
+
date: 2016-12-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|