update dialogs
This commit is contained in:
Luke Pulverenti
parent
ddcc2b874c
commit
88bf479a19
48 changed files with 214 additions and 249 deletions
|
|
@ -1,82 +1,64 @@
|
|||
.dialogContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999999 !important;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
margin: 0;
|
||||
border-radius: 1px;
|
||||
z-index: 999999 !important;
|
||||
position: fixed;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
height: auto;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
will-change: transform;
|
||||
/* Strict does not work well with actionsheet */
|
||||
contain: style;
|
||||
}
|
||||
|
||||
.dialog-fixedSize {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.centeredDialog {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 70%;
|
||||
max-height: 84%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) and (min-height: 600px) {
|
||||
|
||||
.dialog-mini {
|
||||
top: 20% !important;
|
||||
bottom: 20% !important;
|
||||
left: 25% !important;
|
||||
right: 25% !important;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1280px) and (min-height: 720px) {
|
||||
|
||||
.dialog-medium {
|
||||
top: 10% !important;
|
||||
bottom: 10% !important;
|
||||
left: 10% !important;
|
||||
right: 10% !important;
|
||||
position: static;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.dialog-medium-tall {
|
||||
top: 5% !important;
|
||||
bottom: 5% !important;
|
||||
left: 10% !important;
|
||||
right: 10% !important;
|
||||
position: static;
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.dialog-small {
|
||||
top: 10% !important;
|
||||
bottom: 10% !important;
|
||||
left: 20% !important;
|
||||
right: 20% !important;
|
||||
}
|
||||
|
||||
.dialog-mini {
|
||||
top: 20% !important;
|
||||
bottom: 20% !important;
|
||||
left: 30% !important;
|
||||
right: 30% !important;
|
||||
position: static;
|
||||
width: 60%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.dialog-fullscreen-border {
|
||||
top: 5% !important;
|
||||
bottom: 5% !important;
|
||||
left: 5% !important;
|
||||
right: 5% !important;
|
||||
position: static;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,9 +81,16 @@
|
|||
|
||||
activeElement.focus();
|
||||
|
||||
if (dlg.getAttribute('data-removeonclose') == 'true') {
|
||||
if (dlg.getAttribute('data-removeonclose') != 'false') {
|
||||
removeCenterFocus(dlg);
|
||||
dlg.parentNode.removeChild(dlg);
|
||||
|
||||
var dialogContainer = dlg.dialogContainer;
|
||||
if (dialogContainer) {
|
||||
dialogContainer.parentNode.removeChild(dialogContainer);
|
||||
dlg.dialogContainer = null;
|
||||
} else {
|
||||
dlg.parentNode.removeChild(dlg);
|
||||
}
|
||||
}
|
||||
|
||||
//resolve();
|
||||
|
|
@ -105,26 +112,10 @@
|
|||
|
||||
dlg.classList.remove('hide');
|
||||
|
||||
// Use native methods if available
|
||||
if (dlg.showModal) {
|
||||
if (dlg.getAttribute('modal')) {
|
||||
dlg.showModal();
|
||||
} else {
|
||||
closeOnBackdropClick(dlg);
|
||||
dlg.showModal();
|
||||
}
|
||||
// Undo the auto-focus applied by the native dialog element
|
||||
safeBlur(document.activeElement);
|
||||
} else {
|
||||
addBackdropOverlay(dlg);
|
||||
}
|
||||
addBackdropOverlay(dlg);
|
||||
|
||||
dlg.classList.add('opened');
|
||||
|
||||
if (center) {
|
||||
centerDialog(dlg);
|
||||
}
|
||||
|
||||
if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) {
|
||||
document.body.classList.add('noScroll');
|
||||
removeScrollLockOnClose = true;
|
||||
|
|
@ -141,45 +132,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
function closeOnBackdropClick(dlg) {
|
||||
|
||||
dlg.addEventListener('click', function (event) {
|
||||
var rect = dlg.getBoundingClientRect();
|
||||
var isInDialog = (rect.top <= event.clientY && event.clientY <= (rect.top + rect.height)
|
||||
&& rect.left <= event.clientX && event.clientX <= (rect.left + rect.width));
|
||||
|
||||
if (!isInDialog) {
|
||||
if (dom.parentWithTag(event.target, 'SELECT')) {
|
||||
isInDialog = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isInDialog) {
|
||||
close(dlg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function autoFocus(dlg) {
|
||||
|
||||
// The dialog may have just been created and webComponents may not have completed initialiazation yet.
|
||||
// Without this, seeing some script errors in Firefox
|
||||
// Also for some reason it won't auto-focus without a delay here, still investigating that
|
||||
|
||||
focusManager.autoFocus(dlg);
|
||||
}
|
||||
|
||||
function safeBlur(el) {
|
||||
if (el && el.blur && el != document.body) {
|
||||
el.blur();
|
||||
}
|
||||
}
|
||||
|
||||
function addBackdropOverlay(dlg) {
|
||||
|
||||
var backdrop = document.createElement('div');
|
||||
backdrop.classList.add('dialogBackdrop');
|
||||
dlg.parentNode.insertBefore(backdrop, dlg);
|
||||
|
||||
var backdropParent = dlg.dialogContainer || dlg;
|
||||
backdropParent.parentNode.insertBefore(backdrop, backdropParent);
|
||||
dlg.backdrop = backdrop;
|
||||
|
||||
// Doing this immediately causes the opacity to jump immediately without animating
|
||||
|
|
@ -187,11 +146,29 @@
|
|||
backdrop.classList.add('dialogBackdropOpened');
|
||||
}, 0);
|
||||
|
||||
backdrop.addEventListener('click', function () {
|
||||
close(dlg);
|
||||
dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) {
|
||||
if (!isParent(dlg, e.target)) {
|
||||
close(dlg);
|
||||
}
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
|
||||
function isParent(parent, child) {
|
||||
|
||||
while (child) {
|
||||
|
||||
if (child == parent) {
|
||||
return true;
|
||||
}
|
||||
|
||||
child = child.parentNode;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function isHistoryEnabled(dlg) {
|
||||
return dlg.getAttribute('data-history') == 'true';
|
||||
}
|
||||
|
|
@ -202,6 +179,17 @@
|
|||
globalOnOpenCallback(dlg);
|
||||
}
|
||||
|
||||
var parent = dlg.parentNode;
|
||||
if (parent) {
|
||||
parent.removeChild(dlg);
|
||||
}
|
||||
|
||||
var dialogContainer = document.createElement('div');
|
||||
dialogContainer.classList.add('dialogContainer');
|
||||
dialogContainer.appendChild(dlg);
|
||||
dlg.dialogContainer = dialogContainer;
|
||||
document.body.appendChild(dialogContainer);
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
new dialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
|
||||
|
|
@ -328,7 +316,7 @@
|
|||
var onAnimationFinish = function () {
|
||||
focusManager.pushScope(dlg);
|
||||
if (dlg.getAttribute('data-autofocus') == 'true') {
|
||||
autoFocus(dlg);
|
||||
focusManager.autoFocus(dlg);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -362,12 +350,6 @@
|
|||
return browser.touch;
|
||||
}
|
||||
|
||||
function centerDialog(dlg) {
|
||||
|
||||
dlg.style.marginLeft = (-(dlg.offsetWidth / 2)) + 'px';
|
||||
dlg.style.marginTop = (-(dlg.offsetHeight / 2)) + 'px';
|
||||
}
|
||||
|
||||
function removeBackdrop(dlg) {
|
||||
|
||||
var backdrop = dlg.backdrop;
|
||||
|
|
@ -428,8 +410,8 @@
|
|||
var exitAnimation = options.exitAnimation || defaultExitAnimation;
|
||||
|
||||
// If it's not fullscreen then lower the default animation speed to make it open really fast
|
||||
var entryAnimationDuration = options.entryAnimationDuration || (options.size ? 180 : 280);
|
||||
var exitAnimationDuration = options.exitAnimationDuration || (options.size ? 180 : 280);
|
||||
var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
|
||||
var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
|
||||
|
||||
dlg.animationConfig = {
|
||||
// scale up
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue