First create solution
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
.empty-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Prevent margin collapse */
|
||||
.empty-layout::before {
|
||||
content: "\00a0";
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.empty-layout > div.content,
|
||||
.empty-layout > div.content > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="empty-layout" data-options="dxLayout : { name: 'empty' } " >
|
||||
<div class="content layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-layout" data-options="dxLayout : { name: 'empty', platform: 'win', phone: false } " >
|
||||
<div class="content layout-content" data-options="dxContentPlaceholder : { name: 'content', contentCssPosition: 'static' }">
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController)
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.EmptyLayout = factory(jQuery, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController);
|
||||
root.DevExpress.framework.html.EmptyLayoutController = root.DevExpress.layouts.EmptyLayout.EmptyLayoutController
|
||||
}
|
||||
}(this, function($, layoutSets, DefaultLayoutController) {
|
||||
var exports = {};
|
||||
var EmptyLayoutController = DefaultLayoutController.inherit({ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "empty";
|
||||
this.callBase(options)
|
||||
}});
|
||||
layoutSets["empty"] = layoutSets["empty"] || [];
|
||||
layoutSets["empty"].push({controller: new EmptyLayoutController});
|
||||
exports.EmptyLayoutController = EmptyLayoutController;
|
||||
return exports
|
||||
}));
|
||||
@@ -0,0 +1,272 @@
|
||||
/* Layout */
|
||||
|
||||
.navbar-layout,
|
||||
.navbar-layout-tablet {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-content > div,
|
||||
.navbar-layout .transition-frame {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-layout .layout-footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar-layout .view-footer {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.navbar-layout .view-footer .dx-toolbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.navbar-layout .view-footer .dx-toolbar .dx-toolbar-center {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ios7 */
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .layout-header {
|
||||
top: 0;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .layout-content {
|
||||
top: 44px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout.has-navbar .layout-content {
|
||||
bottom: 59px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout.has-navbar .layout-footer {
|
||||
height: 59px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .view-footer .dx-toolbar {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .navbar-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
||||
font-size: 20px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
/* android5 */
|
||||
|
||||
.dx-theme-android5 .navbar-layout .layout-header .dx-navbar {
|
||||
top: 0;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout .layout-content {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout.has-toolbar .layout-content {
|
||||
bottom: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout.has-navbar .layout-content {
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout .layout-footer {
|
||||
bottom: 0;
|
||||
height: 56px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .navbar-layout.has-toolbar .layout-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* win8 */
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-header,
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content,
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content .dx-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr;
|
||||
-ms-grid-rows: 274px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-header {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 1;
|
||||
height: 180px;
|
||||
padding: 60px; /* #B230682 */
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-header h1 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet .layout-content-wrapper {
|
||||
padding: 0 60px 60px 60px; /* #B230682 */
|
||||
/* for IE */
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 2;
|
||||
/* end for IE */
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-tablet.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* win10 */
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header,
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content,
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content .dx-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr;
|
||||
-ms-grid-rows: 300px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 1;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header .dx-content-placeholder-header {
|
||||
padding: 60px 60px 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header .navbar-container {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-header h1 {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet .layout-content-wrapper {
|
||||
padding: 0 60px 60px 60px;
|
||||
/* for IE */
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 2;
|
||||
/* end for IE */
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-tablet.dx-animating:not(.dx-enter):not(.dx-leave),
|
||||
.dx-theme-win10 .navbar-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout .layout-header {
|
||||
top: 0;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout .layout-content {
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout.has-toolbar .layout-content {
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout .layout-footer {
|
||||
bottom: 0;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
|
||||
/* generic */
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-content {
|
||||
top: 56px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .navbar-layout .layout-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .navbar-layout .layout-header .dx-toolbar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-header .dx-toolbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-header .dx-toolbar-items-container {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout.has-navbar .layout-content {
|
||||
bottom: 68px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .layout-footer,
|
||||
.dx-theme-generic .navbar-layout .layout-footer .dx-navbar {
|
||||
bottom: 0;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout.has-toolbar .layout-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .dx-tabs.dx-navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dx-theme-generic .navbar-layout .view-footer .dx-button {
|
||||
width: 97%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'ios' } ">
|
||||
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'ios-header-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer">
|
||||
<div class="navbar-container" data-bind="dxNavBar: { }" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } ">
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: false }" data-options="dxCommandContainer : { id: 'ios-view-footer' } ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'android' } ">
|
||||
|
||||
<div class="layout-header">
|
||||
<div class="navbar-container dx-navbar-layout-header" data-bind="dxNavBar: {}" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder: { name: 'footer' } ">
|
||||
<div data-bind="dxToolbar: { visible: false }" data-options="dxCommandContainer : { id: 'android-footer-toolbar' } "></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'generic' } ">
|
||||
|
||||
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }" data-options="dxCommandContainer : { id: 'generic-header-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer">
|
||||
<div class="navbar-container" data-bind="dxNavBar: {}" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } ">
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: false }" data-options="dxCommandContainer : { id: 'generic-view-footer' } ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout-tablet" data-options="dxLayout : { name: 'navbar', platform: 'win', phone: false }">
|
||||
<div class="layout-header">
|
||||
<div data-options="dxContentPlaceholder : { name: 'header', contentCssPosition: 'static' }">
|
||||
<h1 class="view-title" data-bind="text: title"></h1>
|
||||
</div>
|
||||
<div class="navbar-container" data-bind="dxNavBar: { selectionMode: 'none' }" data-options="dxCommandContainer : { id: 'global-navigation' }"></div>
|
||||
</div>
|
||||
<div class="layout-content-wrapper">
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', contentCssPosition: 'static' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'win', phone: true } ">
|
||||
|
||||
<div class="layout-header">
|
||||
<div class="navbar-container dx-navbar-layout-header" data-bind="dxNavBar: {}" data-options="dxCommandContainer: { id: 'global-navigation' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar', visible: false }" data-options="dxCommandContainer : { id: 'win10-phone-appbar' } "></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("ui/toolbar"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.NavbarLayout = factory(DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController);
|
||||
root.DevExpress.framework.html.NavBarController = root.DevExpress.layouts.NavbarLayout.NavBarController
|
||||
}
|
||||
}(this, function(layoutSets, DefaultLayoutController) {
|
||||
var exports = {},
|
||||
HAS_NAVBAR_CLASS = "has-navbar",
|
||||
HAS_TOOLBAR_CLASS = "has-toolbar",
|
||||
LAYOUT_FOOTER_SELECTOR = ".layout-footer",
|
||||
ACTIVE_TOOLBAR_SELECTOR = ".dx-active-view .dx-toolbar";
|
||||
var NavBarController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "navbar";
|
||||
this.callBase(options)
|
||||
}, _createNavigationWidget: function(navigationCommands) {
|
||||
this.callBase(navigationCommands);
|
||||
this.$navbar = this._$mainLayout.find(".navbar-container");
|
||||
return this.$navbar
|
||||
}, _renderNavigationImpl: function(navigationCommands) {
|
||||
this.callBase(navigationCommands);
|
||||
if (navigationCommands.length) {
|
||||
this._$mainLayout.addClass(HAS_NAVBAR_CLASS)
|
||||
}
|
||||
}, _showViewImpl: function(viewInfo) {
|
||||
var that = this;
|
||||
return that.callBase.apply(that, arguments).done(function() {
|
||||
var $toolbar = that._$mainLayout.find(LAYOUT_FOOTER_SELECTOR).find(ACTIVE_TOOLBAR_SELECTOR),
|
||||
isToolbarEmpty = !$toolbar.length || !$toolbar.dxToolbar("instance").option("visible");
|
||||
that._$mainLayout.toggleClass(HAS_TOOLBAR_CLASS, !isToolbarEmpty)
|
||||
})
|
||||
}
|
||||
});
|
||||
layoutSets["navbar"] = layoutSets["navbar"] || [];
|
||||
layoutSets["navbar"].push({
|
||||
platform: "ios", controller: new NavBarController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "android", controller: new NavBarController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "generic", controller: new NavBarController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "win", controller: new NavBarController
|
||||
});
|
||||
layoutSets["split"] = layoutSets["split"] || [];
|
||||
layoutSets["split"].push({
|
||||
platform: "win", phone: false, root: true, pane: "master", controller: new NavBarController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "win", phone: true, controller: new NavBarController
|
||||
});
|
||||
exports.NavBarController = NavBarController;
|
||||
return exports
|
||||
}));
|
||||
@@ -0,0 +1,111 @@
|
||||
/* Layout */
|
||||
|
||||
.navbar-layout-phone .layout-content,
|
||||
.navbar-layout-phone .layout-content > div {
|
||||
-position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Windows phone 8 */
|
||||
.dx-theme-win8 .pivot-layout {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-phone {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .pivot-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .pivot-layout .layout-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .pivot-layout.has-toolbar-bottom .layout-footer {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .pivot-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.dx-theme-win8 .navbar-layout-phone .layout-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .has-toolbar-bottom .dx-pivot {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0;
|
||||
bottom: 40px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .navbar-layout-phone .layout-header .dx-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Windows phone 10 */
|
||||
.dx-theme-win10 .pivot-layout {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-phone {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .pivot-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .pivot-layout .layout-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .pivot-layout.has-toolbar-bottom .layout-footer {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .pivot-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.dx-theme-win10 .navbar-layout-phone .layout-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .has-toolbar-bottom .dx-pivot {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0;
|
||||
bottom: 48px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .navbar-layout-phone .layout-header .dx-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="navbar-layout-phone" data-options="dxLayout : { name: 'pivot', platform: 'win', phone: true }">
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content' }">
|
||||
</div>
|
||||
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' }" class="layout-toolbar-bottom">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,90 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("ui/pivot"), require("ui/toolbar"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.PivotLayout = factory(jQuery, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController);
|
||||
root.DevExpress.framework.html.PivotLayoutController = root.DevExpress.layouts.PivotLayout.PivotLayoutController
|
||||
}
|
||||
}(this, function($, layoutSets, DefaultLayoutController) {
|
||||
var exports = {},
|
||||
HAS_TOOLBAR_BOTTOM_CLASS = "has-toolbar-bottom",
|
||||
TOOLBAR_BOTTOM_SELECTOR = ".layout-toolbar-bottom",
|
||||
ACTIVE_PIVOT_ITEM_SELECTOR = ".dx-pivot-item:not(.dx-pivot-item-hidden)";
|
||||
var PivotLayoutController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "pivot";
|
||||
this._viewsInLayout = {};
|
||||
this.callBase(options)
|
||||
}, init: function(options) {
|
||||
this.callBase(options)
|
||||
}, _createNavigationWidget: function() {
|
||||
var that = this;
|
||||
this.$root = $("<div/>").addClass("pivot-layout");
|
||||
this.$pivot = $("<div/>").appendTo(this.$root).dxPivot({itemTemplate: function(itemData, itemIndex, itemElement) {
|
||||
var emptyLayout = that._createEmptyLayout();
|
||||
that._showElements(emptyLayout);
|
||||
emptyLayout.find(".layout-footer").remove();
|
||||
emptyLayout.appendTo(itemElement)
|
||||
}}).dxCommandContainer({id: 'global-navigation'});
|
||||
this.$pivot.dxPivot("instance").on("optionChanged", function(args) {
|
||||
if (args.name === "items") {
|
||||
that._clearPivotViewsRenderCache()
|
||||
}
|
||||
});
|
||||
var $tmpLayoutForFooter = that._createEmptyLayout();
|
||||
this._showElements($tmpLayoutForFooter);
|
||||
this.$footer = $tmpLayoutForFooter.find(".layout-footer").insertAfter(this.$pivot);
|
||||
return this.$pivot
|
||||
}, _clearPivotViewsRenderCache: function() {
|
||||
var that = this;
|
||||
$.each(this._viewsInLayout, function(key, viewInfo) {
|
||||
that._clearRenderResult(viewInfo)
|
||||
})
|
||||
}, _renderNavigationImpl: function(navigationCommands) {
|
||||
var container = this.$pivot.dxCommandContainer("instance");
|
||||
this._commandManager.renderCommandsToContainers(navigationCommands, [container])
|
||||
}, element: function() {
|
||||
return this.$root
|
||||
}, _getViewFrame: function(viewInfo) {
|
||||
var $result = this.$pivot.find(ACTIVE_PIVOT_ITEM_SELECTOR);
|
||||
$result = $result.add(this.$footer);
|
||||
return $result
|
||||
}, _showViewImpl: function(viewInfo, direction, previousViewTemplateId) {
|
||||
this._showViewElements(viewInfo.renderResult.$markup);
|
||||
this._changeView(viewInfo, previousViewTemplateId);
|
||||
this._changeAppbar();
|
||||
this._viewsInLayout[viewInfo.key] = viewInfo;
|
||||
return $.Deferred().resolve().promise()
|
||||
}, _changeAppbar: function() {
|
||||
var $appbar = this.$footer.find(".dx-active-view " + TOOLBAR_BOTTOM_SELECTOR),
|
||||
appbar = $appbar.dxToolbar("instance");
|
||||
if (appbar) {
|
||||
this._refreshAppbarVisibility(appbar, this.$root)
|
||||
}
|
||||
}, _refreshAppbarVisibility: function(appbar, $container) {
|
||||
var isAppbarNotEmpty = false;
|
||||
$.each(appbar.option("items"), function(index, item) {
|
||||
if (item.visible) {
|
||||
isAppbarNotEmpty = true;
|
||||
return false
|
||||
}
|
||||
});
|
||||
$container.toggleClass(HAS_TOOLBAR_BOTTOM_CLASS, isAppbarNotEmpty);
|
||||
appbar.option("visible", isAppbarNotEmpty)
|
||||
}, _hideView: function(viewInfo) {
|
||||
this.callBase.apply(this, arguments);
|
||||
this._changeAppbar()
|
||||
}
|
||||
});
|
||||
layoutSets["navbar"] = layoutSets["navbar"] || [];
|
||||
layoutSets["navbar"].push({
|
||||
platform: "win", version: [8], phone: true, root: true, controller: new PivotLayoutController
|
||||
});
|
||||
exports.PivotLayoutController = PivotLayoutController;
|
||||
return exports
|
||||
}));
|
||||
@@ -0,0 +1,8 @@
|
||||
.child-controller-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup-container .dx-popup-content,
|
||||
.popover-container .dx-popup-content {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="popup-layout" data-options="dxLayout : { name: 'popup' }">
|
||||
<div data-bind="dxPopup: { showTitle: false, contentTemplate: 'content', fullScreen: true, deferRendering: false, closeOnBackButton: false, showCloseButton: false }" class="popup-container">
|
||||
<div data-options="dxTemplate: { name: 'content' }" class="child-controller-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,99 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("../Simple/SimpleLayout.js").SimpleLayoutController, require("ui/popup"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.PopupLayout = factory(jQuery, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController, DevExpress.layouts.SimpleLayout.SimpleLayoutController);
|
||||
root.DevExpress.framework.html.OverlayLayoutControllerBase = root.DevExpress.layouts.PopupLayout.OverlayLayoutControllerBase;
|
||||
root.DevExpress.framework.html.PopupLayoutController = root.DevExpress.layouts.PopupLayout.PopupLayoutController
|
||||
}
|
||||
}(this, function($, layoutSets, DefaultLayoutController, SimpleLayoutController) {
|
||||
var exports = {},
|
||||
abstract = DefaultLayoutController.abstract;
|
||||
var OverlayLayoutControllerBase = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
this.callBase(options);
|
||||
if (!options.childController) {
|
||||
this._ensureChildController(SimpleLayoutController, "SimpleLayout");
|
||||
this.childController = new SimpleLayoutController
|
||||
}
|
||||
else {
|
||||
this.childController = options.childController
|
||||
}
|
||||
this.contentContainerSelector = options.contentContainerSelector
|
||||
}, _initChildController: function(options) {
|
||||
var that = this,
|
||||
$targetViewPort = that._$mainLayout.find(this.contentContainerSelector);
|
||||
that.childController.init($.extend({}, options, {$viewPort: $targetViewPort}));
|
||||
$.each(["viewRendered", "viewShowing", "viewReleased", "viewHidden"], function(_, callbacksPropertyName) {
|
||||
that.childController.on(callbacksPropertyName, function(args) {
|
||||
that.fireEvent(callbacksPropertyName, [args])
|
||||
})
|
||||
})
|
||||
}, _ensureChildController: function(controller, layoutName) {
|
||||
if (!controller) {
|
||||
throw new Error(layoutName + "Controller is not found but it is required by the '" + this.name + "' layout for specified platform and device. Make sure the " + layoutName + ".* files are referenced in your main *.html file or specify other platform and device.");
|
||||
}
|
||||
}, _base: function() {
|
||||
return DefaultLayoutController.prototype
|
||||
}, _showContainerWidget: abstract, _hideContainerWidget: abstract, init: function(options) {
|
||||
options = options || {};
|
||||
this.callBase(options);
|
||||
this._initChildController(options)
|
||||
}, activate: function($target) {
|
||||
var that = this,
|
||||
result;
|
||||
that.childController.activate();
|
||||
that._base().activate.call(that, $target);
|
||||
result = that._showContainerWidget($target);
|
||||
return result
|
||||
}, deactivate: function() {
|
||||
var that = this,
|
||||
result;
|
||||
result = that._hideContainerWidget();
|
||||
result.done(function() {
|
||||
that._base().deactivate.call(that);
|
||||
that.childController.deactivate()
|
||||
});
|
||||
return result
|
||||
}, showView: function(viewInfo, direction) {
|
||||
return this.childController.showView(viewInfo, direction)
|
||||
}
|
||||
});
|
||||
var PopupLayoutController = OverlayLayoutControllerBase.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "popup";
|
||||
options.contentContainerSelector = options.contentContainerSelector || ".child-controller-content";
|
||||
this.isOverlay = true;
|
||||
this._targetContainer = options.targetContainer;
|
||||
this.callBase(options)
|
||||
}, init: function(options) {
|
||||
this.callBase(options);
|
||||
this._popup = this._$mainLayout.find(".popup-container").dxPopup("instance");
|
||||
if (this._targetContainer) {
|
||||
this._popup.option("container", this._targetContainer)
|
||||
}
|
||||
}, _showContainerWidget: function() {
|
||||
return this._popup.show()
|
||||
}, _hideContainerWidget: function() {
|
||||
return this._popup.hide()
|
||||
}
|
||||
});
|
||||
$.each(["navbar", "simple", "slideout", "pivot", "split"], function(index, name) {
|
||||
layoutSets[name] = layoutSets[name] || [];
|
||||
$.each(layoutSets[name], function(index, layoutInfo) {
|
||||
layoutInfo.modal = false
|
||||
});
|
||||
layoutSets[name].push({
|
||||
modal: true, controller: new PopupLayoutController
|
||||
})
|
||||
});
|
||||
exports.OverlayLayoutControllerBase = OverlayLayoutControllerBase;
|
||||
exports.PopupLayoutController = PopupLayoutController;
|
||||
return exports
|
||||
}));
|
||||
@@ -0,0 +1,232 @@
|
||||
/* Layout */
|
||||
|
||||
.simple-layout,
|
||||
.simple-layout-tablet {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.simple-layout .layout-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.simple-layout .layout-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.simple-layout .layout-content > div,
|
||||
.simple-layout .transition-frame {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.simple-layout .view-footer {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.simple-layout .view-footer .dx-toolbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.simple-layout .view-footer .dx-toolbar .dx-toolbar-center {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ios7 */
|
||||
|
||||
.dx-theme-ios7 .simple-layout .layout-header {
|
||||
top: 0;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .simple-layout .layout-content {
|
||||
top: 45px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .simple-layout .view-footer .dx-toolbar {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .simple-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
||||
font-size: 20px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
/* android5 */
|
||||
|
||||
.dx-theme-android5 .simple-layout .layout-content {
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
|
||||
.dx-theme-generic .simple-layout .layout-content {
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .simple-layout .layout-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .simple-layout .layout-header .dx-toolbar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dx-theme-generic .simple-layout .layout-header .dx-toolbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .simple-layout .layout-header .dx-toolbar-items-container {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .simple-layout .view-footer .dx-button {
|
||||
width: 97%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Windows Phone 8*/
|
||||
.dx-theme-win8 .simple-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-header {
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-content {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-content > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .view-content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-frame {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.dx-theme-win8 .simple-layout.has-toolbar-bottom .layout-frame,
|
||||
.dx-theme-win8 .simple-layout .has-toolbar-bottom.layout-frame {
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout .layout-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .simple-layout.has-toolbar-bottom .layout-footer {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Windows Phone 10 */
|
||||
.dx-theme-win10 .simple-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.dx-theme-win10.dx-device-phone .simple-layout .layout-header {
|
||||
height: 20px;
|
||||
top: 20px;
|
||||
text-indent: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dx-theme-win10.dx-device-desktop .simple-layout .layout-header .dx-toolbar-center {
|
||||
margin: 0 0 0 70px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-content > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .view-content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-frame {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.dx-theme-win10 .simple-layout.has-toolbar-bottom .layout-frame,
|
||||
.dx-theme-win10 .simple-layout .has-toolbar-bottom.layout-frame {
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout .layout-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout.has-toolbar-bottom .layout-footer {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .simple-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: false, version: [8] } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
|
||||
data-options="dxCommandContainer : { id: 'win8-master-detail-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom win8" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: false } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
|
||||
data-options="dxCommandContainer : { id: 'win10-appbar' }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: true } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' }">
|
||||
<div data-bind="text: title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win10-phone-appbar' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: true, version: [8] } ">
|
||||
<div class="layout-frame">
|
||||
<div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' }">
|
||||
<div data-bind="text: title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
|
||||
<div class="layout-toolbar-bottom win8" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'ios' } " >
|
||||
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'ios-header-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'ios-view-footer' } " ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'android' } " >
|
||||
<div class="transition-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
|
||||
data-options="dxCommandContainer : { id: 'android-simple-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'generic' } " >
|
||||
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'generic-header-toolbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'generic-view-footer' } " ></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("core/class"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("core/devices"), require("core/errors").log, require("ui/toolbar"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.SimpleLayout = factory(jQuery, DevExpress.Class, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController, DevExpress.devices, DevExpress.errors.log);
|
||||
root.DevExpress.framework.html.SimpleLayoutController = root.DevExpress.layouts.SimpleLayout.SimpleLayoutController;
|
||||
root.DevExpress.framework.html.Win8SimpleLayoutController = root.DevExpress.layouts.SimpleLayout.Win8SimpleLayoutController
|
||||
}
|
||||
}(this, function($, Class, layoutSets, DefaultLayoutController, devices, log) {
|
||||
var exports = {};
|
||||
var SimpleLayoutController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "simple";
|
||||
this.callBase(options);
|
||||
var device = devices.current();
|
||||
if (device.win && device.phone || options.Win8SimpleLayoutControllerFroced) {
|
||||
this.impl = new Win8SimpleLayoutImpl($.proxy(this._getViewFrame, this))
|
||||
}
|
||||
else {
|
||||
this.impl = new SimpleLayoutImpl
|
||||
}
|
||||
}, _onRenderComplete: function(viewInfo) {
|
||||
this.impl.onRenderComplete(viewInfo);
|
||||
this.callBase.apply(this, arguments)
|
||||
}, disposeView: function(viewInfo) {
|
||||
this.impl.disposeView(viewInfo);
|
||||
this.callBase.apply(this, arguments)
|
||||
}, _changeView: function(viewInfo) {
|
||||
var that = this,
|
||||
result = this.callBase.apply(this, arguments);
|
||||
result.done(function() {
|
||||
that.impl.changeView(viewInfo)
|
||||
});
|
||||
return result
|
||||
}
|
||||
});
|
||||
var SimpleLayoutImpl = Class.inherit({
|
||||
ctor: $.noop, onRenderComplete: $.noop, disposeView: $.noop, changeView: $.noop
|
||||
});
|
||||
var HAS_TOOLBAR_BOTTOM_CLASS = "has-toolbar-bottom",
|
||||
LAYOUT_TOOLBAR_BOTTOM_SELECTOR = ".layout-toolbar-bottom";
|
||||
var Win8SimpleLayoutImpl = SimpleLayoutImpl.inherit({
|
||||
ctor: function(viewFrameGetter) {
|
||||
this._getViewFrame = viewFrameGetter;
|
||||
this.callBase.apply(this, arguments);
|
||||
this._toolbarOptionChangedHandler = $.proxy(this._onToolbarOptionChanged, this)
|
||||
}, _onToolbarOptionChanged: function(args) {
|
||||
if (args.name === "items") {
|
||||
var appbar = args.component;
|
||||
if (appbar) {
|
||||
this._refreshAppbarVisibility(appbar)
|
||||
}
|
||||
this._refreshHasToolbarClass()
|
||||
}
|
||||
}, _getAppbar: function($markup) {
|
||||
var $appbar = $markup.find(LAYOUT_TOOLBAR_BOTTOM_SELECTOR);
|
||||
if ($appbar.length !== 1) {
|
||||
return
|
||||
}
|
||||
return $appbar.dxToolbar("instance")
|
||||
}, _getCurrentAppbar: function() {
|
||||
return this._getAppbar(this._getViewFrame().find(".dx-active-view "))
|
||||
}, onRenderComplete: function(viewInfo) {
|
||||
var appbar = this._getAppbar(viewInfo.renderResult.$markup);
|
||||
if (appbar) {
|
||||
this._refreshAppbarVisibility(appbar);
|
||||
appbar.on("optionChanged", this._toolbarOptionChangedHandler)
|
||||
}
|
||||
}, disposeView: function(viewInfo) {
|
||||
var appbar = this._getAppbar(viewInfo.renderResult.$markup);
|
||||
if (appbar) {
|
||||
appbar.off("optionChanged", this._toolbarOptionChangedHandler)
|
||||
}
|
||||
}, changeView: function(viewInfo) {
|
||||
this._refreshHasToolbarClass()
|
||||
}, _refreshAppbarVisibility: function(appbar) {
|
||||
var isAppbarNotEmpty = false;
|
||||
$.each(appbar.option("items"), function(index, item) {
|
||||
if (item.visible) {
|
||||
isAppbarNotEmpty = true;
|
||||
return false
|
||||
}
|
||||
});
|
||||
appbar.option("visible", isAppbarNotEmpty)
|
||||
}, _refreshHasToolbarClass: function() {
|
||||
var appbar = this._getCurrentAppbar(),
|
||||
hasToolbar = appbar ? appbar.option("visible") : false;
|
||||
this._getViewFrame().toggleClass(HAS_TOOLBAR_BOTTOM_CLASS, hasToolbar)
|
||||
}
|
||||
});
|
||||
var Win8SimpleLayoutController = SimpleLayoutController.inherit({ctor: function(options) {
|
||||
options = options || {};
|
||||
options.Win8SimpleLayoutControllerFroced = true;
|
||||
log("W0000", "Layouts", "Win8SimpleLayoutController", "15.1", "Use the SimpleLayoutController instead");
|
||||
this.callBase.apply(this, arguments)
|
||||
}});
|
||||
layoutSets["navbar"] = layoutSets["navbar"] || [];
|
||||
layoutSets["navbar"].push({
|
||||
platform: "win", root: false, phone: true, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["navbar"].push({
|
||||
platform: "android", root: false, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["simple"] = layoutSets["simple"] || [];
|
||||
layoutSets["simple"].push({controller: new SimpleLayoutController});
|
||||
layoutSets["simple"].push({
|
||||
platform: "win", phone: true, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["split"] = layoutSets["split"] || [];
|
||||
layoutSets["split"].push({
|
||||
platform: "win", requireCustomResolve: true, controller: new SimpleLayoutController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "win", root: false, phone: true, controller: new SimpleLayoutController
|
||||
});
|
||||
exports.SimpleLayoutController = SimpleLayoutController;
|
||||
exports.Win8SimpleLayoutController = Win8SimpleLayoutController;
|
||||
return exports
|
||||
}));
|
||||
@@ -0,0 +1,234 @@
|
||||
.slideout-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slideout-layout .layout-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.slideout-layout .layout-content {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slideout-layout .layout-content > div[data-options] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slideout-layout .view-content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slideout-layout .layout-frame {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.dx-slideout .dx-slideout-item-container .dx-slideoutview-shield {
|
||||
z-index: 201;
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.slideout-layout .layout-frame,
|
||||
.slideout-layout .layout-frame .layout-header,
|
||||
.slideout-layout .layout-frame .layout-header .dx-toolbar {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.slideout-layout .view-footer {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.slideout-layout .view-footer .dx-toolbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.slideout-layout .view-footer .dx-toolbar .dx-toolbar-center {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* navigation */
|
||||
.slideout-layout .navigation-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.slideout-layout .nav-partial-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slideout-layout .navigation-list .dx-list .dx-list-item .dx-navigation-item {
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.slideout-layout .navigation-list .dx-list .dx-list-item .dx-icon {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
-moz-background-size: 100%;
|
||||
-o-background-size: 100%;
|
||||
-webkit-background-size: 100%;
|
||||
background-size: 100%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.dx-rtl .slideout-layout .navigation-list .dx-list .dx-list-item .dx-icon,
|
||||
.dx-rtl.slideout-layout .navigation-list .dx-list .dx-list-item .dx-icon {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* iOS7 */
|
||||
.dx-theme-ios7 .slideout-layout .layout-header.dx-toolbar-wrapper {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .slideout-layout .layout-header {
|
||||
height: 43px;
|
||||
}
|
||||
.dx-theme-ios7 .slideout-layout .layout-content {
|
||||
top: 44px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .slideout-layout .view-footer .dx-toolbar {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.dx-theme-ios7 .slideout-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
||||
font-size: 20px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
/* Android 5 */
|
||||
.dx-theme-android5 .slideout-layout .layout-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .slideout-layout .layout-content,
|
||||
.dx-theme-android5 .dx-slideout .dx-slideout-item-container .dx-slideoutview-shield {
|
||||
top: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-android5 .slideout-layout .layout-frame,
|
||||
.dx-theme-android5 .slideout-layout .layout-frame .layout-header,
|
||||
.dx-theme-android5 .slideout-layout .layout-frame .layout-header .dx-toolbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Windows phone 8 */
|
||||
|
||||
.dx-theme-win8 .slideout-layout .layout-header {
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .slideout-layout .layout-content,
|
||||
.dx-theme-win8 .dx-slideout .dx-slideout-item-container .dx-slideoutview-shield {
|
||||
top: 88px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .slideout-layout .layout-content.has-toolbar-bottom {
|
||||
overflow: hidden;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .slideout-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .slideout-layout .layout-header .dx-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dx-device-phone.dx-theme-win8 .slideout-layout .layout-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.dx-device-phone.dx-theme-win8 .slideout-layout .layout-content,
|
||||
.dx-device-phone.dx-theme-win8 .dx-slideout .dx-slideout-item-container .dx-slideoutview-shield {
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
|
||||
/* Windows phone 10 */
|
||||
|
||||
.dx-theme-win10 .slideout-layout .layout-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .slideout-layout .layout-content,
|
||||
.dx-theme-win10 .dx-slideout .dx-slideout-item-container .dx-slideoutview-shield {
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .slideout-layout .layout-content.has-toolbar-bottom {
|
||||
overflow: hidden;
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .slideout-layout .dx-toolbar.layout-toolbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .slideout-layout .layout-header .dx-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* generic theme */
|
||||
|
||||
.dx-theme-generic .slideout-layout .layout-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .slideout-layout .layout-content {
|
||||
top: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic.dx-device-mobile .slideout-layout .layout-header .dx-toolbar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.dx-theme-generic .slideout-layout .layout-header .dx-toolbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .slideout-layout .layout-header .dx-toolbar-items-container {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.dx-theme-generic .slideout-layout .view-footer .dx-button {
|
||||
width: 97%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
<script type="text/html" id="slideOutMenuItemTemplate">
|
||||
<div data-bind="visible: visible, css: { 'dx-state-disabled': disabled }" data-options="dxTemplate : { name: 'item' } ">
|
||||
<div>
|
||||
<!-- ko dxIcon: $data.icon || $data.iconSrc --><!-- /ko -->
|
||||
<div class="dx-navigation-item" data-bind="text: text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div class="slideout-layout" data-options="dxLayout : { name: 'slideout', platform: 'ios' } ">
|
||||
<div class="layout-header dx-toolbar-wrapper dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div class="layout-toolbar" data-bind="dxToolbar: { items: [{ location: 'before', template: 'nav-button', visible: false }, { location: 'center', text: title }] }"
|
||||
data-options="dxCommandContainer : { id: 'ios-header-toolbar' }">
|
||||
<div class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } ">
|
||||
<div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } ">
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'ios-view-footer' } "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slideout-layout" data-options="dxLayout : { name: 'slideout', platform: 'android' } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header dx-toolbar-wrapper">
|
||||
<div class="layout-toolbar" data-bind="dxToolbar: { items: [{ location: 'before', template: 'nav-button', visible: false }, { location: 'center', text: title }] }"
|
||||
data-options="dxCommandContainer : { id: 'android-header-toolbar' }">
|
||||
<div class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } ">
|
||||
<div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content' } ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slideout-layout" data-options="dxLayout : { name: 'slideout', platform: 'generic' } ">
|
||||
<div class="layout-header dx-toolbar-wrapper dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
|
||||
<div class="layout-toolbar" data-bind="dxToolbar: { items: [{ location: 'before', template: 'nav-button', visible: false }, { location: 'center', text: title }] }"
|
||||
data-options="dxCommandContainer : { id: 'generic-header-toolbar' }">
|
||||
<div class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } ">
|
||||
<div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
|
||||
</div>
|
||||
|
||||
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } ">
|
||||
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'generic-view-footer' } ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slideout-layout" data-options="dxLayout : { name: 'slideout', platform: 'win' } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div class="layout-toolbar" data-bind="dxToolbar: { items: [{ location: 'before', template: 'nav-button', visible: false }, { location: 'center', text: title }] }">
|
||||
<div class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } ">
|
||||
<div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content' } ">
|
||||
</div>
|
||||
|
||||
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { visible: false, renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win10-phone-appbar' } ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="slideout-layout" data-options="dxLayout : { name: 'slideout', platform: 'win', version: [8] } ">
|
||||
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
|
||||
<div class="layout-header">
|
||||
<div class="layout-toolbar" data-bind="dxToolbar: { items: [{ location: 'before', template: 'nav-button', visible: false }, { location: 'center', text: title }] }">
|
||||
<div class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } ">
|
||||
<div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content' } ">
|
||||
</div>
|
||||
|
||||
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { visible: false, renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,140 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("animation/fx"), require("core/devices"), require("ui/slide_out"), require("ui/toolbar"), require("ui/button"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.SlideOutLayout = factory(jQuery, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController, DevExpress.fx, DevExpress.devices);
|
||||
root.DevExpress.framework.html.SlideOutController = root.DevExpress.layouts.SlideOutLayout.SlideOutController
|
||||
}
|
||||
}(this, function($, layoutSets, DefaultLayoutController, fx, devices) {
|
||||
var exports = {};
|
||||
var SlideOutController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "slideout";
|
||||
this.swipeEnabled = options.swipeEnabled === undefined ? true : options.swipeEnabled;
|
||||
this.callBase(options)
|
||||
}, init: function(options) {
|
||||
this.callBase(options);
|
||||
this._navigationManager = options.navigationManager;
|
||||
this._navigationCanceledHandler = $.proxy(this._onNavigatingCanceled, this)
|
||||
}, activate: function() {
|
||||
var result = this.callBase.apply(this, arguments);
|
||||
this._navigationManager.on("navigationCanceled", this._navigationCanceledHandler);
|
||||
return result
|
||||
}, deactivate: function() {
|
||||
this._navigationManager.off("navigationCanceled", this._navigationCanceledHandler);
|
||||
return this.callBase.apply(this, arguments)
|
||||
}, disable: function() {
|
||||
if (this.slideOut.option("menuVisible")) {
|
||||
this._toggleNavigation()
|
||||
}
|
||||
return this.callBase.apply(this, arguments)
|
||||
}, _onNavigatingCanceled: function(args) {
|
||||
if (this.slideOut.option("menuVisible") && args.cancelReason !== "redirect") {
|
||||
this._toggleNavigation()
|
||||
}
|
||||
}, _createNavigationWidget: function() {
|
||||
this.$slideOut = $("<div data-bind='dxSlideOut: { menuItemTemplate: $(\"#slideOutMenuItemTemplate\"), contentTemplate: \" \" }'></div>").dxCommandContainer({id: 'global-navigation'});
|
||||
this._applyTemplate(this.$slideOut, this._layoutModel);
|
||||
this.callBase();
|
||||
this.slideOut = this.$slideOut.dxSlideOut("instance");
|
||||
this.slideOut.option("swipeEnabled", this.swipeEnabled);
|
||||
this.$slideOut.find(".dx-slideout-item-container").append(this._$mainLayout);
|
||||
return this.$slideOut
|
||||
}, _renderNavigationImpl: function(navigationCommands) {
|
||||
var container = this.$slideOut.dxCommandContainer("instance");
|
||||
this._commandManager.renderCommandsToContainers(navigationCommands, [container])
|
||||
}, element: function() {
|
||||
return this.$slideOut
|
||||
}, _showViewImpl: function(viewInfo, direction, previousViewTemplateId) {
|
||||
this._fxOffSaved = fx.off;
|
||||
if (this.slideOut.option("menuVisible")) {
|
||||
fx.off = true
|
||||
}
|
||||
return this.callBase.apply(this, arguments)
|
||||
}, _getReadyForRenderDeferredItems: function(viewInfo) {
|
||||
var result = this.callBase(viewInfo);
|
||||
fx.off = this._fxOffSaved;
|
||||
if (this.slideOut.option("menuVisible")) {
|
||||
result = $.when(this._toggleNavigation(), result)
|
||||
}
|
||||
return result
|
||||
}, _onViewShown: function(viewInfo) {
|
||||
this._refreshVisibility()
|
||||
}, _refreshVisibility: function() {
|
||||
if (devices.real().platform === "android") {
|
||||
this.$slideOut.css("backface-visibility", "hidden");
|
||||
this.$slideOut.css("backface-visibility");
|
||||
this.$slideOut.css("backface-visibility", "visible")
|
||||
}
|
||||
}, _viewHasBackCommands: function(viewInfo) {
|
||||
var hasBackCommands = false;
|
||||
$.each(viewInfo.commands, function(index, command) {
|
||||
if (((command.option("behavior") === "back" || command.option("id") === "back")) && command.option("visible")) {
|
||||
hasBackCommands = true;
|
||||
return false
|
||||
}
|
||||
});
|
||||
return hasBackCommands
|
||||
}, _onRenderComplete: function(viewInfo) {
|
||||
var that = this;
|
||||
if (!that._viewHasBackCommands(viewInfo)) {
|
||||
that._initNavigationButton(viewInfo.renderResult.$markup)
|
||||
}
|
||||
var $content = viewInfo.renderResult.$markup.find(".layout-content"),
|
||||
$appbar = viewInfo.renderResult.$markup.find(".layout-toolbar-bottom"),
|
||||
appbar = $appbar.dxToolbar("instance");
|
||||
if (appbar) {
|
||||
that._refreshAppbarVisibility(appbar, $content);
|
||||
appbar.on("optionChanged", function(args) {
|
||||
if (args.name === "items") {
|
||||
that._refreshAppbarVisibility(appbar, $content)
|
||||
}
|
||||
})
|
||||
}
|
||||
}, _refreshAppbarVisibility: function(appbar, $content) {
|
||||
var isAppbarNotEmpty = false;
|
||||
$.each(appbar.option("items"), function(index, item) {
|
||||
if (item.visible) {
|
||||
isAppbarNotEmpty = true;
|
||||
return false
|
||||
}
|
||||
});
|
||||
$content.toggleClass("has-toolbar-bottom", isAppbarNotEmpty);
|
||||
appbar.option("visible", isAppbarNotEmpty)
|
||||
}, _initNavigationButton: function($markup) {
|
||||
var that = this,
|
||||
$toolbar = $markup.find(".layout-toolbar"),
|
||||
toolbar = $toolbar.dxToolbar("instance");
|
||||
var initNavButton = function() {
|
||||
toolbar.option("items[0].visible", true);
|
||||
$toolbar.find(".nav-button").dxButton("instance").option("onClick", $.proxy(that._toggleNavigation, that, $markup))
|
||||
};
|
||||
initNavButton();
|
||||
toolbar.on("contentReady", function(args) {
|
||||
initNavButton()
|
||||
})
|
||||
}, _toggleNavigation: function($markup) {
|
||||
return this.slideOut.toggleMenuVisibility()
|
||||
}
|
||||
});
|
||||
layoutSets["slideout"] = layoutSets["slideout"] || [];
|
||||
layoutSets["slideout"].push({
|
||||
platform: "ios", controller: new SlideOutController
|
||||
});
|
||||
layoutSets["slideout"].push({
|
||||
platform: "android", controller: new SlideOutController
|
||||
});
|
||||
layoutSets["slideout"].push({
|
||||
platform: "generic", controller: new SlideOutController
|
||||
});
|
||||
layoutSets["slideout"].push({
|
||||
platform: "win", controller: new SlideOutController
|
||||
});
|
||||
exports.SlideOutController = SlideOutController;
|
||||
return exports
|
||||
}));
|
||||
@@ -0,0 +1,210 @@
|
||||
.dx-viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 620px 1fr;
|
||||
-ms-grid-rows: 104px 1fr;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .layout-header {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column-span: 2;
|
||||
padding: 60px 120px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .layout-header .dx-toolbar {
|
||||
margin-left: -63px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .dx-rtl .split-layout .layout-header .dx-toolbar,
|
||||
.dx-theme-win8 .dx-rtl.split-layout .layout-header .dx-toolbar {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .layout-header .dx-toolbar-center {
|
||||
margin: 0 0 0 70px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .dx-rtl .split-layout .layout-header .dx-toolbar-center,
|
||||
.dx-theme-win8 .dx-rtl.split-layout .layout-header .dx-toolbar-center {
|
||||
margin-right: 7px;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .layout-header .dx-toolbar-after {
|
||||
margin: 10px 120px 0 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .dx-rtl .split-layout .layout-header .dx-toolbar-after,
|
||||
.dx-theme-win8 .dx-rtl.split-layout .layout-header .dx-toolbar-after {
|
||||
margin-right: 0;
|
||||
margin-left: 120px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .left-content {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 2;
|
||||
padding: 60px 0 0 120px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .dx-rtl .split-layout .left-content,
|
||||
.dx-theme-win8 .dx-rtl.split-layout .left-content {
|
||||
padding-right: 120px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .right-content {
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-row: 2;
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
|
||||
/*.dx-theme-win8 .split-layout .right-content .content {
|
||||
margin-left: 40px;
|
||||
}*/
|
||||
|
||||
.dx-theme-win8 .split-layout .right-content .dx-scrollview-content {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .dx-app-bar {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
bottom: -104px;
|
||||
transition: bottom .4s;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout .dx-app-bar.dx-app-bar-visible {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .split-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .content, .dx-theme-win8 .content>div {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dx-theme-win8 .have-static-appbar .left-content,
|
||||
.dx-theme-win8 .have-static-appbar .right-content {
|
||||
margin-bottom: 82px;
|
||||
}
|
||||
|
||||
.split-layout .left-content > .dx-content-placeholder,
|
||||
.split-layout .left-content > .dx-content-placeholder > .dx-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Win 10 */
|
||||
|
||||
.dx-theme-win10 .split-layout {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr 3fr;
|
||||
-ms-grid-rows: 60px 1fr;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .split-layout .layout-header {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column-span: 2;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .split-layout .layout-header .dx-toolbar-center {
|
||||
margin: 0 0 0 70px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .dx-rtl .split-layout .layout-header .dx-toolbar-center,
|
||||
.dx-theme-win10 .dx-rtl.split-layout .layout-header .dx-toolbar-center {
|
||||
margin-right: 70px;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .split-layout .left-content {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-row: 2;
|
||||
background-color: #171717;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .split-layout .right-content {
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-row: 2;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .split-layout .right-content .dx-scrollview-content {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .split-layout.dx-animating:not(.dx-enter):not(.dx-leave) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dx-theme-win10 .content, .dx-theme-win10 .content>div {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Master-Detail */
|
||||
.master-detail-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.master-detail-layout .master-pane {
|
||||
width: 320px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.master-detail-layout .detail-pane {
|
||||
position: absolute;
|
||||
left: 320px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.master-detail-layout .header-toolbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.master-detail-layout .main-area {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 48px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<div class="master-detail-layout" data-options="dxLayout : { name: 'split', tablet: true, platform: 'ios' }">
|
||||
<div class="master-pane dx-splitter">
|
||||
</div>
|
||||
|
||||
<div class="detail-pane">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="master-detail-layout" data-options="dxLayout : { name: 'split', tablet: true, platform: 'android' }">
|
||||
<div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, align: 'center' }] }" data-options="dxCommandContainer : { id: 'android-simple-toolbar' }" >
|
||||
</div>
|
||||
<div class="main-area">
|
||||
<div class="master-pane dx-splitter">
|
||||
</div>
|
||||
<div class="detail-pane">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split-layout" data-options="dxLayout : { name: 'split', platform: 'win', phone: false, version: [8] } " >
|
||||
<div class="layout-header">
|
||||
<div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }" data-options="dxCommandContainer : { id: 'win8-master-detail-toolbar' }" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-content">
|
||||
</div>
|
||||
|
||||
<div class="right-content">
|
||||
</div>
|
||||
|
||||
<div class="dx-app-bar">
|
||||
<div class="footer-toolbar" data-bind="dxToolbar: { }" data-options="dxCommandContainer : { id: 'win8-appbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="split-layout" data-options="dxLayout : { name: 'split', platform: 'win', phone: false } ">
|
||||
<div class="layout-header">
|
||||
<div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }" data-options="dxCommandContainer : { id: 'win10-appbar' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-content">
|
||||
</div>
|
||||
|
||||
<div class="right-content">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="master-detail-layout" data-options="dxLayout : { name: 'split', tablet: true, platform: 'generic' }">
|
||||
<div class="master-pane dx-splitter">
|
||||
</div>
|
||||
|
||||
<div class="detail-pane">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,381 @@
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function(require, exports, module) {
|
||||
module.exports = factory(require("jquery"), require("knockout"), require("core/class"), require("framework/errors"), require("framework/html/presets").layoutSets, require("framework/html/layout_controller").DefaultLayoutController, require("../Empty/EmptyLayout.js"), require("../Simple/SimpleLayout.js"), require("animation/fx"), require("ui/toolbar"))
|
||||
})
|
||||
}
|
||||
else {
|
||||
root.DevExpress.layouts = root.DevExpress.layouts || {};
|
||||
root.DevExpress.layouts.SplitLayout = factory(jQuery, window.ko, DevExpress.Class, DevExpress.framework.errors, DevExpress.framework.html.layoutSets, DevExpress.framework.html.DefaultLayoutController, DevExpress.layouts.EmptyLayout, DevExpress.layouts.SimpleLayout, DevExpress.fx);
|
||||
root.DevExpress.framework.html.MultipaneLayoutController = root.DevExpress.layouts.SplitLayout.MultipaneLayoutController;
|
||||
root.DevExpress.framework.html.IOSSplitLayoutController = root.DevExpress.layouts.SplitLayout.IOSSplitLayoutController;
|
||||
root.DevExpress.framework.html.ToolbarController = root.DevExpress.layouts.SplitLayout.ToolbarController;
|
||||
root.DevExpress.framework.html.AndroidSplitLayoutController = root.DevExpress.layouts.SplitLayout.AndroidSplitLayoutController;
|
||||
root.DevExpress.framework.html.WinSplitLayoutController = root.DevExpress.layouts.SplitLayout.WinSplitLayoutController;
|
||||
root.DevExpress.framework.html.Win8SplitLayoutController = root.DevExpress.layouts.SplitLayout.Win8SplitLayoutController
|
||||
}
|
||||
}(this, function($, ko, Class, errors, layoutSets, DefaultLayoutController, EmptyLayoutControllerModule, SimpleLayoutControllerModule, fx) {
|
||||
var exports = {},
|
||||
APPBAR_TOUCH_AREA_HEIGHT = 50,
|
||||
APPBAR_TOUCH_THRESHOLD = 50,
|
||||
EVENTS_NAMESPACE = ".dxSplitLayout",
|
||||
KEYCODE_WIN = 91,
|
||||
KEYCODE_Z = 90,
|
||||
POINTER_DOWN_EVENT_NAME,
|
||||
POINTER_UP_EVENT_NAME,
|
||||
POINTER_MOVE_EVENT_NAME;
|
||||
if (window.PointerEvent) {
|
||||
POINTER_DOWN_EVENT_NAME = "pointerdown";
|
||||
POINTER_UP_EVENT_NAME = "pointerup";
|
||||
POINTER_MOVE_EVENT_NAME = "pointermove"
|
||||
}
|
||||
else if (window.MSPointerEvent) {
|
||||
POINTER_DOWN_EVENT_NAME = "MSPointerDown";
|
||||
POINTER_UP_EVENT_NAME = "MSPointerUp";
|
||||
POINTER_MOVE_EVENT_NAME = "MSPointerMove"
|
||||
}
|
||||
else {
|
||||
POINTER_DOWN_EVENT_NAME = "mousedown";
|
||||
POINTER_UP_EVENT_NAME = "mouseup";
|
||||
POINTER_MOVE_EVENT_NAME = "mousemove"
|
||||
}
|
||||
var SplitLayoutEventHelper = Class.inherit({
|
||||
ctor: function(splitLayout) {
|
||||
this.root = splitLayout
|
||||
}, init: function() {
|
||||
this.root._$viewPort.on(POINTER_UP_EVENT_NAME + EVENTS_NAMESPACE, $.proxy(this._pointerUpHandler, this));
|
||||
this.root._$viewPort.on(POINTER_DOWN_EVENT_NAME + EVENTS_NAMESPACE, $.proxy(this._pointerDownHandler, this));
|
||||
$(document).on("keydown" + EVENTS_NAMESPACE, $.proxy(this._keyDownHandler, this));
|
||||
$(document).on("keyup" + EVENTS_NAMESPACE, $.proxy(this._keyUpHandler, this));
|
||||
this._startTouchPoint = false;
|
||||
this._winKeyPressed = false;
|
||||
this._moveEvent = false;
|
||||
this._appbarBehavior = true
|
||||
}, _pointerDownHandler: function(e) {
|
||||
var originalEvent = e.originalEvent;
|
||||
if (this._isTouch(originalEvent) && this._startedInAppBarArea(originalEvent)) {
|
||||
this._startTouchPoint = {
|
||||
x: originalEvent.clientX, y: originalEvent.clientY
|
||||
};
|
||||
this.root._$viewPort.on(POINTER_MOVE_EVENT_NAME + EVENTS_NAMESPACE, $.proxy(this._pointerMoveHandler, this))
|
||||
}
|
||||
}, _pointerMoveHandler: function(e) {
|
||||
var originalEvent = e.originalEvent;
|
||||
if (this._thresholdExceeded(originalEvent)) {
|
||||
this._moveEvent = true;
|
||||
this.root._$viewPort.off(POINTER_MOVE_EVENT_NAME + EVENTS_NAMESPACE);
|
||||
if (this._isVerticalDirection(originalEvent.clientX, originalEvent.clientY))
|
||||
this._toggleAppBarState(true)
|
||||
}
|
||||
}, _pointerUpHandler: function(e) {
|
||||
this.root._$viewPort.off(POINTER_MOVE_EVENT_NAME + EVENTS_NAMESPACE);
|
||||
var $appBar = this.root._$viewPort.find(".dx-app-bar");
|
||||
if (e.originalEvent.button === 2) {
|
||||
this._toggleAppBarState()
|
||||
}
|
||||
else if (!this._moveEvent && $appBar[0] && !$appBar[0].contains(e.target)) {
|
||||
this._toggleAppBarState(false)
|
||||
}
|
||||
this._moveEvent = false
|
||||
}, _keyDownHandler: function(e) {
|
||||
if (e.keyCode === KEYCODE_WIN) {
|
||||
this._winKeyPressed = true
|
||||
}
|
||||
}, _keyUpHandler: function(e) {
|
||||
if (this._winKeyPressed && (e.keyCode === KEYCODE_Z)) {
|
||||
this._toggleAppBarState()
|
||||
}
|
||||
else if (e.keyCode === KEYCODE_WIN) {
|
||||
this._winKeyPressed = false
|
||||
}
|
||||
}, _toggleAppBarState: function(state) {
|
||||
if (!this.root._appBarHasCommands())
|
||||
return;
|
||||
this.root._$viewPort.find(".dx-app-bar").toggleClass("dx-app-bar-visible", !this._appbarBehavior || state)
|
||||
}, _isVerticalDirection: function(x, y) {
|
||||
return Math.abs(y - this._startTouchPoint.y) > Math.abs(x - this._startTouchPoint.x)
|
||||
}, _isTouch: function(event) {
|
||||
return event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === event.MSPOINTER_TYPE_PEN
|
||||
}, _startedInAppBarArea: function(event) {
|
||||
return (this.root._$viewPort.height() - APPBAR_TOUCH_AREA_HEIGHT) < event.clientY
|
||||
}, _thresholdExceeded: function(originalEvent) {
|
||||
return originalEvent.clientY < (this._startTouchPoint.y - APPBAR_TOUCH_THRESHOLD)
|
||||
}
|
||||
});
|
||||
var MultipaneLayoutController = DefaultLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.name = options.name || "split";
|
||||
this._detailPaneName = options.detailPaneName || "detail";
|
||||
this._masterPaneName = options.masterPaneName || "master";
|
||||
options.defaultPaneName = this._detailPaneName;
|
||||
this.callBase(options);
|
||||
this._panesConfig = options.panesConfig;
|
||||
this._activeViews = {};
|
||||
this._stateStorageKey = "dxSplitLayoutState"
|
||||
}, init: function(options) {
|
||||
options = options || {};
|
||||
this.callBase(options);
|
||||
this._router = options.app && options.app.router;
|
||||
this._onNavigatingHandler = $.proxy(this._onNavigating, this);
|
||||
this._onNavigatedHandler = $.proxy(this._onNavigated, this);
|
||||
this._navigationManager = options.navigationManager;
|
||||
this._ensurePanesConfig();
|
||||
this._initChildControllers(options)
|
||||
}, activate: function() {
|
||||
var tasks = [];
|
||||
this.callBase();
|
||||
this._navigationManager.on("navigating", this._onNavigatingHandler);
|
||||
this._navigationManager.on("navigated", this._onNavigatedHandler);
|
||||
this._navigationManager.on("navigatingBack", this._onNavigatingBackHandler);
|
||||
$.each(this._panesConfig, function(_, paneConfig) {
|
||||
tasks.push(paneConfig.controller.activate())
|
||||
});
|
||||
return $.when.apply($, tasks)
|
||||
}, deactivate: function() {
|
||||
var that = this,
|
||||
tasks = [];
|
||||
$.each(this._panesConfig, function(_, paneConfig) {
|
||||
tasks.push(paneConfig.controller.deactivate())
|
||||
});
|
||||
this._navigationManager.off("navigating", this._onNavigatingHandler);
|
||||
this._navigationManager.off("navigated", this._onNavigatedHandler);
|
||||
this.callBase();
|
||||
return $.when.apply($, tasks).done(function() {
|
||||
that._activeViews = {}
|
||||
})
|
||||
}, showView: function(viewInfo, direction) {
|
||||
var that = this,
|
||||
paneConfig = that._getPaneConfig(viewInfo);
|
||||
return paneConfig.controller.showView(viewInfo, direction).done(function() {
|
||||
that._activeViews[that._getViewPaneName(viewInfo.viewTemplateInfo)] = viewInfo
|
||||
})
|
||||
}, activeViewInfo: function() {
|
||||
return this._activeViews[this._masterPaneName]
|
||||
}, _updateLayoutTitle: function(viewInfo, defaultTitle) {
|
||||
if (this._getViewPaneName(viewInfo.viewTemplateInfo) === this._masterPaneName) {
|
||||
var title;
|
||||
if (viewInfo.model !== undefined) {
|
||||
title = ko.utils.unwrapObservable(viewInfo.model.title)
|
||||
}
|
||||
else {
|
||||
title = (viewInfo.viewTemplateInfo || {}).title
|
||||
}
|
||||
this._layoutModel.title(title || defaultTitle || "")
|
||||
}
|
||||
}, _ensurePanesConfig: function() {
|
||||
if (!this._panesConfig) {
|
||||
this._panesConfig = this._createPanesConfig()
|
||||
}
|
||||
}, _createPanesConfig: function() {
|
||||
return {}
|
||||
}, _initChildControllers: function(options) {
|
||||
var that = this;
|
||||
$.each(that._panesConfig, function(_, paneConfig) {
|
||||
var controller = paneConfig.controller;
|
||||
controller.init($.extend({}, options, {$viewPort: that._$mainLayout.find(paneConfig.selector)}));
|
||||
$.each(["viewRendered", "viewShowing", "viewReleased", "viewHidden"], function(_, callbacksPropertyName) {
|
||||
controller.on(callbacksPropertyName, function(args) {
|
||||
that.fireEvent(callbacksPropertyName, [args])
|
||||
})
|
||||
})
|
||||
})
|
||||
}, _onNavigating: function(args) {
|
||||
var options = args.options,
|
||||
$sourceElement = this._getEventSourceElement(args.options.jQueryEvent);
|
||||
var routeValues = this._router.parse(args.uri),
|
||||
viewTemplateInfo = this._viewEngine.getViewTemplateInfo(routeValues.view).option(),
|
||||
pane = this._getViewPaneName(viewTemplateInfo);
|
||||
if (pane === this._detailPaneName) {
|
||||
options.stack = this._detailPaneName + "_pane";
|
||||
options.root = options.root === undefined ? $sourceElement.is(this._panesConfig[this._masterPaneName].selector + " *") : options.root;
|
||||
options.keepPositionInStack = false
|
||||
}
|
||||
else {
|
||||
options.stack = options.stack || this._masterPaneCurrentStackKey
|
||||
}
|
||||
args.options.pane = pane
|
||||
}, _onNavigated: function(args) {
|
||||
if (args.options.pane === this._masterPaneName) {
|
||||
this._masterPaneCurrentStackKey = this._navigationManager.currentStackKey
|
||||
}
|
||||
}, _getEventSourceElement: function(jQueryEvent) {
|
||||
return jQueryEvent ? $(jQueryEvent.target) : $()
|
||||
}, _getPaneConfig: function(viewInfo) {
|
||||
return this._panesConfig[this._getViewPaneName(viewInfo.viewTemplateInfo)]
|
||||
}, _getViewPaneName: function(viewTemplateInfo) {
|
||||
return viewTemplateInfo.pane || this._detailPaneName
|
||||
}, _raiseEvent: function(callback) {
|
||||
callback.fire()
|
||||
}, _ensureChildController: function(controller, layoutName) {
|
||||
if (!controller) {
|
||||
throw new Error(layoutName + "Controller is not found but it is required by the '" + this.name + "' layout for specified platform and device. Make sure the " + layoutName + ".* files are referenced in your main *.html file or specify other platform and device.");
|
||||
}
|
||||
}, saveState: function(storage) {
|
||||
var state = {};
|
||||
$.each(this._activeViews, function(pane, viewInfo) {
|
||||
state[pane] = {
|
||||
uri: viewInfo.uri, stack: viewInfo.navigateOptions.stack
|
||||
}
|
||||
});
|
||||
var json = JSON.stringify(state);
|
||||
storage.setItem(this._stateStorageKey, json)
|
||||
}, restoreState: function(storage) {
|
||||
var json = storage.getItem(this._stateStorageKey);
|
||||
if (json) {
|
||||
try {
|
||||
var that = this,
|
||||
state = JSON.parse(json);
|
||||
$.each(state, function(pane, navigateOptions) {
|
||||
that._navigationManager.navigate(navigateOptions.uri, {
|
||||
stack: navigateOptions.stack, target: 'current'
|
||||
})
|
||||
})
|
||||
}
|
||||
catch(e) {
|
||||
this.removeState(storage);
|
||||
throw errors.Error("E3007");
|
||||
}
|
||||
}
|
||||
}, removeState: function(storage) {
|
||||
storage.removeItem(this._stateStorageKey)
|
||||
}
|
||||
});
|
||||
var IOSSplitLayoutController = MultipaneLayoutController.inherit({_createPanesConfig: function() {
|
||||
this._ensureChildController(SimpleLayoutControllerModule.SimpleLayoutController, "SimpleLayout");
|
||||
return {
|
||||
master: {
|
||||
controller: new SimpleLayoutControllerModule.SimpleLayoutController, selector: ".master-pane"
|
||||
}, detail: {
|
||||
controller: new SimpleLayoutControllerModule.SimpleLayoutController, selector: ".detail-pane"
|
||||
}
|
||||
}
|
||||
}});
|
||||
var ToolbarController = Class.inherit({
|
||||
ctor: function($toolbar, commandManager) {
|
||||
this._commandManager = commandManager;
|
||||
this._$toolbar = $toolbar;
|
||||
this._toolbar = $toolbar.dxToolbar("instance");
|
||||
this._commandContainer = $toolbar.dxCommandContainer("instance")
|
||||
}, showViews: function(viewInfos) {
|
||||
var that = this,
|
||||
commands = this._mergeCommands(viewInfos),
|
||||
toolbarItems = that._toolbar.option("items");
|
||||
var newItems = $.map(toolbarItems, function(item) {
|
||||
return item.command ? undefined : item
|
||||
});
|
||||
that._toolbar.option("items", newItems);
|
||||
fx.off = true;
|
||||
that._commandManager.renderCommandsToContainers(commands, [that._commandContainer]);
|
||||
fx.off = false
|
||||
}, _mergeCommands: function(viewInfos) {
|
||||
var result = [],
|
||||
idHash = {};
|
||||
$.each(viewInfos, function(_, viewInfo) {
|
||||
if (viewInfo.commands) {
|
||||
$.each(viewInfo.commands, function(_, command) {
|
||||
var id = command.option("id");
|
||||
if (!(id in idHash)) {
|
||||
idHash[id] = true;
|
||||
result.push(command)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
return result
|
||||
}
|
||||
});
|
||||
var AndroidSplitLayoutController = MultipaneLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
options.layoutModel = options.layoutModel || this._createLayoutModel();
|
||||
this.callBase(options)
|
||||
}, init: function(options) {
|
||||
this.callBase(options);
|
||||
this.toolbarController = new ToolbarController(this._$mainLayout.find(".header-toolbar"), this._commandManager)
|
||||
}, _createLayoutModel: function() {
|
||||
return {title: ko.observable("")}
|
||||
}, showView: function(viewInfo, direction) {
|
||||
var that = this;
|
||||
that._updateLayoutTitle(viewInfo);
|
||||
return that.callBase(viewInfo, direction).done(function() {
|
||||
that.toolbarController.showViews(that._activeViews)
|
||||
})
|
||||
}, _createPanesConfig: function() {
|
||||
this._ensureChildController(EmptyLayoutControllerModule.EmptyLayoutController, "EmptyLayout");
|
||||
return {
|
||||
master: {
|
||||
controller: new EmptyLayoutControllerModule.EmptyLayoutController, selector: ".master-pane"
|
||||
}, detail: {
|
||||
controller: new EmptyLayoutControllerModule.EmptyLayoutController, selector: ".detail-pane"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
var WinSplitLayoutController = MultipaneLayoutController.inherit({
|
||||
ctor: function(options) {
|
||||
options = options || {};
|
||||
this._eventHelper = new SplitLayoutEventHelper(this);
|
||||
options.layoutModel = options.layoutModel || this._createLayoutModel();
|
||||
this.callBase(options)
|
||||
}, init: function(options) {
|
||||
this.callBase(options);
|
||||
this._eventHelper.init();
|
||||
this.headerToolbarController = new ToolbarController(this._$mainLayout.find(".header-toolbar"), this._commandManager)
|
||||
}, showView: function(viewInfo, direction) {
|
||||
var that = this;
|
||||
that._updateLayoutTitle(viewInfo);
|
||||
return that.callBase(viewInfo, direction).done(function() {
|
||||
that.headerToolbarController.showViews(that._activeViews)
|
||||
})
|
||||
}, _createLayoutModel: function() {
|
||||
return {title: ko.observable("")}
|
||||
}, _createPanesConfig: function() {
|
||||
this._ensureChildController(EmptyLayoutControllerModule.EmptyLayoutController, "EmptyLayout");
|
||||
return {
|
||||
master: {
|
||||
controller: new EmptyLayoutControllerModule.EmptyLayoutController, selector: ".left-content"
|
||||
}, detail: {
|
||||
controller: new EmptyLayoutControllerModule.EmptyLayoutController, selector: ".right-content"
|
||||
}
|
||||
}
|
||||
}, _appBarHasCommands: function() {
|
||||
var footerToolbar = this._$viewPort.find(".footer-toolbar").data("dxToolbar");
|
||||
return footerToolbar ? footerToolbar.option("items").length : false
|
||||
}
|
||||
});
|
||||
var Win8SplitLayoutController = WinSplitLayoutController.inherit({
|
||||
init: function(options) {
|
||||
this.callBase(options);
|
||||
this.footerToolbarController = new ToolbarController(this._$mainLayout.find(".footer-toolbar"), this._commandManager)
|
||||
}, showView: function(viewInfo, direction) {
|
||||
var that = this;
|
||||
return that.callBase(viewInfo, direction).done(function() {
|
||||
that.footerToolbarController.showViews(that._activeViews)
|
||||
})
|
||||
}
|
||||
});
|
||||
layoutSets["split"] = layoutSets["split"] || [];
|
||||
layoutSets["split"].push({
|
||||
platform: "ios", tablet: true, controller: new IOSSplitLayoutController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "android", tablet: true, controller: new AndroidSplitLayoutController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "generic", tablet: true, controller: new IOSSplitLayoutController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "win", phone: false, controller: new WinSplitLayoutController
|
||||
});
|
||||
layoutSets["split"].push({
|
||||
platform: "win", version: [8], phone: false, controller: new Win8SplitLayoutController
|
||||
});
|
||||
exports.MultipaneLayoutController = MultipaneLayoutController;
|
||||
exports.IOSSplitLayoutController = IOSSplitLayoutController;
|
||||
exports.ToolbarController = ToolbarController;
|
||||
exports.AndroidSplitLayoutController = AndroidSplitLayoutController;
|
||||
exports.WinSplitLayoutController = WinSplitLayoutController;
|
||||
exports.Win8SplitLayoutController = Win8SplitLayoutController;
|
||||
return exports
|
||||
}));
|
||||
Reference in New Issue
Block a user