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

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

Closed
wants to merge 1 commit into from
Closed

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions config/karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ module.exports = function(config) {

// Continuous Integration mode
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
singleRun: true,
autoWatch: false,

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

// you can define custom flags
customLaunchers: {
Expand Down
2 changes: 0 additions & 2 deletions gulp/tasks/karma.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,6 @@ exports.task = function (done) {

if ( args.browsers ) {
karmaConfig.browsers = args.browsers.trim().split(',');
} else {
karmaConfig.browsers = ['Firefox', 'PhantomJS'];
}

if ( args.reporters ) {
Expand Down
1 change: 1 addition & 0 deletions src/components/backdrop/backdrop.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ md-backdrop {
}
&.md-select-backdrop {
z-index: $z-index-dialog + 1;
transition-duration: 0;
}
&.md-dialog-backdrop {
z-index: $z-index-dialog - 1;
Expand Down
6 changes: 3 additions & 3 deletions src/components/bottomSheet/bottomSheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,9 @@ function MdBottomSheetProvider($$interimElementProvider) {
element: element,
cleanup: function cleanup() {
deregister();
parent.off('$md.dragstart', onDragStart)
.off('$md.drag', onDrag)
.off('$md.dragend', onDragEnd);
parent.off('$md.dragstart', onDragStart);
parent.off('$md.drag', onDrag);
parent.off('$md.dragend', onDragEnd);
}
};

Expand Down
48 changes: 26 additions & 22 deletions src/components/dialog/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ angular.module('material.components.dialog', [
function MdDialogDirective($$rAF, $mdTheming) {
return {
restrict: 'E',
link: function (scope, element, attr) {
link: function(scope, element, attr) {
$mdTheming(element);
$$rAF(function () {
$$rAF(function() {
var images;
var content = element[0].querySelector('md-dialog-content');

Expand Down Expand Up @@ -420,10 +420,10 @@ function MdDialogProvider($$interimElementProvider) {
'</md-dialog>'
].join('').replace(/\s\s+/g, ''),
controller: function mdDialogCtrl() {
this.hide = function () {
this.hide = function() {
$mdDialog.hide(true);
};
this.abort = function () {
this.abort = function() {
$mdDialog.cancel();
};
},
Expand All @@ -445,7 +445,7 @@ function MdDialogProvider($$interimElementProvider) {
targetEvent: null,
focusOnOpen: true,
disableParentScroll: true,
transformTemplate: function (template) {
transformTemplate: function(template) {
return '<div class="md-dialog-container">' + template + '</div>';
}
};
Expand All @@ -462,7 +462,7 @@ function MdDialogProvider($$interimElementProvider) {
showBackdrop(scope, element, options);

return dialogPopIn(element, options)
.then(function () {
.then(function() {
activateListeners(element, options);
lockScreenReader(element, options);
focusOnOpen();
Expand Down Expand Up @@ -502,7 +502,7 @@ function MdDialogProvider($$interimElementProvider) {
options.hideBackdrop();

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

Expand All @@ -526,25 +526,22 @@ function MdDialogProvider($$interimElementProvider) {
// back to the same position it expanded from.
options.origin.element = source;
options.origin.bounds = source[0].getBoundingClientRect();
options.origin.focus = function () {
options.origin.focus = function() {
source.focus();
}
}

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

if (options.disableParentScroll) {
options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
}
}

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

if (options.escapeToClose) {
var target = options.parent;
var keyHandlerFn = function (ev) {
var keyHandlerFn = function(ev) {
if (ev.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
ev.stopPropagation();
ev.preventDefault();
Expand All @@ -568,14 +565,14 @@ function MdDialogProvider($$interimElementProvider) {
target.on('keyup', keyHandlerFn);

// Queue remove listeners function
removeListeners.push(function () {
removeListeners.push(function() {
element.off('keyup', keyHandlerFn);
target.off('keyup', keyHandlerFn);
});
}
if (options.clickOutsideToClose) {
var target = element;
var clickHandler = function (ev) {
var clickHandler = function(ev) {
// Only close if we click the flex container outside on the backdrop
if (ev.target === target[0]) {
ev.stopPropagation();
Expand All @@ -589,14 +586,14 @@ function MdDialogProvider($$interimElementProvider) {
target.on('click', clickHandler);

// Queue remove listeners function
removeListeners.push(function () {
removeListeners.push(function() {
target.off('click', clickHandler);
});
}

// Attach specific `remove` listener handler
options.deactivateListeners = function () {
removeListeners.forEach(function (removeFn) {
options.deactivateListeners = function() {
removeListeners.forEach(function(removeFn) {
removeFn();
});
options.deactivateListeners = null;
Expand All @@ -608,6 +605,12 @@ function MdDialogProvider($$interimElementProvider) {
*/
function showBackdrop(scope, element, options) {

if (options.disableParentScroll) {
// !! DO this before creating the backdrop; since disableScrollAround()
// configures the scroll offset; which is used by mdBackDrop postLink()
options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
}

if (options.hasBackdrop) {
options.backdrop = $mdUtil.createBackdrop(scope, "md-dialog-backdrop md-opaque");
$animate.enter(options.backdrop, options.parent);
Expand All @@ -622,6 +625,7 @@ function MdDialogProvider($$interimElementProvider) {
}
if (options.disableParentScroll) {
options.restoreScroll();
delete options.restoreScroll;
}

options.hideBackdrop = null;
Expand Down Expand Up @@ -653,7 +657,7 @@ function MdDialogProvider($$interimElementProvider) {
$mdAria.expect(element, 'aria-label', options.ariaLabel);
}
else {
$mdAria.expectAsync(element, 'aria-label', function () {
$mdAria.expectAsync(element, 'aria-label', function() {
var words = dialogContent.text().split(/\s+/);
if (words.length > 3) words = words.slice(0, 3).concat('...');
return words.join(' ');
Expand All @@ -671,7 +675,7 @@ function MdDialogProvider($$interimElementProvider) {
// get raw DOM node
walkDOM(element[0]);

options.unlockScreenReader = function () {
options.unlockScreenReader = function() {
isHidden = false;
walkDOM(element[0]);

Expand Down Expand Up @@ -737,9 +741,9 @@ function MdDialogProvider($$interimElementProvider) {

return animator
.translate3d(dialogEl, from, to, translateOptions)
.then(function (animateReversal) {
.then(function(animateReversal) {
// Build a reversal translate function synched to this translation...
options.reverseAnimate = function () {
options.reverseAnimate = function() {

delete options.reverseAnimate;
return animateReversal(
Expand Down
Loading