`;
}
}
@@ -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
+};
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index e08fcc8336..41744bdcbb 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -1,9 +1,19 @@
-define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) {
- 'use strict';
+import loading from 'loading';
+import dialogHelper from 'dialogHelper';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'listViewStyle';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./directorybrowser';
+import 'formDialogStyle';
+import 'emby-button';
+
+/* eslint-disable indent */
function getSystemInfo() {
return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
- function(info) {
+ info => {
systemInfo = info;
return info;
}
@@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
loading.show();
- var promises = [];
+ const promises = [];
- if ('Network' === path) {
+ if (path === 'Network') {
promises.push(ApiClient.getNetworkDevices());
} else {
if (path) {
@@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
Promise.all(promises).then(
- function(responses) {
- var folders = responses[0];
- var parentPath = responses[1] || '';
- var html = '';
+ responses => {
+ const folders = responses[0];
+ const parentPath = responses[1] || '';
+ let html = '';
page.querySelector('.results').scrollTop = 0;
page.querySelector('#txtDirectoryPickerPath').value = path || '';
@@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
if (path) {
html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
}
- for (var i = 0, length = folders.length; i < length; i++) {
- var folder = folders[i];
- var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
+ for (let i = 0, length = folders.length; i < length; i++) {
+ const folder = folders[i];
+ const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
html += getItem(cssClass, folder.Type, folder.Path, folder.Name);
}
@@ -58,7 +68,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
page.querySelector('.results').innerHTML = html;
loading.hide();
- }, function() {
+ }, () => {
if (updatePathOnError) {
page.querySelector('#txtDirectoryPickerPath').value = '';
page.querySelector('.results').innerHTML = '';
@@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
function getItem(cssClass, type, path, name) {
- var html = '';
- html += '
';
+ let html = '';
+ html += `
`;
html += '
';
html += '
';
html += name;
@@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
function getEditorHtml(options, systemInfo) {
- var html = '';
+ let html = '';
html += '
';
html += '
';
if (!options.pathReadOnly) {
- var instruction = options.instruction ? options.instruction + '