First create solution
This commit is contained in:
@@ -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
|
||||
}));
|
||||
Reference in New Issue
Block a user