diff --git a/package.json b/package.json index b56a11855d..f18f26fd21 100644 --- a/package.json +++ b/package.json @@ -169,6 +169,7 @@ "src/components/syncPlay/playbackPermissionManager.js", "src/components/syncPlay/syncPlayManager.js", "src/components/syncPlay/timeSyncManager.js", + "src/components/viewManager/viewManager.js", "src/components/tvproviders/schedulesdirect.js", "src/components/tvproviders/xmltv.js", "src/components/toast/toast.js", diff --git a/src/components/appRouter.js b/src/components/appRouter.js index da3b08317c..e7b697daf4 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -1,6 +1,7 @@ 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; browser = browser.default || browser; loading = loading.default || loading; diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js index 55425994d2..00c3018590 100644 --- a/src/components/viewManager/viewManager.js +++ b/src/components/viewManager/viewManager.js @@ -1,136 +1,134 @@ -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'; - focusManager = focusManager.default || focusManager; +let currentView; +let dispatchPageEvents; - var currentView; - var dispatchPageEvents; +viewContainer.setOnBeforeChange(function (newView, isRestored, options) { + const lastView = currentView; + if (lastView) { + const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true); - viewContainer.setOnBeforeChange(function (newView, isRestored, options) { - var lastView = currentView; - if (lastView) { - var 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)); - ViewManager.prototype.loadView = function (options) { - var lastView = currentView; + 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 { + loadView(options) { + const lastView = currentView; // Record the element that has focus if (lastView) { @@ -144,9 +142,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 }); } @@ -160,15 +158,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(); diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js index 6149717647..376b19f70d 100644 --- a/src/scripts/libraryMenu.js +++ b/src/scripts/libraryMenu.js @@ -1,6 +1,7 @@ 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; playbackManager = playbackManager.default || playbackManager; browser = browser.default || browser; diff --git a/src/scripts/site.js b/src/scripts/site.js index cd85c35e83..aa74411af4 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -813,8 +813,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);