this.BX = this.BX || {}; (function (exports,main_core_zIndexManager,main_core_events,main_core) { 'use strict'; /** * @memberOf BX.Main.Popup * @deprecated use BX.UI.Button */ var Button = /*#__PURE__*/function () { function Button(params) { babelHelpers.classCallCheck(this, Button); this.popupWindow = null; this.params = params || {}; this.text = this.params.text || ''; this.id = this.params.id || ''; this.className = this.params.className || ''; this.events = this.params.events || {}; this.contextEvents = {}; for (var eventName in this.events) { if (main_core.Type.isFunction(this.events[eventName])) { this.contextEvents[eventName] = this.events[eventName].bind(this); } } this.buttonNode = main_core.Dom.create('span', { props: { className: 'popup-window-button' + (this.className.length > 0 ? ' ' + this.className : ''), id: this.id }, events: this.contextEvents, text: this.text }); } babelHelpers.createClass(Button, [{ key: "render", value: function render() { return this.buttonNode; } }, { key: "getId", value: function getId() { return this.id; } }, { key: "getContainer", value: function getContainer() { return this.buttonNode; } }, { key: "getName", value: function getName() { return this.text; } }, { key: "setName", value: function setName(name) { this.text = name || ''; if (this.buttonNode) { main_core.Dom.clean(this.buttonNode); main_core.Dom.adjust(this.buttonNode, { text: this.text }); } } }, { key: "setClassName", value: function setClassName(className) { if (this.buttonNode) { if (main_core.Type.isString(this.className) && this.className !== '') { main_core.Dom.removeClass(this.buttonNode, this.className); } main_core.Dom.addClass(this.buttonNode, className); } this.className = className; } }, { key: "addClassName", value: function addClassName(className) { if (this.buttonNode) { main_core.Dom.addClass(this.buttonNode, className); this.className = this.buttonNode.className; } } }, { key: "removeClassName", value: function removeClassName(className) { if (this.buttonNode) { main_core.Dom.removeClass(this.buttonNode, className); this.className = this.buttonNode.className; } } }]); return Button; }(); function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); } function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } } var _left = /*#__PURE__*/new WeakMap(); var _top = /*#__PURE__*/new WeakMap(); var PositionEvent = /*#__PURE__*/function (_BaseEvent) { babelHelpers.inherits(PositionEvent, _BaseEvent); function PositionEvent() { var _this; babelHelpers.classCallCheck(this, PositionEvent); _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PositionEvent).call(this)); _classPrivateFieldInitSpec(babelHelpers.assertThisInitialized(_this), _left, { writable: true, value: void 0 }); _classPrivateFieldInitSpec(babelHelpers.assertThisInitialized(_this), _top, { writable: true, value: void 0 }); return _this; } babelHelpers.createClass(PositionEvent, [{ key: "left", get: function get() { return babelHelpers.classPrivateFieldGet(this, _left); }, set: function set(value) { if (main_core.Type.isNumber(value)) { babelHelpers.classPrivateFieldSet(this, _left, value); } } }, { key: "top", get: function get() { return babelHelpers.classPrivateFieldGet(this, _top); }, set: function set(value) { if (main_core.Type.isNumber(value)) { babelHelpers.classPrivateFieldSet(this, _top, value); } } }]); return PositionEvent; }(main_core_events.BaseEvent); var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; var aliases = { onPopupWindowInit: { namespace: 'BX.Main.Popup', eventName: 'onInit' }, onPopupWindowIsInitialized: { namespace: 'BX.Main.Popup', eventName: 'onAfterInit' }, onPopupFirstShow: { namespace: 'BX.Main.Popup', eventName: 'onFirstShow' }, onPopupShow: { namespace: 'BX.Main.Popup', eventName: 'onShow' }, onAfterPopupShow: { namespace: 'BX.Main.Popup', eventName: 'onAfterShow' }, onPopupClose: { namespace: 'BX.Main.Popup', eventName: 'onClose' }, onPopupAfterClose: { namespace: 'BX.Main.Popup', eventName: 'onAfterClose' }, onPopupDestroy: { namespace: 'BX.Main.Popup', eventName: 'onDestroy' }, onPopupFullscreenLeave: { namespace: 'BX.Main.Popup', eventName: 'onFullscreenLeave' }, onPopupFullscreenEnter: { namespace: 'BX.Main.Popup', eventName: 'onFullscreenEnter' }, onPopupDragStart: { namespace: 'BX.Main.Popup', eventName: 'onDragStart' }, onPopupDrag: { namespace: 'BX.Main.Popup', eventName: 'onDrag' }, onPopupDragEnd: { namespace: 'BX.Main.Popup', eventName: 'onDragEnd' }, onPopupResizeStart: { namespace: 'BX.Main.Popup', eventName: 'onResizeStart' }, onPopupResize: { namespace: 'BX.Main.Popup', eventName: 'onResize' }, onPopupResizeEnd: { namespace: 'BX.Main.Popup', eventName: 'onResizeEnd' } }; main_core_events.EventEmitter.registerAliases(aliases); /** * @memberof BX.Main */ var Popup = /*#__PURE__*/function (_EventEmitter) { babelHelpers.inherits(Popup, _EventEmitter); babelHelpers.createClass(Popup, null, [{ key: "setOptions", /** * @private */ /** * @private */ value: function setOptions(options) { if (!main_core.Type.isPlainObject(options)) { return; } for (var option in options) { this.options[option] = options[option]; } } }, { key: "getOption", value: function getOption(option, defaultValue) { if (!main_core.Type.isUndefined(this.options[option])) { return this.options[option]; } else if (!main_core.Type.isUndefined(defaultValue)) { return defaultValue; } else { return this.defaultOptions[option]; } } }]); function Popup(options) { var _this; babelHelpers.classCallCheck(this, Popup); _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(Popup).call(this)); _this.setEventNamespace('BX.Main.Popup'); var _arguments = Array.prototype.slice.call(arguments), popupId = _arguments[0], bindElement = _arguments[1], params = _arguments[2]; //compatible arguments _this.compatibleMode = params && main_core.Type.isBoolean(params.compatibleMode) ? params.compatibleMode : true; if (main_core.Type.isPlainObject(options) && !bindElement && !params) { params = options; popupId = options.id; bindElement = options.bindElement; _this.compatibleMode = false; } params = params || {}; _this.params = params; if (!main_core.Type.isStringFilled(popupId)) { popupId = 'popup-window-' + main_core.Text.getRandom().toLowerCase(); } _this.emit('onInit', new main_core_events.BaseEvent({ compatData: [popupId, bindElement, params] })); /** * @private */ _this.uniquePopupId = popupId; _this.params.zIndex = main_core.Type.isNumber(params.zIndex) ? parseInt(params.zIndex) : 0; _this.params.zIndexAbsolute = main_core.Type.isNumber(params.zIndexAbsolute) ? parseInt(params.zIndexAbsolute) : 0; _this.buttons = params.buttons && main_core.Type.isArray(params.buttons) ? params.buttons : []; _this.offsetTop = Popup.getOption('offsetTop'); _this.offsetLeft = Popup.getOption('offsetLeft'); _this.firstShow = false; _this.bordersWidth = 20; _this.bindElementPos = null; _this.closeIcon = null; _this.resizeIcon = null; _this.angle = null; _this.angleArrowElement = null; _this.overlay = null; _this.titleBar = null; _this.bindOptions = babelHelpers["typeof"](params.bindOptions) === 'object' ? params.bindOptions : {}; _this.autoHide = params.autoHide === true; _this.autoHideHandler = main_core.Type.isFunction(params.autoHideHandler) ? params.autoHideHandler : null; _this.handleAutoHide = _this.handleAutoHide.bind(babelHelpers.assertThisInitialized(_this)); _this.handleOverlayClick = _this.handleOverlayClick.bind(babelHelpers.assertThisInitialized(_this)); _this.isAutoHideBinded = false; _this.closeByEsc = params.closeByEsc === true; _this.isCloseByEscBinded = false; _this.toFrontOnShow = true; _this.cacheable = true; _this.destroyed = false; _this.width = null; _this.height = null; _this.minWidth = null; _this.minHeight = null; _this.maxWidth = null; _this.maxHeight = null; _this.padding = null; _this.contentPadding = null; _this.background = null; _this.contentBackground = null; _this.borderRadius = null; _this.contentBorderRadius = null; _this.targetContainer = main_core.Type.isElementNode(params.targetContainer) ? params.targetContainer : document.body; _this.dragOptions = { cursor: '', callback: function callback() {}, eventName: '' }; _this.dragged = false; _this.dragPageX = 0; _this.dragPageY = 0; _this.animationShowClassName = null; _this.animationCloseClassName = null; _this.animationCloseEventType = null; _this.handleDocumentMouseMove = _this.handleDocumentMouseMove.bind(babelHelpers.assertThisInitialized(_this)); _this.handleDocumentMouseUp = _this.handleDocumentMouseUp.bind(babelHelpers.assertThisInitialized(_this)); _this.handleDocumentKeyUp = _this.handleDocumentKeyUp.bind(babelHelpers.assertThisInitialized(_this)); _this.handleResizeWindow = _this.handleResizeWindow.bind(babelHelpers.assertThisInitialized(_this)); _this.handleResize = _this.handleResize.bind(babelHelpers.assertThisInitialized(_this)); _this.handleMove = _this.handleMove.bind(babelHelpers.assertThisInitialized(_this)); _this.onTitleMouseDown = _this.onTitleMouseDown.bind(babelHelpers.assertThisInitialized(_this)); _this.handleFullScreen = _this.handleFullScreen.bind(babelHelpers.assertThisInitialized(_this)); _this.subscribeFromOptions(params.events); var popupClassName = 'popup-window'; if (params.titleBar) { popupClassName += ' popup-window-with-titlebar'; } if (params.className && main_core.Type.isStringFilled(params.className)) { popupClassName += ' ' + params.className; } if (params.darkMode) { popupClassName += ' popup-window-dark'; } if (params.titleBar) { _this.titleBar = main_core.Tag.render(_templateObject || (_templateObject = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t
\n\t\t\t"])), popupId); } if (params.closeIcon) { var className = 'popup-window-close-icon' + (params.titleBar ? ' popup-window-titlebar-close-icon' : ''); _this.closeIcon = main_core.Tag.render(_templateObject2 || (_templateObject2 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\n\t\t\t"])), className, _this.handleCloseIconClick.bind(babelHelpers.assertThisInitialized(_this))); if (main_core.Type.isPlainObject(params.closeIcon)) { main_core.Dom.style(_this.closeIcon, params.closeIcon); } } /** * @private */ _this.contentContainer = main_core.Tag.render(_templateObject3 || (_templateObject3 = babelHelpers.taggedTemplateLiteral(["
"])), popupId); /** * @private */ _this.popupContainer = main_core.Tag.render(_templateObject4 || (_templateObject4 = babelHelpers.taggedTemplateLiteral(["", ""])), popupClassName, popupId, [_this.titleBar, _this.contentContainer, _this.closeIcon]); _this.targetContainer.appendChild(_this.popupContainer); _this.zIndexComponent = main_core_zIndexManager.ZIndexManager.register(_this.popupContainer, params.zIndexOptions); _this.buttonsContainer = null; if (params.contentColor && main_core.Type.isStringFilled(params.contentColor)) { if (params.contentColor === 'white' || params.contentColor === 'gray') { popupClassName += ' popup-window-content-' + params.contentColor; } _this.setContentColor(params.contentColor); } if (params.angle) { _this.setAngle(params.angle); } if (params.overlay) { _this.setOverlay(params.overlay); } _this.setOffset(params); _this.setBindElement(bindElement); _this.setTitleBar(params.titleBar); _this.setContent(params.content); _this.setButtons(params.buttons); _this.setWidth(params.width); _this.setHeight(params.height); _this.setMinWidth(params.minWidth); _this.setMinHeight(params.minHeight); _this.setMaxWidth(params.maxWidth); _this.setMaxHeight(params.maxHeight); _this.setResizeMode(params.resizable); _this.setPadding(params.padding); _this.setContentPadding(params.contentPadding); _this.setBorderRadius(params.borderRadius); _this.setContentBorderRadius(params.contentBorderRadius); _this.setBackground(params.background); _this.setContentBackground(params.contentBackground); _this.setAnimation(params.animation); _this.setCacheable(params.cacheable); _this.setToFrontOnShow(params.toFrontOnShow); // Compatibility if (params.contentNoPaddings) { _this.setContentPadding(0); } if (params.noAllPaddings) { _this.setPadding(0); _this.setContentPadding(0); } if (params.bindOnResize !== false) { main_core.Event.bind(window, 'resize', _this.handleResizeWindow); } _this.emit('onAfterInit', new main_core_events.BaseEvent({ compatData: [popupId, babelHelpers.assertThisInitialized(_this)] })); return _this; } /** * @private */ babelHelpers.createClass(Popup, [{ key: "subscribeFromOptions", value: function subscribeFromOptions(events) { babelHelpers.get(babelHelpers.getPrototypeOf(Popup.prototype), "subscribeFromOptions", this).call(this, events, aliases); } }, { key: "getId", value: function getId() { return this.uniquePopupId; } }, { key: "isCompatibleMode", value: function isCompatibleMode() { return this.compatibleMode; } }, { key: "setContent", value: function setContent(content) { if (!this.contentContainer || !content) { return; } if (main_core.Type.isElementNode(content)) { main_core.Dom.clean(this.contentContainer); var hasParent = main_core.Type.isDomNode(content.parentNode); this.contentContainer.appendChild(content); if (this.isCompatibleMode() || hasParent) { content.style.display = 'block'; } } else if (main_core.Type.isString(content)) { this.contentContainer.innerHTML = content; } else { this.contentContainer.innerHTML = ' '; } } }, { key: "setButtons", value: function setButtons(buttons) { this.buttons = buttons && main_core.Type.isArray(buttons) ? buttons : []; if (this.buttonsContainer) { main_core.Dom.remove(this.buttonsContainer); } var ButtonClass = main_core.Reflection.getClass('BX.UI.Button'); if (this.buttons.length > 0 && this.contentContainer) { var newButtons = []; for (var i = 0; i < this.buttons.length; i++) { var button = this.buttons[i]; if (button instanceof Button) { button.popupWindow = this; newButtons.push(button.render()); } else if (ButtonClass && button instanceof ButtonClass) { button.setContext(this); newButtons.push(button.render()); } } this.buttonsContainer = this.contentContainer.parentNode.appendChild(main_core.Tag.render(_templateObject5 || (_templateObject5 = babelHelpers.taggedTemplateLiteral(["
", "
"])), newButtons)); } } }, { key: "getButtons", value: function getButtons() { return this.buttons; } }, { key: "getButton", value: function getButton(id) { for (var i = 0; i < this.buttons.length; i++) { var button = this.buttons[i]; if (button.getId() === id) { return button; } } return null; } }, { key: "setBindElement", value: function setBindElement(bindElement) { if (bindElement === null) { this.bindElement = null; } else if (babelHelpers["typeof"](bindElement) === 'object') { if (main_core.Type.isDomNode(bindElement) || main_core.Type.isNumber(bindElement.top) && main_core.Type.isNumber(bindElement.left)) { this.bindElement = bindElement; } else if (main_core.Type.isNumber(bindElement.clientX) && main_core.Type.isNumber(bindElement.clientY)) { this.bindElement = { left: bindElement.pageX, top: bindElement.pageY, bottom: bindElement.pageY }; } } } /** * @private */ }, { key: "getBindElementPos", value: function getBindElementPos(bindElement) { if (main_core.Type.isDomNode(bindElement)) { if (this.isTargetDocumentBody()) { return main_core.Dom.getPosition(bindElement); } else { return this.getPositionRelativeToTarget(bindElement); } } else if (bindElement && babelHelpers["typeof"](bindElement) === 'object') { if (!main_core.Type.isNumber(bindElement.bottom)) { bindElement.bottom = bindElement.top; } return bindElement; } else { var windowSize = this.getWindowSize(); var windowScroll = this.getWindowScroll(); var popupWidth = this.getPopupContainer().offsetWidth; var popupHeight = this.getPopupContainer().offsetHeight; this.bindOptions.forceTop = true; return { left: windowSize.innerWidth / 2 - popupWidth / 2 + windowScroll.scrollLeft, top: windowSize.innerHeight / 2 - popupHeight / 2 + windowScroll.scrollTop, bottom: windowSize.innerHeight / 2 - popupHeight / 2 + windowScroll.scrollTop, //for optimisation purposes windowSize: windowSize, windowScroll: windowScroll, popupWidth: popupWidth, popupHeight: popupHeight }; } } /** * @internal */ }, { key: "getPositionRelativeToTarget", value: function getPositionRelativeToTarget(element) { var offsetLeft = element.offsetLeft; var offsetTop = element.offsetTop; var offsetElement = element.offsetParent; while (offsetElement && offsetElement !== this.getTargetContainer()) { offsetLeft += offsetElement.offsetLeft; offsetTop += offsetElement.offsetTop; offsetElement = offsetElement.offsetParent; } var elementRect = element.getBoundingClientRect(); return new DOMRect(offsetLeft, offsetTop, elementRect.width, elementRect.height); } // private }, { key: "getWindowSize", value: function getWindowSize() { if (this.isTargetDocumentBody()) { return { innerWidth: window.innerWidth, innerHeight: window.innerHeight }; } else { return { innerWidth: this.getTargetContainer().offsetWidth, innerHeight: this.getTargetContainer().offsetHeight }; } } // private }, { key: "getWindowScroll", value: function getWindowScroll() { if (this.isTargetDocumentBody()) { return { scrollLeft: window.pageXOffset, scrollTop: window.pageYOffset }; } else { return { scrollLeft: this.getTargetContainer().scrollLeft, scrollTop: this.getTargetContainer().scrollTop }; } } }, { key: "setAngle", value: function setAngle(params) { if (params === false) { if (this.angle !== null) { main_core.Dom.remove(this.angle.element); } this.angle = null; this.angleArrowElement = null; return; } var className = 'popup-window-angly'; if (this.angle === null) { var position = this.bindOptions.position && this.bindOptions.position === 'top' ? 'bottom' : 'top'; var angleMinLeft = Popup.getOption(position === 'top' ? 'angleMinTop' : 'angleMinBottom'); var defaultOffset = main_core.Type.isNumber(params.offset) ? params.offset : 0; var angleLeftOffset = Popup.getOption('angleLeftOffset', null); if (defaultOffset > 0 && main_core.Type.isNumber(angleLeftOffset)) { defaultOffset += angleLeftOffset - Popup.defaultOptions.angleLeftOffset; } this.angleArrowElement = main_core.Tag.render(_templateObject6 || (_templateObject6 = babelHelpers.taggedTemplateLiteral(["
"]))); if (this.background) { this.angleArrowElement.style.background = this.background; } this.angle = { element: main_core.Tag.render(_templateObject7 || (_templateObject7 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\t
\n\t\t\t\t\t\t", "\n\t\t\t\t\t
\n\t\t\t\t"])), className, className, position, this.angleArrowElement), position: position, offset: 0, defaultOffset: Math.max(defaultOffset, angleMinLeft) //Math.max(Type.isNumber(params.offset) ? params.offset : 0, angleMinLeft) }; this.getPopupContainer().appendChild(this.angle.element); } if (babelHelpers["typeof"](params) === 'object' && params.position && ['top', 'right', 'bottom', 'left', 'hide'].includes(params.position)) { main_core.Dom.removeClass(this.angle.element, className + '-' + this.angle.position); main_core.Dom.addClass(this.angle.element, className + '-' + params.position); this.angle.position = params.position; } if (babelHelpers["typeof"](params) === 'object' && main_core.Type.isNumber(params.offset)) { var offset = params.offset; var minOffset, maxOffset; if (this.angle.position === 'top') { minOffset = Popup.getOption('angleMinTop'); maxOffset = this.getPopupContainer().offsetWidth - Popup.getOption('angleMaxTop'); maxOffset = maxOffset < minOffset ? Math.max(minOffset, offset) : maxOffset; this.angle.offset = Math.min(Math.max(minOffset, offset), maxOffset); this.angle.element.style.left = this.angle.offset + 'px'; this.angle.element.style.marginLeft = 0; this.angle.element.style.removeProperty('top'); } else if (this.angle.position === 'bottom') { minOffset = Popup.getOption('angleMinBottom'); maxOffset = this.getPopupContainer().offsetWidth - Popup.getOption('angleMaxBottom'); maxOffset = maxOffset < minOffset ? Math.max(minOffset, offset) : maxOffset; this.angle.offset = Math.min(Math.max(minOffset, offset), maxOffset); this.angle.element.style.marginLeft = this.angle.offset + 'px'; this.angle.element.style.left = 0; this.angle.element.style.removeProperty('top'); } else if (this.angle.position === 'right') { minOffset = Popup.getOption('angleMinRight'); maxOffset = this.getPopupContainer().offsetHeight - Popup.getOption('angleMaxRight'); maxOffset = maxOffset < minOffset ? Math.max(minOffset, offset) : maxOffset; this.angle.offset = Math.min(Math.max(minOffset, offset), maxOffset); this.angle.element.style.top = this.angle.offset + 'px'; this.angle.element.style.removeProperty('left'); this.angle.element.style.removeProperty('margin-left'); } else if (this.angle.position === 'left') { minOffset = Popup.getOption('angleMinLeft'); maxOffset = this.getPopupContainer().offsetHeight - Popup.getOption('angleMaxLeft'); maxOffset = maxOffset < minOffset ? Math.max(minOffset, offset) : maxOffset; this.angle.offset = Math.min(Math.max(minOffset, offset), maxOffset); this.angle.element.style.top = this.angle.offset + 'px'; this.angle.element.style.removeProperty('left'); this.angle.element.style.removeProperty('margin-left'); } } } }, { key: "getWidth", value: function getWidth() { return this.width; } }, { key: "setWidth", value: function setWidth(width) { this.setWidthProperty('width', width); } }, { key: "getHeight", value: function getHeight() { return this.height; } }, { key: "setHeight", value: function setHeight(height) { this.setHeightProperty('height', height); } }, { key: "getMinWidth", value: function getMinWidth() { return this.minWidth; } }, { key: "setMinWidth", value: function setMinWidth(width) { this.setWidthProperty('minWidth', width); } }, { key: "getMinHeight", value: function getMinHeight() { return this.minHeight; } }, { key: "setMinHeight", value: function setMinHeight(height) { this.setHeightProperty('minHeight', height); } }, { key: "getMaxWidth", value: function getMaxWidth() { return this.maxWidth; } }, { key: "setMaxWidth", value: function setMaxWidth(width) { this.setWidthProperty('maxWidth', width); } }, { key: "getMaxHeight", value: function getMaxHeight() { return this.maxHeight; } }, { key: "setMaxHeight", value: function setMaxHeight(height) { this.setHeightProperty('maxHeight', height); } /** * @private */ }, { key: "setWidthProperty", value: function setWidthProperty(property, width) { var props = ['width', 'minWidth', 'maxWidth']; if (props.indexOf(property) === -1) { return; } if (main_core.Type.isNumber(width) && width >= 0) { this[property] = width; this.getResizableContainer().style[property] = width + 'px'; this.getContentContainer().style.overflowX = 'auto'; this.getPopupContainer().classList.add('popup-window-fixed-width'); if (this.getTitleContainer() && main_core.Browser.isIE11()) { this.getTitleContainer().style[property] = width + 'px'; } } else if (width === null || width === false) { this[property] = null; this.getResizableContainer().style.removeProperty(main_core.Text.toKebabCase(property)); var hasOtherProps = props.some(function (prop) { return this.getResizableContainer().style.getPropertyValue(main_core.Text.toKebabCase(prop)) !== ''; }, this); if (!hasOtherProps) { this.getContentContainer().style.removeProperty('overflow-x'); this.getPopupContainer().classList.remove('popup-window-fixed-width'); } if (this.getTitleContainer() && main_core.Browser.isIE11()) { this.getTitleContainer().style.removeProperty(main_core.Text.toKebabCase(property)); } } } /** * @private */ }, { key: "setHeightProperty", value: function setHeightProperty(property, height) { var props = ['height', 'minHeight', 'maxHeight']; if (props.indexOf(property) === -1) { return; } if (main_core.Type.isNumber(height) && height >= 0) { this[property] = height; this.getResizableContainer().style[property] = height + 'px'; this.getContentContainer().style.overflowY = 'auto'; this.getPopupContainer().classList.add('popup-window-fixed-height'); } else if (height === null || height === false) { this[property] = null; this.getResizableContainer().style.removeProperty(main_core.Text.toKebabCase(property)); var hasOtherProps = props.some(function (prop) { return this.getResizableContainer().style.getPropertyValue(main_core.Text.toKebabCase(prop)) !== ''; }, this); if (!hasOtherProps) { this.getContentContainer().style.removeProperty('overflow-y'); this.getPopupContainer().classList.remove('popup-window-fixed-height'); } } } }, { key: "setPadding", value: function setPadding(padding) { if (main_core.Type.isNumber(padding) && padding >= 0) { this.padding = padding; this.getPopupContainer().style.padding = padding + 'px'; } else if (padding === null) { this.padding = null; this.getPopupContainer().style.removeProperty('padding'); } } }, { key: "getPadding", value: function getPadding() { return this.padding; } }, { key: "setContentPadding", value: function setContentPadding(padding) { if (main_core.Type.isNumber(padding) && padding >= 0) { this.contentPadding = padding; this.getContentContainer().style.padding = padding + 'px'; } else if (padding === null) { this.contentPadding = null; this.getContentContainer().style.removeProperty('padding'); } } }, { key: "getContentPadding", value: function getContentPadding() { return this.contentPadding; } }, { key: "setBorderRadius", value: function setBorderRadius(radius) { if (main_core.Type.isStringFilled(radius)) { this.borderRadius = radius; this.getPopupContainer().style.setProperty('--popup-window-border-radius', radius); } else if (radius === null) { this.borderRadius = null; this.getPopupContainer().style.removeProperty('--popup-window-border-radius'); } } }, { key: "setContentBorderRadius", value: function setContentBorderRadius(radius) { if (main_core.Type.isStringFilled(radius)) { this.contentBorderRadius = radius; this.getContentContainer().style.setProperty('--popup-window-content-border-radius', radius); } else if (radius === null) { this.contentBorderRadius = null; this.getContentContainer().style.removeProperty('--popup-window-content-border-radius'); } } }, { key: "setContentColor", value: function setContentColor(color) { if (main_core.Type.isString(color) && this.contentContainer) { this.contentContainer.style.backgroundColor = color; } else if (color === null) { this.contentContainer.style.style.removeProperty('background-color'); } } }, { key: "setBackground", value: function setBackground(background) { if (main_core.Type.isStringFilled(background)) { this.background = background; this.getPopupContainer().style.background = background; if (this.angleArrowElement) { this.angleArrowElement.style.background = background; } } else if (background === null) { this.background = null; this.getPopupContainer().style.removeProperty('background'); if (this.angleArrowElement) { this.angleArrowElement.style.removeProperty('background'); } } } }, { key: "getBackground", value: function getBackground() { return this.background; } }, { key: "setContentBackground", value: function setContentBackground(background) { if (main_core.Type.isStringFilled(background)) { this.contentBackground = background; this.getContentContainer().style.background = background; } else if (background === null) { this.contentBackground = null; this.getContentContainer().style.removeProperty('background'); } } }, { key: "getContentBackground", value: function getContentBackground() { return this.contentBackground; } }, { key: "isDestroyed", value: function isDestroyed() { return this.destroyed; } }, { key: "setCacheable", value: function setCacheable(cacheable) { this.cacheable = cacheable !== false; } }, { key: "isCacheable", value: function isCacheable() { return this.cacheable; } }, { key: "setToFrontOnShow", value: function setToFrontOnShow(flag) { this.toFrontOnShow = flag !== false; } }, { key: "shouldFrontOnShow", value: function shouldFrontOnShow() { return this.toFrontOnShow; } }, { key: "setResizeMode", value: function setResizeMode(mode) { if (mode === true || main_core.Type.isPlainObject(mode)) { if (!this.resizeIcon) { this.resizeIcon = main_core.Tag.render(_templateObject8 || (_templateObject8 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\t
\n\t\t\t\t"])), this.handleResizeMouseDown.bind(this)); this.getPopupContainer().appendChild(this.resizeIcon); } //Compatibility this.setMinWidth(mode.minWidth); this.setMinHeight(mode.minHeight); } else if (mode === false && this.resizeIcon) { main_core.Dom.remove(this.resizeIcon); this.resizeIcon = null; } } }, { key: "getTargetContainer", value: function getTargetContainer() { return this.targetContainer; } }, { key: "isTargetDocumentBody", value: function isTargetDocumentBody() { return this.getTargetContainer() === document.body; } }, { key: "getPopupContainer", value: function getPopupContainer() { return this.popupContainer; } }, { key: "getContentContainer", value: function getContentContainer() { return this.contentContainer; } }, { key: "getResizableContainer", value: function getResizableContainer() { return main_core.Browser.isIE11() ? this.getContentContainer() : this.getPopupContainer(); } }, { key: "getTitleContainer", value: function getTitleContainer() { return this.titleBar; } /** * @private */ }, { key: "onTitleMouseDown", value: function onTitleMouseDown(event) { this._startDrag(event, { cursor: 'move', callback: this.handleMove, eventName: 'Drag' }); } /** * @private */ }, { key: "handleResizeMouseDown", value: function handleResizeMouseDown(event) { this._startDrag(event, { cursor: 'nwse-resize', eventName: 'Resize', callback: this.handleResize }); if (this.isTargetDocumentBody()) { this.resizeContentPos = main_core.Dom.getPosition(this.getResizableContainer()); this.resizeContentOffset = this.resizeContentPos.left - main_core.Dom.getPosition(this.getPopupContainer()).left; } else { this.resizeContentPos = this.getPositionRelativeToTarget(this.getResizableContainer()); this.resizeContentOffset = this.resizeContentPos.left - this.getPositionRelativeToTarget(this.getPopupContainer()).left; } this.resizeContentPos.offsetX = 0; this.resizeContentPos.offsetY = 0; } /** * @private */ }, { key: "handleResize", value: function handleResize(offsetX, offsetY, pageX, pageY) { this.resizeContentPos.offsetX += offsetX; this.resizeContentPos.offsetY += offsetY; var width = this.resizeContentPos.width + this.resizeContentPos.offsetX; var height = this.resizeContentPos.height + this.resizeContentPos.offsetY; var scrollWidth = this.isTargetDocumentBody() ? document.documentElement.scrollWidth : this.getTargetContainer().scrollWidth; if (this.resizeContentPos.left + width + this.resizeContentOffset >= scrollWidth) { width = scrollWidth - this.resizeContentPos.left - this.resizeContentOffset; } width = Math.max(width, this.getMinWidth()); height = Math.max(height, this.getMinHeight()); if (this.getMaxWidth() !== null) { width = Math.min(width, this.getMaxWidth()); } if (this.getMaxHeight() !== null) { height = Math.min(height, this.getMaxHeight()); } this.setWidth(width); this.setHeight(height); } }, { key: "isTopAngle", value: function isTopAngle() { return this.angle !== null && this.angle.position === 'top'; } }, { key: "isBottomAngle", value: function isBottomAngle() { return this.angle !== null && this.angle.position === 'bottom'; } }, { key: "isTopOrBottomAngle", value: function isTopOrBottomAngle() { return this.angle !== null && (this.angle.position === 'top' || this.angle.position === 'bottom'); } /** * @private */ }, { key: "getAngleHeight", value: function getAngleHeight() { return this.isTopOrBottomAngle() ? Popup.getOption('angleTopOffset') : 0; } }, { key: "setOffset", value: function setOffset(params) { if (!main_core.Type.isPlainObject(params)) { return; } if (main_core.Type.isNumber(params.offsetLeft)) { this.offsetLeft = params.offsetLeft + Popup.getOption('offsetLeft'); } if (main_core.Type.isNumber(params.offsetTop)) { this.offsetTop = params.offsetTop + Popup.getOption('offsetTop'); } } }, { key: "setTitleBar", value: function setTitleBar(params) { if (!this.titleBar) { return; } if (babelHelpers["typeof"](params) === 'object' && main_core.Type.isDomNode(params.content)) { this.titleBar.innerHTML = ''; this.titleBar.appendChild(params.content); } else if (typeof params === 'string') { this.titleBar.innerHTML = ''; this.titleBar.appendChild(main_core.Dom.create('span', { props: { className: 'popup-window-titlebar-text' }, text: params })); } if (this.params.draggable) { this.titleBar.style.cursor = 'move'; main_core.Event.bind(this.titleBar, 'mousedown', this.onTitleMouseDown); } } }, { key: "setClosingByEsc", value: function setClosingByEsc(enable) { enable = main_core.Type.isBoolean(enable) ? enable : true; if (enable) { this.closeByEsc = true; this.bindClosingByEsc(); } else { this.closeByEsc = false; this.unbindClosingByEsc(); } } /** * @private */ }, { key: "bindClosingByEsc", value: function bindClosingByEsc() { if (this.closeByEsc && !this.isCloseByEscBinded) { main_core.Event.bind(document, 'keyup', this.handleDocumentKeyUp); this.isCloseByEscBinded = true; } } /** * @private */ }, { key: "unbindClosingByEsc", value: function unbindClosingByEsc() { if (this.isCloseByEscBinded) { main_core.Event.unbind(document, 'keyup', this.handleDocumentKeyUp); this.isCloseByEscBinded = false; } } }, { key: "setAutoHide", value: function setAutoHide(enable) { enable = main_core.Type.isBoolean(enable) ? enable : true; if (enable) { this.autoHide = true; this.bindAutoHide(); } else { this.autoHide = false; this.unbindAutoHide(); } } /** * @private */ }, { key: "bindAutoHide", value: function bindAutoHide() { if (this.autoHide && !this.isAutoHideBinded && this.isShown()) { this.isAutoHideBinded = true; if (this.isCompatibleMode()) { main_core.Event.bind(this.getPopupContainer(), 'click', this.handleContainerClick); } if (this.overlay && this.overlay.element) { main_core.Event.bind(this.overlay.element, 'click', this.handleOverlayClick); } else { if (this.isCompatibleMode()) { main_core.Event.bind(document, 'click', this.handleAutoHide); } else { document.addEventListener('click', this.handleAutoHide, true); } } } } /** * @private */ }, { key: "unbindAutoHide", value: function unbindAutoHide() { if (this.isAutoHideBinded) { this.isAutoHideBinded = false; if (this.isCompatibleMode()) { main_core.Event.unbind(this.getPopupContainer(), 'click', this.handleContainerClick); } if (this.overlay && this.overlay.element) { main_core.Event.unbind(this.overlay.element, 'click', this.handleOverlayClick); } else { if (this.isCompatibleMode()) { main_core.Event.unbind(document, 'click', this.handleAutoHide); } else { document.removeEventListener('click', this.handleAutoHide, true); } } } } /** * @private */ }, { key: "handleAutoHide", value: function handleAutoHide(event) { if (this.isDestroyed()) { return; } if (this.autoHideHandler !== null) { if (this.autoHideHandler(event)) { this._tryCloseByEvent(event); } } else if (event.target !== this.getPopupContainer() && !this.getPopupContainer().contains(event.target)) { this._tryCloseByEvent(event); } } /** * @private */ }, { key: "_tryCloseByEvent", value: function _tryCloseByEvent(event) { var _this2 = this; if (this.isCompatibleMode()) { this.tryCloseByEvent(event); } else { setTimeout(function () { _this2.tryCloseByEvent(event); }, 0); } } /** * @private */ }, { key: "tryCloseByEvent", value: function tryCloseByEvent(event) { if (event.button === 0) { this.close(); } } /** * @private */ }, { key: "handleOverlayClick", value: function handleOverlayClick(event) { this.tryCloseByEvent(event); event.stopPropagation(); } }, { key: "setOverlay", value: function setOverlay(params) { if (this.overlay === null) { this.overlay = { element: main_core.Tag.render(_templateObject9 || (_templateObject9 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\t
\n\t\t\t\t"])), this.getId()) }; this.resizeOverlay(); this.targetContainer.appendChild(this.overlay.element); this.getZIndexComponent().setOverlay(this.overlay.element); } if (params && main_core.Type.isNumber(params.opacity) && params.opacity >= 0 && params.opacity <= 100) { this.overlay.element.style.opacity = parseFloat(params.opacity / 100).toPrecision(3); } if (params && params.backgroundColor) { this.overlay.element.style.backgroundColor = params.backgroundColor; } } }, { key: "removeOverlay", value: function removeOverlay() { if (this.overlay !== null && this.overlay.element !== null) { main_core.Dom.remove(this.overlay.element); this.getZIndexComponent().setOverlay(null); } if (this.overlayTimeout) { clearInterval(this.overlayTimeout); this.overlayTimeout = null; } this.overlay = null; } }, { key: "hideOverlay", value: function hideOverlay() { if (this.overlay !== null && this.overlay.element !== null) { if (this.overlayTimeout) { clearInterval(this.overlayTimeout); this.overlayTimeout = null; } this.overlay.element.style.display = 'none'; } } }, { key: "showOverlay", value: function showOverlay() { var _this3 = this; if (this.overlay !== null && this.overlay.element !== null) { this.overlay.element.style.display = 'block'; var popupHeight = this.getPopupContainer().offsetHeight; this.overlayTimeout = setInterval(function () { if (popupHeight !== _this3.getPopupContainer().offsetHeight) { _this3.resizeOverlay(); popupHeight = _this3.getPopupContainer().offsetHeight; } }, 1000); } } }, { key: "resizeOverlay", value: function resizeOverlay() { if (this.overlay !== null && this.overlay.element !== null) { var scrollWidth; var scrollHeight; if (this.isTargetDocumentBody()) { scrollWidth = document.documentElement.scrollWidth; scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight); } else { scrollWidth = this.getTargetContainer().scrollWidth; scrollHeight = this.getTargetContainer().scrollHeight; } this.overlay.element.style.width = scrollWidth + 'px'; this.overlay.element.style.height = scrollHeight + 'px'; } } }, { key: "getZindex", value: function getZindex() { return this.getZIndexComponent().getZIndex(); } }, { key: "getZIndexComponent", value: function getZIndexComponent() { return this.zIndexComponent; } }, { key: "show", value: function show() { var _this4 = this; if (this.isShown() || this.isDestroyed()) { return; } this.emit('onBeforeShow'); this.showOverlay(); this.getPopupContainer().style.display = 'block'; if (this.shouldFrontOnShow()) { this.bringToFront(); } if (!this.firstShow) { this.emit('onFirstShow', new main_core_events.BaseEvent({ compatData: [this] })); this.firstShow = true; } this.emit('onShow', new main_core_events.BaseEvent({ compatData: [this] })); this.adjustPosition(); this.animateOpening(function () { if (_this4.isDestroyed()) { return; } main_core.Dom.removeClass(_this4.getPopupContainer(), _this4.animationShowClassName); _this4.emit('onAfterShow', new main_core_events.BaseEvent({ compatData: [_this4] })); }); this.bindClosingByEsc(); if (this.isCompatibleMode()) { setTimeout(function () { _this4.bindAutoHide(); }, 100); } else { this.bindAutoHide(); } } }, { key: "close", value: function close() { var _this5 = this; if (this.isDestroyed() || !this.isShown()) { return; } this.emit('onClose', new main_core_events.BaseEvent({ compatData: [this] })); if (this.isDestroyed()) { return; } this.animateClosing(function () { if (_this5.isDestroyed()) { return; } _this5.hideOverlay(); _this5.getPopupContainer().style.display = 'none'; main_core.Dom.removeClass(_this5.getPopupContainer(), _this5.animationCloseClassName); _this5.unbindClosingByEsc(); if (_this5.isCompatibleMode()) { setTimeout(function () { _this5.unbindAutoHide(); }, 0); } else { _this5.unbindAutoHide(); } _this5.emit('onAfterClose', new main_core_events.BaseEvent({ compatData: [_this5] })); if (!_this5.isCacheable()) { _this5.destroy(); } }); } }, { key: "bringToFront", value: function bringToFront() { if (this.isShown()) { main_core_zIndexManager.ZIndexManager.bringToFront(this.getPopupContainer()); } } }, { key: "toggle", value: function toggle() { this.isShown() ? this.close() : this.show(); } /** * * @private */ }, { key: "animateOpening", value: function animateOpening(callback) { main_core.Dom.removeClass(this.getPopupContainer(), this.animationCloseClassName); if (this.animationShowClassName !== null) { main_core.Dom.addClass(this.getPopupContainer(), this.animationShowClassName); if (this.animationCloseEventType !== null) { var eventName = this.animationCloseEventType + 'end'; this.getPopupContainer().addEventListener(eventName, function handleTransitionEnd() { this.removeEventListener(eventName, handleTransitionEnd); callback(); }); } else { callback(); } } else { callback(); } } /** * @private */ }, { key: "animateClosing", value: function animateClosing(callback) { main_core.Dom.removeClass(this.getPopupContainer(), this.animationShowClassName); if (this.animationCloseClassName !== null) { main_core.Dom.addClass(this.getPopupContainer(), this.animationCloseClassName); if (this.animationCloseEventType !== null) { var eventName = this.animationCloseEventType + 'end'; this.getPopupContainer().addEventListener(eventName, function handleTransitionEnd() { this.removeEventListener(eventName, handleTransitionEnd); callback(); }); } else { callback(); } } else { callback(); } } }, { key: "setAnimation", value: function setAnimation(options) { if (main_core.Type.isPlainObject(options)) { this.animationShowClassName = main_core.Type.isStringFilled(options.showClassName) ? options.showClassName : null; this.animationCloseClassName = main_core.Type.isStringFilled(options.closeClassName) ? options.closeClassName : null; this.animationCloseEventType = options.closeAnimationType === 'animation' || options.closeAnimationType === 'transition' ? options.closeAnimationType : null; } else if (main_core.Type.isStringFilled(options)) { var animationName = options; if (animationName === 'fading') { this.animationShowClassName = 'popup-window-show-animation-opacity'; this.animationCloseClassName = 'popup-window-close-animation-opacity'; this.animationCloseEventType = 'animation'; } else if (animationName === 'fading-slide') { this.animationShowClassName = 'popup-window-show-animation-opacity-transform'; this.animationCloseClassName = 'popup-window-close-animation-opacity'; this.animationCloseEventType = 'animation'; } else if (animationName === 'scale') { this.animationShowClassName = 'popup-window-show-animation-scale'; this.animationCloseClassName = 'popup-window-close-animation-opacity'; this.animationCloseEventType = 'animation'; } } else if (options === false || options === null) { this.animationShowClassName = null; this.animationCloseClassName = null; this.animationCloseEventType = null; } } }, { key: "isShown", value: function isShown() { return !this.isDestroyed() && this.getPopupContainer().style.display === 'block'; } }, { key: "destroy", value: function destroy() { var _this6 = this; if (this.destroyed) { return; } this.destroyed = true; this.emit('onDestroy', new main_core_events.BaseEvent({ compatData: [this] })); this.unbindClosingByEsc(); if (this.isCompatibleMode()) { setTimeout(function () { _this6.unbindAutoHide(); }, 0); } else { this.unbindAutoHide(); } main_core.Event.unbindAll(this); main_core.Event.unbind(document, 'mousemove', this.handleDocumentMouseMove); main_core.Event.unbind(document, 'mouseup', this.handleDocumentMouseUp); main_core.Event.unbind(window, 'resize', this.handleResizeWindow); this.removeOverlay(); main_core_zIndexManager.ZIndexManager.unregister(this.popupContainer); this.zIndexComponent = null; main_core.Dom.remove(this.popupContainer); this.popupContainer = null; this.contentContainer = null; this.closeIcon = null; this.titleBar = null; this.buttonsContainer = null; this.angle = null; this.angleArrowElement = null; this.resizeIcon = null; } }, { key: "adjustPosition", value: function adjustPosition(bindOptions) { if (bindOptions && babelHelpers["typeof"](bindOptions) === 'object') { this.bindOptions = bindOptions; } var bindElementPos = this.getBindElementPos(this.bindElement); if (!this.bindOptions.forceBindPosition && this.bindElementPos !== null && bindElementPos.top === this.bindElementPos.top && bindElementPos.left === this.bindElementPos.left) { return; } this.bindElementPos = bindElementPos; var windowSize = bindElementPos.windowSize ? bindElementPos.windowSize : this.getWindowSize(); var windowScroll = bindElementPos.windowScroll ? bindElementPos.windowScroll : this.getWindowScroll(); var popupWidth = bindElementPos.popupWidth ? bindElementPos.popupWidth : this.popupContainer.offsetWidth; var popupHeight = bindElementPos.popupHeight ? bindElementPos.popupHeight : this.popupContainer.offsetHeight; var angleTopOffset = Popup.getOption('angleTopOffset'); var left = this.bindElementPos.left + this.offsetLeft - (this.isTopOrBottomAngle() ? Popup.getOption('angleLeftOffset') : 0); if (!this.bindOptions.forceLeft && left + popupWidth + this.bordersWidth >= windowSize.innerWidth + windowScroll.scrollLeft && windowSize.innerWidth + windowScroll.scrollLeft - popupWidth - this.bordersWidth > 0) { var bindLeft = left; left = windowSize.innerWidth + windowScroll.scrollLeft - popupWidth - this.bordersWidth; if (this.isTopOrBottomAngle()) { this.setAngle({ offset: bindLeft - left + this.angle.defaultOffset }); } } else if (this.isTopOrBottomAngle()) { this.setAngle({ offset: this.angle.defaultOffset + (left < 0 ? left : 0) }); } if (left < 0) { left = 0; } var top = 0; if (this.bindOptions.position && this.bindOptions.position === 'top') { top = this.bindElementPos.top - popupHeight - this.offsetTop - (this.isBottomAngle() ? angleTopOffset : 0); if (top < 0 || !this.bindOptions.forceTop && top < windowScroll.scrollTop) { top = this.bindElementPos.bottom + this.offsetTop; if (this.angle !== null) { top += angleTopOffset; this.setAngle({ position: 'top' }); } } else if (this.isTopAngle()) { top = top - angleTopOffset + Popup.getOption('positionTopXOffset'); this.setAngle({ position: 'bottom' }); } else { top += Popup.getOption('positionTopXOffset'); } } else { top = this.bindElementPos.bottom + this.offsetTop + this.getAngleHeight(); if (!this.bindOptions.forceTop && top + popupHeight > windowSize.innerHeight + windowScroll.scrollTop && this.bindElementPos.top - popupHeight - this.getAngleHeight() >= 0) //Can we place the PopupWindow above the bindElement? { //The PopupWindow doesn't place below the bindElement. We should place it above. top = this.bindElementPos.top - popupHeight; if (this.isTopOrBottomAngle()) { top -= angleTopOffset; this.setAngle({ position: 'bottom' }); } top += Popup.getOption('positionTopXOffset'); } else if (this.isBottomAngle()) { top += angleTopOffset; this.setAngle({ position: 'top' }); } } if (top < 0) { top = 0; } var event = new PositionEvent(); event.left = left; event.top = top; this.emit('onBeforeAdjustPosition', event); main_core.Dom.adjust(this.popupContainer, { style: { top: event.top + 'px', left: event.left + 'px' } }); } }, { key: "enterFullScreen", value: function enterFullScreen() { if (Popup.fullscreenStatus) { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } else { if (this.contentContainer.requestFullScreen) { this.contentContainer.requestFullScreen(); main_core.Event.bind(window, 'fullscreenchange', this.handleFullScreen); } else if (this.contentContainer.mozRequestFullScreen) { this.contentContainer.mozRequestFullScreen(); main_core.Event.bind(window, 'mozfullscreenchange', this.handleFullScreen); } else if (this.contentContainer.webkitRequestFullScreen) { this.contentContainer.webkitRequestFullScreen(); main_core.Event.bind(window, 'webkitfullscreenchange', this.handleFullScreen); } else { console.log('fullscreen mode is not supported'); } } } /** * @private */ }, { key: "handleFullScreen", value: function handleFullScreen(event) { if (Popup.fullscreenStatus) { main_core.Event.unbind(window, 'fullscreenchange', this.handleFullScreen); main_core.Event.unbind(window, 'webkitfullscreenchange', this.handleFullScreen); main_core.Event.unbind(window, 'mozfullscreenchange', this.handleFullScreen); Popup.fullscreenStatus = false; if (!this.isDestroyed()) { main_core.Dom.removeClass(this.contentContainer, 'popup-window-fullscreen'); this.emit('onFullscreenLeave'); this.adjustPosition(); } } else { Popup.fullscreenStatus = true; if (!this.isDestroyed()) { main_core.Dom.addClass(this.contentContainer, 'popup-window-fullscreen'); this.emit('onFullscreenEnter'); this.adjustPosition(); } } } /** * @private */ }, { key: "handleCloseIconClick", value: function handleCloseIconClick(event) { this.tryCloseByEvent(event); event.stopPropagation(); } /** * @private */ }, { key: "handleContainerClick", value: function handleContainerClick(event) { event.stopPropagation(); } /** * @private */ }, { key: "handleDocumentKeyUp", value: function handleDocumentKeyUp(event) { var _this7 = this; if (event.keyCode === 27) { checkEscPressed(this.getZindex(), function () { _this7.close(); }); } } /** * @private */ }, { key: "handleResizeWindow", value: function handleResizeWindow() { if (this.isShown()) { this.adjustPosition(); if (this.overlay !== null) { this.resizeOverlay(); } } } /** * @private */ }, { key: "handleMove", value: function handleMove(offsetX, offsetY, pageX, pageY) { var left = parseInt(this.popupContainer.style.left) + offsetX; var top = parseInt(this.popupContainer.style.top) + offsetY; if (babelHelpers["typeof"](this.params.draggable) === 'object' && this.params.draggable.restrict) { //Left side if (left < 0) { left = 0; } var scrollWidth; var scrollHeight; if (this.isTargetDocumentBody()) { scrollWidth = document.documentElement.scrollWidth; scrollHeight = document.documentElement.scrollHeight; } else { scrollWidth = this.getTargetContainer().scrollWidth; scrollHeight = this.getTargetContainer().scrollHeight; } //Right side var floatWidth = this.popupContainer.offsetWidth; var floatHeight = this.popupContainer.offsetHeight; if (left > scrollWidth - floatWidth) { left = scrollWidth - floatWidth; } if (top > scrollHeight - floatHeight) { top = scrollHeight - floatHeight; } //Top side if (top < 0) { top = 0; } } this.popupContainer.style.left = left + 'px'; this.popupContainer.style.top = top + 'px'; } /** * @private */ }, { key: "_startDrag", value: function _startDrag(event, options) { options = options || {}; if (main_core.Type.isStringFilled(options.cursor)) { this.dragOptions.cursor = options.cursor; } if (main_core.Type.isStringFilled(options.eventName)) { this.dragOptions.eventName = options.eventName; } if (main_core.Type.isFunction(options.callback)) { this.dragOptions.callback = options.callback; } this.dragPageX = event.pageX; this.dragPageY = event.pageY; this.dragged = false; main_core.Event.bind(document, 'mousemove', this.handleDocumentMouseMove); main_core.Event.bind(document, 'mouseup', this.handleDocumentMouseUp); if (document.body.setCapture) { document.body.setCapture(); } document.body.ondrag = function () { return false; }; document.body.onselectstart = function () { return false; }; document.body.style.cursor = this.dragOptions.cursor; document.body.style.MozUserSelect = 'none'; this.popupContainer.style.MozUserSelect = 'none'; if (this.shouldFrontOnShow()) { this.bringToFront(); } event.preventDefault(); } /** * @private */ }, { key: "handleDocumentMouseMove", value: function handleDocumentMouseMove(event) { if (this.dragPageX === event.pageX && this.dragPageY === event.pageY) { return; } this.dragOptions.callback(event.pageX - this.dragPageX, event.pageY - this.dragPageY, event.pageX, event.pageY); this.dragPageX = event.pageX; this.dragPageY = event.pageY; if (!this.dragged) { this.emit("on".concat(this.dragOptions.eventName, "Start"), new main_core_events.BaseEvent({ compatData: [this] })); this.dragged = true; } this.emit("on".concat(this.dragOptions.eventName), new main_core_events.BaseEvent({ compatData: [this] })); } /** * @private */ }, { key: "handleDocumentMouseUp", value: function handleDocumentMouseUp(event) { if (document.body.releaseCapture) { document.body.releaseCapture(); } main_core.Event.unbind(document, 'mousemove', this.handleDocumentMouseMove); main_core.Event.unbind(document, 'mouseup', this.handleDocumentMouseUp); document.body.ondrag = null; document.body.onselectstart = null; document.body.style.cursor = ''; document.body.style.MozUserSelect = ''; this.popupContainer.style.MozUserSelect = ''; this.emit("on".concat(this.dragOptions.eventName, "End"), new main_core_events.BaseEvent({ compatData: [this] })); this.dragged = false; event.preventDefault(); } }]); return Popup; }(main_core_events.EventEmitter); babelHelpers.defineProperty(Popup, "options", {}); babelHelpers.defineProperty(Popup, "defaultOptions", { //left offset for popup about target angleLeftOffset: 40, //when popup position is 'top' offset distance between popup body and target node positionTopXOffset: -11, //offset distance between popup body and target node if use angle, sum with positionTopXOffset angleTopOffset: 10, popupZindex: 1000, popupOverlayZindex: 1100, angleMinLeft: 10, angleMaxLeft: 30, angleMinRight: 10, angleMaxRight: 30, angleMinBottom: 23, angleMaxBottom: 25, angleMinTop: 23, angleMaxTop: 25, offsetLeft: 0, offsetTop: 0 }); var escCallbackIndex = -1; var escCallback = null; function checkEscPressed(zIndex, callback) { if (zIndex === false) { if (escCallback && escCallback.length > 0) { for (var i = 0; i < escCallback.length; i++) { escCallback[i](); } escCallback = null; escCallbackIndex = -1; } } else { if (escCallback === null) { escCallback = []; escCallbackIndex = -1; setTimeout(function () { checkEscPressed(false); }, 10); } if (zIndex > escCallbackIndex) { escCallbackIndex = zIndex; escCallback = [callback]; } else if (zIndex === escCallbackIndex) { escCallback.push(callback); } } } var PopupManager = /*#__PURE__*/function () { function PopupManager() { babelHelpers.classCallCheck(this, PopupManager); throw new Error('You cannot make an instance of PopupManager.'); } babelHelpers.createClass(PopupManager, null, [{ key: "create", value: function create(options) { var _arguments = Array.prototype.slice.call(arguments), popupId = _arguments[0], bindElement = _arguments[1], params = _arguments[2]; //compatible arguments var id = popupId; var compatMode = true; if (main_core.Type.isPlainObject(popupId) && !bindElement && !params) { compatMode = false; id = popupId.id; if (!main_core.Type.isStringFilled(id)) { throw new Error('BX.Main.Popup.Manager: "id" parameter is required.'); } } var popupWindow = this.getPopupById(id); if (popupWindow === null) { popupWindow = compatMode ? new Popup(popupId, bindElement, params) : new Popup(options); popupWindow.subscribe('onShow', this.handlePopupShow); popupWindow.subscribe('onClose', this.handlePopupClose); } return popupWindow; } /** * @private */ }, { key: "handleOnAfterInit", value: function handleOnAfterInit(event) { event.getTarget().subscribeOnce('onDestroy', this.handlePopupDestroy); this._popups.forEach(function (popup) { if (popup.getId() === event.getTarget().getId()) { console.error("Duplicate id (".concat(popup.getId(), ") for the BX.Main.Popup instance.")); } }); this._popups.push(event.getTarget()); } /** * @private */ }, { key: "handlePopupDestroy", value: function handlePopupDestroy(event) { this._popups = this._popups.filter(function (popup) { return popup !== event.getTarget(); }); } /** * @private */ }, { key: "handlePopupShow", value: function handlePopupShow(event) { if (this._currentPopup !== null) { this._currentPopup.close(); } this._currentPopup = event.getTarget(); } /** * @private */ }, { key: "handlePopupClose", value: function handlePopupClose() { this._currentPopup = null; } }, { key: "getCurrentPopup", value: function getCurrentPopup() { return this._currentPopup; } }, { key: "isPopupExists", value: function isPopupExists(id) { return this.getPopupById(id) !== null; } }, { key: "isAnyPopupShown", value: function isAnyPopupShown() { for (var i = 0, length = this._popups.length; i < length; i++) { if (this._popups[i].isShown()) { return true; } } return false; } }, { key: "getPopupById", value: function getPopupById(id) { for (var i = 0; i < this._popups.length; i++) { if (this._popups[i].getId() === id) { return this._popups[i]; } } return null; } }, { key: "getMaxZIndex", value: function getMaxZIndex() { var zIndex = 0; this.getPopups().forEach(function (popup) { zIndex = Math.max(zIndex, popup.getZindex()); }); return zIndex; } }, { key: "getPopups", value: function getPopups() { return this._popups; } }]); return PopupManager; }(); babelHelpers.defineProperty(PopupManager, "_popups", []); babelHelpers.defineProperty(PopupManager, "_currentPopup", null); PopupManager.handlePopupDestroy = PopupManager.handlePopupDestroy.bind(PopupManager); PopupManager.handlePopupShow = PopupManager.handlePopupShow.bind(PopupManager); PopupManager.handlePopupClose = PopupManager.handlePopupClose.bind(PopupManager); PopupManager.handleOnAfterInit = PopupManager.handleOnAfterInit.bind(PopupManager); main_core_events.EventEmitter.subscribe('BX.Main.Popup:onAfterInit', PopupManager.handleOnAfterInit); var _templateObject$1, _templateObject2$1, _templateObject3$1; var aliases$1 = { onSubMenuShow: { namespace: 'BX.Main.Menu.Item', eventName: 'SubMenu:onShow' }, onSubMenuClose: { namespace: 'BX.Main.Menu.Item', eventName: 'SubMenu:onClose' } }; var reEscape = /[<>'"]/g; var escapeEntities = { '<': '<', '>': '>', "'": ''', '"': '"' }; function encodeSafe(value) { if (main_core.Type.isString(value)) { return value.replace(reEscape, function (item) { return escapeEntities[item]; }); } return value; } main_core_events.EventEmitter.registerAliases(aliases$1); var MenuItem = /*#__PURE__*/function (_EventEmitter) { babelHelpers.inherits(MenuItem, _EventEmitter); function MenuItem(options) { var _this; babelHelpers.classCallCheck(this, MenuItem); _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(MenuItem).call(this)); _this.setEventNamespace('BX.Main.Menu.Item'); options = options || {}; _this.options = options; _this.id = options.id || main_core.Text.getRandom(); _this.text = ''; _this.allowHtml = false; if (main_core.Type.isStringFilled(options.html) || main_core.Type.isElementNode(options.html)) { _this.text = options.html; _this.allowHtml = true; } else if (main_core.Type.isStringFilled(options.text)) { _this.text = options.text; if (_this.text.match(/<[^>]+>/)) { console.warn('BX.Main.MenuItem: use "html" option for the html item content.', _this.getText()); } } _this.title = main_core.Type.isStringFilled(options.title) ? options.title : ''; _this.delimiter = options.delimiter === true; _this.href = main_core.Type.isStringFilled(options.href) ? options.href : null; _this.target = main_core.Type.isStringFilled(options.target) ? options.target : null; _this.dataset = main_core.Type.isPlainObject(options.dataset) ? options.dataset : null; _this.className = main_core.Type.isStringFilled(options.className) ? options.className : null; _this.menuShowDelay = main_core.Type.isNumber(options.menuShowDelay) ? options.menuShowDelay : 300; _this.subMenuOffsetX = main_core.Type.isNumber(options.subMenuOffsetX) ? options.subMenuOffsetX : 4; _this._items = main_core.Type.isArray(options.items) ? options.items : []; _this.disabled = options.disabled === true; _this.cacheable = options.cacheable === true; /** * * @type {function|string} */ _this.onclick = main_core.Type.isStringFilled(options.onclick) || main_core.Type.isFunction(options.onclick) ? options.onclick : null; _this.subscribeFromOptions(options.events, aliases$1); /** * * @type {Menu} */ _this.menuWindow = null; /** * * @type {Menu} */ _this.subMenuWindow = null; /** * * @type {{item: HTMLElement, text: HTMLElement}} */ _this.layout = { item: null, text: null }; _this.getLayout(); //compatibility //compatibility //now use this.options _this.events = {}; _this.items = []; for (var property in options) { if (options.hasOwnProperty(property) && typeof _this[property] === 'undefined') { _this[property] = options[property]; } } return _this; } babelHelpers.createClass(MenuItem, [{ key: "getLayout", value: function getLayout() { if (this.layout.item) { return this.layout; } if (this.delimiter) { if (main_core.Type.isStringFilled(this.getText())) { this.layout.item = main_core.Dom.create('span', { props: { className: ['popup-window-delimiter-section', this.className ? this.className : ''].join(' ') }, children: [this.layout.text = main_core.Tag.render(_templateObject$1 || (_templateObject$1 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\t\t\t", "\n\t\t\t\t\t\t"])), this.allowHtml ? this.getText() : encodeSafe(this.getText()))] }); } else { this.layout.item = main_core.Tag.render(_templateObject2$1 || (_templateObject2$1 = babelHelpers.taggedTemplateLiteral([""]))); } } else { this.layout.item = main_core.Dom.create(this.href ? 'a' : 'span', { props: { className: ['menu-popup-item', this.className ? this.className : 'menu-popup-no-icon', this.hasSubMenu() ? 'menu-popup-item-submenu' : ''].join(' ') }, attrs: { title: this.title, onclick: main_core.Type.isString(this.onclick) ? this.onclick : '', // compatibility target: this.target ? this.target : '' }, dataset: this.dataset, events: main_core.Type.isFunction(this.onclick) ? { click: this.onItemClick.bind(this) } : null, children: [main_core.Dom.create('span', { props: { className: 'menu-popup-item-icon' } }), this.layout.text = main_core.Tag.render(_templateObject3$1 || (_templateObject3$1 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\t\t", "\n\t\t\t\t\t"])), this.allowHtml ? this.getText() : encodeSafe(this.getText()))] }); if (this.href) { this.layout.item.href = this.href; } if (this.isDisabled()) { this.disable(); } main_core.Event.bind(this.layout.item, 'mouseenter', this.onItemMouseEnter.bind(this)); main_core.Event.bind(this.layout.item, 'mouseleave', this.onItemMouseLeave.bind(this)); } return this.layout; } }, { key: "getContainer", value: function getContainer() { return this.getLayout().item; } }, { key: "getTextContainer", value: function getTextContainer() { return this.getLayout().text; } }, { key: "getText", value: function getText() { return this.text; } }, { key: "setText", value: function setText(text) { var allowHtml = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (main_core.Type.isString(text) || main_core.Type.isElementNode(text)) { this.allowHtml = allowHtml; this.text = text; if (main_core.Type.isElementNode(text)) { main_core.Dom.clean(this.getTextContainer()); if (this.allowHtml) { main_core.Dom.append(text, this.getTextContainer()); } else { this.getTextContainer().innerHTML = encodeSafe(text.outerHTML); } } else { this.getTextContainer().innerHTML = this.allowHtml ? text : encodeSafe(text); } } } }, { key: "hasSubMenu", value: function hasSubMenu() { return this.subMenuWindow !== null || this._items.length; } }, { key: "showSubMenu", value: function showSubMenu() { if (!this.getMenuWindow().getPopupWindow().isShown()) { return; } this.addSubMenu(this._items); if (this.subMenuWindow) { main_core.Dom.addClass(this.layout.item, 'menu-popup-item-open'); this.closeSiblings(); this.closeChildren(); var popupWindow = this.subMenuWindow.getPopupWindow(); if (!popupWindow.isShown()) { this.emit('SubMenu:onShow'); popupWindow.show(); } this.adjustSubMenu(); } } }, { key: "addSubMenu", value: function addSubMenu(items) { if (this.subMenuWindow !== null || !main_core.Type.isArray(items) || !items.length) { return; } var rootMenuWindow = this.getMenuWindow().getRootMenuWindow() || this.getMenuWindow(); var rootOptions = Object.assign({}, rootMenuWindow.params); delete rootOptions.events; var subMenuOptions = main_core.Type.isPlainObject(rootMenuWindow.params.subMenuOptions) ? rootMenuWindow.params.subMenuOptions : {}; var options = Object.assign({}, rootOptions, subMenuOptions); //Override root menu options options.autoHide = false; options.menuShowDelay = this.menuShowDelay; options.cacheable = this.isCacheable(); options.targetContainer = this.getMenuWindow().getPopupWindow().getTargetContainer(); options.bindOptions = { forceTop: true, forceLeft: true, forceBindPosition: true }; delete options.angle; delete options.overlay; this.subMenuWindow = new Menu('popup-submenu-' + this.id, this.layout.item, items, options); this.subMenuWindow.setParentMenuWindow(this.getMenuWindow()); this.subMenuWindow.setParentMenuItem(this); this.subMenuWindow.getPopupWindow().subscribe('onDestroy', this.handleSubMenuDestroy.bind(this)); main_core.Dom.addClass(this.layout.item, 'menu-popup-item-submenu'); return this.subMenuWindow; } }, { key: "closeSubMenu", value: function closeSubMenu() { this.clearSubMenuTimeout(); if (this.subMenuWindow) { main_core.Dom.removeClass(this.layout.item, 'menu-popup-item-open'); this.closeChildren(); var popup = this.subMenuWindow.getPopupWindow(); if (popup.isShown()) { this.emit('SubMenu:onClose'); } this.subMenuWindow.close(); } } }, { key: "closeSiblings", value: function closeSiblings() { var siblings = this.menuWindow.getMenuItems(); for (var i = 0; i < siblings.length; i++) { if (siblings[i] !== this) { siblings[i].closeSubMenu(); } } } }, { key: "closeChildren", value: function closeChildren() { if (this.subMenuWindow) { var children = this.subMenuWindow.getMenuItems(); for (var i = 0; i < children.length; i++) { children[i].closeSubMenu(); } } } }, { key: "destroySubMenu", value: function destroySubMenu() { if (this.subMenuWindow) { main_core.Dom.removeClass(this.layout.item, 'menu-popup-item-open menu-popup-item-submenu'); this.destroyChildren(); this.subMenuWindow.destroy(); this.subMenuWindow = null; this._items = []; } } }, { key: "destroyChildren", value: function destroyChildren() { if (this.subMenuWindow) { var children = this.subMenuWindow.getMenuItems(); for (var i = 0; i < children.length; i++) { children[i].destroySubMenu(); } } } }, { key: "adjustSubMenu", value: function adjustSubMenu() { if (!this.subMenuWindow || !this.layout.item) { return; } var popupWindow = this.subMenuWindow.getPopupWindow(); var itemRect = this.getBoundingClientRect(); var offsetLeft = itemRect.width + this.subMenuOffsetX; var offsetTop = itemRect.height + this.getPopupPadding(); var angleOffset = itemRect.height / 2 - this.getPopupPadding(); var anglePosition = 'left'; var popupWidth = popupWindow.getPopupContainer().offsetWidth; var popupHeight = popupWindow.getPopupContainer().offsetHeight; var popupBottom = itemRect.top + popupHeight; var targetContainer = this.getMenuWindow().getPopupWindow().getTargetContainer(); var isGlobalContext = this.getMenuWindow().getPopupWindow().isTargetDocumentBody(); var clientWidth = isGlobalContext ? document.documentElement.clientWidth : targetContainer.offsetWidth; var clientHeight = isGlobalContext ? document.documentElement.clientHeight : targetContainer.offsetHeight; // let's try to fit a submenu to the browser viewport var exceeded = popupBottom - clientHeight; if (exceeded > 0) { var roundOffset = Math.ceil(exceeded / itemRect.height) * itemRect.height; if (roundOffset > itemRect.top) { // it cannot be higher than the browser viewport. roundOffset -= Math.ceil((roundOffset - itemRect.top) / itemRect.height) * itemRect.height; } if (itemRect.bottom > popupBottom - roundOffset) { // let's sync bottom boundaries. roundOffset -= itemRect.bottom - (popupBottom - roundOffset) + this.getPopupPadding(); } offsetTop += roundOffset; angleOffset += roundOffset; } if (itemRect.left + offsetLeft + popupWidth > clientWidth) { var left = itemRect.left - popupWidth - this.subMenuOffsetX; if (left > 0) { offsetLeft = -popupWidth - this.subMenuOffsetX; anglePosition = 'right'; } } popupWindow.setBindElement(this.layout.item); popupWindow.setOffset({ offsetLeft: offsetLeft, offsetTop: -offsetTop }); popupWindow.setAngle({ position: anglePosition, offset: angleOffset }); popupWindow.adjustPosition(); } }, { key: "getBoundingClientRect", value: function getBoundingClientRect() { var popup = this.getMenuWindow().getPopupWindow(); if (popup.isTargetDocumentBody()) { return this.layout.item.getBoundingClientRect(); } else { var rect = popup.getPositionRelativeToTarget(this.layout.item); var targetContainer = this.getMenuWindow().getPopupWindow().getTargetContainer(); return new DOMRect(rect.left - targetContainer.scrollLeft, rect.top - targetContainer.scrollTop, rect.width, rect.height); } } }, { key: "getPopupPadding", value: function getPopupPadding() { if (!main_core.Type.isNumber(this.popupPadding)) { if (this.subMenuWindow) { var menuContainer = this.subMenuWindow.layout.menuContainer; this.popupPadding = parseInt(main_core.Dom.style(menuContainer, 'paddingTop'), 10); } else { this.popupPadding = 0; } } return this.popupPadding; } }, { key: "getSubMenu", value: function getSubMenu() { return this.subMenuWindow; } }, { key: "getId", value: function getId() { return this.id; } }, { key: "setMenuWindow", value: function setMenuWindow(menu) { this.menuWindow = menu; } }, { key: "getMenuWindow", value: function getMenuWindow() { return this.menuWindow; } }, { key: "getMenuShowDelay", value: function getMenuShowDelay() { return this.menuShowDelay; } }, { key: "enable", value: function enable() { this.disabled = false; this.getContainer().classList.remove('menu-popup-item-disabled'); } }, { key: "disable", value: function disable() { this.disabled = true; this.closeSubMenu(); this.getContainer().classList.add('menu-popup-item-disabled'); } }, { key: "isDisabled", value: function isDisabled() { return this.disabled; } }, { key: "setCacheable", value: function setCacheable(cacheable) { this.cacheable = cacheable !== false; } }, { key: "isCacheable", value: function isCacheable() { return this.cacheable; } /** * @private */ }, { key: "onItemClick", value: function onItemClick(event) { this.onclick.call(this.menuWindow, event, this); //compatibility } /** * @private */ }, { key: "onItemMouseEnter", value: function onItemMouseEnter(mouseEvent) { if (this.isDisabled()) { return; } var event = new main_core_events.BaseEvent({ data: { mouseEvent: mouseEvent } }); main_core_events.EventEmitter.emit(this, 'onMouseEnter', event, { thisArg: this }); if (event.isDefaultPrevented()) { return; } this.clearSubMenuTimeout(); if (this.hasSubMenu()) { this.subMenuTimeout = setTimeout(function () { this.showSubMenu(); }.bind(this), this.menuShowDelay); } else { this.subMenuTimeout = setTimeout(function () { this.closeSiblings(); }.bind(this), this.menuShowDelay); } } /** * @private */ }, { key: "onItemMouseLeave", value: function onItemMouseLeave(mouseEvent) { if (this.isDisabled()) { return; } var event = new main_core_events.BaseEvent({ data: { mouseEvent: mouseEvent } }); main_core_events.EventEmitter.emit(this, 'onMouseLeave', event, { thisArg: this }); if (event.isDefaultPrevented()) { return; } this.clearSubMenuTimeout(); } /** * @private */ }, { key: "clearSubMenuTimeout", value: function clearSubMenuTimeout() { if (this.subMenuTimeout) { clearTimeout(this.subMenuTimeout); } this.subMenuTimeout = null; } /** * @private */ }, { key: "handleSubMenuDestroy", value: function handleSubMenuDestroy() { this.subMenuWindow = null; } }]); return MenuItem; }(main_core_events.EventEmitter); var _templateObject$2, _templateObject2$2; /** * @memberof BX.Main */ var Menu = /*#__PURE__*/function () { function Menu(options) { babelHelpers.classCallCheck(this, Menu); var _arguments = Array.prototype.slice.call(arguments), id = _arguments[0], bindElement = _arguments[1], menuItems = _arguments[2], params = _arguments[3]; if (main_core.Type.isPlainObject(options) && !bindElement && !menuItems && !params) { params = options; params.compatibleMode = false; id = options.id; bindElement = options.bindElement; menuItems = options.items; if (!main_core.Type.isStringFilled(id)) { id = 'menu-popup-' + main_core.Text.getRandom(); } } this.id = id; this.bindElement = bindElement; /** * * @type {MenuItem[]} */ this.menuItems = []; this.itemsContainer = null; this.params = params && babelHelpers["typeof"](params) === 'object' ? params : {}; this.parentMenuWindow = null; this.parentMenuItem = null; if (menuItems && main_core.Type.isArray(menuItems)) { for (var i = 0; i < menuItems.length; i++) { this.addMenuItemInternal(menuItems[i], null); } } this.layout = { menuContainer: null, itemsContainer: null }; this.popupWindow = this.__createPopup(); } /** * @private */ babelHelpers.createClass(Menu, [{ key: "__createPopup", value: function __createPopup() { var domItems = []; for (var i = 0; i < this.menuItems.length; i++) { var item = this.menuItems[i]; var itemLayout = item.getLayout(); domItems.push(itemLayout.item); } var defaults = { closeByEsc: false, angle: false, autoHide: true, offsetTop: 1, offsetLeft: 0, animation: 'fading' }; var options = Object.assign(defaults, this.params); //Override user params options.noAllPaddings = true; options.darkMode = false; options.autoHideHandler = this.handleAutoHide.bind(this); this.layout.itemsContainer = main_core.Tag.render(_templateObject$2 || (_templateObject$2 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t
", "
\n\t\t"])), domItems); this.layout.menuContainer = main_core.Tag.render(_templateObject2$2 || (_templateObject2$2 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t
", "
\n\t\t"])), this.layout.itemsContainer); this.itemsContainer = this.layout.itemsContainer; options.content = this.layout.menuContainer; //Make internal event handlers first in the queue. options.events = { onClose: this.handlePopupClose.bind(this), onDestroy: this.handlePopupDestroy.bind(this) }; var id = options.compatibleMode === false ? this.getId() : 'menu-popup-' + this.getId(); var popup = new Popup(id, this.bindElement, options); if (this.params && this.params.events) { popup.subscribeFromOptions(this.params.events); } return popup; } }, { key: "getPopupWindow", value: function getPopupWindow() { return this.popupWindow; } }, { key: "show", value: function show() { this.getPopupWindow().show(); } }, { key: "close", value: function close() { this.getPopupWindow().close(); } }, { key: "destroy", value: function destroy() { this.getPopupWindow().destroy(); } }, { key: "toggle", value: function toggle() { if (this.getPopupWindow().isShown()) { this.close(); } else { this.show(); } } }, { key: "getId", value: function getId() { return this.id; } /** * @private */ }, { key: "handlePopupClose", value: function handlePopupClose() { for (var i = 0; i < this.menuItems.length; i++) { var item = this.menuItems[i]; item.closeSubMenu(); } } /** * @private */ }, { key: "handlePopupDestroy", value: function handlePopupDestroy() { for (var i = 0; i < this.menuItems.length; i++) { var item = this.menuItems[i]; item.destroySubMenu(); } } /** * @private */ }, { key: "handleAutoHide", value: function handleAutoHide(event) { return !this.containsTarget(event.target); } /** * @private */ }, { key: "containsTarget", value: function containsTarget(target) { var el = this.getPopupWindow().getPopupContainer(); if (this.getPopupWindow().isShown() && (target === el || el.contains(target))) { return true; } return this.getMenuItems().some(function (item) { return item.getSubMenu() && item.getSubMenu().containsTarget(target); }); } }, { key: "setParentMenuWindow", value: function setParentMenuWindow(parentMenu) { if (parentMenu instanceof Menu) { this.parentMenuWindow = parentMenu; } } }, { key: "getParentMenuWindow", value: function getParentMenuWindow() { return this.parentMenuWindow; } }, { key: "getRootMenuWindow", value: function getRootMenuWindow() { var root = null; var parent = this.getParentMenuWindow(); while (parent !== null) { root = parent; parent = parent.getParentMenuWindow(); } return root; } }, { key: "setParentMenuItem", value: function setParentMenuItem(parentItem) { if (parentItem instanceof MenuItem) { this.parentMenuItem = parentItem; } } }, { key: "getParentMenuItem", value: function getParentMenuItem() { return this.parentMenuItem; } }, { key: "addMenuItem", value: function addMenuItem(menuItemJson, targetItemId) { var menuItem = this.addMenuItemInternal(menuItemJson, targetItemId); if (!menuItem) { return null; } var itemLayout = menuItem.getLayout(); var targetItem = this.getMenuItem(targetItemId); if (targetItem !== null) { var targetLayout = targetItem.getLayout(); this.itemsContainer.insertBefore(itemLayout.item, targetLayout.item); } else { this.itemsContainer.appendChild(itemLayout.item); } return menuItem; } /** * @private */ }, { key: "addMenuItemInternal", value: function addMenuItemInternal(menuItemJson, targetItemId) { if (!menuItemJson || !menuItemJson.delimiter && !main_core.Type.isStringFilled(menuItemJson.text) && !main_core.Type.isStringFilled(menuItemJson.html) && !main_core.Type.isElementNode(menuItemJson.html) || menuItemJson.id && this.getMenuItem(menuItemJson.id) !== null) { return null; } if (main_core.Type.isNumber(this.params.menuShowDelay)) { menuItemJson.menuShowDelay = this.params.menuShowDelay; } var menuItem = new MenuItem(menuItemJson); menuItem.setMenuWindow(this); var position = this.getMenuItemPosition(targetItemId); if (position >= 0) { this.menuItems.splice(position, 0, menuItem); } else { this.menuItems.push(menuItem); } return menuItem; } }, { key: "removeMenuItem", value: function removeMenuItem(itemId) { var item = this.getMenuItem(itemId); if (!item) { return; } for (var position = 0; position < this.menuItems.length; position++) { if (this.menuItems[position] === item) { item.destroySubMenu(); this.menuItems.splice(position, 1); break; } } if (!this.menuItems.length) { var menuWindow = item.getMenuWindow(); if (menuWindow) { var parentMenuItem = menuWindow.getParentMenuItem(); if (parentMenuItem) { parentMenuItem.destroySubMenu(); } else { menuWindow.destroy(); } } } item.layout.item.parentNode.removeChild(item.layout.item); item.layout = { item: null, text: null }; } }, { key: "getMenuItem", value: function getMenuItem(itemId) { for (var i = 0; i < this.menuItems.length; i++) { if (this.menuItems[i].id && this.menuItems[i].id === itemId) { return this.menuItems[i]; } } return null; } }, { key: "getMenuItems", value: function getMenuItems() { return this.menuItems; } }, { key: "getMenuItemPosition", value: function getMenuItemPosition(itemId) { if (itemId) { for (var i = 0; i < this.menuItems.length; i++) { if (this.menuItems[i].id && this.menuItems[i].id === itemId) { return i; } } } return -1; } }, { key: "getMenuContainer", value: function getMenuContainer() { return this.getPopupWindow().getPopupContainer(); } }]); return Menu; }(); var MenuManager = /*#__PURE__*/function () { /** * @private */ /** * @private */ function MenuManager() { babelHelpers.classCallCheck(this, MenuManager); throw new Error('You cannot make an instance of MenuManager.'); } babelHelpers.createClass(MenuManager, null, [{ key: "show", value: function show() { if (this.currentItem !== null) { this.currentItem.popupWindow.close(); } for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } this.currentItem = this.create.apply(this, args); this.currentItem.popupWindow.show(); } }, { key: "create", value: function create(options) { var menuId = null; //Compatibility var bindElement = arguments[1]; var menuItems = arguments[2]; var params = arguments[3]; if (main_core.Type.isPlainObject(options) && !bindElement && !menuItems && !params) { menuId = options.id; if (!main_core.Type.isStringFilled(menuId)) { throw new Error('BX.Main.Menu.create: "id" parameter is required.'); } } else { menuId = options; } if (!this.Data[menuId]) { var menu = new Menu(options, bindElement, menuItems, params); menu.getPopupWindow().subscribe('onDestroy', function () { MenuManager.destroy(menuId); }); this.Data[menuId] = menu; } return this.Data[menuId]; } }, { key: "getCurrentMenu", value: function getCurrentMenu() { return this.currentItem; } }, { key: "getMenuById", value: function getMenuById(id) { return this.Data[id] ? this.Data[id] : null; } /** * compatibility * @private */ }, { key: "onPopupDestroy", value: function onPopupDestroy(popupMenuWindow) { this.destroy(popupMenuWindow.id); } }, { key: "destroy", value: function destroy(id) { var menu = this.getMenuById(id); if (menu) { if (this.currentItem === menu) { this.currentItem = null; } delete this.Data[id]; menu.getPopupWindow().destroy(); } } }]); return MenuManager; }(); babelHelpers.defineProperty(MenuManager, "Data", {}); babelHelpers.defineProperty(MenuManager, "currentItem", null); /** * @deprecated use Popup class instead: import { Popup } from 'main.popup' */ var PopupWindow = /*#__PURE__*/function (_Popup) { babelHelpers.inherits(PopupWindow, _Popup); function PopupWindow() { babelHelpers.classCallCheck(this, PopupWindow); return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PopupWindow).apply(this, arguments)); } return PopupWindow; }(Popup); /** * @deprecated use BX.UI.Button */ var PopupWindowButton = /*#__PURE__*/function (_Button) { babelHelpers.inherits(PopupWindowButton, _Button); function PopupWindowButton() { babelHelpers.classCallCheck(this, PopupWindowButton); return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PopupWindowButton).apply(this, arguments)); } return PopupWindowButton; }(Button); /** * @deprecated use BX.UI.Button */ var ButtonLink = /*#__PURE__*/function (_Button) { babelHelpers.inherits(ButtonLink, _Button); function ButtonLink(params) { var _this; babelHelpers.classCallCheck(this, ButtonLink); _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(ButtonLink).call(this, params)); _this.buttonNode = main_core.Dom.create('span', { props: { className: 'popup-window-button popup-window-button-link' + (_this.className.length > 0 ? ' ' + _this.className : ''), id: _this.id }, text: _this.text, events: _this.contextEvents }); return _this; } return ButtonLink; }(Button); /** * @deprecated use BX.UI.Button */ var PopupWindowButtonLink = /*#__PURE__*/function (_ButtonLink) { babelHelpers.inherits(PopupWindowButtonLink, _ButtonLink); function PopupWindowButtonLink() { babelHelpers.classCallCheck(this, PopupWindowButtonLink); return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PopupWindowButtonLink).apply(this, arguments)); } return PopupWindowButtonLink; }(ButtonLink); /** * @deprecated use BX.UI.Button */ var CustomButton = /*#__PURE__*/function (_Button) { babelHelpers.inherits(CustomButton, _Button); function CustomButton(params) { var _this; babelHelpers.classCallCheck(this, CustomButton); _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(CustomButton).call(this, params)); _this.buttonNode = main_core.Dom.create('span', { props: { className: _this.className.length > 0 ? _this.className : '', id: _this.id }, events: _this.contextEvents, text: _this.text }); return _this; } return CustomButton; }(Button); /** * @deprecated use BX.UI.Button */ var PopupWindowCustomButton = /*#__PURE__*/function (_CustomButton) { babelHelpers.inherits(PopupWindowCustomButton, _CustomButton); function PopupWindowCustomButton() { babelHelpers.classCallCheck(this, PopupWindowCustomButton); return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PopupWindowCustomButton).apply(this, arguments)); } return PopupWindowCustomButton; }(CustomButton); /** * @deprecated use Menu class instead: import { Menu } from 'main.popup' */ var PopupMenuWindow = /*#__PURE__*/function (_Menu) { babelHelpers.inherits(PopupMenuWindow, _Menu); function PopupMenuWindow() { babelHelpers.classCallCheck(this, PopupMenuWindow); return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PopupMenuWindow).apply(this, arguments)); } return PopupMenuWindow; }(Menu); /** * @deprecated use Menu.Item class instead: import { MenuItem } from 'main.popup' */ var PopupMenuItem = /*#__PURE__*/function (_MenuItem) { babelHelpers.inherits(PopupMenuItem, _MenuItem); function PopupMenuItem() { babelHelpers.classCallCheck(this, PopupMenuItem); return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PopupMenuItem).apply(this, arguments)); } return PopupMenuItem; }(MenuItem); /** * @deprecated */ var InputPopup = /*#__PURE__*/function () { function InputPopup(params) { babelHelpers.classCallCheck(this, InputPopup); this.id = params.id || 'bx-inp-popup-' + Math.round(Math.random() * 1000000); this.handler = params.handler || false; this.values = params.values || false; this.pInput = params.input; this.bValues = !!this.values; this.defaultValue = params.defaultValue || ''; this.openTitle = params.openTitle || ''; this.className = params.className || ''; this.noMRclassName = params.noMRclassName || 'ec-no-rm'; this.emptyClassName = params.noMRclassName || 'ec-label'; var _this = this; this.curInd = false; if (this.bValues) { this.pInput.onfocus = this.pInput.onclick = function (e) { if (this.value == _this.defaultValue) { this.value = ''; this.className = _this.className; } _this.ShowPopup(); return e.preventDefault(); }; this.pInput.onblur = function () { if (_this.bShowed) { setTimeout(function () { _this.ClosePopup(true); }, 200); } _this.OnChange(); }; } else { this.pInput.className = this.noMRclassName; this.pInput.onblur = this.OnChange.bind(this); } } babelHelpers.createClass(InputPopup, [{ key: "ShowPopup", value: function ShowPopup() { if (this.bShowed) { return; } var _this = this; if (!this.oPopup) { var pWnd = main_core.Dom.create('DIV', { props: { className: 'bxecpl-loc-popup ' + this.className } }); for (var i = 0, l = this.values.length; i < l; i++) { var pRow = pWnd.appendChild(main_core.Dom.create('DIV', { props: { id: 'bxecmr_' + i }, text: this.values[i].NAME, events: { mouseover: function mouseover() { main_core.Dom.addClass(this, 'bxecplloc-over'); }, mouseout: function mouseout() { main_core.Dom.removeClass(this, 'bxecplloc-over'); }, click: function click() { var ind = this.id.substr('bxecmr_'.length); _this.pInput.value = _this.values[ind].NAME; _this.curInd = ind; _this.OnChange(); _this.ClosePopup(true); } } })); if (this.values[i].DESCRIPTION) { pRow.title = this.values[i].DESCRIPTION; } if (this.values[i].CLASS_NAME) { main_core.Dom.addClass(pRow, this.values[i].CLASS_NAME); } if (this.values[i].URL) { pRow.appendChild(main_core.Dom.create('a', { props: { href: this.values[i].URL, className: 'bxecplloc-view', target: '_blank', title: this.openTitle } })); } } this.oPopup = new Popup(this.id, this.pInput, { autoHide: true, offsetTop: 1, offsetLeft: 0, lightShadow: true, closeByEsc: true, content: pWnd, events: { onClose: this.ClosePopup.bind(this) } }); } this.oPopup.show(); this.pInput.select(); this.bShowed = true; main_core_events.EventEmitter.emit(this, 'onInputPopupShow', new main_core_events.BaseEvent({ compatData: [this] })); } }, { key: "ClosePopup", value: function ClosePopup(bClosePopup) { this.bShowed = false; if (this.pInput.value === '') { this.OnChange(); } main_core_events.EventEmitter.emit(this, 'onInputPopupClose', new main_core_events.BaseEvent({ compatData: [this] })); if (bClosePopup === true) { this.oPopup.close(); } } }, { key: "OnChange", value: function OnChange() { var val = this.pInput.value; if (this.bValues) { if (this.pInput.value == '' || this.pInput.value == this.defaultValue) { this.pInput.value = this.defaultValue; this.pInput.className = this.emptyClassName; val = ''; } else { this.pInput.className = ''; } } if (isNaN(parseInt(this.curInd)) || this.curInd !== false && val != this.values[this.curInd].NAME) { this.curInd = false; } else { this.curInd = parseInt(this.curInd); } main_core_events.EventEmitter.emit(this, 'onInputPopupChanged', new main_core_events.BaseEvent({ compatData: [this, this.curInd, val] })); if (this.handler && typeof this.handler == 'function') { this.handler({ ind: this.curInd, value: val }); } } }, { key: "Set", value: function Set(ind, val, bOnChange) { this.curInd = ind; if (this.curInd !== false) { this.pInput.value = this.values[this.curInd].NAME; } else { this.pInput.value = val; } if (bOnChange !== false) { this.OnChange(); } } }, { key: "Get", value: function Get(ind) { var id = false; if (typeof ind == 'undefined') { ind = this.curInd; } if (ind !== false && this.values[ind]) { id = this.values[ind].ID; } return id; } }, { key: "GetIndex", value: function GetIndex(id) { for (var i = 0, l = this.values.length; i < l; i++) { if (this.values[i].ID == id) { return i; } } return false; } }, { key: "Deactivate", value: function Deactivate(bDeactivate) { if (this.pInput.value == '' || this.pInput.value == this.defaultValue) { if (bDeactivate) { this.pInput.value = ''; this.pInput.className = this.noMRclassName; } else if (this.oEC.bUseMR) { this.pInput.value = this.defaultValue; this.pInput.className = this.emptyClassName; } } this.pInput.disabled = bDeactivate; } }]); return InputPopup; }(); /* //ES6 import { Popup, PopupManager } from 'main.popup'; const popup = new Popup(); PopupManager.create(); //ES5 var popup = new BX.Main.Popup(); BX.Main.PopupManager.create(); //ES6 import { Menu, MenuItem, MenuManager } from 'main.popup'; const menu = new Menu(); const item = new MenuItem(); MenuManager.create(); //ES5 var menu = new BX.Main.Menu(); var item = new BX.Main.MenuItem(); BX.Main.MenuManager.create(); */ var BX = main_core.Reflection.namespace('BX'); /** @deprecated use BX.Main.Popup or import { Popup } from 'main.popup' */ BX.PopupWindow = Popup; /** @deprecated use BX.Main.PopupManager or import { PopupManager } from 'main.popup' */ BX.PopupWindowManager = PopupManager; /** @deprecated use BX.Main.Menu or import { Menu } from 'main.popup' */ BX.PopupMenuWindow = Menu; /** @deprecated use BX.Main.MenuManager or import { MenuManager } from 'main.popup' */ BX.PopupMenu = MenuManager; /** @deprecated use BX.Main.MenuItem or import { MenuItem } from 'main.popup' */ BX.PopupMenuItem = MenuItem; /** @deprecated use BX.UI.Button */ BX.PopupWindowButton = Button; /** @deprecated use BX.UI.Button */ BX.PopupWindowButtonLink = ButtonLink; /** @deprecated use BX.UI.Button */ BX.PopupWindowCustomButton = CustomButton; /** @deprecated use another API */ window.BXInputPopup = InputPopup; exports.Popup = Popup; exports.Menu = Menu; exports.MenuItem = MenuItem; exports.PopupManager = PopupManager; exports.MenuManager = MenuManager; exports.PopupWindow = PopupWindow; exports.PopupMenuWindow = PopupMenuWindow; exports.PopupMenuItem = PopupMenuItem; exports.PopupWindowManager = PopupManager; exports.PopupMenu = MenuManager; exports.PopupWindowButton = PopupWindowButton; exports.PopupWindowButtonLink = PopupWindowButtonLink; exports.PopupWindowCustomButton = PopupWindowCustomButton; }((this.BX.Main = this.BX.Main || {}),BX,BX.Event,BX)); //# sourceMappingURL=main.popup.bundle.js.map