mui-sass 0.9.5 → 0.9.6
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 +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
|