Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit cd52e57

Browse files
ThomasBurlesonThomasBurleson
committed
fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select - disable scroll before creating the backdrop select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). update use of $$rAF and $timeout in Jasmine tests use $animateCss to animate the dropdown leave. Jasmine tests disable animation transitions for Toast and Select BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
1 parent af05235 commit cd52e57

File tree

27 files changed

+2161
-909
lines changed

27 files changed

+2161
-909
lines changed

‎config/karma.conf.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ module.exports = function(config) {
5454

5555
// Continuous Integration mode
5656
// enable / disable watching file and executing tests whenever any file changes
57-
autoWatch: false,
5857
singleRun: true,
58+
autoWatch: false,
5959

6060
// Start these browsers, currently available:
6161
// - Chrome
@@ -65,7 +65,7 @@ module.exports = function(config) {
6565
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
6666
// - PhantomJS
6767
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
68-
browsers: ['PhantomJS','Firefox'],
68+
browsers: ['Chrome','Firefox', 'PhantomJS'],
6969

7070
// you can define custom flags
7171
customLaunchers: {

‎gulp/tasks/karma.js

-2
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ exports.task = function (done) {
3939

4040
if ( args.browsers ) {
4141
karmaConfig.browsers = args.browsers.trim().split(',');
42-
} else {
43-
karmaConfig.browsers = ['Firefox', 'PhantomJS'];
4442
}
4543

4644
if ( args.reporters ) {

‎src/components/backdrop/backdrop.scss

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ md-backdrop {
55
}
66
&.md-select-backdrop {
77
z-index: $z-index-dialog + 1;
8+
transition-duration: 0;
89
}
910
&.md-dialog-backdrop {
1011
z-index: $z-index-dialog - 1;

‎src/components/bottomSheet/bottomSheet.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -215,9 +215,9 @@ function MdBottomSheetProvider($$interimElementProvider) {
215215
element: element,
216216
cleanup: function cleanup() {
217217
deregister();
218-
parent.off('$md.dragstart', onDragStart)
219-
.off('$md.drag', onDrag)
220-
.off('$md.dragend', onDragEnd);
218+
parent.off('$md.dragstart', onDragStart);
219+
parent.off('$md.drag', onDrag);
220+
parent.off('$md.dragend', onDragEnd);
221221
}
222222
};
223223

‎src/components/dialog/dialog.js

+26-22
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ angular.module('material.components.dialog', [
1212
function MdDialogDirective($$rAF, $mdTheming) {
1313
return {
1414
restrict: 'E',
15-
link: function (scope, element, attr) {
15+
link: function(scope, element, attr) {
1616
$mdTheming(element);
17-
$$rAF(function () {
17+
$$rAF(function() {
1818
var images;
1919
var content = element[0].querySelector('md-dialog-content');
2020

@@ -420,10 +420,10 @@ function MdDialogProvider($$interimElementProvider) {
420420
'</md-dialog>'
421421
].join('').replace(/\s\s+/g, ''),
422422
controller: function mdDialogCtrl() {
423-
this.hide = function () {
423+
this.hide = function() {
424424
$mdDialog.hide(true);
425425
};
426-
this.abort = function () {
426+
this.abort = function() {
427427
$mdDialog.cancel();
428428
};
429429
},
@@ -445,7 +445,7 @@ function MdDialogProvider($$interimElementProvider) {
445445
targetEvent: null,
446446
focusOnOpen: true,
447447
disableParentScroll: true,
448-
transformTemplate: function (template) {
448+
transformTemplate: function(template) {
449449
return '<div class="md-dialog-container">' + template + '</div>';
450450
}
451451
};
@@ -462,7 +462,7 @@ function MdDialogProvider($$interimElementProvider) {
462462
showBackdrop(scope, element, options);
463463

464464
return dialogPopIn(element, options)
465-
.then(function () {
465+
.then(function() {
466466
activateListeners(element, options);
467467
lockScreenReader(element, options);
468468
focusOnOpen();
@@ -502,7 +502,7 @@ function MdDialogProvider($$interimElementProvider) {
502502
options.hideBackdrop();
503503

504504
return dialogPopOut(element, options)
505-
.finally(function () {
505+
.finally(function() {
506506
angular.element($document[0].body).removeClass('md-dialog-is-showing');
507507
element.remove();
508508

@@ -526,25 +526,22 @@ function MdDialogProvider($$interimElementProvider) {
526526
// back to the same position it expanded from.
527527
options.origin.element = source;
528528
options.origin.bounds = source[0].getBoundingClientRect();
529-
options.origin.focus = function () {
529+
options.origin.focus = function() {
530530
source.focus();
531531
}
532532
}
533533

534534
// In case the user provides a raw dom element, always wrap it in jqLite
535535
options.parent = angular.element(options.parent || $rootElement);
536536

537-
if (options.disableParentScroll) {
538-
options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
539-
}
540537
}
541538

542539
/**
543540
* Listen for escape keys and outside clicks to auto close
544541
*/
545542
function activateListeners(element, options) {
546543
var removeListeners = [];
547-
var smartClose = function () {
544+
var smartClose = function() {
548545
// Only 'confirm' dialogs have a cancel button... escape/clickOutside will
549546
// cancel or fallback to hide.
550547
var closeFn = ( options.$type == 'alert' ) ? $mdDialog.hide : $mdDialog.cancel;
@@ -554,7 +551,7 @@ function MdDialogProvider($$interimElementProvider) {
554551

555552
if (options.escapeToClose) {
556553
var target = options.parent;
557-
var keyHandlerFn = function (ev) {
554+
var keyHandlerFn = function(ev) {
558555
if (ev.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
559556
ev.stopPropagation();
560557
ev.preventDefault();
@@ -568,14 +565,14 @@ function MdDialogProvider($$interimElementProvider) {
568565
target.on('keyup', keyHandlerFn);
569566

570567
// Queue remove listeners function
571-
removeListeners.push(function () {
568+
removeListeners.push(function() {
572569
element.off('keyup', keyHandlerFn);
573570
target.off('keyup', keyHandlerFn);
574571
});
575572
}
576573
if (options.clickOutsideToClose) {
577574
var target = element;
578-
var clickHandler = function (ev) {
575+
var clickHandler = function(ev) {
579576
// Only close if we click the flex container outside on the backdrop
580577
if (ev.target === target[0]) {
581578
ev.stopPropagation();
@@ -589,14 +586,14 @@ function MdDialogProvider($$interimElementProvider) {
589586
target.on('click', clickHandler);
590587

591588
// Queue remove listeners function
592-
removeListeners.push(function () {
589+
removeListeners.push(function() {
593590
target.off('click', clickHandler);
594591
});
595592
}
596593

597594
// Attach specific `remove` listener handler
598-
options.deactivateListeners = function () {
599-
removeListeners.forEach(function (removeFn) {
595+
options.deactivateListeners = function() {
596+
removeListeners.forEach(function(removeFn) {
600597
removeFn();
601598
});
602599
options.deactivateListeners = null;
@@ -608,6 +605,12 @@ function MdDialogProvider($$interimElementProvider) {
608605
*/
609606
function showBackdrop(scope, element, options) {
610607

608+
if (options.disableParentScroll) {
609+
// !! DO this before creating the backdrop; since disableScrollAround()
610+
// configures the scroll offset; which is used by mdBackDrop postLink()
611+
options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
612+
}
613+
611614
if (options.hasBackdrop) {
612615
options.backdrop = $mdUtil.createBackdrop(scope, "md-dialog-backdrop md-opaque");
613616
$animate.enter(options.backdrop, options.parent);
@@ -622,6 +625,7 @@ function MdDialogProvider($$interimElementProvider) {
622625
}
623626
if (options.disableParentScroll) {
624627
options.restoreScroll();
628+
delete options.restoreScroll;
625629
}
626630

627631
options.hideBackdrop = null;
@@ -653,7 +657,7 @@ function MdDialogProvider($$interimElementProvider) {
653657
$mdAria.expect(element, 'aria-label', options.ariaLabel);
654658
}
655659
else {
656-
$mdAria.expectAsync(element, 'aria-label', function () {
660+
$mdAria.expectAsync(element, 'aria-label', function() {
657661
var words = dialogContent.text().split(/\s+/);
658662
if (words.length > 3) words = words.slice(0, 3).concat('...');
659663
return words.join(' ');
@@ -671,7 +675,7 @@ function MdDialogProvider($$interimElementProvider) {
671675
// get raw DOM node
672676
walkDOM(element[0]);
673677

674-
options.unlockScreenReader = function () {
678+
options.unlockScreenReader = function() {
675679
isHidden = false;
676680
walkDOM(element[0]);
677681

@@ -737,9 +741,9 @@ function MdDialogProvider($$interimElementProvider) {
737741

738742
return animator
739743
.translate3d(dialogEl, from, to, translateOptions)
740-
.then(function (animateReversal) {
744+
.then(function(animateReversal) {
741745
// Build a reversal translate function synched to this translation...
742-
options.reverseAnimate = function () {
746+
options.reverseAnimate = function() {
743747

744748
delete options.reverseAnimate;
745749
return animateReversal(

0 commit comments

Comments
 (0)