devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
157 lines (126 loc) • 4.99 kB
JavaScript
"use strict";
var $ = require("../../core/renderer"),
extend = require("../../core/utils/extend").extend,
Deferred = require("../../core/utils/deferred").Deferred,
ToolbarStrategy = require("./ui.toolbar.strategy"),
translator = require("../../animation/translator"),
hideTopOverlayCallback = require("../../mobile/hide_top_overlay").hideCallback,
fx = require("../../animation/fx"),
Overlay = require("../overlay"),
List = require("../list/ui.list.base");
var TOOLBAR_LIST_VISIBLE_CLASS = "dx-toolbar-list-visible",
SUBMENU_ANIMATION_EASING = "easeOutCubic",
SUBMENU_HIDE_DURATION = 200,
SUBMENU_SHOW_DURATION = 400;
var ListStrategy = ToolbarStrategy.inherit({
render: function render() {
this._renderListOverlay();
this.callBase();
this._changeListVisible(this._toolbar.option("visible"));
},
_renderWidget: function _renderWidget() {
if (!this._hasVisibleMenuItems()) {
return;
}
this.callBase();
},
_menuWidgetClass: function _menuWidgetClass() {
return List;
},
_menuContainer: function _menuContainer() {
return this._listOverlay.$content();
},
_menuButtonOptions: function _menuButtonOptions() {
return extend({}, this.callBase(), {
activeStateEnabled: false,
text: "..."
});
},
_widgetOptions: function _widgetOptions() {
return extend({}, this.callBase(), {
width: "100%",
indicateLoading: false
});
},
_renderListOverlay: function _renderListOverlay() {
var $listOverlay = $("<div>").appendTo(this._toolbar.$element());
this._listOverlay = this._toolbar._createComponent($listOverlay, Overlay, this._listOverlayConfig());
},
_listOverlayConfig: function _listOverlayConfig() {
return {
container: false,
deferRendering: false,
shading: false,
height: "auto",
width: "100%",
showTitle: false,
closeOnOutsideClick: this._listOutsideClickHandler.bind(this),
position: null,
animation: null,
closeOnBackButton: false
};
},
_listOutsideClickHandler: function _listOutsideClickHandler(e) {
if (!$(e.target).closest(this._listOverlay.$content()).length) {
this._toggleMenu(false, true);
}
},
_getListHeight: function _getListHeight() {
var listHeight = this._listOverlay.$content().find(".dx-list").height(),
semiHiddenHeight = this._toolbar._$toolbarItemsContainer.height() - this._toolbar.$element().height();
return listHeight + semiHiddenHeight;
},
_hideTopOverlayHandler: function _hideTopOverlayHandler() {
this._toggleMenu(false, true);
},
_toggleHideTopOverlayCallback: function _toggleHideTopOverlayCallback() {
if (this._closeCallback) {
hideTopOverlayCallback.remove(this._closeCallback);
}
if (this._menuShown) {
this._closeCallback = this._hideTopOverlayHandler.bind(this);
hideTopOverlayCallback.add(this._closeCallback);
}
},
// TODO: make offset int -> boolean
_calculatePixelOffset: function _calculatePixelOffset(offset) {
offset = (offset || 0) - 1;
var maxOffset = this._getListHeight();
return offset * maxOffset;
},
_renderMenuPosition: function _renderMenuPosition(offset, animate) {
var pos = this._calculatePixelOffset(offset),
element = this._listOverlay.$content();
if (animate) {
return this._animateMenuToggling(element, pos, this._menuShown);
}
translator.move(element, { top: pos });
return new Deferred().resolve().promise();
},
_animateMenuToggling: function _animateMenuToggling($element, position, isShowAnimation) {
var duration = isShowAnimation ? SUBMENU_SHOW_DURATION : SUBMENU_HIDE_DURATION;
return fx.animate($element, {
type: "slide",
to: { top: position },
easing: SUBMENU_ANIMATION_EASING,
duration: duration
});
},
_toggleMenu: function _toggleMenu(visible, animate) {
this.callBase.apply(this, arguments);
this._toggleHideTopOverlayCallback();
this._renderMenuPosition(this._menuShown ? 0 : 1, animate).done(function () {
this._toolbar.$element().toggleClass(TOOLBAR_LIST_VISIBLE_CLASS, visible);
}.bind(this));
},
_changeListVisible: function _changeListVisible(value) {
if (this._listOverlay) {
this._listOverlay.option("visible", value);
this._toggleMenu(false, false);
}
},
handleToolbarVisibilityChange: function handleToolbarVisibilityChange(value) {
this._changeListVisible(value);
}
});
module.exports = ListStrategy;