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

Migration dialogHelper to ES6 modules

Browse source
This commit is contained in:
grafixeyehero 2020-06-17 01:19:59 +03:00
parent 582ea61267
commit 7c8a5d3184
2 changed files with 69 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -97,6 +97,7 @@
"src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js",
"src/components/dialog/dialog.js", "src/components/dialog/dialog.js",
"src/components/dialogHelper/dialogHelper.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",

113
src/components/dialogHelper/dialogHelper.js
View file

@ -1,7 +1,15 @@
define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) { import appRouter from 'appRouter';
'use strict'; import focusManager from 'focusManager';
import browser from 'browser';
import layoutManager from 'layoutManager';
import inputManager from 'inputManager';
import dom from 'dom';
import 'css!./dialoghelper.css';
import 'scrollStyles';
var globalOnOpenCallback; /* eslint-disable indent */
let globalOnOpenCallback;
function enableAnimation() { function enableAnimation() {
@ -25,28 +33,28 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function tryRemoveElement(elem) { function tryRemoveElement(elem) {
var parentNode = elem.parentNode; const parentNode = elem.parentNode;
if (parentNode) { if (parentNode) {
// Seeing crashes in edge webview // Seeing crashes in edge webview
try { try {
parentNode.removeChild(elem); parentNode.removeChild(elem);
} catch (err) { } catch (err) {
console.error('error removing dialog element: ' + err); console.error(`error removing dialog element: ${err}`);
} }
} }
} }
function DialogHashHandler(dlg, hash, resolve) { function DialogHashHandler(dlg, hash, resolve) {
var self = this; const self = this;
self.originalUrl = window.location.href; self.originalUrl = window.location.href;
var activeElement = document.activeElement; const activeElement = document.activeElement;
var removeScrollLockOnClose = false; let removeScrollLockOnClose = false;
function onHashChange(e) { function onHashChange(e) {
var isBack = self.originalUrl === window.location.href; const isBack = self.originalUrl === window.location.href;
if (isBack || !isOpened(dlg)) { if (isBack || !isOpened(dlg)) {
window.removeEventListener('popstate', onHashChange); window.removeEventListener('popstate', onHashChange);
@ -84,7 +92,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
if (!self.closedByBack && isHistoryEnabled(dlg)) { if (!self.closedByBack && isHistoryEnabled(dlg)) {
var state = history.state || {}; const state = history.state || {};
if (state.dialogId === hash) { if (state.dialogId === hash) {
history.back(); history.back();
} }
@ -97,7 +105,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (dlg.getAttribute('data-removeonclose') !== 'false') { if (dlg.getAttribute('data-removeonclose') !== 'false') {
removeCenterFocus(dlg); removeCenterFocus(dlg);
var dialogContainer = dlg.dialogContainer; const dialogContainer = dlg.dialogContainer;
if (dialogContainer) { if (dialogContainer) {
tryRemoveElement(dialogContainer); tryRemoveElement(dialogContainer);
dlg.dialogContainer = null; dlg.dialogContainer = null;
@ -108,7 +116,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
//resolve(); //resolve();
// if we just called history.back(), then use a timeout to allow the history events to fire first // if we just called history.back(), then use a timeout to allow the history events to fire first
setTimeout(function () { setTimeout(() => {
resolve({ resolve({
element: dlg, element: dlg,
closedByBack: self.closedByBack closedByBack: self.closedByBack
@ -118,7 +126,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
var center = !dlg.classList.contains('dialog-fixedSize'); const center = !dlg.classList.contains('dialog-fixedSize');
if (center) { if (center) {
dlg.classList.add('centeredDialog'); dlg.classList.add('centeredDialog');
} }
@ -141,7 +149,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
animateDialogOpen(dlg); animateDialogOpen(dlg);
if (isHistoryEnabled(dlg)) { if (isHistoryEnabled(dlg)) {
appRouter.pushState({ dialogId: hash }, 'Dialog', '#' + hash); appRouter.pushState({ dialogId: hash }, 'Dialog', `#${hash}`);
window.addEventListener('popstate', onHashChange); window.addEventListener('popstate', onHashChange);
} else { } else {
@ -151,10 +159,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function addBackdropOverlay(dlg) { function addBackdropOverlay(dlg) {
var backdrop = document.createElement('div'); const backdrop = document.createElement('div');
backdrop.classList.add('dialogBackdrop'); backdrop.classList.add('dialogBackdrop');
var backdropParent = dlg.dialogContainer || dlg; const backdropParent = dlg.dialogContainer || dlg;
backdropParent.parentNode.insertBefore(backdrop, backdropParent); backdropParent.parentNode.insertBefore(backdrop, backdropParent);
dlg.backdrop = backdrop; dlg.backdrop = backdrop;
@ -162,7 +170,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
void backdrop.offsetWidth; void backdrop.offsetWidth;
backdrop.classList.add('dialogBackdropOpened'); backdrop.classList.add('dialogBackdropOpened');
dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) { dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
if (e.target === dlg.dialogContainer) { if (e.target === dlg.dialogContainer) {
close(dlg); close(dlg);
} }
@ -170,7 +178,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
passive: true passive: true
}); });
dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) { dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
if (e.target === dlg.dialogContainer) { if (e.target === dlg.dialogContainer) {
// Close the application dialog menu // Close the application dialog menu
close(dlg); close(dlg);
@ -184,26 +192,26 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg.getAttribute('data-history') === 'true'; return dlg.getAttribute('data-history') === 'true';
} }
function open(dlg) { export function open(dlg) {
if (globalOnOpenCallback) { if (globalOnOpenCallback) {
globalOnOpenCallback(dlg); globalOnOpenCallback(dlg);
} }
var parent = dlg.parentNode; const parent = dlg.parentNode;
if (parent) { if (parent) {
parent.removeChild(dlg); parent.removeChild(dlg);
} }
var dialogContainer = document.createElement('div'); const dialogContainer = document.createElement('div');
dialogContainer.classList.add('dialogContainer'); dialogContainer.classList.add('dialogContainer');
dialogContainer.appendChild(dlg); dialogContainer.appendChild(dlg);
dlg.dialogContainer = dialogContainer; dlg.dialogContainer = dialogContainer;
document.body.appendChild(dialogContainer); document.body.appendChild(dialogContainer);
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
new DialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve); new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve);
}); });
} }
@ -213,7 +221,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return !dlg.classList.contains('hide'); return !dlg.classList.contains('hide');
} }
function close(dlg) { export function close(dlg) {
if (isOpened(dlg)) { if (isOpened(dlg)) {
if (isHistoryEnabled(dlg)) { if (isHistoryEnabled(dlg)) {
@ -233,7 +241,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
cancelable: false cancelable: false
})); }));
var onAnimationFinish = function () { const onAnimationFinish = () => {
focusManager.popScope(dlg); focusManager.popScope(dlg);
dlg.classList.add('hide'); dlg.classList.add('hide');
@ -249,7 +257,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function animateDialogOpen(dlg) { function animateDialogOpen(dlg) {
var onAnimationFinish = function () { const onAnimationFinish = () => {
focusManager.pushScope(dlg); focusManager.pushScope(dlg);
if (dlg.getAttribute('data-autofocus') === 'true') { if (dlg.getAttribute('data-autofocus') === 'true') {
@ -264,7 +272,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (enableAnimation()) { if (enableAnimation()) {
var onFinish = function () { const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true once: true
}); });
@ -283,24 +291,24 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (enableAnimation()) { if (enableAnimation()) {
var animated = true; let animated = true;
switch (dlg.animationConfig.exit.name) { switch (dlg.animationConfig.exit.name) {
case 'fadeout': case 'fadeout':
dlg.style.animation = 'fadeout ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; dlg.style.animation = `fadeout ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
break; break;
case 'scaledown': case 'scaledown':
dlg.style.animation = 'scaledown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; dlg.style.animation = `scaledown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
break; break;
case 'slidedown': case 'slidedown':
dlg.style.animation = 'slidedown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; dlg.style.animation = `slidedown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
break; break;
default: default:
animated = false; animated = false;
break; break;
} }
var onFinish = function () { const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true once: true
}); });
@ -318,7 +326,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
onAnimationFinish(); onAnimationFinish();
} }
var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
function shouldLockDocumentScroll(options) { function shouldLockDocumentScroll(options) {
@ -343,7 +351,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function removeBackdrop(dlg) { function removeBackdrop(dlg) {
var backdrop = dlg.backdrop; const backdrop = dlg.backdrop;
if (!backdrop) { if (!backdrop) {
return; return;
@ -351,7 +359,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.backdrop = null; dlg.backdrop = null;
var onAnimationFinish = function () { const onAnimationFinish = () => {
tryRemoveElement(backdrop); tryRemoveElement(backdrop);
}; };
@ -368,20 +376,20 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(scrollHelper => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function createDialog(options) { export function createDialog(options) {
options = options || {}; options = options || {};
// If there's no native dialog support, use a plain div // If there's no native dialog support, use a plain div
// Also not working well in samsung tizen browser, content inside not clickable // Also not working well in samsung tizen browser, content inside not clickable
// Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
var dlg = document.createElement('div'); const dlg = document.createElement('div');
dlg.classList.add('focuscontainer'); dlg.classList.add('focuscontainer');
dlg.classList.add('hide'); dlg.classList.add('hide');
@ -406,17 +414,17 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.setAttribute('data-autofocus', 'true'); dlg.setAttribute('data-autofocus', 'true');
} }
var defaultEntryAnimation; let defaultEntryAnimation;
var defaultExitAnimation; let defaultExitAnimation;
defaultEntryAnimation = 'scaleup'; defaultEntryAnimation = 'scaleup';
defaultExitAnimation = 'scaledown'; defaultExitAnimation = 'scaledown';
var entryAnimation = options.entryAnimation || defaultEntryAnimation; const entryAnimation = options.entryAnimation || defaultEntryAnimation;
var exitAnimation = options.exitAnimation || defaultExitAnimation; const exitAnimation = options.exitAnimation || defaultExitAnimation;
// If it's not fullscreen then lower the default animation speed to make it open really fast // If it's not fullscreen then lower the default animation speed to make it open really fast
var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280); const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220); const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
dlg.animationConfig = { dlg.animationConfig = {
// scale up // scale up
@ -461,7 +469,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (options.size) { if (options.size) {
dlg.classList.add('dialog-fixedSize'); dlg.classList.add('dialog-fixedSize');
dlg.classList.add('dialog-' + options.size); dlg.classList.add(`dialog-${options.size}`);
} }
if (enableAnimation()) { if (enableAnimation()) {
@ -469,16 +477,16 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
switch (dlg.animationConfig.entry.name) { switch (dlg.animationConfig.entry.name) {
case 'fadein': case 'fadein':
dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
break; break;
case 'scaleup': case 'scaleup':
dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both'; dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
break; break;
case 'slideup': case 'slideup':
dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
break; break;
case 'slidedown': case 'slidedown':
dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
break; break;
default: default:
break; break;
@ -488,7 +496,9 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg; return dlg;
} }
return { /* eslint-enable indent */
export default {
open: open, open: open,
close: close, close: close,
createDialog: createDialog, createDialog: createDialog,
@ -496,4 +506,3 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
globalOnOpenCallback = val; globalOnOpenCallback = val;
} }
}; };
});