diff --git a/package.json b/package.json
index bd40bf5eee..846983de2d 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,8 @@
"src/components/cardbuilder/cardBuilder.js",
"src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js",
+ "src/components/dialog/dialog.js",
+ "src/components/dialogHelper/dialogHelper.js",
"src/components/channelMapper/channelMapper.js",
"src/components/images/imageLoader.js",
"src/components/indicators/indicators.js",
diff --git a/src/components/alert.js b/src/components/alert.js
index 8a37ac1845..97b580f8f6 100644
--- a/src/components/alert.js
+++ b/src/components/alert.js
@@ -31,7 +31,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
options.buttons = items;
- return dialog(options).then(function (result) {
+ return dialog.show(options).then(function (result) {
if (result === 'ok') {
return Promise.resolve();
}
diff --git a/src/components/confirm/confirm.js b/src/components/confirm/confirm.js
index 517d6fa9be..6b9252b5f5 100644
--- a/src/components/confirm/confirm.js
+++ b/src/components/confirm/confirm.js
@@ -53,7 +53,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
options.buttons = items;
- return dialog(options).then(function (result) {
+ return dialog.show(options).then(function (result) {
if (result === 'ok') {
return Promise.resolve();
}
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index cfb5821b38..937e96d297 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -1,20 +1,31 @@
-define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (dialogHelper, dom, layoutManager, scrollHelper, globalize, require) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import scrollHelper from 'scrollHelper';
+import globalize from 'globalize';
+import 'material-icons';
+import 'emby-button';
+import 'paper-icon-button-light';
+import 'emby-input';
+import 'formDialogStyle';
+import 'flexStyles';
+
+/* eslint-disable indent */
function showDialog(options, template) {
- var dialogOptions = {
+ const dialogOptions = {
removeOnClose: true,
scrollY: false
};
- var enableTvLayout = layoutManager.tv;
+ const enableTvLayout = layoutManager.tv;
if (enableTvLayout) {
dialogOptions.size = 'fullscreen';
}
- var dlg = dialogHelper.createDialog(dialogOptions);
+ const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
@@ -22,7 +33,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.classList.add('align-items-center');
dlg.classList.add('justify-content-center');
- var formDialogContent = dlg.querySelector('.formDialogContent');
+ const formDialogContent = dlg.querySelector('.formDialogContent');
formDialogContent.classList.add('no-grow');
if (enableTvLayout) {
@@ -30,7 +41,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
formDialogContent.style['max-height'] = '60%';
scrollHelper.centerFocus.on(formDialogContent, false);
} else {
- formDialogContent.style.maxWidth = (Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)) + 'px';
+ formDialogContent.style.maxWidth = `${Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)}px`;
dlg.classList.add('dialog-fullscreen-lowres');
}
@@ -44,27 +55,27 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
}
- var displayText = options.html || options.text || '';
+ const displayText = options.html || options.text || '';
dlg.querySelector('.text').innerHTML = displayText;
if (!displayText) {
dlg.querySelector('.dialogContentInner').classList.add('hide');
}
- var i;
- var length;
- var html = '';
- var hasDescriptions = false;
+ let i;
+ let length;
+ let html = '';
+ let hasDescriptions = false;
for (i = 0, length = options.buttons.length; i < length; i++) {
- var item = options.buttons[i];
- var autoFocus = i === 0 ? ' autofocus' : '';
+ const item = options.buttons[i];
+ const autoFocus = i === 0 ? ' autofocus' : '';
- var buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
+ let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
if (item.type) {
- buttonClass += ' button-' + item.type;
+ buttonClass += ` button-${item.type}`;
}
if (item.description) {
@@ -75,10 +86,10 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
}
- html += '';
+ html += ``;
if (item.description) {
- html += '';
+ html += ``;
}
}
@@ -88,18 +99,18 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical');
}
- var dialogResult;
+ let dialogResult;
function onButtonClick() {
dialogResult = this.getAttribute('data-id');
dialogHelper.close(dlg);
}
- var buttons = dlg.querySelectorAll('.btnOption');
+ const buttons = dlg.querySelectorAll('.btnOption');
for (i = 0, length = buttons.length; i < length; i++) {
buttons[i].addEventListener('click', onButtonClick);
}
- return dialogHelper.open(dlg).then(function () {
+ return dialogHelper.open(dlg).then(() => {
if (enableTvLayout) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
@@ -113,9 +124,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
});
}
- return function (text, title) {
+ export async function show(text, title) {
- var options;
+ let options;
if (typeof text === 'string') {
options = {
title: title,
@@ -125,10 +136,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
options = text;
}
- return new Promise(function (resolve, reject) {
- require(['text!./dialog.template.html'], function (template) {
- showDialog(options, template).then(resolve, reject);
- });
+ const { default: template } = await import('text!./dialog.template.html');
+ return new Promise((resolve, reject) => {
+ showDialog(options, template).then(resolve, reject);
});
- };
-});
+ }
+
+/* eslint-enable indent */
+export default {
+ show: show
+};
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js
index 8b08cde678..ca7c94a416 100644
--- a/src/components/dialogHelper/dialogHelper.js
+++ b/src/components/dialogHelper/dialogHelper.js
@@ -1,7 +1,15 @@
-define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) {
- 'use strict';
+import appRouter from 'appRouter';
+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() {
@@ -25,7 +33,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
}
function tryRemoveElement(elem) {
- var parentNode = elem.parentNode;
+ const parentNode = elem.parentNode;
if (parentNode) {
// Seeing crashes in edge webview
@@ -39,14 +47,14 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function DialogHashHandler(dlg, hash, resolve) {
- var self = this;
+ const self = this;
self.originalUrl = window.location.href;
- var activeElement = document.activeElement;
- var removeScrollLockOnClose = false;
+ const activeElement = document.activeElement;
+ let removeScrollLockOnClose = false;
function onHashChange(e) {
- var isBack = self.originalUrl === window.location.href;
+ const isBack = self.originalUrl === window.location.href;
if (isBack || !isOpened(dlg)) {
window.removeEventListener('popstate', onHashChange);
@@ -84,7 +92,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
}
if (!self.closedByBack && isHistoryEnabled(dlg)) {
- var state = history.state || {};
+ const state = history.state || {};
if (state.dialogId === hash) {
history.back();
}
@@ -97,7 +105,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (dlg.getAttribute('data-removeonclose') !== 'false') {
removeCenterFocus(dlg);
- var dialogContainer = dlg.dialogContainer;
+ const dialogContainer = dlg.dialogContainer;
if (dialogContainer) {
tryRemoveElement(dialogContainer);
dlg.dialogContainer = null;
@@ -108,7 +116,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
//resolve();
// if we just called history.back(), then use a timeout to allow the history events to fire first
- setTimeout(function () {
+ setTimeout(() => {
resolve({
element: dlg,
closedByBack: self.closedByBack
@@ -118,7 +126,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.addEventListener('close', onDialogClosed);
- var center = !dlg.classList.contains('dialog-fixedSize');
+ const center = !dlg.classList.contains('dialog-fixedSize');
if (center) {
dlg.classList.add('centeredDialog');
}
@@ -141,7 +149,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
animateDialogOpen(dlg);
if (isHistoryEnabled(dlg)) {
- appRouter.pushState({ dialogId: hash }, 'Dialog', '#' + hash);
+ appRouter.pushState({ dialogId: hash }, 'Dialog', `#${hash}`);
window.addEventListener('popstate', onHashChange);
} else {
@@ -151,10 +159,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function addBackdropOverlay(dlg) {
- var backdrop = document.createElement('div');
+ const backdrop = document.createElement('div');
backdrop.classList.add('dialogBackdrop');
- var backdropParent = dlg.dialogContainer || dlg;
+ const backdropParent = dlg.dialogContainer || dlg;
backdropParent.parentNode.insertBefore(backdrop, backdropParent);
dlg.backdrop = backdrop;
@@ -162,7 +170,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
void backdrop.offsetWidth;
backdrop.classList.add('dialogBackdropOpened');
- dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) {
+ dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
if (e.target === dlg.dialogContainer) {
close(dlg);
}
@@ -170,7 +178,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
passive: true
});
- dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) {
+ dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
if (e.target === dlg.dialogContainer) {
// Close the application dialog menu
close(dlg);
@@ -184,26 +192,26 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg.getAttribute('data-history') === 'true';
}
- function open(dlg) {
+ export function open(dlg) {
if (globalOnOpenCallback) {
globalOnOpenCallback(dlg);
}
- var parent = dlg.parentNode;
+ const parent = dlg.parentNode;
if (parent) {
parent.removeChild(dlg);
}
- var dialogContainer = document.createElement('div');
+ const dialogContainer = document.createElement('div');
dialogContainer.classList.add('dialogContainer');
dialogContainer.appendChild(dlg);
dlg.dialogContainer = 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');
}
- function close(dlg) {
+ export function close(dlg) {
if (isOpened(dlg)) {
if (isHistoryEnabled(dlg)) {
@@ -233,7 +241,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
cancelable: false
}));
- var onAnimationFinish = function () {
+ const onAnimationFinish = () => {
focusManager.popScope(dlg);
dlg.classList.add('hide');
@@ -249,7 +257,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function animateDialogOpen(dlg) {
- var onAnimationFinish = function () {
+ const onAnimationFinish = () => {
focusManager.pushScope(dlg);
if (dlg.getAttribute('data-autofocus') === 'true') {
@@ -264,7 +272,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (enableAnimation()) {
- var onFinish = function () {
+ const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true
});
@@ -283,24 +291,24 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (enableAnimation()) {
- var animated = true;
+ let animated = true;
switch (dlg.animationConfig.exit.name) {
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;
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;
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;
default:
animated = false;
break;
}
- var onFinish = function () {
+ const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true
});
@@ -318,7 +326,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
onAnimationFinish();
}
- var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
+ const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
function shouldLockDocumentScroll(options) {
@@ -343,7 +351,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function removeBackdrop(dlg) {
- var backdrop = dlg.backdrop;
+ const backdrop = dlg.backdrop;
if (!backdrop) {
return;
@@ -351,7 +359,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.backdrop = null;
- var onAnimationFinish = function () {
+ const onAnimationFinish = () => {
tryRemoveElement(backdrop);
};
@@ -368,20 +376,20 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
}
function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- var fn = on ? 'on' : 'off';
+ import('scrollHelper').then(scrollHelper => {
+ const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
}
- function createDialog(options) {
+ export function createDialog(options) {
options = options || {};
// If there's no native dialog support, use a plain div
// 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
- var dlg = document.createElement('div');
+ const dlg = document.createElement('div');
dlg.classList.add('focuscontainer');
dlg.classList.add('hide');
@@ -406,17 +414,17 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.setAttribute('data-autofocus', 'true');
}
- var defaultEntryAnimation;
- var defaultExitAnimation;
+ let defaultEntryAnimation;
+ let defaultExitAnimation;
defaultEntryAnimation = 'scaleup';
defaultExitAnimation = 'scaledown';
- var entryAnimation = options.entryAnimation || defaultEntryAnimation;
- var exitAnimation = options.exitAnimation || defaultExitAnimation;
+ const entryAnimation = options.entryAnimation || defaultEntryAnimation;
+ const 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 !== 'fullscreen' ? 180 : 280);
- var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
+ const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
+ const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
dlg.animationConfig = {
// scale up
@@ -461,7 +469,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (options.size) {
dlg.classList.add('dialog-fixedSize');
- dlg.classList.add('dialog-' + options.size);
+ dlg.classList.add(`dialog-${options.size}`);
}
if (enableAnimation()) {
@@ -469,16 +477,16 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
switch (dlg.animationConfig.entry.name) {
case 'fadein':
- dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal';
+ dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
break;
case 'scaleup':
- dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both';
+ dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
break;
case 'slideup':
- dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal';
+ dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
break;
case 'slidedown':
- dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal';
+ dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
break;
default:
break;
@@ -488,12 +496,15 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg;
}
- return {
- open: open,
- close: close,
- createDialog: createDialog,
- setOnOpen: function (val) {
- globalOnOpenCallback = val;
- }
- };
-});
+ export function setOnOpen(val) {
+ globalOnOpenCallback = val;
+ }
+
+/* eslint-enable indent */
+
+export default {
+ open: open,
+ close: close,
+ createDialog: createDialog,
+ setOnOpen: setOnOpen
+};