From aad41becbc41882abf1558c6b5aa38db6a9e99c8 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 19 Jun 2012 15:06:45 -0700 Subject: Fixing logic to close color panel popup This resolves closing the color panel popup when a user make a click outside the popup area or resizes the Ninja window. This should be tested prior to merging. --- js/panels/color/colorpopup-manager.js | 56 +++++++++++------------------------ 1 file changed, 17 insertions(+), 39 deletions(-) diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 529ec1c8..4667f2b4 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -29,49 +29,27 @@ exports.ColorPopupManager = Montage.create(Component, { enumerable: false, value: function () { //////////////////////////////////////////////////////////// - //TODO: Improve logic on handling closing the popup - //////////////////////////////////////////////////////////// - //Hiding popup on any panel(s) actions - this.eventManager.addEventListener("panelOrderChanged", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("panelClose", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("panelCollapsed", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("panelSelected", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("togglePanel", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("panelResizing", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("panelResizedStart", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // - this.eventManager.addEventListener("panelResizedEnd", function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); - // + //Closing popups on resize window.addEventListener('resize', function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); - // + //Storing limits of popup + var top, bottom, left, right; + //Closing popups if outside limits document.addEventListener('mousedown', function (e) { - // - if (e._event.srcElement.getAttribute('data-montage-id') === 'stageCanvas' || e._event.srcElement.id === 'mainContainer' || e._event.srcElement.getAttribute('data-montage-id') === 'drawingCanvas') { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + //Checking for popup to be opened otherwise nothing happens + if (this._popupPanel.opened && this._popupPanel.popup && this._popupPanel.popup.element && !e._event.srcElement.inputType) { + //Getting horizontal limits + left = parseInt(this._popupPanel.popup.element.style.left) + parseInt(this._popupPanel.popup.element.style.marginLeft); + right = left + parseInt(this._popupPanel.popup.element.offsetWidth); + //Getting vertical limits + top = parseInt(this._popupPanel.popup.element.style.top) + parseInt(this._popupPanel.popup.element.style.marginTop); + bottom = left + parseInt(this._popupPanel.popup.element.offsetHeight); + //Checking click position in relation to limits + if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { + //Hides popups since click is outside limits + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + } } }.bind(this)); //////////////////////////////////////////////////////////// -- cgit v1.2.3