mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1653 from MrTimscampi/more-es6
Migrate shell, serverNotifications and scrollHelper to ES6 + remove searchtab
This commit is contained in:
commit
c5550c5771
26 changed files with 374 additions and 445 deletions
|
@ -303,10 +303,13 @@
|
|||
"src/scripts/mouseManager.js",
|
||||
"src/scripts/multiDownload.js",
|
||||
"src/scripts/playlists.js",
|
||||
"src/scripts/scrollHelper.js",
|
||||
"src/scripts/serverNotifications.js",
|
||||
"src/scripts/routes.js",
|
||||
"src/scripts/settings/appSettings.js",
|
||||
"src/scripts/settings/userSettings.js",
|
||||
"src/scripts/settings/webSettings.js",
|
||||
"src/scripts/shell.js",
|
||||
"src/scripts/taskbutton.js",
|
||||
"src/scripts/themeLoader.js",
|
||||
"src/scripts/touchHelper.js"
|
||||
|
|
|
@ -236,12 +236,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-desktop .searchTabButton,
|
||||
.layout-mobile .searchTabButton,
|
||||
.layout-tv .headerSearchButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mainDrawer-scrollContainer {
|
||||
padding-bottom: 10vh;
|
||||
}
|
||||
|
|
|
@ -200,7 +200,7 @@ import 'flexStyles';
|
|||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(scrollHelper => {
|
||||
import('scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -354,7 +354,7 @@ import 'scrollStyles';
|
|||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(scrollHelper => {
|
||||
import('scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -151,6 +151,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
|
|||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
|
||||
'use strict';
|
||||
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
|
||||
function saveCategories(context, options) {
|
||||
var categories = [];
|
||||
|
||||
|
|
|
@ -5,6 +5,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
|||
browser = browser.default || browser;
|
||||
loading = loading.default || loading;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
|
||||
function showViewSettings(instance) {
|
||||
require(['guide-settings-dialog'], function (guideSettingsDialog) {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
|
||||
'use strict';
|
||||
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
|
||||
function onUserDataChanged(e, apiClient, userData) {
|
||||
|
|
|
@ -2,6 +2,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
|||
'use strict';
|
||||
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
|
||||
function onOneDocumentClick() {
|
||||
document.removeEventListener('click', onOneDocumentClick);
|
||||
|
|
|
@ -210,7 +210,7 @@ import 'emby-button';
|
|||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(scrollHelper => {
|
||||
import('scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
|
||||
'use strict';
|
||||
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
|
||||
var currentDialog;
|
||||
var closeAction;
|
||||
var currentRecordingFields;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
|
||||
'use strict';
|
||||
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
loading = loading.default || loading;
|
||||
|
||||
var currentDialog;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
|
||||
'use strict';
|
||||
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
recordingHelper = recordingHelper.default || recordingHelper;
|
||||
loading = loading.default || loading;
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
|
|||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -337,6 +337,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
|||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -4,6 +4,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
|
|||
browser = browser.default || browser;
|
||||
loading = loading.default || loading;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
|
||||
var enableFocusTransform = !browser.slow && !browser.edge;
|
||||
|
||||
|
|
|
@ -29,6 +29,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
|
|||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
@ -169,9 +169,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
|
|||
name: globalize.translate('HeaderSchedule')
|
||||
}, {
|
||||
name: globalize.translate('TabSeries')
|
||||
}, {
|
||||
name: globalize.translate('ButtonSearch'),
|
||||
cssClass: 'searchTabButton'
|
||||
}];
|
||||
}
|
||||
|
||||
|
@ -255,9 +252,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
|
|||
case 5:
|
||||
depends.push('controllers/livetv/livetvseriestimers');
|
||||
break;
|
||||
|
||||
case 6:
|
||||
depends.push('scripts/searchtab');
|
||||
}
|
||||
|
||||
require(depends, function (controllerFactory) {
|
||||
|
|
|
@ -236,9 +236,6 @@ import 'emby-button';
|
|||
name: globalize.translate('TabCollections')
|
||||
}, {
|
||||
name: globalize.translate('TabGenres')
|
||||
}, {
|
||||
name: globalize.translate('ButtonSearch'),
|
||||
cssClass: 'searchTabButton'
|
||||
}];
|
||||
}
|
||||
|
||||
|
@ -306,10 +303,6 @@ import 'emby-button';
|
|||
case 5:
|
||||
depends = 'controllers/movies/moviegenres';
|
||||
break;
|
||||
|
||||
case 6:
|
||||
depends = 'scripts/searchtab';
|
||||
break;
|
||||
}
|
||||
|
||||
import(depends).then(({default: controllerFactory}) => {
|
||||
|
|
|
@ -191,9 +191,6 @@ import 'flexStyles';
|
|||
name: globalize.translate('TabSongs')
|
||||
}, {
|
||||
name: globalize.translate('TabGenres')
|
||||
}, {
|
||||
name: globalize.translate('ButtonSearch'),
|
||||
cssClass: 'searchTabButton'
|
||||
}];
|
||||
}
|
||||
|
||||
|
@ -295,10 +292,6 @@ import 'flexStyles';
|
|||
case 6:
|
||||
depends = 'controllers/music/musicgenres';
|
||||
break;
|
||||
|
||||
case 7:
|
||||
depends = 'scripts/searchtab';
|
||||
break;
|
||||
}
|
||||
|
||||
import(depends).then(({default: controllerFactory}) => {
|
||||
|
|
|
@ -30,9 +30,6 @@ import 'emby-button';
|
|||
name: globalize.translate('TabNetworks')
|
||||
}, {
|
||||
name: globalize.translate('TabEpisodes')
|
||||
}, {
|
||||
name: globalize.translate('ButtonSearch'),
|
||||
cssClass: 'searchTabButton'
|
||||
}];
|
||||
}
|
||||
|
||||
|
@ -217,10 +214,6 @@ import 'emby-button';
|
|||
case 6:
|
||||
depends = 'controllers/shows/episodes';
|
||||
break;
|
||||
|
||||
case 7:
|
||||
depends = 'scripts/searchtab';
|
||||
break;
|
||||
}
|
||||
|
||||
import(depends).then(({default: controllerFactory}) => {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
|
||||
'use strict';
|
||||
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
|
||||
function getActivePlayerId() {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
||||
'use strict';
|
||||
|
||||
focusManager = focusManager.default || focusManager;
|
||||
import focusManager from 'focusManager';
|
||||
import dom from 'dom';
|
||||
import 'scrollStyles';
|
||||
|
||||
function getBoundingClientRect(elem) {
|
||||
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
||||
|
@ -13,25 +12,25 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
|||
}
|
||||
}
|
||||
|
||||
function getPosition(scrollContainer, item, horizontal) {
|
||||
var slideeOffset = getBoundingClientRect(scrollContainer);
|
||||
var itemOffset = getBoundingClientRect(item);
|
||||
export function getPosition(scrollContainer, item, horizontal) {
|
||||
const slideeOffset = getBoundingClientRect(scrollContainer);
|
||||
const itemOffset = getBoundingClientRect(item);
|
||||
|
||||
var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
|
||||
var size = horizontal ? itemOffset.width : itemOffset.height;
|
||||
let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
|
||||
let size = horizontal ? itemOffset.width : itemOffset.height;
|
||||
if (!size && size !== 0) {
|
||||
size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
|
||||
}
|
||||
|
||||
var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
|
||||
const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
|
||||
|
||||
offset += currentStart;
|
||||
|
||||
var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
|
||||
const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
|
||||
|
||||
var currentEnd = currentStart + frameSize;
|
||||
const currentEnd = currentStart + frameSize;
|
||||
|
||||
var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
|
||||
const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
|
||||
|
||||
return {
|
||||
start: offset,
|
||||
|
@ -42,8 +41,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
|||
};
|
||||
}
|
||||
|
||||
function toCenter(container, elem, horizontal, skipWhenVisible) {
|
||||
var pos = getPosition(container, elem, horizontal);
|
||||
export function toCenter(container, elem, horizontal, skipWhenVisible) {
|
||||
const pos = getPosition(container, elem, horizontal);
|
||||
|
||||
if (skipWhenVisible && pos.isVisible) {
|
||||
return;
|
||||
|
@ -64,8 +63,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
|||
}
|
||||
}
|
||||
|
||||
function toStart(container, elem, horizontal, skipWhenVisible) {
|
||||
var pos = getPosition(container, elem, horizontal);
|
||||
export function toStart(container, elem, horizontal, skipWhenVisible) {
|
||||
const pos = getPosition(container, elem, horizontal);
|
||||
|
||||
if (skipWhenVisible && pos.isVisible) {
|
||||
return;
|
||||
|
@ -87,7 +86,7 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
|||
}
|
||||
|
||||
function centerOnFocus(e, scrollSlider, horizontal) {
|
||||
var focused = focusManager.focusableParent(e.target);
|
||||
const focused = focusManager.focusableParent(e.target);
|
||||
|
||||
if (focused) {
|
||||
toCenter(scrollSlider, focused, horizontal);
|
||||
|
@ -97,13 +96,12 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
|||
function centerOnFocusHorizontal(e) {
|
||||
centerOnFocus(e, this, true);
|
||||
}
|
||||
|
||||
function centerOnFocusVertical(e) {
|
||||
centerOnFocus(e, this, false);
|
||||
}
|
||||
|
||||
return {
|
||||
getPosition: getPosition,
|
||||
centerFocus: {
|
||||
export const centerFocus = {
|
||||
on: function (element, horizontal) {
|
||||
if (horizontal) {
|
||||
dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
|
||||
|
@ -130,8 +128,11 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
|
|||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
getPosition: getPosition,
|
||||
centerFocus: centerFocus,
|
||||
toCenter: toCenter,
|
||||
toStart: toStart
|
||||
};
|
||||
});
|
||||
|
|
|
@ -1,57 +0,0 @@
|
|||
define(['searchFields', 'searchResults', 'events'], function (SearchFields, SearchResults, events) {
|
||||
'use strict';
|
||||
|
||||
SearchFields = SearchFields.default || SearchFields;
|
||||
SearchResults = SearchResults.default || SearchResults;
|
||||
|
||||
function init(instance, tabContent, options) {
|
||||
tabContent.innerHTML = '<div class="padded-left padded-right searchFields"></div><div class="searchResults padded-top" style="padding-top:1.5em;"></div>';
|
||||
instance.searchFields = new SearchFields({
|
||||
element: tabContent.querySelector('.searchFields')
|
||||
});
|
||||
instance.searchResults = new SearchResults({
|
||||
element: tabContent.querySelector('.searchResults'),
|
||||
serverId: ApiClient.serverId(),
|
||||
parentId: options.parentId,
|
||||
collectionType: options.collectionType
|
||||
});
|
||||
events.on(instance.searchFields, 'search', function (e, value) {
|
||||
instance.searchResults.search(value);
|
||||
});
|
||||
}
|
||||
|
||||
function SearchTab(view, tabContent, options) {
|
||||
var self = this;
|
||||
options = options || {};
|
||||
init(this, tabContent, options);
|
||||
|
||||
self.preRender = function () {};
|
||||
|
||||
self.renderTab = function () {
|
||||
var searchFields = this.searchFields;
|
||||
|
||||
if (searchFields) {
|
||||
searchFields.focus();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
SearchTab.prototype.destroy = function () {
|
||||
var searchFields = this.searchFields;
|
||||
|
||||
if (searchFields) {
|
||||
searchFields.destroy();
|
||||
}
|
||||
|
||||
this.searchFields = null;
|
||||
var searchResults = this.searchResults;
|
||||
|
||||
if (searchResults) {
|
||||
searchResults.destroy();
|
||||
}
|
||||
|
||||
this.searchResults = null;
|
||||
};
|
||||
|
||||
return SearchTab;
|
||||
});
|
|
@ -1,24 +1,26 @@
|
|||
define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncPlayManager, events, inputManager, focusManager, appRouter) {
|
||||
'use strict';
|
||||
import connectionManager from 'connectionManager';
|
||||
import playbackManager from 'playbackManager';
|
||||
import syncPlayManager from 'syncPlayManager';
|
||||
import events from 'events';
|
||||
import inputManager from 'inputManager';
|
||||
import focusManager from 'focusManager';
|
||||
import appRouter from 'appRouter';
|
||||
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
|
||||
var serverNotifications = {};
|
||||
const serverNotifications = {};
|
||||
|
||||
function notifyApp() {
|
||||
inputManager.notify();
|
||||
}
|
||||
|
||||
function displayMessage(cmd) {
|
||||
var args = cmd.Arguments;
|
||||
const args = cmd.Arguments;
|
||||
if (args.TimeoutMs) {
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast({ title: args.Header, text: args.Text });
|
||||
});
|
||||
} else {
|
||||
require(['alert'], function (alert) {
|
||||
alert.default({ title: args.Header, text: args.Text });
|
||||
import('alert').then(({default: alert}) => {
|
||||
alert({ title: args.Header, text: args.Text });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -147,10 +149,10 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
|
|||
}
|
||||
|
||||
function onMessageReceived(e, msg) {
|
||||
var apiClient = this;
|
||||
const apiClient = this;
|
||||
if (msg.MessageType === 'Play') {
|
||||
notifyApp();
|
||||
var serverId = apiClient.serverInfo().Id;
|
||||
const serverId = apiClient.serverInfo().Id;
|
||||
if (msg.Data.PlayCommand === 'PlayNext') {
|
||||
playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
|
||||
} else if (msg.Data.PlayCommand === 'PlayLast') {
|
||||
|
@ -185,11 +187,11 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
|
|||
notifyApp();
|
||||
}
|
||||
} else if (msg.MessageType === 'GeneralCommand') {
|
||||
var cmd = msg.Data;
|
||||
const cmd = msg.Data;
|
||||
processGeneralCommand(cmd, apiClient);
|
||||
} else if (msg.MessageType === 'UserDataChanged') {
|
||||
if (msg.Data.UserId === apiClient.getCurrentUserId()) {
|
||||
for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
|
||||
for (let i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
|
||||
events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
|
||||
}
|
||||
}
|
||||
|
@ -210,5 +212,5 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
|
|||
events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
|
||||
bindEvents(newApiClient);
|
||||
});
|
||||
return serverNotifications;
|
||||
});
|
||||
|
||||
export default serverNotifications;
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
define([], function () {
|
||||
'use strict';
|
||||
|
||||
return {
|
||||
// TODO: This seems like a good candidate for deprecation
|
||||
export default {
|
||||
openUrl: function (url, target) {
|
||||
if (window.NativeShell) {
|
||||
window.NativeShell.openUrl(url, target);
|
||||
|
@ -20,4 +18,3 @@ define([], function () {
|
|||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue