From 1e9af08f42e4ba18fc8c5a8501d8cbecec0f4fe8 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 21 Jun 2012 16:53:04 -0700 Subject: Replacing temp color chip pop This replaces the temporary color chip popup with a main popup used universally throughout the app. There are still outstanding issues to be addressed, this is just the initial set up before debugging issues. --- js/panels/color/colorpopup-manager.js | 264 +++++++++++++++++++--------------- 1 file changed, 150 insertions(+), 114 deletions(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 4667f2b4..fba196e4 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, - ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup; + ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup, + ColorModel = require("js/models/color-model").ColorModel; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPopupManager exports.ColorPopupManager = Montage.create(Component, { @@ -26,69 +27,77 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init: { - enumerable: false, value: function () { //////////////////////////////////////////////////////////// //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) { - //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(); - } - } + // + if (this._popupBase && !this._popupChipBase) { + if(!this.popupHitCheck(this._popupBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && this._popupChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { + this.hideColorPopup(); + } + } }.bind(this)); //////////////////////////////////////////////////////////// } }, //////////////////////////////////////////////////////////////////// // - _popupPanel: { - enumerable: false, - value: {} - }, - //////////////////////////////////////////////////////////////////// - // - _popupChip: { - enumerable: false, - value: {} + popupHitCheck: { + value: function (element, e) { + //Storing limits of popup + var top, bottom, left, right; + //Checking for popup to be opened otherwise nothing happens + if (element && element.opened && element.popup && element.popup.element) { + //Getting horizontal limits + left = parseInt(element.popup.element.style.left) + parseInt(element.popup.element.style.marginLeft); + right = left + parseInt(element.popup.element.offsetWidth); + //Getting vertical limits + top = parseInt(element.popup.element.style.top) + parseInt(element.popup.element.style.marginTop); + bottom = left + parseInt(element.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 + return false; + } else { + return true; + } + } else { + return false; + } + } }, //////////////////////////////////////////////////////////////////// // _popupBase: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // _popupChipBase: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // colorManager: { - enumerable: true, get: function() { return this._colorManager; }, @@ -96,27 +105,18 @@ exports.ColorPopupManager = Montage.create(Component, { this._colorManager = value; } }, - - - - //TODO: Remove, figure out offset bug - _hackOffset: { - enumerable: true, - value: false - }, - - + //////////////////////////////////////////////////////////////////// + // _colorPopupDrawing: { enumerable: true, value: false }, + //////////////////////////////////////////////////////////////////// + // _colorChipPopupDrawing: { enumerable: true, value: false }, - - - //////////////////////////////////////////////////////////////////// //TODO: Remove and use montage's built in component showColorPopup: { @@ -125,7 +125,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (this._colorPopupDrawing) { return; } - if (this._popupPanel.opened) { + if (this._popupBase && this._popupBase.opened) { //Toogles if called and opened this.hideColorPopup(); } else { @@ -143,15 +143,8 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupBase = ColorPanelPopup.create(); this._popupBase.element = popup; - this._popupBase.props = {x: x, y: y, side: side, align: align}; + this._popupBase.props = {x: x, y: y, side: side, align: align, wheel: true, palette: true, gradient: true, image: true, nocolor: true, history: true}; this._popupBase.colorManager = this.colorManager; - //TODO: Remove - if (this._hackOffset) { - this._popupBase.hack = {x: 53, y: 235}; - } else { - this._hackOffset = true; - this._popupBase.hack = {x: 0, y: 0}; - } // this._popupBase.addEventListener('change', this, false); this._popupBase.addEventListener('changing', this, false); @@ -166,9 +159,9 @@ exports.ColorPopupManager = Montage.create(Component, { hideColorPopup: { enumerable: true, value: function () { - if (this._popupPanel.opened) { + if (this._popupBase && this._popupBase.opened) { // - this._popupPanel.popup.removeEventListener('didDraw', this, false); + this._popupBase.popup.removeEventListener('didDraw', this, false); // this.hideColorChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) @@ -176,12 +169,12 @@ exports.ColorPopupManager = Montage.create(Component, { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // - this.application.ninja.popupManager.removePopup(this._popupPanel.popup.element); - this._popupPanel.opened = false; + this.application.ninja.popupManager.removePopup(this._popupBase.popup.element); + this._popupBase.opened = false; //TODO: Fix HACK of removing popup - this._popupPanel.popup.base.destroy(); - this._popupPanel.popup = null; - } else if (this._popupChip.opened) { + this._popupBase.popup.base.destroy(); + this._popupBase.popup = null; + } else if (this._popupChipBase && this._popupChipBase.opened) { this.hideColorChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { @@ -195,11 +188,13 @@ exports.ColorPopupManager = Montage.create(Component, { colorChipChange: { enumerable: true, value: function (e) { - //e._event.srcElement.style.backgroundColor = '#'+e._event.hex; - //this.colorManager.removeEventListener('change', this, false); // - var ctx, cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0]; - //if (cvs && color) { + var ctx, + cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + rgb = this._popupChipBase.colorManager.rgb, + hsl = this._popupChipBase.colorManager.hsl, + alpha = this._popupChipBase.colorManager.alpha.value; + // if (cvs) { ctx = cvs.getContext('2d'); ctx.clearRect(0, 0, cvs.width, cvs.height); @@ -223,15 +218,7 @@ exports.ColorPopupManager = Montage.create(Component, { ctx.stroke(); } // - if (this.application.ninja.colorController.colorView.panelMode === 'hsl') { - this.application.ninja.colorController.colorView.color('hsl', e._event.hsla); - } else if (this.application.ninja.colorController.colorView.panelMode === 'rgb'){ - this.application.ninja.colorController.colorView.currentChip.color('rgb', e._event.rgba); - } else { - this.application.ninja.colorController.colorView.currentChip.color('hex', e._event.hex); - } - // - + this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); } }, //////////////////////////////////////////////////////////////////// @@ -242,7 +229,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (this._colorChipPopupDrawing) { return; } - if (this._popupChip.opened) { + if (this._popupChipBase && this._popupChipBase.opened) { //Toogles if called and opened this.hideColorChipPopup(); } else { @@ -253,12 +240,49 @@ exports.ColorPopupManager = Montage.create(Component, { this.init(); this._hasinit = true; } + + //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); document.body.appendChild(popup); // - this._popupChip.event = e._event; + this._popupChipBase = ColorPanelPopup.create(); + this._popupChipBase.element = popup; + this._popupChipBase.isPopupChip = true; + if (e._event.srcElement.props) { + this._popupChipBase.props = e._event.srcElement.props; + } else { + this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, panel: false, history: false}; + } + // + if (this._popupChipBase.props.offset) { + this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupChipBase.props.offset)+'px'; + this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } else { + this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; + this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } + this._popupChipBase.colorManager = ColorModel.create(); + // + this._popupChipBase.addEventListener('change', this, false); + this._popupChipBase.addEventListener('changing', this, false); + // + this._popupChipBase.needsDraw = true; + this._popupChipBase.addEventListener('firstDraw', this, false); + + + + + + + /* +//////////////////////////////////////////////////// + //Creating popup from m-js component + var popup = document.createElement('div'); + document.body.appendChild(popup); + // + this._popupChipBase.event = e._event; this._popupChipBase = ColorChipPopup.create(); this._popupChipBase.element = popup; this._popupChipBase.colorManager = this.colorManager; @@ -284,6 +308,7 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); +*/ } } }, @@ -292,19 +317,20 @@ exports.ColorPopupManager = Montage.create(Component, { hideColorChipPopup: { enumerable: true, value: function () { - if (this._popupChip.opened) { + // + if (this._popupChipBase && this._popupChipBase.opened) { // - this._popupChip.popup.removeEventListener('didDraw', this, false); + this._popupChipBase.popup.removeEventListener('didDraw', this, false); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // - this.application.ninja.popupManager.removePopup(this._popupChip.popup.element); - this._popupChip.opened = false; + this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element); + this._popupChipBase.opened = false; //TODO: Fix HACK of removing popup - this._popupChip.popup.base.destroy(); - this._popupChip.popup = null; + this._popupChipBase.popup.base.destroy(); + this._popupChipBase.popup = null; } } }, @@ -314,78 +340,83 @@ exports.ColorPopupManager = Montage.create(Component, { enumerable: false, value: function (e) { if (e._target._element.className === 'cpp_popup') { - this._popupBase.removeEventListener('firstDraw', this, false); + e._target.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content - this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.element, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); + e._target.popup = this.application.ninja.popupManager.createPopup(e._target.element, {x: e._target.props.x, y: e._target.props.y}, {side: e._target.props.side, align: e._target.props.align}); //Displaying popup once it's drawn - this._popupPanel.popup.addEventListener('firstDraw', this, false); + e._target.popup.addEventListener('firstDraw', this, false); //Hiding popup while it draws - this._popupPanel.popup.element.style.opacity = 0; + e._target.popup.element.style.opacity = 0; //Storing popup for use when closing - this._popupPanel.popup.base = this._popupBase; + e._target.popup.base = e._target; } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { - // - this._colorPopupDrawing = false; + if (!e._target.base.isPopupChip) { + this._colorPopupDrawing = false; + } else { + this._colorChipPopupDrawing = false; + } // - this._popupPanel.popup.removeEventListener('firstDraw', this, false); + e._target.base.popup.removeEventListener('firstDraw', this, false); //Fades in with CSS transition - this._popupPanel.popup.element.style.opacity = 1; + e._target.base.popup.element.style.opacity = 1; //Popup was added, so it's opened - this._popupPanel.opened = true; - } else if (e._target._element.className === 'cc_popup') { + e._target.base.opened = true; + }/* + else if (e._target._element.className === 'cc_popup') { this._popupChipBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content if (this.colorChipProps.offset) { - this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); + this._popupChipBase.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChipBase.event.clientX - this._popupChipBase.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChipBase.event.target.clientHeight/2+this._popupChipBase.event.clientY - this._popupChipBase.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } else { - this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); + this._popupChipBase.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChipBase.event.clientX - this._popupChipBase.event.offsetX)+'px', y: (this._popupChipBase.event.target.clientHeight/2+this._popupChipBase.event.clientY - this._popupChipBase.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } // if (!this.colorChipProps.panel) { this.colorManager.input = 'chip'; } //Hiding popup while it draws - this._popupChip.popup.element.style.opacity = 0; + this._popupChipBase.popup.element.style.opacity = 0; //Storing popup for use when closing - this._popupChip.popup.base = this._popupChipBase; + this._popupChipBase.popup.base = this._popupChipBase; //Displaying popup once it's drawn - this._popupChip.popup.addEventListener('firstDraw', this, false); + this._popupChipBase.popup.addEventListener('firstDraw', this, false); } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cc_popup') { - this._popupChip.popup.removeEventListener('firstDraw', this, false); + this._popupChipBase.popup.removeEventListener('firstDraw', this, false); // this._colorChipPopupDrawing = false; // - var hsv, color = this._popupChip.event.srcElement.colorValue; + var hsv, color = this._popupChipBase.event.srcElement.colorValue; // - this._popupChip.popup.element.style.opacity = 1; + this._popupChipBase.popup.element.style.opacity = 1; // - this._popupChip.opened = true; + this._popupChipBase.opened = true; // - if (this._popupChip.event.srcElement.colorMode === 'rgb') { - if (this._popupChip.event.srcElement.colorValue && this._popupChip.event.srcElement.colorValue.r) { - color = this._popupChip.event.srcElement.colorValue; - } else if (this._popupChip.event.srcElement.colorValue && this._popupChip.event.srcElement.colorValue.color){ - color = this._popupChip.event.srcElement.colorValue.color; + if (this._popupChipBase.event.srcElement.colorMode === 'rgb') { + if (this._popupChipBase.event.srcElement.colorValue && this._popupChipBase.event.srcElement.colorValue.r) { + color = this._popupChipBase.event.srcElement.colorValue; + } else if (this._popupChipBase.event.srcElement.colorValue && this._popupChipBase.event.srcElement.colorValue.color){ + color = this._popupChipBase.event.srcElement.colorValue.color; } else { return; } hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); hsv.wasSetByCode = false; hsv.type = 'change'; - this._popupChip.popup.base._colorChipWheel.value = hsv; - } else if (this._popupChip.event.srcElement.colorMode === 'hsl') { - if (this._popupChip.event.srcElement.colorValue.h) { - color = this._popupChip.event.srcElement.colorValue; + this._popupChipBase.popup.base._colorChipWheel.value = hsv; + } else if (this._popupChipBase.event.srcElement.colorMode === 'hsl') { + if (this._popupChipBase.event.srcElement.colorValue.h) { + color = this._popupChipBase.event.srcElement.colorValue; } else{ - color = this._popupChip.event.srcElement.colorValue.color; + color = this._popupChipBase.event.srcElement.colorValue.color; } color = this.colorManager.hslToRgb(color.h/360, color.s/100, color.l/100); hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); hsv.wasSetByCode = false; hsv.type = 'change'; - this._popupChip.popup.base._colorChipWheel.value = hsv; + this._popupChipBase.popup.base._colorChipWheel.value = hsv; } } +*/ } }, //////////////////////////////////////////////////////////////////// @@ -393,8 +424,13 @@ exports.ColorPopupManager = Montage.create(Component, { handleChange: { enumerable: false, value: function (e) { - if (e._event.input && e._event.input === 'chip') { - this.colorChipChange(e); + if (this._popupChipBase && this._popupChipBase.opened) { + if (e._event.hsv) { + this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; + this.colorChipChange(e); + } else { + console.log(e._event); + } return; } // -- cgit v1.2.3 From b97819e9a8da9267d49acd72f918f8c40c8b320e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 22 Jun 2012 16:20:14 -0700 Subject: Fix closing logic and init color on chip Added improved logic to handle toggling from button the color popup. Also added an init color method for the chip to initialize color in it's popup. --- js/panels/color/colorpopup-manager.js | 71 +++++++++++++++++++++++++++++++++-- 1 file changed, 68 insertions(+), 3 deletions(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index fba196e4..bccfcebc 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -33,7 +33,6 @@ exports.ColorPopupManager = Montage.create(Component, { window.addEventListener('resize', function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); - //Closing popups if outside limits document.addEventListener('mousedown', function (e) { // @@ -58,6 +57,8 @@ exports.ColorPopupManager = Montage.create(Component, { // popupHitCheck: { value: function (element, e) { + //Prevent any action for button to handle toggling + if (e._event.target.inputType || e._event.target.colorMode) return true; //Storing limits of popup var top, bottom, left, right; //Checking for popup to be opened otherwise nothing happens @@ -263,6 +264,9 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; } + // + this._popupChipBase.props.source = e._event.srcElement; + // this._popupChipBase.colorManager = ColorModel.create(); // this._popupChipBase.addEventListener('change', this, false); @@ -361,7 +365,68 @@ exports.ColorPopupManager = Montage.create(Component, { e._target.base.popup.element.style.opacity = 1; //Popup was added, so it's opened e._target.base.opened = true; - }/* + // + if (e._target.base.props && e._target.base.props.source) { + // + var cbtn = e._target.base.props.source, color, hsv; + // + if (cbtn.colorMode === 'rgb') { + // + if (cbtn.colorValue && !isNaN(cbtn.colorValue.r)) { + color = cbtn.colorValue; + } else if (cbtn.colorValue && cbtn.colorValue.color){ + color = cbtn.colorValue.color; + } else { + return; + } + // + hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); + } else if (cbtn.colorMode === 'hsl') { + // + if (cbtn.colorValue && !isNaN(cbtn.colorValue.h)) { + color = cbtn.colorValue; + } else if (cbtn.colorValue && cbtn.colorValue.color){ + color = cbtn.colorValue.color; + } else { + return; + } + // + color = this.colorManager.hslToRgb(color.h/360, color.s/100, color.l/100); + // + hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); + } + // + if (hsv) { + hsv.wasSetByCode = false; + hsv.type = 'change'; + e._target.base._components.wheel.value = hsv; + } + } + } + + + + + + + + + + + + + + + + + + + + + + + + /* else if (e._target._element.className === 'cc_popup') { this._popupChipBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content @@ -429,7 +494,7 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; this.colorChipChange(e); } else { - console.log(e._event); + //console.log(e._event); } return; } -- cgit v1.2.3 From 0e7e32cadeb2002ee0c77c224b23aa00859f2183 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 22 Jun 2012 23:51:50 -0700 Subject: Added third gradient chip popup Need to add support for gradient events dispatching from standalone chips. Just need to hook up relays for events besides HSV to bubble up. --- js/panels/color/colorpopup-manager.js | 232 ++++++++++++++++++++++++---------- 1 file changed, 167 insertions(+), 65 deletions(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index bccfcebc..717e6fa2 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -36,18 +36,30 @@ exports.ColorPopupManager = Montage.create(Component, { //Closing popups if outside limits document.addEventListener('mousedown', function (e) { // - if (this._popupBase && !this._popupChipBase) { + if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupBase, e)) { this.hideColorPopup(); } - } else if (!this._popupBase && this._popupChipBase) { + } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupChipBase, e)) { this.hideColorChipPopup(); } - } else if (this._popupBase && this._popupChipBase) { + } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { this.hideColorPopup(); } + } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } } }.bind(this)); //////////////////////////////////////////////////////////// @@ -74,9 +86,11 @@ exports.ColorPopupManager = Montage.create(Component, { //Hides popups since click is outside limits return false; } else { + //Keeps popup open since click inside area return true; } } else { + //Hides popups since element not detected return false; } } @@ -92,6 +106,11 @@ exports.ColorPopupManager = Montage.create(Component, { value: null }, //////////////////////////////////////////////////////////////////// + // + _popupGradientChipBase: { + value: null + }, + //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { value: null @@ -99,33 +118,33 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorManager: { - get: function() { - return this._colorManager; - }, - set: function(value) { - this._colorManager = value; - } + get: function() {return this._colorManager;}, + set: function(value) {this._colorManager = value;} }, //////////////////////////////////////////////////////////////////// // _colorPopupDrawing: { - enumerable: true, value: false }, //////////////////////////////////////////////////////////////////// // _colorChipPopupDrawing: { - enumerable: true, + value: false + }, + //////////////////////////////////////////////////////////////////// + // + _colorGradientPopupDrawing: { value: false }, //////////////////////////////////////////////////////////////////// //TODO: Remove and use montage's built in component showColorPopup: { - enumerable: true, value: function (x, y, side, align) { + //Check to see if popup is drawing, avoids errors if (this._colorPopupDrawing) { return; } + //Check for toggling view if (this._popupBase && this._popupBase.opened) { //Toogles if called and opened this.hideColorPopup(); @@ -138,7 +157,7 @@ exports.ColorPopupManager = Montage.create(Component, { this._hasinit = true; } //////////////////////////////////////////////////// - //Creating popup from m-js component + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // @@ -158,13 +177,13 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hideColorPopup: { - enumerable: true, value: function () { if (this._popupBase && this._popupBase.opened) { // this._popupBase.popup.removeEventListener('didDraw', this, false); // this.hideColorChipPopup(); + this.hideGradientChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; @@ -187,7 +206,6 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorChipChange: { - enumerable: true, value: function (e) { // var ctx, @@ -224,16 +242,58 @@ exports.ColorPopupManager = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + colorGradientChipChange: { + value: function (e) { + // + var ctx, + cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + rgb = this._popupGradientChipBase.colorManager.rgb, + hsl = this._popupGradientChipBase.colorManager.hsl, + alpha = this._popupGradientChipBase.colorManager.alpha.value; + // + if (cvs) { + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = "#666"; + ctx.moveTo(0, 0); + ctx.lineTo(cvs.width, 0); + ctx.lineTo(cvs.width, cvs.height); + ctx.lineTo(0, cvs.height); + ctx.lineTo(0, 0); + ctx.stroke(); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = "#333"; + ctx.moveTo(2, 2); + ctx.lineTo(cvs.width-2, 2); + ctx.lineTo(cvs.width-2, cvs.height-2); + ctx.lineTo(2, cvs.height-2); + ctx.lineTo(2, 1); + ctx.stroke(); + } + // + this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); + } + }, + //////////////////////////////////////////////////////////////////// + // showColorChipPopup: { - enumerable: true, value: function (e) { if (this._colorChipPopupDrawing) { return; } - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupChipBase && this._popupChipBase.opened && (!this._popupChipBase.props || (this._popupChipBase.props && !this._popupChipBase.props.gradientPopup)) && !e._event.srcElement.props.gradientPopup) { //Toogles if called and opened this.hideColorChipPopup(); + return; } else { + // + if (e._event.srcElement.props.gradientPopup) { + this.showGradientChipPopup(e); + return; + } this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events @@ -241,10 +301,8 @@ exports.ColorPopupManager = Montage.create(Component, { this.init(); this._hasinit = true; } - - //////////////////////////////////////////////////// - //Creating popup from m-js component + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // @@ -254,7 +312,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._event.srcElement.props) { this._popupChipBase.props = e._event.srcElement.props; } else { - this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, panel: false, history: false}; + this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; } // if (this._popupChipBase.props.offset) { @@ -274,74 +332,110 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); - - - - - - - /* -//////////////////////////////////////////////////// - //Creating popup from m-js component + } + } + }, + //////////////////////////////////////////////////////////////////// + // + hideColorChipPopup: { + value: function () { + // + if (this._popupChipBase && this._popupChipBase.opened) { + // + this.hideGradientChipPopup(); + // + this._popupChipBase.popup.removeEventListener('didDraw', this, false); + //Making sure to return color manager to either stroke or fill (might be a Hack for now) + if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { + this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; + } + // + this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element); + this._popupChipBase.opened = false; + //TODO: Fix HACK of removing popup + this._popupChipBase.popup.base.destroy(); + this._popupChipBase.popup = null; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + showGradientChipPopup: { + value: function (e) { + if (this._colorGradientPopupDrawing) { + return; + } + if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { + //Toogles if called and opened + this.hideGradientChipPopup(); + return; + } else { + // + this._colorGradientPopupDrawing = true; + //////////////////////////////////////////////////// + //Initializing events + if (!this._hasinit) { + this.init(); + this._hasinit = true; + } + //////////////////////////////////////////////////// + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // - this._popupChipBase.event = e._event; - this._popupChipBase = ColorChipPopup.create(); - this._popupChipBase.element = popup; - this._popupChipBase.colorManager = this.colorManager; + this._popupGradientChipBase = ColorPanelPopup.create(); + this._popupGradientChipBase.element = popup; + this._popupGradientChipBase.isPopupChip = true; if (e._event.srcElement.props) { - this.colorChipProps = e._event.srcElement.props; + this._popupGradientChipBase.props = e._event.srcElement.props; } else { - this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; + this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; } // - if (!this.colorChipProps.panel) { - this.hideColorPopup(); - } - // - this._popupChipBase.popupModes = {}; - this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient; - this._popupChipBase.popupModes.image = this.colorChipProps.image; - this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel; - this._popupChipBase.popupModes.palette = this.colorChipProps.palette; - this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; + if (this._popupGradientChipBase.props.offset) { + this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupGradientChipBase.props.offset)+'px'; + this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } else { + this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; + this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } + // + this._popupGradientChipBase.props.source = e._event.srcElement; + // + this._popupGradientChipBase.colorManager = ColorModel.create(); // - this._popupChipBase.addEventListener('change', this, false); - this._popupChipBase.addEventListener('changing', this, false); + this._popupGradientChipBase.addEventListener('change', this, false); + this._popupGradientChipBase.addEventListener('changing', this, false); // - this._popupChipBase.needsDraw = true; - this._popupChipBase.addEventListener('firstDraw', this, false); -*/ + this._popupGradientChipBase.needsDraw = true; + this._popupGradientChipBase.addEventListener('firstDraw', this, false); } } }, //////////////////////////////////////////////////////////////////// // - hideColorChipPopup: { - enumerable: true, + hideGradientChipPopup: { value: function () { // - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { // - this._popupChipBase.popup.removeEventListener('didDraw', this, false); + this._popupGradientChipBase.popup.removeEventListener('didDraw', this, false); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // - this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element); - this._popupChipBase.opened = false; + this.application.ninja.popupManager.removePopup(this._popupGradientChipBase.popup.element); + this._popupGradientChipBase.opened = false; //TODO: Fix HACK of removing popup - this._popupChipBase.popup.base.destroy(); - this._popupChipBase.popup = null; + this._popupGradientChipBase.popup.base.destroy(); + this._popupGradientChipBase.popup = null; } } }, //////////////////////////////////////////////////////////////////// //Reworking logic, firstDraw bubbles up, so target must be checked handleFirstDraw: { - enumerable: false, value: function (e) { if (e._target._element.className === 'cpp_popup') { e._target.removeEventListener('firstDraw', this, false); @@ -356,6 +450,8 @@ exports.ColorPopupManager = Montage.create(Component, { } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { if (!e._target.base.isPopupChip) { this._colorPopupDrawing = false; + } else if (e._target.base.props && e._target.base.props.gradientPopup) { + this._colorGradientPopupDrawing = false; } else { this._colorChipPopupDrawing = false; } @@ -400,6 +496,8 @@ exports.ColorPopupManager = Montage.create(Component, { hsv.wasSetByCode = false; hsv.type = 'change'; e._target.base._components.wheel.value = hsv; + } else { + e._target.base.colorManager.applyNoColor(false); } } } @@ -487,9 +585,8 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: false, value: function (e) { - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupChipBase && this._popupChipBase.opened && !this._popupGradientChipBase) { if (e._event.hsv) { this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; this.colorChipChange(e); @@ -497,6 +594,14 @@ exports.ColorPopupManager = Montage.create(Component, { //console.log(e._event); } return; + } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { + if (e._event.hsv) { + this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; + this.colorGradientChipChange(e); + } else { + //console.log(e._event); + } + return; } // if (!e._event.wasSetByCode) { @@ -517,7 +622,6 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChanging: { - enumerable: false, value: function (e) { if (e._event.hsv) { // @@ -562,8 +666,6 @@ exports.ColorPopupManager = Montage.create(Component, { } return; } - - //Applying color to all buttons in array for(i=0; this.application.ninja.colorController.colorView._buttons[input][i]; i++) { //TODO: Remove this and combine to single method for live updating colors -- cgit v1.2.3 From a177f4d3a534795f4229128be4316e37d51555d9 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sat, 23 Jun 2012 00:14:03 -0700 Subject: Fixing logic for popup value bubbling Only working for HSV, need to implement HEX and gradient --- js/panels/color/colorpopup-manager.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 717e6fa2..29f9ec94 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -8,7 +8,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot // var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup, ColorModel = require("js/models/color-model").ColorModel; //////////////////////////////////////////////////////////////////////// @@ -294,6 +293,7 @@ exports.ColorPopupManager = Montage.create(Component, { this.showGradientChipPopup(e); return; } + // this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events @@ -586,7 +586,7 @@ exports.ColorPopupManager = Montage.create(Component, { // handleChange: { value: function (e) { - if (this._popupChipBase && this._popupChipBase.opened && !this._popupGradientChipBase) { + if (this._popupChipBase && this._popupChipBase.opened && (!this._popupGradientChipBase || (this._popupGradientChipBase && !this._popupGradientChipBase.opened))) { if (e._event.hsv) { this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; this.colorChipChange(e); -- cgit v1.2.3 From 32c41a56fd870f28be70c9b9cfb4fe6dfbb16654 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sat, 23 Jun 2012 19:22:53 -0700 Subject: Adding support for gradients on chips Need to handle other color modes, currently only handling HSV and gradients. Working on getting other modes supported. Also, will need clean up color popup manager after completion. --- js/panels/color/colorpopup-manager.js | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 29f9ec94..0ea02192 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -106,10 +106,20 @@ exports.ColorPopupManager = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + _popupChipBtn: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // _popupGradientChipBase: { value: null }, //////////////////////////////////////////////////////////////////// + // + _popupGradientChipBtn: { + value: null + }, + //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { value: null @@ -208,7 +218,7 @@ exports.ColorPopupManager = Montage.create(Component, { value: function (e) { // var ctx, - cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + cvs = this._popupChipBtn.getElementsByTagName('canvas')[0], rgb = this._popupChipBase.colorManager.rgb, hsl = this._popupChipBase.colorManager.hsl, alpha = this._popupChipBase.colorManager.alpha.value; @@ -236,7 +246,7 @@ exports.ColorPopupManager = Montage.create(Component, { ctx.stroke(); } // - this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); + this._popupChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); } }, //////////////////////////////////////////////////////////////////// @@ -245,7 +255,7 @@ exports.ColorPopupManager = Montage.create(Component, { value: function (e) { // var ctx, - cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0], rgb = this._popupGradientChipBase.colorManager.rgb, hsl = this._popupGradientChipBase.colorManager.hsl, alpha = this._popupGradientChipBase.colorManager.alpha.value; @@ -273,7 +283,7 @@ exports.ColorPopupManager = Montage.create(Component, { ctx.stroke(); } // - this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); + this._popupGradientChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); } }, //////////////////////////////////////////////////////////////////// @@ -294,6 +304,8 @@ exports.ColorPopupManager = Montage.create(Component, { return; } // + this._popupChipBtn = this.application.ninja.colorController.colorView.currentChip; + // this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events @@ -370,6 +382,8 @@ exports.ColorPopupManager = Montage.create(Component, { this.hideGradientChipPopup(); return; } else { + // + this._popupGradientChipBtn = this.application.ninja.colorController.colorView.currentChip; // this._colorGradientPopupDrawing = true; //////////////////////////////////////////////////// @@ -590,16 +604,20 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._event.hsv) { this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; this.colorChipChange(e); - } else { - //console.log(e._event); + } else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){ + if (e._event.gradient && !e._event.wasSetByCode) { + // + this._popupChipBtn.color('gradient', e._event.gradient); + } } return; } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { if (e._event.hsv) { this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; this.colorGradientChipChange(e); - } else { - //console.log(e._event); + } else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){ + // + this._popupChipBtn.color('gradient', e._event.gradient); } return; } -- cgit v1.2.3 From b435e97ff312eea15086069ce0ab6991acac32ff Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 25 Jun 2012 11:52:28 -0700 Subject: Color Popup Test Candidate Preliminary check in for testing to commence on new color popup functionality. --- js/panels/color/colorpopup-manager.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 0ea02192..15d55787 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -216,6 +216,8 @@ exports.ColorPopupManager = Montage.create(Component, { // colorChipChange: { value: function (e) { + // + if (!this._popupChipBtn) return; // var ctx, cvs = this._popupChipBtn.getElementsByTagName('canvas')[0], @@ -253,6 +255,8 @@ exports.ColorPopupManager = Montage.create(Component, { // colorGradientChipChange: { value: function (e) { + // + if (!this._popupGradientChipBtn) return; // var ctx, cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0], @@ -403,7 +407,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._event.srcElement.props) { this._popupGradientChipBase.props = e._event.srcElement.props; } else { - this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; + this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, history: false}; } // if (this._popupGradientChipBase.props.offset) { -- cgit v1.2.3 From b827d41e72b1d0f8d3d05f7ffe4ab8ee6343c9fa Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 25 Jun 2012 14:03:38 -0700 Subject: Cleaning up events Adding/Removing events when only needed by color popups. --- js/panels/color/colorpopup-manager.js | 199 +++++++++++++--------------------- 1 file changed, 77 insertions(+), 122 deletions(-) (limited to 'js/panels/color/colorpopup-manager.js') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 15d55787..cf6fd7ac 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -20,52 +20,87 @@ exports.ColorPopupManager = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - _hasInit: { - value: false + _hasCloseEvents: { + value: false }, //////////////////////////////////////////////////////////////////// // - init: { + addCloseEvents: { value: function () { + // + this._hasCloseEvents = true; //////////////////////////////////////////////////////////// //Closing popups on resize - window.addEventListener('resize', function (e) { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - }.bind(this)); + window.addEventListener('resize', this, false); //Closing popups if outside limits - document.addEventListener('mousedown', function (e) { - // - if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) { - if(!this.popupHitCheck(this._popupBase, e)) { - this.hideColorPopup(); - } - } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { - if(!this.popupHitCheck(this._popupChipBase, e)) { - this.hideColorChipPopup(); - } - } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { - if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { - this.hideColorPopup(); - } - } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) { - if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { - this.hideColorPopup(); - } - } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) { - if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { - this.hideColorChipPopup(); - } - } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) { - if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { - this.hideColorPopup(); - } - } - }.bind(this)); + document.addEventListener('mousedown', this, false); //////////////////////////////////////////////////////////// } }, //////////////////////////////////////////////////////////////////// // + removeCloseEvents: { + value: function () { + // + this._hasCloseEvents = false; + //////////////////////////////////////////////////////////// + //Closing popups on resize + window.removeEventListener('resize', this, false); + //Closing popups if outside limits + document.removeEventListener('mousedown', this, false); + //////////////////////////////////////////////////////////// + } + }, + //////////////////////////////////////////////////////////////////// + // + handleMousedown: { + value: function (e) { + // + this.closeAllPopups(e); + } + }, + //////////////////////////////////////////////////////////////////// + // + handleResize: { + value: function (e) { + // + this.hideColorPopup(); + } + }, + //////////////////////////////////////////////////////////////////// + // + closeAllPopups: { + value: function (e) { + // + if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { + this.hideColorPopup(); + } + } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } + } + } + }, + //////////////////////////////////////////////////////////////////// + // popupHitCheck: { value: function (element, e) { //Prevent any action for button to handle toggling @@ -161,9 +196,8 @@ exports.ColorPopupManager = Montage.create(Component, { this._colorPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events - if (!this._hasinit) { - this.init(); - this._hasinit = true; + if (!this._hasCloseEvents) { + this.addCloseEvents(); } //////////////////////////////////////////////////// //Creating popup @@ -191,6 +225,7 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupBase.popup.removeEventListener('didDraw', this, false); // + this.removeCloseEvents(); this.hideColorChipPopup(); this.hideGradientChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) @@ -313,9 +348,8 @@ exports.ColorPopupManager = Montage.create(Component, { this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events - if (!this._hasinit) { - this.init(); - this._hasinit = true; + if (!this._hasCloseEvents) { + this.addCloseEvents(); } //////////////////////////////////////////////////// //Creating popup @@ -358,6 +392,7 @@ exports.ColorPopupManager = Montage.create(Component, { // if (this._popupChipBase && this._popupChipBase.opened) { // + this.removeCloseEvents(); this.hideGradientChipPopup(); // this._popupChipBase.popup.removeEventListener('didDraw', this, false); @@ -392,9 +427,8 @@ exports.ColorPopupManager = Montage.create(Component, { this._colorGradientPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events - if (!this._hasinit) { - this.init(); - this._hasinit = true; + if (!this._hasCloseEvents) { + this.addCloseEvents(); } /////////////////////////////////////////