1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update dialogs

This commit is contained in:
Luke Pulverenti 2016-09-08 16:32:30 -04:00
parent ddcc2b874c
commit 88bf479a19
48 changed files with 214 additions and 249 deletions

View file

@ -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