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 of viewManager to ES6 module

Browse source
This commit is contained in:
Cameron 2020-08-02 17:44:03 +01:00
parent ade438f53d
commit b082613ed9
5 changed files with 123 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -158,6 +158,7 @@
"src/components/syncPlay/playbackPermissionManager.js",
"src/components/syncPlay/syncPlayManager.js",
"src/components/syncPlay/timeSyncManager.js",
"src/components/viewManager/viewManager.js",
"src/controllers/session/addServer/index.js",
"src/controllers/session/forgotPassword/index.js",
"src/controllers/session/redeemPassword/index.js",

2
src/components/appRouter.js
View file

@ -1,6 +1,8 @@
define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
'use strict';
viewManager = viewManager.default || viewManager;
var appRouter = {
showLocalLogin: function (serverId, manualLogin) {
var pageName = manualLogin ? 'manuallogin' : 'login';

229
src/components/viewManager/viewManager.js
View file

@ -1,134 +1,137 @@
define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) {
'use strict';
import viewContainer from 'viewContainer';
import focusManager from 'focusManager';
import queryString from 'queryString';
import layoutManager from 'layoutManager';
var currentView;
var dispatchPageEvents;
let currentView;
let dispatchPageEvents;
viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
var lastView = currentView;
if (lastView) {
var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
const lastView = currentView;
if (lastView) {
const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
if (!beforeHideResult) {
// todo: cancel
}
}
var eventDetail = getViewEventDetail(newView, options, isRestored);
if (!newView.initComplete) {
newView.initComplete = true;
if (typeof options.controllerFactory === 'function') {
new options.controllerFactory(newView, eventDetail.detail.params);
} else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
new options.controllerFactory.default(newView, eventDetail.detail.params);
}
if (!options.controllerFactory || dispatchPageEvents) {
dispatchViewEvent(newView, eventDetail, 'viewinit');
}
}
dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
});
function onViewChange(view, options, isRestore) {
var lastView = currentView;
if (lastView) {
dispatchViewEvent(lastView, null, 'viewhide');
}
currentView = view;
var eventDetail = getViewEventDetail(view, options, isRestore);
if (!isRestore) {
if (options.autoFocus !== false) {
focusManager.autoFocus(view);
}
} else if (!layoutManager.mobile) {
if (view.activeElement && document.body.contains(view.activeElement) && focusManager.isCurrentlyFocusable(view.activeElement)) {
focusManager.focus(view.activeElement);
} else {
focusManager.autoFocus(view);
}
}
view.dispatchEvent(new CustomEvent('viewshow', eventDetail));
if (dispatchPageEvents) {
view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
if (!beforeHideResult) {
// todo: cancel
}
}
function getProperties(view) {
var props = view.getAttribute('data-properties');
const eventDetail = getViewEventDetail(newView, options, isRestored);
if (props) {
return props.split(',');
if (!newView.initComplete) {
newView.initComplete = true;
if (typeof options.controllerFactory === 'function') {
new options.controllerFactory(newView, eventDetail.detail.params);
} else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
new options.controllerFactory.default(newView, eventDetail.detail.params);
}
return [];
if (!options.controllerFactory || dispatchPageEvents) {
dispatchViewEvent(newView, eventDetail, 'viewinit');
}
}
function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
if (!eventInfo) {
eventInfo = {
detail: {
type: view.getAttribute('data-type'),
properties: getProperties(view)
},
bubbles: true,
cancelable: isCancellable
};
}
dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
});
eventInfo.cancelable = isCancellable || false;
var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
if (dispatchPageEvents) {
eventInfo.cancelable = false;
view.dispatchEvent(new CustomEvent(eventName.replace('view', 'page'), eventInfo));
}
return eventResult;
function onViewChange(view, options, isRestore) {
const lastView = currentView;
if (lastView) {
dispatchViewEvent(lastView, null, 'viewhide');
}
function getViewEventDetail(view, options, isRestore) {
var url = options.url;
var index = url.indexOf('?');
var params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
currentView = view;
return {
const eventDetail = getViewEventDetail(view, options, isRestore);
if (!isRestore) {
if (options.autoFocus !== false) {
focusManager.autoFocus(view);
}
} else if (!layoutManager.mobile) {
if (view.activeElement && document.body.contains(view.activeElement) && focusManager.isCurrentlyFocusable(view.activeElement)) {
focusManager.focus(view.activeElement);
} else {
focusManager.autoFocus(view);
}
}
view.dispatchEvent(new CustomEvent('viewshow', eventDetail));
if (dispatchPageEvents) {
view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
}
}
function getProperties(view) {
const props = view.getAttribute('data-properties');
if (props) {
return props.split(',');
}
return [];
}
function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
if (!eventInfo) {
eventInfo = {
detail: {
type: view.getAttribute('data-type'),
properties: getProperties(view),
params: params,
isRestored: isRestore,
state: options.state,
// The route options
options: options.options || {}
properties: getProperties(view)
},
bubbles: true,
cancelable: false
cancelable: isCancellable
};
}
function resetCachedViews() {
// Reset all cached views whenever the skin changes
viewContainer.reset();
eventInfo.cancelable = isCancellable || false;
const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
if (dispatchPageEvents) {
eventInfo.cancelable = false;
view.dispatchEvent(new CustomEvent(eventName.replace('view', 'page'), eventInfo));
}
document.addEventListener('skinunload', resetCachedViews);
return eventResult;
}
function ViewManager() {
function getViewEventDetail(view, options, isRestore) {
const url = options.url;
const index = url.indexOf('?');
const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
return {
detail: {
type: view.getAttribute('data-type'),
properties: getProperties(view),
params: params,
isRestored: isRestore,
state: options.state,
// The route options
options: options.options || {}
},
bubbles: true,
cancelable: false
};
}
function resetCachedViews() {
// Reset all cached views whenever the skin changes
viewContainer.reset();
}
document.addEventListener('skinunload', resetCachedViews);
class ViewManager {
constructor() {
}
ViewManager.prototype.loadView = function (options) {
var lastView = currentView;
loadView(options) {
const lastView = currentView;
// Record the element that has focus
if (lastView) {
@ -142,9 +145,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
viewContainer.loadView(options).then(function (view) {
onViewChange(view, options);
});
};
}
ViewManager.prototype.tryRestoreView = function (options, onViewChanging) {
tryRestoreView(options, onViewChanging) {
if (options.cancel) {
return Promise.reject({ cancelled: true });
}
@ -158,15 +161,15 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
onViewChanging();
onViewChange(view, options, true);
});
};
}
ViewManager.prototype.currentView = function () {
currentView() {
return currentView;
};
}
ViewManager.prototype.dispatchPageEvents = function (value) {
dispatchPageEvents(value) {
dispatchPageEvents = value;
};
}
}
return new ViewManager();
});
export default new ViewManager();

2
src/scripts/libraryMenu.js
View file

@ -1,6 +1,8 @@
define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
'use strict';
viewManager = viewManager.default || viewManager;
function renderHeader() {
var html = '';
html += '<div class="flex align-items-center flex-grow headerTop">';

4
src/scripts/site.js
View file

@ -827,8 +827,8 @@ function initClient() {
define('tvguide', [componentsPath + '/guide/guide'], returnFirstDependency);
define('guide-settings-dialog', [componentsPath + '/guide/guide-settings'], returnFirstDependency);
define('viewManager', [componentsPath + '/viewManager/viewManager'], function (viewManager) {
window.ViewManager = viewManager;
viewManager.dispatchPageEvents(true);
window.ViewManager = viewManager.default;
viewManager.default.dispatchPageEvents(true);
return viewManager;
});
define('slideshow', [componentsPath + '/slideshow/slideshow'], returnFirstDependency);