Merge pull request #1663 from Camc314/migrate-to-ES6-44

Migration of libraryBrowser and multiDownload to ES6 modules
This commit is contained in:
Anthony Lavado 2020-07-28 16:38:17 -07:00 committed by GitHub
commit 231c965ad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 273 additions and 235 deletions

View File

@ -248,6 +248,8 @@
"src/scripts/imagehelper.js",
"src/scripts/inputManager.js",
"src/scripts/keyboardNavigation.js",
"src/scripts/libraryBrowser.js",
"src/scripts/multiDownload.js",
"src/scripts/playlists.js",
"src/scripts/settings/appSettings.js",
"src/scripts/settings/userSettings.js",

View File

@ -1,6 +1,8 @@
define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData() {
if (!pageData) {

View File

@ -1,6 +1,8 @@
define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData(context) {
var key = getSavedQueryKey(context);

View File

@ -1,6 +1,8 @@
define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData() {
var key = getSavedQueryKey();

View File

@ -1,6 +1,8 @@
define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent, options) {
function onViewStyleChange() {
if (self.getCurrentViewStyle() == 'List') {

View File

@ -1,6 +1,8 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData(context) {
var key = getSavedQueryKey(context);

View File

@ -1,6 +1,8 @@
define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function playAll() {
ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {

View File

@ -1,6 +1,8 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData(context) {
var key = getSavedQueryKey(context);

View File

@ -1,6 +1,8 @@
define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData() {
var key = getSavedQueryKey();

View File

@ -1,6 +1,8 @@
define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData() {
var key = getSavedQueryKey();

View File

@ -1,6 +1,8 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userSettings', 'globalize', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, loading, userSettings, globalize) {
'use strict';
libraryBrowser = libraryBrowser.default || libraryBrowser;
return function (view, params, tabContent) {
function getPageData(context) {
var key = getSavedQueryKey(context);

View File

@ -1,199 +1,216 @@
define(['userSettings', 'globalize'], function (userSettings, globalize) {
'use strict';
import * as userSettings from 'userSettings';
import globalize from 'globalize';
var libraryBrowser = {
getSavedQueryKey: function (modifier) {
return window.location.href.split('#')[0] + (modifier || '');
},
loadSavedQueryValues: function (key, query) {
var values = userSettings.get(key);
export function getSavedQueryKey(modifier) {
return window.location.href.split('#')[0] + (modifier || '');
}
if (values) {
values = JSON.parse(values);
return Object.assign(query, values);
}
export function loadSavedQueryValues(key, query) {
var values = userSettings.get(key);
return query;
},
saveQueryValues: function (key, query) {
var values = {};
if (values) {
values = JSON.parse(values);
return Object.assign(query, values);
}
if (query.SortBy) {
values.SortBy = query.SortBy;
}
return query;
}
if (query.SortOrder) {
values.SortOrder = query.SortOrder;
}
export function saveQueryValues(key, query) {
var values = {};
userSettings.set(key, JSON.stringify(values));
},
saveViewSetting: function (key, value) {
userSettings.set(key + '-_view', value);
},
getSavedView: function (key) {
return userSettings.get(key + '-_view');
},
showLayoutMenu: function (button, currentLayout, views) {
var dispatchEvent = true;
if (query.SortBy) {
values.SortBy = query.SortBy;
}
if (!views) {
dispatchEvent = false;
views = button.getAttribute('data-layouts');
views = views ? views.split(',') : ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
}
if (query.SortOrder) {
values.SortOrder = query.SortOrder;
}
var menuItems = views.map(function (v) {
return {
name: globalize.translate('Option' + v),
id: v,
selected: currentLayout == v
};
});
userSettings.set(key, JSON.stringify(values));
}
require(['actionsheet'], function (actionsheet) {
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
button.dispatchEvent(new CustomEvent('layoutchange', {
detail: {
viewStyle: id
},
bubbles: true,
cancelable: false
}));
export function saveViewSetting (key, value) {
userSettings.set(key + '-_view', value);
}
if (!dispatchEvent) {
if (window.$) {
$(button).trigger('layoutchange', [id]);
}
}
}
});
});
},
getQueryPagingHtml: function (options) {
var startIndex = options.startIndex;
var limit = options.limit;
var totalRecordCount = options.totalRecordCount;
var html = '';
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
var showControls = limit < totalRecordCount;
export function getSavedView (key) {
return userSettings.get(key + '-_view');
}
if (html += '<div class="listPaging">', showControls) {
html += '<span style="vertical-align:middle;">';
html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount);
html += '</span>';
}
export function showLayoutMenu (button, currentLayout, views) {
var dispatchEvent = true;
if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
html += '<div style="display:inline-block;">';
if (!views) {
dispatchEvent = false;
views = button.getAttribute('data-layouts');
views = views ? views.split(',') : ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
}
if (showControls) {
html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
}
var menuItems = views.map(function (v) {
return {
name: globalize.translate('Option' + v),
id: v,
selected: currentLayout == v
};
});
if (options.addLayoutButton) {
html += '<button is="paper-icon-button-light" title="' + globalize.translate('ButtonSelectView') + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || '') + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || '') + '\');"><span class="material-icons view_comfy"></span></button>';
}
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
button.dispatchEvent(new CustomEvent('layoutchange', {
detail: {
viewStyle: id
},
bubbles: true,
cancelable: false
}));
if (options.sortButton) {
html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('ButtonSort') + '"><span class="material-icons sort_by_alpha"></span></button>';
}
if (options.filterButton) {
html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('ButtonFilter') + '"><span class="material-icons filter_list"></span></button>';
}
html += '</div>';
}
return html += '</div>';
},
showSortMenu: function (options) {
require(['dialogHelper', 'emby-radio'], function (dialogHelper) {
function onSortByChange() {
var newValue = this.value;
if (this.checked) {
var changed = options.query.SortBy != newValue;
options.query.SortBy = newValue.replace('_', ',');
options.query.StartIndex = 0;
if (options.callback && changed) {
options.callback();
}
if (!dispatchEvent) {
if (window.$) {
$(button).trigger('layoutchange', [id]);
}
}
}
});
});
}
function onSortOrderChange() {
var newValue = this.value;
export function getQueryPagingHtml (options) {
var startIndex = options.startIndex;
var limit = options.limit;
var totalRecordCount = options.totalRecordCount;
var html = '';
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
var showControls = limit < totalRecordCount;
if (this.checked) {
var changed = options.query.SortOrder != newValue;
options.query.SortOrder = newValue;
options.query.StartIndex = 0;
if (html += '<div class="listPaging">', showControls) {
html += '<span style="vertical-align:middle;">';
html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount);
html += '</span>';
}
if (options.callback && changed) {
options.callback();
}
}
}
if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
html += '<div style="display:inline-block;">';
var dlg = dialogHelper.createDialog({
removeOnClose: true,
modal: false,
entryAnimationDuration: 160,
exitAnimationDuration: 200
});
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('formDialog');
var html = '';
html += '<div style="margin:0;padding:1.25em 1.5em 1.5em;">';
html += '<h2 style="margin:0 0 .5em;">';
html += globalize.translate('HeaderSortBy');
html += '</h2>';
var i;
var length;
var isChecked;
html += '<div>';
for (i = 0, length = options.items.length; i < length; i++) {
var option = options.items[i];
var radioValue = option.id.replace(',', '_');
isChecked = (options.query.SortBy || '').replace(',', '_') == radioValue ? ' checked' : '';
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortBy" data-id="' + option.id + '" value="' + radioValue + '" class="menuSortBy" ' + isChecked + ' /><span>' + option.name + '</span></label>';
}
html += '</div>';
html += '<h2 style="margin: 1em 0 .5em;">';
html += globalize.translate('HeaderSortOrder');
html += '</h2>';
html += '<div>';
isChecked = 'Ascending' == options.query.SortOrder ? ' checked' : '';
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionAscending') + '</span></label>';
isChecked = 'Descending' == options.query.SortOrder ? ' checked' : '';
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionDescending') + '</span></label>';
html += '</div>';
html += '</div>';
dlg.innerHTML = html;
dialogHelper.open(dlg);
var sortBys = dlg.querySelectorAll('.menuSortBy');
for (i = 0, length = sortBys.length; i < length; i++) {
sortBys[i].addEventListener('change', onSortByChange);
}
var sortOrders = dlg.querySelectorAll('.menuSortOrder');
for (i = 0, length = sortOrders.length; i < length; i++) {
sortOrders[i].addEventListener('change', onSortOrderChange);
}
});
if (showControls) {
html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
}
};
window.LibraryBrowser = libraryBrowser;
return libraryBrowser;
});
if (options.addLayoutButton) {
html += '<button is="paper-icon-button-light" title="' + globalize.translate('ButtonSelectView') + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || '') + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || '') + '\');"><span class="material-icons view_comfy"></span></button>';
}
if (options.sortButton) {
html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('ButtonSort') + '"><span class="material-icons sort_by_alpha"></span></button>';
}
if (options.filterButton) {
html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('ButtonFilter') + '"><span class="material-icons filter_list"></span></button>';
}
html += '</div>';
}
return html += '</div>';
}
export function showSortMenu (options) {
require(['dialogHelper', 'emby-radio'], function (dialogHelper) {
function onSortByChange() {
var newValue = this.value;
if (this.checked) {
var changed = options.query.SortBy != newValue;
options.query.SortBy = newValue.replace('_', ',');
options.query.StartIndex = 0;
if (options.callback && changed) {
options.callback();
}
}
}
function onSortOrderChange() {
var newValue = this.value;
if (this.checked) {
var changed = options.query.SortOrder != newValue;
options.query.SortOrder = newValue;
options.query.StartIndex = 0;
if (options.callback && changed) {
options.callback();
}
}
}
var dlg = dialogHelper.createDialog({
removeOnClose: true,
modal: false,
entryAnimationDuration: 160,
exitAnimationDuration: 200
});
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('formDialog');
var html = '';
html += '<div style="margin:0;padding:1.25em 1.5em 1.5em;">';
html += '<h2 style="margin:0 0 .5em;">';
html += globalize.translate('HeaderSortBy');
html += '</h2>';
var i;
var length;
var isChecked;
html += '<div>';
for (i = 0, length = options.items.length; i < length; i++) {
var option = options.items[i];
var radioValue = option.id.replace(',', '_');
isChecked = (options.query.SortBy || '').replace(',', '_') == radioValue ? ' checked' : '';
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortBy" data-id="' + option.id + '" value="' + radioValue + '" class="menuSortBy" ' + isChecked + ' /><span>' + option.name + '</span></label>';
}
html += '</div>';
html += '<h2 style="margin: 1em 0 .5em;">';
html += globalize.translate('HeaderSortOrder');
html += '</h2>';
html += '<div>';
isChecked = 'Ascending' == options.query.SortOrder ? ' checked' : '';
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionAscending') + '</span></label>';
isChecked = 'Descending' == options.query.SortOrder ? ' checked' : '';
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionDescending') + '</span></label>';
html += '</div>';
html += '</div>';
dlg.innerHTML = html;
dialogHelper.open(dlg);
var sortBys = dlg.querySelectorAll('.menuSortBy');
for (i = 0, length = sortBys.length; i < length; i++) {
sortBys[i].addEventListener('change', onSortByChange);
}
var sortOrders = dlg.querySelectorAll('.menuSortOrder');
for (i = 0, length = sortOrders.length; i < length; i++) {
sortOrders[i].addEventListener('change', onSortOrderChange);
}
});
}
const libraryBrowser = {
getSavedQueryKey,
loadSavedQueryValues,
saveQueryValues,
saveViewSetting,
getSavedView,
showLayoutMenu,
getQueryPagingHtml,
showSortMenu
};
window.LibraryBrowser = libraryBrowser;
export default libraryBrowser;

View File

@ -1,66 +1,65 @@
define(['browser'], function (browser) {
'use strict';
import browser from 'browser';
function fallback(urls) {
var i = 0;
function fallback(urls) {
var i = 0;
(function createIframe() {
var frame = document.createElement('iframe');
frame.style.display = 'none';
frame.src = urls[i++];
document.documentElement.appendChild(frame);
(function createIframe() {
var frame = document.createElement('iframe');
frame.style.display = 'none';
frame.src = urls[i++];
document.documentElement.appendChild(frame);
// the download init has to be sequential otherwise IE only use the first
var interval = setInterval(function () {
if (frame.contentWindow.document.readyState === 'complete' || frame.contentWindow.document.readyState === 'interactive') {
clearInterval(interval);
// the download init has to be sequential otherwise IE only use the first
var interval = setInterval(function () {
if (frame.contentWindow.document.readyState === 'complete' || frame.contentWindow.document.readyState === 'interactive') {
clearInterval(interval);
// Safari needs a timeout
setTimeout(function () {
frame.parentNode.removeChild(frame);
}, 1000);
// Safari needs a timeout
setTimeout(function () {
frame.parentNode.removeChild(frame);
}, 1000);
if (i < urls.length) {
createIframe();
}
if (i < urls.length) {
createIframe();
}
}, 100);
})();
}
function sameDomain(url) {
var a = document.createElement('a');
a.href = url;
return location.hostname === a.hostname && location.protocol === a.protocol;
}
function download(url) {
var a = document.createElement('a');
a.download = '';
a.href = url;
// firefox doesn't support `a.click()`...
a.dispatchEvent(new MouseEvent('click'));
}
return function (urls) {
if (!urls) {
throw new Error('`urls` required');
}
if (typeof document.createElement('a').download === 'undefined') {
return fallback(urls);
}
var delay = 0;
urls.forEach(function (url) {
// the download init has to be sequential for firefox if the urls are not on the same domain
if (browser.firefox && !sameDomain(url)) {
return setTimeout(download.bind(null, url), 100 * ++delay);
}
}, 100);
})();
}
function sameDomain(url) {
var a = document.createElement('a');
a.href = url;
return location.hostname === a.hostname && location.protocol === a.protocol;
}
function download(url) {
var a = document.createElement('a');
a.download = '';
a.href = url;
// firefox doesn't support `a.click()`...
a.dispatchEvent(new MouseEvent('click'));
}
export default function (urls) {
if (!urls) {
throw new Error('`urls` required');
}
if (typeof document.createElement('a').download === 'undefined') {
return fallback(urls);
}
var delay = 0;
urls.forEach(function (url) {
// the download init has to be sequential for firefox if the urls are not on the same domain
if (browser.firefox && !sameDomain(url)) {
return setTimeout(download.bind(null, url), 100 * ++delay);
}
download(url);
});
}
download(url);
});
};
});