/** * DevExtreme (ui/drawer/ui.drawer.rendering.strategy.overlap.js) * Version: 19.1.16 * Build date: Tue Oct 18 2022 * * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ "use strict"; function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { return typeof obj } : function(obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj }, _typeof(obj) } var _uiDrawerRendering = require("./ui.drawer.rendering.strategy"); var _uiDrawerRendering2 = _interopRequireDefault(_uiDrawerRendering); var _renderer = require("../../core/renderer"); var _renderer2 = _interopRequireDefault(_renderer); var _translator = require("../../animation/translator"); var _translator2 = _interopRequireDefault(_translator); var _overlay = require("../overlay"); var _overlay2 = _interopRequireDefault(_overlay); var _type = require("../../core/utils/type"); var _type2 = _interopRequireDefault(_type); var _extend = require("../../core/utils/extend"); var _inflector = require("../../core/utils/inflector"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function") } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) { descriptor.writable = true } Object.defineProperty(target, descriptor.key, descriptor) } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) { _defineProperties(Constructor.prototype, protoProps) } if (staticProps) { _defineProperties(Constructor, staticProps) } Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor } function _get() { if ("undefined" !== typeof Reflect && Reflect.get) { _get = Reflect.get.bind() } else { _get = function(target, property, receiver) { var base = _superPropBase(target, property); if (!base) { return } var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver) } return desc.value } } return _get.apply(this, arguments) } function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (null === object) { break } } return object } function _inherits(subClass, superClass) { if ("function" !== typeof superClass && null !== superClass) { throw new TypeError("Super expression must either be null or a function") } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) { _setPrototypeOf(subClass, superClass) } } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) { o.__proto__ = p; return o }; return _setPrototypeOf(o, p) } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function() { var result, Super = _getPrototypeOf(Derived); if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget) } else { result = Super.apply(this, arguments) } return _possibleConstructorReturn(this, result) } } function _possibleConstructorReturn(self, call) { if (call && ("object" === _typeof(call) || "function" === typeof call)) { return call } else { if (void 0 !== call) { throw new TypeError("Derived constructors may only return object or undefined") } } return _assertThisInitialized(self) } function _assertThisInitialized(self) { if (void 0 === self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return self } function _isNativeReflectConstruct() { if ("undefined" === typeof Reflect || !Reflect.construct) { return false } if (Reflect.construct.sham) { return false } if ("function" === typeof Proxy) { return true } try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})); return true } catch (e) { return false } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(o) { return o.__proto__ || Object.getPrototypeOf(o) }; return _getPrototypeOf(o) } var OverlapStrategy = function(_DrawerStrategy) { _inherits(OverlapStrategy, _DrawerStrategy); var _super = _createSuper(OverlapStrategy); function OverlapStrategy() { _classCallCheck(this, OverlapStrategy); return _super.apply(this, arguments) } _createClass(OverlapStrategy, [{ key: "renderPanel", value: function(template, whenPanelRendered) { var _this = this; delete this._initialPosition; var position = this.getOverlayPosition(); var drawer = this.getDrawerInstance(); var _drawer$option = drawer.option(), opened = _drawer$option.opened, minSize = _drawer$option.minSize; drawer._overlay = drawer._createComponent(drawer.content(), _overlay2.default, { shading: false, container: drawer.getOverlayTarget(), position: position, width: opened ? "auto" : minSize || 0, height: "100%", templatesRenderAsynchronously: drawer.option("templatesRenderAsynchronously"), animation: { show: { duration: 0 } }, onPositioned: function(e) { this._fixOverlayPosition(e.component.$content()) }.bind(this), contentTemplate: drawer.option("template"), onContentReady: function(args) { whenPanelRendered.resolve(); _this._processOverlayZIndex(args.component.content()) }, visible: true, propagateOutsideClick: true }) } }, { key: "_fixOverlayPosition", value: function($overlayContent) { var drawer = this.getDrawerInstance(); if (_type2.default.isDefined(this._initialPosition)) { _translator2.default.move($overlayContent, { left: this._initialPosition.left, top: this._initialPosition.top }) } if ("right" === drawer.getDrawerPosition()) { $overlayContent.css("left", "auto"); if (drawer.option("rtlEnabled")) { _translator2.default.move($overlayContent, { left: 0 }) } } } }, { key: "getOverlayPosition", value: function() { var drawer = this.getDrawerInstance(); var panelPosition = drawer.getDrawerPosition(); var result = {}; if ("left" === panelPosition) { result = { my: "top left", at: "top left" } } if ("right" === panelPosition) { var my = drawer.option("rtlEnabled") ? "top left" : "top right"; result = { my: my, at: "top right" } } if ("top" === panelPosition || "bottom" === panelPosition) { result = { my: panelPosition, at: panelPosition } } result.of = drawer.getOverlayTarget(); return result } }, { key: "setPanelSize", value: function(keepMaxSize) { var drawer = this.getDrawerInstance(); var overlay = drawer.getOverlay(); if (drawer.isHorizontalDirection()) { overlay.option("height", "100%"); overlay.option("width", keepMaxSize ? drawer.getRealPanelWidth() : this._getPanelSize(drawer.option("opened"))) } else { overlay.option("width", overlay.option("container").width()); overlay.option("height", keepMaxSize ? drawer.getRealPanelHeight() : this._getPanelSize(drawer.option("opened"))) } } }, { key: "setupContent", value: function($content, position) { var drawer = this.getDrawerInstance(); $content.css("padding" + (0, _inflector.camelize)(position, true), drawer.option("minSize")); $content.css("transform", "inherit") } }, { key: "slidePositionRendering", value: function(config, offset, animate) { var drawer = this.getDrawerInstance(); this._initialPosition = drawer.getOverlay().$content().position(); var position = drawer.getDrawerPosition(); this.setupContent(config.$content, position, config.drawer); if (animate) { var animationConfig = (0, _extend.extend)(config.defaultAnimationConfig, { $element: config.$panel, position: config.panelOffset, duration: drawer.option("animationDuration"), direction: position }); _uiDrawerRendering.animation.moveTo(animationConfig) } else { if (drawer.isHorizontalDirection()) { _translator2.default.move(config.$panel, { left: config.panelOffset }) } else { _translator2.default.move(config.$panel, { top: config.panelOffset }) } } } }, { key: "expandPositionRendering", value: function(config, offset, animate) { var drawer = this.getDrawerInstance(); this._initialPosition = drawer.getOverlay().$content().position(); var position = drawer.getDrawerPosition(); this.setupContent(config.$content, position); _translator2.default.move(config.$panelOverlayContent, { left: 0 }); var animationConfig = (0, _extend.extend)(config.defaultAnimationConfig, { $element: config.$panelOverlayContent, size: config.size, duration: drawer.option("animationDuration"), direction: position, marginTop: config.marginTop }); if (animate) { _uiDrawerRendering.animation.size(animationConfig) } else { if (drawer.isHorizontalDirection()) { (0, _renderer2.default)(config.$panelOverlayContent).css("width", config.size) } else { (0, _renderer2.default)(config.$panelOverlayContent).css("height", config.size); if ("bottom" === position) { (0, _renderer2.default)(config.$panelOverlayContent).css("marginTop", config.marginTop) } } } } }, { key: "getPositionRenderingConfig", value: function(offset) { var drawer = this.getDrawerInstance(); var config = _get(_getPrototypeOf(OverlapStrategy.prototype), "getPositionRenderingConfig", this).call(this, offset); return (0, _extend.extend)(config, { panelOffset: this._getPanelOffset(offset) * this.getDrawerInstance()._getPositionCorrection(), $panelOverlayContent: drawer.getOverlay().$content(), marginTop: drawer.getRealPanelHeight() - config.size }) } }, { key: "getPanelContent", value: function() { return (0, _renderer2.default)(this.getDrawerInstance().getOverlay().content()) } }, { key: "_processOverlayZIndex", value: function($element) { var styles = (0, _renderer2.default)($element).get(0).style; var zIndex = styles.zIndex || 1; this.getDrawerInstance().setZIndex(zIndex) } }, { key: "needOrderContent", value: function(position) { return "right" === position || "bottom" === position } }]); return OverlapStrategy }(_uiDrawerRendering2.default); module.exports = OverlapStrategy;