UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

157 lines (126 loc) 4.99 kB
"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;