devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
475 lines (473 loc) • 19.7 kB
JavaScript
/**
* DevExtreme (cjs/ui/drawer/ui.drawer.js)
* Version: 21.2.4
* Build date: Mon Dec 06 2021
*
* Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _events_engine = _interopRequireDefault(require("../../events/core/events_engine"));
var _type = require("../../core/utils/type");
var _element = require("../../core/element");
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _extend = require("../../core/utils/extend");
var _position = require("../../core/utils/position");
var _ui = _interopRequireDefault(require("../widget/ui.widget"));
var _empty_template = require("../../core/templates/empty_template");
var _window = require("../../core/utils/window");
var _uiDrawerRenderingStrategy = _interopRequireDefault(require("./ui.drawer.rendering.strategy.push"));
var _uiDrawerRenderingStrategy2 = _interopRequireDefault(require("./ui.drawer.rendering.strategy.shrink"));
var _uiDrawerRenderingStrategy3 = _interopRequireDefault(require("./ui.drawer.rendering.strategy.overlap"));
var _uiDrawer = require("./ui.drawer.animation");
var _click = require("../../events/click");
var _fx = _interopRequireDefault(require("../../animation/fx"));
var _deferred = require("../../core/utils/deferred");
var _visibility_change = require("../../events/visibility_change");
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
var DRAWER_CLASS = "dx-drawer";
var DRAWER_WRAPPER_CLASS = "dx-drawer-wrapper";
var DRAWER_PANEL_CONTENT_CLASS = "dx-drawer-panel-content";
var DRAWER_VIEW_CONTENT_CLASS = "dx-drawer-content";
var DRAWER_SHADER_CLASS = "dx-drawer-shader";
var INVISIBLE_STATE_CLASS = "dx-state-invisible";
var OPENED_STATE_CLASS = "dx-drawer-opened";
var ANONYMOUS_TEMPLATE_NAME = "content";
var PANEL_TEMPLATE_NAME = "panel";
var Drawer = _ui.default.inherit({
_getDefaultOptions: function() {
return (0, _extend.extend)(this.callBase(), {
position: "left",
opened: false,
minSize: null,
maxSize: null,
shading: false,
template: PANEL_TEMPLATE_NAME,
openedStateMode: "shrink",
revealMode: "slide",
animationEnabled: true,
animationDuration: 400,
closeOnOutsideClick: false,
contentTemplate: ANONYMOUS_TEMPLATE_NAME,
target: void 0
})
},
_setDeprecatedOptions: function() {
this.callBase();
(0, _extend.extend)(this._deprecatedOptions, {
target: {
since: "20.1",
message: "Functionality associated with this option is not intended for the Drawer widget."
}
})
},
_init: function() {
this.callBase();
this._initStrategy();
this.$element().addClass(DRAWER_CLASS);
this._whenAnimationCompleted = void 0;
this._whenPanelContentRendered = void 0;
this._whenPanelContentRefreshed = void 0;
this._$wrapper = (0, _renderer.default)("<div>").addClass(DRAWER_WRAPPER_CLASS);
this._$viewContentWrapper = (0, _renderer.default)("<div>").addClass(DRAWER_VIEW_CONTENT_CLASS);
this._$wrapper.append(this._$viewContentWrapper);
this.$element().append(this._$wrapper)
},
_initStrategy: function() {
switch (this.option("openedStateMode")) {
case "push":
this._strategy = new _uiDrawerRenderingStrategy.default(this);
break;
case "shrink":
this._strategy = new _uiDrawerRenderingStrategy2.default(this);
break;
case "overlap":
this._strategy = new _uiDrawerRenderingStrategy3.default(this);
break;
default:
this._strategy = new _uiDrawerRenderingStrategy.default(this)
}
},
_getAnonymousTemplateName: function() {
return ANONYMOUS_TEMPLATE_NAME
},
_initTemplates: function() {
var defaultTemplates = {};
defaultTemplates[PANEL_TEMPLATE_NAME] = new _empty_template.EmptyTemplate;
defaultTemplates[ANONYMOUS_TEMPLATE_NAME] = new _empty_template.EmptyTemplate;
this._templateManager.addDefaultTemplates(defaultTemplates);
this.callBase()
},
_viewContentWrapperClickHandler: function(e) {
var closeOnOutsideClick = this.option("closeOnOutsideClick");
if ((0, _type.isFunction)(closeOnOutsideClick)) {
closeOnOutsideClick = closeOnOutsideClick(e)
}
if (closeOnOutsideClick && this.option("opened")) {
this.stopAnimations();
if (this.option("shading")) {
e.preventDefault()
}
this.hide()
}
},
_initMarkup: function() {
this.callBase();
this._toggleOpenedStateClass(this.option("opened"));
this._renderPanelContentWrapper();
this._refreshOpenedStateModeClass();
this._refreshRevealModeClass();
this._renderShader();
this._whenPanelContentRendered = new _deferred.Deferred;
this._strategy.renderPanelContent(this._whenPanelContentRendered);
this._strategy.onPanelContentRendered();
this._renderViewContent();
_events_engine.default.off(this._$viewContentWrapper, _click.name);
_events_engine.default.on(this._$viewContentWrapper, _click.name, this._viewContentWrapperClickHandler.bind(this));
this._refreshPositionClass();
this._refreshWrapperChildrenOrder()
},
_render: function() {
var _this = this;
this._initMinMaxSize();
this.callBase();
this._whenPanelContentRendered.always((function() {
_this._initMinMaxSize();
_this._strategy.refreshPanelElementSize("slide" === _this.option("revealMode") || !_this.isHorizontalDirection());
_this._renderPosition(_this.option("opened"), true);
_this._removePanelManualPosition()
}))
},
_removePanelManualPosition: function() {
if (this._$panelContentWrapper.attr("manualposition")) {
this._$panelContentWrapper.removeAttr("manualPosition");
this._$panelContentWrapper.css({
position: "",
top: "",
left: "",
right: "",
bottom: ""
})
}
},
_renderPanelContentWrapper: function() {
this._$panelContentWrapper = (0, _renderer.default)("<div>").addClass(DRAWER_PANEL_CONTENT_CLASS);
var position = this.calcTargetPosition();
if ("push" === this.option("openedStateMode") && ["top", "bottom"].indexOf(position) > -1) {
this._$panelContentWrapper.addClass(DRAWER_PANEL_CONTENT_CLASS + "-push-top-or-bottom")
}
if ("overlap" !== this.option("openedStateMode") && !this.option("opened") && !this.option("minSize")) {
this._$panelContentWrapper.attr("manualposition", true);
this._$panelContentWrapper.css({
position: "absolute",
top: "-10000px",
left: "-10000px",
right: "auto",
bottom: "auto"
})
}
this._$wrapper.append(this._$panelContentWrapper)
},
_refreshOpenedStateModeClass: function(prevOpenedStateMode) {
if (prevOpenedStateMode) {
this.$element().removeClass(DRAWER_CLASS + "-" + prevOpenedStateMode)
}
this.$element().addClass(DRAWER_CLASS + "-" + this.option("openedStateMode"))
},
_refreshPositionClass: function(prevPosition) {
if (prevPosition) {
this.$element().removeClass(DRAWER_CLASS + "-" + prevPosition)
}
this.$element().addClass(DRAWER_CLASS + "-" + this.calcTargetPosition())
},
_refreshWrapperChildrenOrder: function() {
var position = this.calcTargetPosition();
if (this._strategy.isViewContentFirst(position, this.option("rtlEnabled"))) {
this._$wrapper.prepend(this._$viewContentWrapper)
} else {
this._$wrapper.prepend(this._$panelContentWrapper)
}
},
_refreshRevealModeClass: function(prevRevealMode) {
if (prevRevealMode) {
this.$element().removeClass(DRAWER_CLASS + "-" + prevRevealMode)
}
this.$element().addClass(DRAWER_CLASS + "-" + this.option("revealMode"))
},
_renderViewContent: function() {
var contentTemplateOption = this.option("contentTemplate");
var contentTemplate = this._getTemplate(contentTemplateOption);
if (contentTemplate) {
var $viewTemplate = contentTemplate.render({
container: this.viewContent(),
noModel: true,
transclude: this._templateManager.anonymousTemplateName === contentTemplateOption
});
if ($viewTemplate.hasClass("ng-scope")) {
(0, _renderer.default)(this._$viewContentWrapper).children().not(".".concat(DRAWER_SHADER_CLASS)).replaceWith($viewTemplate)
}
}
},
_renderShader: function() {
this._$shader = this._$shader || (0, _renderer.default)("<div>").addClass(DRAWER_SHADER_CLASS);
this._$shader.appendTo(this.viewContent());
this._toggleShaderVisibility(this.option("opened"))
},
_initSize: function() {
this._initMinMaxSize()
},
_initMinMaxSize: function() {
var realPanelSize = this.isHorizontalDirection() ? this.getRealPanelWidth() : this.getRealPanelHeight();
this._maxSize = this.option("maxSize") || realPanelSize;
this._minSize = this.option("minSize") || 0
},
calcTargetPosition: function() {
var position = this.option("position");
var rtl = this.option("rtlEnabled");
var result = position;
if ("before" === position) {
result = rtl ? "right" : "left"
} else if ("after" === position) {
result = rtl ? "left" : "right"
}
return result
},
getOverlayTarget: function() {
return this._options.silent("target") || this._$wrapper
},
getOverlay: function() {
return this._overlay
},
getMaxSize: function() {
return this._maxSize
},
getMinSize: function() {
return this._minSize
},
getRealPanelWidth: function() {
if ((0, _window.hasWindow)()) {
if ((0, _type.isDefined)(this.option("templateSize"))) {
return this.option("templateSize")
} else {
return (0, _position.getBoundingRect)(this._getPanelTemplateElement()).width
}
} else {
return 0
}
},
getRealPanelHeight: function() {
if ((0, _window.hasWindow)()) {
if ((0, _type.isDefined)(this.option("templateSize"))) {
return this.option("templateSize")
} else {
return (0, _position.getBoundingRect)(this._getPanelTemplateElement()).height
}
} else {
return 0
}
},
_getPanelTemplateElement: function() {
var $panelContent = this._strategy.getPanelContent();
var $result = $panelContent;
if ($panelContent.children().length) {
$result = $panelContent.children().eq(0);
if ($panelContent.hasClass("dx-overlay-content") && $result.hasClass("dx-template-wrapper") && $result.children().length) {
$result = $result.children().eq(0)
}
}
return $result.get(0)
},
getElementHeight: function($element) {
var $children = $element.children();
return $children.length ? (0, _position.getBoundingRect)($children.eq(0).get(0)).height : (0, _position.getBoundingRect)($element.get(0)).height
},
isHorizontalDirection: function() {
var position = this.calcTargetPosition();
return "left" === position || "right" === position
},
stopAnimations: function(jumpToEnd) {
_fx.default.stop(this._$shader, jumpToEnd);
_fx.default.stop((0, _renderer.default)(this.content()), jumpToEnd);
_fx.default.stop((0, _renderer.default)(this.viewContent()), jumpToEnd);
var overlay = this.getOverlay();
if (overlay) {
_fx.default.stop((0, _renderer.default)(overlay.$content()), jumpToEnd)
}
},
setZIndex: function(zIndex) {
this._$shader.css("zIndex", zIndex - 1);
this._$panelContentWrapper.css("zIndex", zIndex)
},
resizeContent: function() {
this.resizeViewContent
},
resizeViewContent: function() {
(0, _visibility_change.triggerResizeEvent)(this.viewContent())
},
_isInvertedPosition: function() {
var position = this.calcTargetPosition();
return "right" === position || "bottom" === position
},
_renderPosition: function(isDrawerOpened, disableAnimation, jumpToEnd) {
this.stopAnimations(jumpToEnd);
if (!(0, _window.hasWindow)()) {
return
}(0, _renderer.default)(this.viewContent()).css("paddingLeft", 0);
(0, _renderer.default)(this.viewContent()).css("paddingRight", 0);
(0, _renderer.default)(this.viewContent()).css("paddingTop", 0);
(0, _renderer.default)(this.viewContent()).css("paddingBottom", 0);
var animationEnabled = this.option("animationEnabled");
if (true === disableAnimation) {
animationEnabled = false
}
if (isDrawerOpened) {
this._toggleShaderVisibility(isDrawerOpened)
}
this._strategy.renderPosition(animationEnabled, this.option("animationDuration"))
},
_animationCompleteHandler: function() {
this.resizeViewContent();
if (this._whenAnimationCompleted) {
this._whenAnimationCompleted.resolve()
}
},
_getPositionCorrection: function() {
return this._isInvertedPosition() ? -1 : 1
},
_dispose: function() {
_uiDrawer.animation.complete((0, _renderer.default)(this.viewContent()));
this.callBase()
},
_visibilityChanged: function(visible) {
if (visible) {
this._dimensionChanged()
}
},
_dimensionChanged: function() {
this._initMinMaxSize();
this._strategy.refreshPanelElementSize("slide" === this.option("revealMode"));
this._renderPosition(this.option("opened"), true)
},
_toggleShaderVisibility: function(visible) {
if (this.option("shading")) {
this._$shader.toggleClass(INVISIBLE_STATE_CLASS, !visible);
this._$shader.css("visibility", visible ? "visible" : "hidden")
} else {
this._$shader.toggleClass(INVISIBLE_STATE_CLASS, true)
}
},
_toggleOpenedStateClass: function(opened) {
this.$element().toggleClass(OPENED_STATE_CLASS, opened)
},
_refreshPanel: function() {
var _this2 = this;
(0, _renderer.default)(this.viewContent()).css("left", 0);
(0, _renderer.default)(this.viewContent()).css("transform", "translate(0px, 0px)");
(0, _renderer.default)(this.viewContent()).removeClass("dx-theme-background-color");
this._removePanelContentWrapper();
this._removeOverlay();
this._renderPanelContentWrapper();
this._refreshWrapperChildrenOrder();
this._whenPanelContentRefreshed = new _deferred.Deferred;
this._strategy.renderPanelContent(this._whenPanelContentRefreshed);
this._strategy.onPanelContentRendered();
if ((0, _window.hasWindow)()) {
this._whenPanelContentRefreshed.always((function() {
_this2._strategy.refreshPanelElementSize("slide" === _this2.option("revealMode"));
_this2._renderPosition(_this2.option("opened"), true, true);
_this2._removePanelManualPosition()
}))
}
},
_clean: function() {
this._cleanFocusState();
this._removePanelContentWrapper();
this._removeOverlay()
},
_removePanelContentWrapper: function() {
if (this._$panelContentWrapper) {
this._$panelContentWrapper.remove()
}
},
_removeOverlay: function() {
if (this._overlay) {
this._overlay.dispose();
delete this._overlay;
delete this._$panelContentWrapper
}
},
_optionChanged: function(args) {
switch (args.name) {
case "width":
this.callBase(args);
this._dimensionChanged();
break;
case "opened":
this._renderPosition(this.option("opened"));
this._toggleOpenedStateClass(args.value);
break;
case "position":
this._refreshPositionClass(args.previousValue);
this._refreshWrapperChildrenOrder();
this._invalidate();
break;
case "contentTemplate":
case "template":
this._invalidate();
break;
case "openedStateMode":
case "target":
this._initStrategy();
this._refreshOpenedStateModeClass(args.previousValue);
this._refreshPanel();
break;
case "minSize":
case "maxSize":
this._initMinMaxSize();
this._renderPosition(this.option("opened"), true);
break;
case "revealMode":
this._refreshRevealModeClass(args.previousValue);
this._refreshPanel();
break;
case "shading":
this._toggleShaderVisibility(this.option("opened"));
break;
case "animationEnabled":
case "animationDuration":
case "closeOnOutsideClick":
break;
default:
this.callBase(args)
}
},
content: function() {
return (0, _element.getPublicElement)(this._$panelContentWrapper)
},
viewContent: function() {
return (0, _element.getPublicElement)(this._$viewContentWrapper)
},
show: function() {
return this.toggle(true)
},
hide: function() {
return this.toggle(false)
},
toggle: function(opened) {
var targetOpened = void 0 === opened ? !this.option("opened") : opened;
this._whenAnimationCompleted = new _deferred.Deferred;
this.option("opened", targetOpened);
return this._whenAnimationCompleted.promise()
}
});
(0, _component_registrator.default)("dxDrawer", Drawer);
var _default = Drawer;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;