diff --git a/src/components/viewContainer.js b/src/components/viewContainer.js index 4c02ba3c6e..67277ddca7 100644 --- a/src/components/viewContainer.js +++ b/src/components/viewContainer.js @@ -1,121 +1,275 @@ -define(["browser", "dom", "layoutManager", "css!components/viewManager/viewContainer"], function(browser, dom, layoutManager) { +define(["browser", "dom", "layoutManager", "css!components/viewManager/viewContainer"], function (browser, dom, layoutManager) { "use strict"; function setControllerClass(view, options) { - if (options.controllerFactory) return Promise.resolve(); + if (options.controllerFactory) { + return Promise.resolve(); + } + var controllerUrl = view.getAttribute("data-controller"); - return controllerUrl ? (0 === controllerUrl.indexOf("__plugin/") && (controllerUrl = controllerUrl.substring("__plugin/".length)), controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl), getRequirePromise([controllerUrl]).then(function(ControllerFactory) { - options.controllerFactory = ControllerFactory - })) : Promise.resolve() + + if (controllerUrl) { + if (0 === controllerUrl.indexOf("__plugin/")) { + controllerUrl = controllerUrl.substring("__plugin/".length); + } + + controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl); + return getRequirePromise([controllerUrl]).then(function (ControllerFactory) { + options.controllerFactory = ControllerFactory; + }); + } + + return Promise.resolve(); } function getRequirePromise(deps) { - return new Promise(function(resolve, reject) { - require(deps, resolve) - }) + return new Promise(function (resolve, reject) { + require(deps, resolve); + }); } function loadView(options) { if (!options.cancel) { - var selected = selectedPageIndex, - previousAnimatable = -1 === selected ? null : allPages[selected], - pageIndex = selected + 1; - pageIndex >= pageContainerCount && (pageIndex = 0); - var isPluginpage = -1 !== options.url.toLowerCase().indexOf("/configurationpage"), - newViewInfo = normalizeNewView(options, isPluginpage), - newView = newViewInfo.elem, - dependencies = "string" == typeof newView ? null : newView.getAttribute("data-require"); - return dependencies = dependencies ? dependencies.split(",") : [], isPluginpage && dependencies.push("legacy/dashboard"), newViewInfo.hasjQuerySelect && dependencies.push("legacy/selectmenu"), newViewInfo.hasjQueryChecked && dependencies.push("fnchecked"), newViewInfo.hasjQuery && dependencies.push("jQuery"), (isPluginpage || newView.classList && newView.classList.contains("type-interior")) && dependencies.push("dashboardcss"), new Promise(function(resolve, reject) { + var selected = selectedPageIndex; + var previousAnimatable = -1 === selected ? null : allPages[selected]; + var pageIndex = selected + 1; + + if (pageIndex >= pageContainerCount) { + pageIndex = 0; + } + + var isPluginpage = -1 !== options.url.toLowerCase().indexOf("/configurationpage"); + var newViewInfo = normalizeNewView(options, isPluginpage); + var newView = newViewInfo.elem; + var dependencies = "string" == typeof newView ? null : newView.getAttribute("data-require"); + dependencies = dependencies ? dependencies.split(",") : []; + + if (isPluginpage) { + dependencies.push("legacy/dashboard"); + } + + if (newViewInfo.hasjQuerySelect) { + dependencies.push("legacy/selectmenu"); + } + + if (newViewInfo.hasjQueryChecked) { + dependencies.push("fnchecked"); + } + + if (newViewInfo.hasjQuery) { + dependencies.push("jQuery"); + } + + if (isPluginpage || newView.classList && newView.classList.contains("type-interior")) { + dependencies.push("dashboardcss"); + } + + return new Promise(function (resolve, reject) { dependencies.join(","); - require(dependencies, function() { + + require(dependencies, function () { var currentPage = allPages[pageIndex]; - currentPage && triggerDestroy(currentPage); + + if (currentPage) { + triggerDestroy(currentPage); + } + var view = newView; - "string" == typeof view && (view = document.createElement("div"), view.innerHTML = newView), view.classList.add("mainAnimatedPage"), currentPage ? newViewInfo.hasScript && window.$ ? (view = $(view).appendTo(mainAnimatedPages)[0], mainAnimatedPages.removeChild(currentPage)) : mainAnimatedPages.replaceChild(view, currentPage) : newViewInfo.hasScript && window.$ ? view = $(view).appendTo(mainAnimatedPages)[0] : mainAnimatedPages.appendChild(view), options.type && view.setAttribute("data-type", options.type); + + if ("string" == typeof view) { + view = document.createElement("div"); + view.innerHTML = newView; + } + + view.classList.add("mainAnimatedPage"); + + if (currentPage) { + if (newViewInfo.hasScript && window.$) { + view = $(view).appendTo(mainAnimatedPages)[0]; + mainAnimatedPages.removeChild(currentPage); + } else { + mainAnimatedPages.replaceChild(view, currentPage); + } + } else { + if (newViewInfo.hasScript && window.$) { + view = $(view).appendTo(mainAnimatedPages)[0]; + } else { + mainAnimatedPages.appendChild(view); + } + } + + if (options.type) { + view.setAttribute("data-type", options.type); + } + var properties = []; - options.fullscreen && properties.push("fullscreen"), properties.length && view.setAttribute("data-properties", properties.join(",")); - allPages[pageIndex] = view, setControllerClass(view, options).then(function() { - onBeforeChange && onBeforeChange(view, !1, options), beforeAnimate(allPages, pageIndex, selected), selectedPageIndex = pageIndex, currentUrls[pageIndex] = options.url, !options.cancel && previousAnimatable && afterAnimate(allPages, pageIndex), window.$ && ($.mobile = $.mobile || {}, $.mobile.activePage = view), resolve(view) - }) - }) - }) + + if (options.fullscreen) { + properties.push("fullscreen"); + } + + if (properties.length) { + view.setAttribute("data-properties", properties.join(",")); + } + + allPages[pageIndex] = view; + setControllerClass(view, options).then(function () { + if (onBeforeChange) { + onBeforeChange(view, false, options); + } + + beforeAnimate(allPages, pageIndex, selected); + selectedPageIndex = pageIndex; + currentUrls[pageIndex] = options.url; + + if (!options.cancel && previousAnimatable) { + afterAnimate(allPages, pageIndex); + } + + if (window.$) { + $.mobile = $.mobile || {}; + $.mobile.activePage = view; + } + + resolve(view); + }); + }); + }); } } function replaceAll(str, find, replace) { - return str.split(find).join(replace) + return str.split(find).join(replace); } function parseHtml(html, hasScript) { - hasScript && (html = replaceAll(html, "\x3c!----\x3e", "<\/script>")); + if (hasScript) { + html = replaceAll(html, "\x3c!----\x3e", "<\/script>"); + } + var wrapper = document.createElement("div"); - return wrapper.innerHTML = html, wrapper.querySelector('div[data-role="page"]') + wrapper.innerHTML = html; + return wrapper.querySelector('div[data-role="page"]'); } function normalizeNewView(options, isPluginpage) { var viewHtml = options.view; - if (-1 === viewHtml.indexOf('data-role="page"')) return viewHtml; - var hasScript = -1 !== viewHtml.indexOf("