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

Commit dfe1a00

Browse files
devversionjelbourn
authored andcommitted
feat(compiler): support for content elements (#9551)
Base for #9366
1 parent 96e5409 commit dfe1a00

File tree

5 files changed

+485
-185
lines changed

5 files changed

+485
-185
lines changed

src/components/dialog/dialog.js

Lines changed: 7 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,7 @@ function MdDialogProvider($$interimElementProvider) {
562562
return $$interimElementProvider('$mdDialog')
563563
.setDefaults({
564564
methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose',
565-
'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen', 'contentElement'],
565+
'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen'],
566566
options: dialogDefaultOptions
567567
})
568568
.addPreset('alert', {
@@ -647,7 +647,6 @@ function MdDialogProvider($$interimElementProvider) {
647647
clickOutsideToClose: false,
648648
escapeToClose: true,
649649
targetEvent: null,
650-
contentElement: null,
651650
closeTo: null,
652651
openFrom: null,
653652
focusOnOpen: true,
@@ -679,10 +678,6 @@ function MdDialogProvider($$interimElementProvider) {
679678
// Those option changes need to be done, before the compilation has started, because otherwise
680679
// the option changes will be not available in the $mdCompilers locales.
681680
detectTheming(options);
682-
683-
if (options.contentElement) {
684-
options.restoreContentElement = installContentElement(options);
685-
}
686681
}
687682

688683
function beforeShow(scope, element, options, controller) {
@@ -799,14 +794,15 @@ function MdDialogProvider($$interimElementProvider) {
799794
*/
800795
function detachAndClean() {
801796
angular.element($document[0].body).removeClass('md-dialog-is-showing');
802-
// Only remove the element, if it's not provided through the contentElement option.
803-
if (!options.contentElement) {
804-
element.remove();
805-
} else {
797+
798+
// Reverse the container stretch if using a content element.
799+
if (options.contentElement) {
806800
options.reverseContainerStretch();
807-
options.restoreContentElement();
808801
}
809802

803+
// Exposed cleanup function from the $mdCompiler.
804+
options.cleanupElement();
805+
810806
if (!options.$destroy) options.origin.focus();
811807
}
812808
}
@@ -827,56 +823,6 @@ function MdDialogProvider($$interimElementProvider) {
827823

828824
}
829825

830-
/**
831-
* Installs a content element to the current $$interimElement provider options.
832-
* @returns {Function} Function to restore the content element at its old DOM location.
833-
*/
834-
function installContentElement(options) {
835-
var contentEl = options.contentElement;
836-
var restoreFn = null;
837-
838-
if (angular.isString(contentEl)) {
839-
contentEl = document.querySelector(contentEl);
840-
restoreFn = createRestoreFn(contentEl);
841-
} else {
842-
contentEl = contentEl[0] || contentEl;
843-
844-
// When the element is visible in the DOM, then we restore it at close of the dialog.
845-
// Otherwise it will be removed from the DOM after close.
846-
if (document.contains(contentEl)) {
847-
restoreFn = createRestoreFn(contentEl);
848-
} else {
849-
restoreFn = function() {
850-
contentEl.parentNode.removeChild(contentEl);
851-
}
852-
}
853-
}
854-
855-
// Overwrite the options to use the content element.
856-
options.element = angular.element(contentEl);
857-
options.skipCompile = true;
858-
859-
return restoreFn;
860-
861-
function createRestoreFn(element) {
862-
var parent = element.parentNode;
863-
var nextSibling = element.nextElementSibling;
864-
865-
return function() {
866-
if (!nextSibling) {
867-
// When the element didn't had any sibling, then it can be simply appended to the
868-
// parent, because it plays no role, which index it had before.
869-
parent.appendChild(element);
870-
} else {
871-
// When the element had a sibling, which marks the previous position of the element
872-
// in the DOM, we insert it correctly before the sibling, to have the same index as
873-
// before.
874-
parent.insertBefore(element, nextSibling);
875-
}
876-
}
877-
}
878-
}
879-
880826
/**
881827
* Capture originator/trigger/from/to element information (if available)
882828
* and the parent container for the dialog; defaults to the $rootElement

src/components/dialog/dialog.spec.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,39 @@ describe('$mdDialog', function() {
13371337
document.body.removeChild(contentElement[0]);
13381338
});
13391339

1340+
it('should support contentElement as a preset method', function() {
1341+
var contentElement = $compile(
1342+
'<div class="md-dialog-container">' +
1343+
'<md-dialog>Dialog</md-dialog>' +
1344+
'</div>'
1345+
)($rootScope);
1346+
1347+
var parentEl = angular.element('<div>');
1348+
1349+
// Add the contentElement to the DOM.
1350+
document.body.appendChild(contentElement[0]);
1351+
1352+
$mdDialog.show(
1353+
$mdDialog
1354+
.build()
1355+
.contentElement(contentElement)
1356+
.parent(parentEl)
1357+
.escapeToClose(true)
1358+
);
1359+
1360+
$rootScope.$apply();
1361+
runAnimation();
1362+
1363+
expect(contentElement[0].parentNode).toBe(parentEl[0]);
1364+
1365+
$mdDialog.hide();
1366+
runAnimation();
1367+
1368+
expect(contentElement[0].parentNode).toBe(document.body);
1369+
1370+
document.body.removeChild(contentElement[0]);
1371+
});
1372+
13401373
it('should correctly query for a contentElement', function() {
13411374
var contentElement = $compile(
13421375
'<div class="md-dialog-container" id="myId">' +

0 commit comments

Comments
 (0)