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. --- .../colorpanelpopup.reel/colorpanelpopup.html | 2 +- .../color/colorpanelpopup.reel/colorpanelpopup.js | 93 ++++++++++++++-------- 2 files changed, 62 insertions(+), 33 deletions(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index 596580b4..d3b6fed7 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -52,7 +52,7 @@ -
#
+
#
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 192c62fb..153817c1 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -129,44 +129,73 @@ exports.ColorPanelPopup = Montage.create(Component, { draw: { value: function() { // - this.drawPalette(this.defaultPalette); + if (!this.props || (this.props && this.props.palette)) { + // + this.btnPalette.addEventListener('click', function () { + this.popupSwitchInputTo(this.palettes); + }.bind(this), true); + // + this.drawPalette(this.defaultPalette); + } else { + this.btnPalette.style.display = 'none'; + } // - if (!this.colorManager.gradient) { - this.drawGradient(this.defaultGradient); + if (!this.props || (this.props && this.props.gradient)) { + // + this.btnGradient.addEventListener('click', function () { + this.popupSwitchInputTo(this.gradients); + }.bind(this), true); + // + if (!this.colorManager.gradient) { + this.drawGradient(this.defaultGradient); + } + } else { + this.btnGradient.style.display = 'none'; } // - this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); + this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex); // this._components.combo.slider.needsDraw = true; this._components.combo.hottext.needsDraw = true; - // - this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { - this.setNoColor(); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.palettes); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.wheel); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.gradients); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button - this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { - //this.popupSwitchInputTo(this.images); - }.bind(this), true); + // + if (!this.props || (this.props && this.props.nocolor)) { + // + this.btnNocolor.addEventListener('click', function () { + this.setNoColor(); + }.bind(this), true); + } else { + this.btnNocolor.style.display = 'none'; + } // - this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); - this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); + if (!this.props || (this.props && this.props.wheel)) { + // + this.btnWheel.addEventListener('click', function () { + this.popupSwitchInputTo(this.wheel); + }.bind(this), true); + // + this._components.wheel.addEventListener('firstDraw', this, false); + this._components.wheel.needsDraw = true; + } else { + this.btnWheel.style.display = 'none'; + } // - this._components.wheel.addEventListener('firstDraw', this, false); + if (!this.props || (this.props && this.props.image)) { + // + this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button + this.btnImage.addEventListener('click', function () { + //this.popupSwitchInputTo(this.images); + }.bind(this), true); + } else { + this.btnImage.style.display = 'none'; + } // - this._components.wheel.needsDraw = true; + if (!this.props || (this.props && this.props.history)) { + this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent); + this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious); + } else { + this.btnCurrent.style.display = 'none'; + this.btnPrevious.style.display = 'none'; + } } }, //////////////////////////////////////////////////////////////////// @@ -202,7 +231,7 @@ exports.ColorPanelPopup = Montage.create(Component, { break } //Checking for a gradient to be current color - if (this.colorManager.gradient) { + if (this.colorManager.gradient && (!this.props || (this.props && this.props.gradient))) { if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { //If no gradient set, using default this.drawGradient(this.defaultGradient); @@ -265,7 +294,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.application.ninja.colorController.popupTab = 'gradient'; } // - this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); } }, //////////////////////////////////////////////////////////////////// @@ -413,7 +442,7 @@ exports.ColorPanelPopup = Montage.create(Component, { destroy: { value: function() { // - this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); + this.application.ninja.colorController.colorView.removeButton('hexinput', this.inputHex); Object.deleteBinding(this._components.combo.hottext, "value"); Object.deleteBinding(this._components.combo.slider, "value"); Object.deleteBinding(this._components.wheel, "value"); -- 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. --- .../color/colorpanelpopup.reel/colorpanelpopup.js | 27 ++++++++++++---------- 1 file changed, 15 insertions(+), 12 deletions(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 153817c1..179dc02c 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, { value: function () { // this._components = null; - this._components = {wheel: null, combo: null}; + this._components = {wheel: null, combo: null, gradient: null}; } }, //////////////////////////////////////////////////////////////////// @@ -369,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, { drawGradient: { value: function (g) { //TODO: Remove container, insert in reel - var container = document.createElement('div'), gradient = GradientPicker.create(); + var container = document.createElement('div'); + // + this._components.gradient = GradientPicker.create(); + // this.gradients.appendChild(container); //Creating gradient picker from components - gradient.element = container; - gradient.hack = this.hack; // TODO: Remove + this._components.gradient.element = container; + this._components.gradient.hack = this.hack; // TODO: Remove // if (g && g.value && g.value.stops) { if (g.value.gradientMode) { - gradient._mode = g.value.gradientMode; - gradient.value = g.value.stops; + this._components.gradient._mode = g.value.gradientMode; + this._components.gradient.value = g.value.stops; } else { - gradient._mode = 'linear'; - gradient.value = g.value.stops; + this._components.gradient._mode = 'linear'; + this._components.gradient.value = g.value.stops; } } else { - gradient._mode = this.defaultGradient.gradientMode; - gradient.value = this.defaultGradient.stops; + this._components.gradient._mode = this.defaultGradient.gradientMode; + this._components.gradient.value = this.defaultGradient.stops; } // - gradient.needsDraw = true; - gradient.addEventListener('change', function (e){ + this._components.gradient.needsDraw = true; + this._components.gradient.addEventListener('change', function (e){ // if (!e._event.wasSetByCode) { this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false}; -- 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/colorpanelpopup.reel/colorpanelpopup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 179dc02c..c0d8118f 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -153,7 +153,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.btnGradient.style.display = 'none'; } // - this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex); + this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); // this._components.combo.slider.needsDraw = true; this._components.combo.hottext.needsDraw = true; -- cgit v1.2.3 From 8a3c009fc6b0c9ec461627a631f19535047e951c Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 25 Jun 2012 15:22:43 -0700 Subject: Fixing alpha binding bug The chip popup alpha sliders were binding to the panel when they shouldn't, so added a check. --- js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index c0d8118f..283de5a8 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -85,7 +85,7 @@ exports.ColorPanelPopup = Montage.create(Component, { } }); // - if (this.application.ninja.colorController.colorView) { + if (this.application.ninja.colorController.colorView && this.props.panel) { Object.defineBinding(this._components.combo.slider, "value", { boundObject: this.application.ninja.colorController.colorView._combo[3].slider, boundObjectPropertyPath: "value", @@ -447,7 +447,7 @@ exports.ColorPanelPopup = Montage.create(Component, { // this.application.ninja.colorController.colorView.removeButton('hexinput', this.inputHex); Object.deleteBinding(this._components.combo.hottext, "value"); - Object.deleteBinding(this._components.combo.slider, "value"); + if (this.props.panel) Object.deleteBinding(this._components.combo.slider, "value"); Object.deleteBinding(this._components.wheel, "value"); this._components.wheel = null; } -- cgit v1.2.3 From 079192983b3966c3699d42716dae6c1db930a3f1 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 26 Jun 2012 11:47:50 -0700 Subject: Fixing hex value syncing in popups --- js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 283de5a8..4865d3dd 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, { value: function () { // this._components = null; - this._components = {wheel: null, combo: null, gradient: null}; + this._components = {wheel: null, combo: null, gradient: null, hex: null}; } }, //////////////////////////////////////////////////////////////////// @@ -153,7 +153,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.btnGradient.style.display = 'none'; } // - this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); + this._components.hex = this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); // this._components.combo.slider.needsDraw = true; this._components.combo.hottext.needsDraw = true; -- cgit v1.2.3 From 39ce688e26d3c3607f926cfac7b1f3d35bdde882 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 26 Jun 2012 13:59:06 -0700 Subject: Fixing hiding gradient popups --- js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 4865d3dd..f2e5bb2e 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -295,6 +295,8 @@ exports.ColorPanelPopup = Montage.create(Component, { } // if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + // + this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From deadc9369dec77b425d4ff895a1abdd9fb5ed1ac Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 26 Jun 2012 14:21:22 -0700 Subject: Fixing toggle modes losing value --- js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index f2e5bb2e..3eb6eec6 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -282,11 +282,13 @@ exports.ColorPanelPopup = Montage.create(Component, { if (tab !== this.gradients) { this.gradients.style.display = 'none'; // - if (this._components.wheel._value) { + /* +if (this._components.wheel._value) { this._components.wheel.value = {h: this._components.wheel._value.h, s: this._components.wheel._value.s, v: this._components.wheel._value.v, wasSetByCode: false}; } else { this._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; } +*/ } else { this.gradients.style.display = 'block'; this.alpha.style.display = 'none'; -- cgit v1.2.3 From dfa8bfa14de3e60f5fc3797436f39c5b24e40592 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 27 Jun 2012 10:49:24 -0700 Subject: Adding no color support to popup in chips --- js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 3eb6eec6..4a868a6d 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -32,17 +32,6 @@ exports.ColorPanelPopup = Montage.create(Component, { set: function(value) {if (value !== this._colorManager) this._colorManager = value;} }, //////////////////////////////////////////////////////////////////// - //Storing color panel - _colorPanel: { - value: false - }, - //////////////////////////////////////////////////////////////////// - //Color panel - colorPanel: { - get: function() {return this._colorPanel;}, - set: function(value) {this._colorPanel = value;} - }, - //////////////////////////////////////////////////////////////////// // _components: { value: null @@ -52,6 +41,10 @@ exports.ColorPanelPopup = Montage.create(Component, { setNoColor: { value: function (code) { if (this.colorManager) this.colorManager.applyNoColor(code); + // + if (!code && !this.props.panel) { + this.dispatchEvent({type: 'change', wasSetByCode: code, mode: 'nocolor', value: null}); + } } }, //////////////////////////////////////////////////////////////////// @@ -161,7 +154,7 @@ exports.ColorPanelPopup = Montage.create(Component, { if (!this.props || (this.props && this.props.nocolor)) { // this.btnNocolor.addEventListener('click', function () { - this.setNoColor(); + this.setNoColor(false); }.bind(this), true); } else { this.btnNocolor.style.display = 'none'; -- cgit v1.2.3 From 9d7aaf42b4f0bcd3d6aa494bddd64519f1020abd Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 27 Jun 2012 11:30:23 -0700 Subject: Fixing palette reference bug --- .../color/colorpanelpopup.reel/colorpanelpopup.js | 26 +++++++++++++--------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'js/panels/color/colorpanelpopup.reel') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 4a868a6d..b8261f26 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -128,7 +128,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.popupSwitchInputTo(this.palettes); }.bind(this), true); // - this.drawPalette(this.defaultPalette); + this.drawPalette(this.defaultPalette, this.colorManager); } else { this.btnPalette.style.display = 'none'; } @@ -297,7 +297,7 @@ if (this._components.wheel._value) { //////////////////////////////////////////////////////////////////// // drawPalette: { - value: function (c) { + value: function (c, m) { var i, button; // this.palettes.style.display = 'block'; @@ -316,27 +316,31 @@ if (this._components.wheel._value) { color = b._event.srcElement.colorValue; color.wasSetByCode = false; color.type = 'change'; - this.colorManager[b._event.srcElement.colorMode] = color; + m[b._event.srcElement.colorMode] = color; } else { - if (this.colorManager.mode === 'hsl') { - rgb = this.colorManager.hexToRgb(b._event.srcElement.colorValue); + if (m.mode === 'hsl') { + rgb = m.hexToRgb(b._event.srcElement.colorValue); if (rgb) { - color = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b); + color = m.rgbToHsl(rgb.r, rgb.g, rgb.b); color.wasSetByCode = false; color.type = 'change'; - this.colorManager.hsl = color; + m.hsl = color; } else { - this.colorManager.applyNoColor(false); + m.applyNoColor(false); } } else { - color = this.colorManager.hexToRgb(b._event.srcElement.colorValue); + color = m.hexToRgb(b._event.srcElement.colorValue); if (color) { color.wasSetByCode = false; color.type = 'change'; - this.colorManager.rgb = color; + m.rgb = color; } else { - this.colorManager.applyNoColor(false); + m.applyNoColor(false); } + //TODO: Remove this is a hack + if (!this.props.panel) { + this.dispatchEvent({type: 'change', wasSetByCode: false, mode: 'hex', value: b._event.srcElement.colorValue}); + } } } }.bind(this), true); -- cgit v1.2.3