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 multiSelect to ES6 modules

Browse source
This commit is contained in:
grafixeyehero 2020-06-18 22:34:03 +03:00
parent b2db27a424
commit 999f276140
3 changed files with 90 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -99,6 +99,7 @@
"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",
"src/components/multiSelect/multiSelect.js",
"src/components/playback/brightnessosd.js", "src/components/playback/brightnessosd.js",
"src/components/playback/mediasession.js", "src/components/playback/mediasession.js",
"src/components/playback/nowplayinghelper.js", "src/components/playback/nowplayinghelper.js",

168
src/components/multiSelect/multiSelect.js
View file

@ -1,13 +1,20 @@
define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) { import browser from 'browser';
'use strict'; import appHost from 'apphost';
import loading from 'loading';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import dom from 'dom';
import 'css!./multiSelect';
var selectedItems = []; /* eslint-disable indent */
var selectedElements = [];
var currentSelectionCommandsPanel; let selectedItems = [];
let selectedElements = [];
let currentSelectionCommandsPanel;
function hideSelections() { function hideSelections() {
var selectionCommandsPanel = currentSelectionCommandsPanel; const selectionCommandsPanel = currentSelectionCommandsPanel;
if (selectionCommandsPanel) { if (selectionCommandsPanel) {
selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel); selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel);
@ -15,10 +22,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
selectedItems = []; selectedItems = [];
selectedElements = []; selectedElements = [];
var elems = document.querySelectorAll('.itemSelectionPanel'); const elems = document.querySelectorAll('.itemSelectionPanel');
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
var parent = elems[i].parentNode; const parent = elems[i].parentNode;
parent.removeChild(elems[i]); parent.removeChild(elems[i]);
parent.classList.remove('withMultiSelect'); parent.classList.remove('withMultiSelect');
} }
@ -29,14 +36,14 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
// toggle the checkbox, if it wasn't clicked on // toggle the checkbox, if it wasn't clicked on
if (!dom.parentWithClass(e.target, 'chkItemSelect')) { if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
if (chkItemSelect) { if (chkItemSelect) {
if (chkItemSelect.classList.contains('checkedInitial')) { if (chkItemSelect.classList.contains('checkedInitial')) {
chkItemSelect.classList.remove('checkedInitial'); chkItemSelect.classList.remove('checkedInitial');
} else { } else {
var newValue = !chkItemSelect.checked; const newValue = !chkItemSelect.checked;
chkItemSelect.checked = newValue; chkItemSelect.checked = newValue;
updateItemSelection(chkItemSelect, newValue); updateItemSelection(chkItemSelect, newValue);
} }
@ -50,11 +57,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function updateItemSelection(chkItemSelect, selected) { function updateItemSelection(chkItemSelect, selected) {
var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id'); const id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
if (selected) { if (selected) {
var current = selectedItems.filter(function (i) { const current = selectedItems.filter(i => {
return i === id; return i === id;
}); });
@ -64,16 +71,16 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
} else { } else {
selectedItems = selectedItems.filter(function (i) { selectedItems = selectedItems.filter(i => {
return i !== id; return i !== id;
}); });
selectedElements = selectedElements.filter(function (i) { selectedElements = selectedElements.filter(i => {
return i !== chkItemSelect; return i !== chkItemSelect;
}); });
} }
if (selectedItems.length) { if (selectedItems.length) {
var itemSelectionCount = document.querySelector('.itemSelectionCount'); const itemSelectionCount = document.querySelector('.itemSelectionCount');
if (itemSelectionCount) { if (itemSelectionCount) {
itemSelectionCount.innerHTML = selectedItems.length; itemSelectionCount.innerHTML = selectedItems.length;
} }
@ -88,33 +95,33 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function showSelection(item, isChecked) { function showSelection(item, isChecked) {
var itemSelectionPanel = item.querySelector('.itemSelectionPanel'); let itemSelectionPanel = item.querySelector('.itemSelectionPanel');
if (!itemSelectionPanel) { if (!itemSelectionPanel) {
itemSelectionPanel = document.createElement('div'); itemSelectionPanel = document.createElement('div');
itemSelectionPanel.classList.add('itemSelectionPanel'); itemSelectionPanel.classList.add('itemSelectionPanel');
var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent'); const parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
parent.classList.add('withMultiSelect'); parent.classList.add('withMultiSelect');
parent.appendChild(itemSelectionPanel); parent.appendChild(itemSelectionPanel);
var cssClass = 'chkItemSelect'; let cssClass = 'chkItemSelect';
if (isChecked && !browser.firefox) { if (isChecked && !browser.firefox) {
// In firefox, the initial tap hold doesnt' get treated as a click // In firefox, the initial tap hold doesnt' get treated as a click
// In other browsers it does, so we need to make sure that initial click is ignored // In other browsers it does, so we need to make sure that initial click is ignored
cssClass += ' checkedInitial'; cssClass += ' checkedInitial';
} }
var checkedAttribute = isChecked ? ' checked' : ''; const checkedAttribute = isChecked ? ' checked' : '';
itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>'; itemSelectionPanel.innerHTML = `<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="${cssClass}"${checkedAttribute}/><span></span></label>`;
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
chkItemSelect.addEventListener('change', onSelectionChange); chkItemSelect.addEventListener('change', onSelectionChange);
} }
} }
function showSelectionCommands() { function showSelectionCommands() {
var selectionCommandsPanel = currentSelectionCommandsPanel; let selectionCommandsPanel = currentSelectionCommandsPanel;
if (!selectionCommandsPanel) { if (!selectionCommandsPanel) {
@ -124,19 +131,19 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
document.body.appendChild(selectionCommandsPanel); document.body.appendChild(selectionCommandsPanel);
currentSelectionCommandsPanel = selectionCommandsPanel; currentSelectionCommandsPanel = selectionCommandsPanel;
var html = ''; let html = '';
html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>';
html += '<h1 class="itemSelectionCount"></h1>'; html += '<h1 class="itemSelectionCount"></h1>';
const moreIcon = 'more_vert'; const moreIcon = 'more_vert';
html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ' + moreIcon + '"></span></button>'; html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ${moreIcon}"></span></button>`;
selectionCommandsPanel.innerHTML = html; selectionCommandsPanel.innerHTML = html;
selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections); selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); const btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true }); dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
} }
@ -144,9 +151,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function alertText(options) { function alertText(options) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert(options).then(resolve, resolve); alert(options).then(resolve, resolve);
}); });
}); });
@ -154,24 +161,24 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function deleteItems(apiClient, itemIds) { function deleteItems(apiClient, itemIds) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
var msg = globalize.translate('ConfirmDeleteItem'); let msg = globalize.translate('ConfirmDeleteItem');
var title = globalize.translate('HeaderDeleteItem'); let title = globalize.translate('HeaderDeleteItem');
if (itemIds.length > 1) { if (itemIds.length > 1) {
msg = globalize.translate('ConfirmDeleteItems'); msg = globalize.translate('ConfirmDeleteItems');
title = globalize.translate('HeaderDeleteItems'); title = globalize.translate('HeaderDeleteItems');
} }
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm(msg, title).then(function () { confirm(msg, title).then(() => {
var promises = itemIds.map(function (itemId) { const promises = itemIds.map(itemId => {
apiClient.deleteItem(itemId); apiClient.deleteItem(itemId);
}); });
Promise.all(promises).then(resolve, function () { Promise.all(promises).then(resolve, () => {
alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject); alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
}); });
@ -183,11 +190,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function showMenuForSelectedItems(e) { function showMenuForSelectedItems(e) {
var apiClient = connectionManager.currentApiClient(); const apiClient = connectionManager.currentApiClient();
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(user => {
var menuItems = []; const menuItems = [];
menuItems.push({ menuItems.push({
name: globalize.translate('AddToCollection'), name: globalize.translate('AddToCollection'),
@ -244,17 +251,17 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
icon: 'refresh' icon: 'refresh'
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: e.target, positionTo: e.target,
callback: function (id) { callback: function (id) {
var items = selectedItems.slice(0); const items = selectedItems.slice(0);
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
switch (id) { switch (id) {
case 'addtocollection': case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
new collectionEditor().show({ new collectionEditor().show({
items: items, items: items,
serverId: serverId serverId: serverId
@ -264,7 +271,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'playlist': case 'playlist':
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor().show({ new playlistEditor().show({
items: items, items: items,
serverId: serverId serverId: serverId
@ -282,21 +289,21 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
combineVersions(apiClient, items); combineVersions(apiClient, items);
break; break;
case 'markplayed': case 'markplayed':
items.forEach(function (itemId) { items.forEach(itemId => {
apiClient.markPlayed(apiClient.getCurrentUserId(), itemId); apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
}); });
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'markunplayed': case 'markunplayed':
items.forEach(function (itemId) { items.forEach(itemId => {
apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId); apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
}); });
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'refresh': case 'refresh':
require(['refreshDialog'], function (refreshDialog) { import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({ new refreshDialog({
itemIds: items, itemIds: items,
serverId: serverId serverId: serverId
@ -317,18 +324,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function dispatchNeedsRefresh() { function dispatchNeedsRefresh() {
var elems = []; const elems = [];
[].forEach.call(selectedElements, function (i) { [].forEach.call(selectedElements, i => {
var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer'); const container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
if (container && elems.indexOf(container) === -1) { if (container && !elems.includes(container)) {
elems.push(container); elems.push(container);
} }
}); });
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
elems[i].notifyRefreshNeeded(true); elems[i].notifyRefreshNeeded(true);
} }
} }
@ -337,7 +344,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
if (selection.length < 2) { if (selection.length < 2) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert({ alert({
text: globalize.translate('PleaseSelectTwoItems') text: globalize.translate('PleaseSelectTwoItems')
}); });
@ -352,7 +359,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
type: 'POST', type: 'POST',
url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') }) url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') })
}).then(function () { }).then(() => {
loading.hide(); loading.hide();
hideSelections(); hideSelections();
@ -362,9 +369,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function showSelections(initialCard) { function showSelections(initialCard) {
require(['emby-checkbox'], function () { import('emby-checkbox').then(() => {
var cards = document.querySelectorAll('.card'); const cards = document.querySelectorAll('.card');
for (var i = 0, length = cards.length; i < length; i++) { for (let i = 0, length = cards.length; i < length; i++) {
showSelection(cards[i], initialCard === cards[i]); showSelection(cards[i], initialCard === cards[i]);
} }
@ -375,13 +382,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function onContainerClick(e) { function onContainerClick(e) {
var target = e.target; const target = e.target;
if (selectedItems.length) { if (selectedItems.length) {
var card = dom.parentWithClass(target, 'card'); const card = dom.parentWithClass(target, 'card');
if (card) { if (card) {
var itemSelectionPanel = card.querySelector('.itemSelectionPanel'); const itemSelectionPanel = card.querySelector('.itemSelectionPanel');
if (itemSelectionPanel) { if (itemSelectionPanel) {
return onItemSelectionPanelClick(e, itemSelectionPanel); return onItemSelectionPanelClick(e, itemSelectionPanel);
} }
@ -395,15 +402,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
document.addEventListener('viewbeforehide', hideSelections); document.addEventListener('viewbeforehide', hideSelections);
return function (options) { export default function (options) {
var self = this; const self = this;
var container = options.container; const container = options.container;
function onTapHold(e) { function onTapHold(e) {
var card = dom.parentWithClass(e.target, 'card'); const card = dom.parentWithClass(e.target, 'card');
if (card) { if (card) {
@ -423,13 +430,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
return e.changedTouches || e.targetTouches || e.touches; return e.changedTouches || e.targetTouches || e.touches;
} }
var touchTarget; let touchTarget;
var touchStartTimeout; let touchStartTimeout;
var touchStartX; let touchStartX;
var touchStartY; let touchStartY;
function onTouchStart(e) { function onTouchStart(e) {
var touch = getTouches(e)[0]; const touch = getTouches(e)[0];
touchTarget = null; touchTarget = null;
touchStartX = 0; touchStartX = 0;
touchStartY = 0; touchStartY = 0;
@ -437,10 +444,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
if (touch) { if (touch) {
touchStartX = touch.clientX; touchStartX = touch.clientX;
touchStartY = touch.clientY; touchStartY = touch.clientY;
var element = touch.target; const element = touch.target;
if (element) { if (element) {
var card = dom.parentWithClass(element, 'card'); const card = dom.parentWithClass(element, 'card');
if (card) { if (card) {
@ -459,13 +466,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function onTouchMove(e) { function onTouchMove(e) {
if (touchTarget) { if (touchTarget) {
var touch = getTouches(e)[0]; const touch = getTouches(e)[0];
var deltaX; let deltaX;
var deltaY; let deltaY;
if (touch) { if (touch) {
var touchEndX = touch.clientX || 0; const touchEndX = touch.clientX || 0;
var touchEndY = touch.clientY || 0; const touchEndY = touch.clientY || 0;
deltaX = Math.abs(touchEndX - (touchStartX || 0)); deltaX = Math.abs(touchEndX - (touchStartX || 0));
deltaY = Math.abs(touchEndY - (touchStartY || 0)); deltaY = Math.abs(touchEndY - (touchStartY || 0));
} else { } else {
@ -509,7 +516,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
return; return;
} }
var card = dom.parentWithClass(touchTarget, 'card'); const card = dom.parentWithClass(touchTarget, 'card');
touchTarget = null; touchTarget = null;
if (card) { if (card) {
@ -556,12 +563,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
self.onContainerClick = onContainerClick; self.onContainerClick = onContainerClick;
self.destroy = function () { self.destroy = () => {
container.removeEventListener('click', onContainerClick); container.removeEventListener('click', onContainerClick);
container.removeEventListener('contextmenu', onTapHold); container.removeEventListener('contextmenu', onTapHold);
var element = container; const element = container;
dom.removeEventListener(element, 'touchstart', onTouchStart, { dom.removeEventListener(element, 'touchstart', onTouchStart, {
passive: true passive: true
@ -586,5 +593,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
passive: true passive: true
}); });
}; };
}; }
});
/* eslint-enable indent */

2
src/elements/emby-itemscontainer/emby-itemscontainer.js
View file

@ -63,7 +63,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
var self = this; var self = this;
require(['multiSelect'], function (MultiSelect) { require(['multiSelect'], function (MultiSelect) {
self.multiSelect = new MultiSelect({ self.multiSelect = new MultiSelect.default({
container: self, container: self,
bindOnClick: false bindOnClick: false
}); });