From 708d6d4736cdb67bde5ecfb31b34e19d26eef611 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 14 Jun 2012 15:22:28 -0700 Subject: Cleaning up references Still need to do more cleaning up. --- .../colorpanelpopup.reel/colorpanelpopup.html | 33 ++++-- .../color/colorpanelpopup.reel/colorpanelpopup.js | 113 ++++++++++----------- 2 files changed, 77 insertions(+), 69 deletions(-) diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index 5ad5c615..596580b4 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -21,7 +21,18 @@ "images": {"#": "cntnr_images"}, "gradients": {"#": "cntnr_gradients"}, "palettes": {"#": "cntnr_palettes"}, - "alpha": {"#": "cntnr_alpha"} + "alpha": {"#": "cntnr_alpha"}, + "alphaSlider": {"#": "alpha_slider"}, + "alphaHottext": {"#": "alpha_hottext"}, + "btnPrevious": {"#": "btn_previous"}, + "btnCurrent": {"#": "btn_current"}, + "btnWheel": {"#": "btn_wheel"}, + "btnImage": {"#": "btn_images"}, + "btnGradient": {"#": "btn_gradients"}, + "btnPalette": {"#": "btn_palettes"}, + "btnNocolor": {"#": "btn_nocolor"}, + "inputHex": {"#": "input_hex"} + } } } @@ -36,18 +47,18 @@
- - + +
-
#
+
#
- - - - - + + + + + @@ -60,8 +71,8 @@
Alpha
-
- +
+
%
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index aebbbd41..4161cb50 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -23,19 +23,13 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { - value: false + value: null }, //////////////////////////////////////////////////////////////////// //Color manager colorManager: { - get: function() { - return this._colorManager; - }, - set: function(value) { - if (value !== this._colorManager) { - this._colorManager = value; - } - } + get: function() {return this._colorManager;}, + set: function(value) {if (value !== this._colorManager) this._colorManager = value;} }, //////////////////////////////////////////////////////////////////// //Storing color panel @@ -45,18 +39,19 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Color panel colorPanel: { - get: function() { - return this._colorPanel; - }, - set: function(value) { - this._colorPanel = value; - } + get: function() {return this._colorPanel;}, + set: function(value) {this._colorPanel = value;} + }, + //////////////////////////////////////////////////////////////////// + // + _components: { + value: null }, //////////////////////////////////////////////////////////////////// // setNoColor: { value: function (e) { - this.colorManager.applyNoColor(); + if (this.colorManager) this.colorManager.applyNoColor(); } }, //////////////////////////////////////////////////////////////////// @@ -64,7 +59,8 @@ exports.ColorPanelPopup = Montage.create(Component, { prepareForDraw: { value: function () { // - this.element._components = {wheel: null, combo: null}; + this._components = null; + this._components = {wheel: null, combo: null}; } }, //////////////////////////////////////////////////////////////////// @@ -74,14 +70,14 @@ exports.ColorPanelPopup = Montage.create(Component, { // this.element.style.opacity = 0; // - this.element._components.combo = {}; - this.element._components.combo.slider = Slider.create(); - this.element._components.combo.hottext = HotText.create(); - this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0]; - this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0]; + this._components.combo = {}; + this._components.combo.slider = Slider.create(); + this._components.combo.hottext = HotText.create(); + this._components.combo.slider.element = this.alphaSlider; + this._components.combo.hottext.element = this.alphaHottext; // - Object.defineBinding(this.element._components.combo.hottext, "_value", { - boundObject: this.element._components.combo.slider, + Object.defineBinding(this._components.combo.hottext, "_value", { + boundObject: this._components.combo.slider, boundObjectPropertyPath: "value", oneway: false, boundValueMutator: function(value) { @@ -89,8 +85,8 @@ exports.ColorPanelPopup = Montage.create(Component, { } }); // - Object.defineBinding(this.element._components.combo.hottext, "value", { - boundObject: this.element._components.combo.slider, + Object.defineBinding(this._components.combo.hottext, "value", { + boundObject: this._components.combo.slider, boundObjectPropertyPath: "value", oneway: false, boundValueMutator: function(value) { @@ -98,7 +94,7 @@ exports.ColorPanelPopup = Montage.create(Component, { } }); if (this.application.ninja.colorController.colorView) { - Object.defineBinding(this.element._components.combo.slider, "value", { + Object.defineBinding(this._components.combo.slider, "value", { boundObject: this.application.ninja.colorController.colorView._combo[3].slider, boundObjectPropertyPath: "value", oneway: false, @@ -108,25 +104,26 @@ exports.ColorPanelPopup = Montage.create(Component, { }); } // - this.element._components.combo.slider.maxValue = this.element._components.combo.hottext.maxValue = 100; + this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100; + // if (this.application.ninja.colorController.colorView) { - this.element._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); + this._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); } // - this.element._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); - this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); + this._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); + this._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); // - this.element._components.wheel = ColorWheel.create(); - this.element._components.wheel.element = this.wheel; - this.element._components.wheel.element.style.display = 'block'; - this.element._components.wheel.rimWidth = 14; - this.element._components.wheel.strokeWidth = 2; + this._components.wheel = ColorWheel.create(); + this._components.wheel.element = this.wheel; + this._components.wheel.element.style.display = 'block'; + this._components.wheel.rimWidth = 14; + this._components.wheel.strokeWidth = 2; // - this.element._components.wheel.value = this.colorManager.hsv; - this.element._components.wheel.addEventListener('change', this, true); - this.element._components.wheel.addEventListener('changing', this, true); + this._components.wheel.value = this.colorManager.hsv; + this._components.wheel.addEventListener('change', this, true); + this._components.wheel.addEventListener('changing', this, true); // - Object.defineBinding(this.element._components.wheel, "value", { + Object.defineBinding(this._components.wheel, "value", { boundObject: this.colorManager, boundObjectPropertyPath: "_hsv", boundValueMutator: function(value) { @@ -148,8 +145,8 @@ exports.ColorPanelPopup = Montage.create(Component, { // this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); // - this.element._components.combo.slider.needsDraw = true; - this.element._components.combo.hottext.needsDraw = true; + this._components.combo.slider.needsDraw = true; + this._components.combo.hottext.needsDraw = true; // this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { this.setNoColor(); @@ -175,9 +172,9 @@ exports.ColorPanelPopup = Montage.create(Component, { 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]); // - this.element._components.wheel.addEventListener('firstDraw', this, false); + this._components.wheel.addEventListener('firstDraw', this, false); // - this.element._components.wheel.needsDraw = true; + this._components.wheel.needsDraw = true; } }, //////////////////////////////////////////////////////////////////// @@ -193,9 +190,9 @@ exports.ColorPanelPopup = Montage.create(Component, { handleFirstDraw: { value: function (e) { // - if (this.element._components.wheel) { + if (this._components.wheel) { //Only using it for one instance, no need to check target - this.element._components.wheel.removeEventListener('firstDraw', this, false); + this._components.wheel.removeEventListener('firstDraw', this, false); } //Switching to tab from previous selection switch (this.application.ninja.colorController.popupTab) { @@ -241,10 +238,10 @@ exports.ColorPanelPopup = Montage.create(Component, { this.application.ninja.colorController.popupTab = 'palette'; } // - if (tab !== this.wheel && this.element._components.wheel.element) { - this.element._components.wheel.element.style.display = 'none'; - } else if (this.element._components.wheel.element && this.element._components.wheel.element.style.display !== 'block'){ - this.element._components.wheel.element.style.display = 'block'; + if (tab !== this.wheel && this._components.wheel.element) { + this._components.wheel.element.style.display = 'none'; + } else if (this._components.wheel.element && this._components.wheel.element.style.display !== 'block'){ + this._components.wheel.element.style.display = 'block'; this.alpha.style.display = 'block'; // this.application.ninja.colorController.popupTab = 'wheel'; @@ -264,10 +261,10 @@ exports.ColorPanelPopup = Montage.create(Component, { if (tab !== this.gradients) { this.gradients.style.display = 'none'; // - if (this.element._components.wheel._value) { - this.element._components.wheel.value = {h: this.element._components.wheel._value.h, s: this.element._components.wheel._value.s, v: this.element._components.wheel._value.v, wasSetByCode: false}; + 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.element._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; + this._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; } } else { this.gradients.style.display = 'block'; @@ -389,7 +386,7 @@ exports.ColorPanelPopup = Montage.create(Component, { alphaChange: { value: function (e) { if (!e._event.wasSetByCode) { - var update = {value: this.element._components.combo.slider.value/100, wasSetByCode: false, type: 'change'}; + var update = {value: this._components.combo.slider.value/100, wasSetByCode: false, type: 'change'}; this.colorManager.alpha = update; } } @@ -425,10 +422,10 @@ exports.ColorPanelPopup = Montage.create(Component, { value: function() { // this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); - Object.deleteBinding(this.element._components.combo.hottext, "value"); - Object.deleteBinding(this.element._components.combo.slider, "value"); - Object.deleteBinding(this.element._components.wheel, "value"); - this.element._components.wheel = null; + Object.deleteBinding(this._components.combo.hottext, "value"); + Object.deleteBinding(this._components.combo.slider, "value"); + Object.deleteBinding(this._components.wheel, "value"); + this._components.wheel = null; } } //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From fbd9d2492aeaef392ad59792825b8757d6c363fc Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 15 Jun 2012 15:14:34 -0700 Subject: Fixing apply 'no color' This should fix canvas and standard DOM elements including the root (body or template wrapper). --- js/controllers/color-controller.js | 2 +- js/models/color-model.js | 14 +++++++------- js/panels/color/colorchippopup.reel/colorchippopup.js | 4 ++-- js/panels/color/colorpanelbase.reel/colorpanelbase.js | 18 +++++++++--------- .../color/colorpanelpopup.reel/colorpanelpopup.js | 8 ++++---- js/panels/color/colortoolbar.reel/colortoolbar.js | 4 ++-- js/panels/properties.reel/properties.js | 4 ++-- .../properties.reel/sections/custom.reel/custom.js | 6 +++++- js/tools/EyedropperTool.js | 2 +- 9 files changed, 33 insertions(+), 29 deletions(-) diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index d4737aad..3edaff86 100755 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -198,7 +198,7 @@ exports.ColorController = Montage.create(Component, { enumerable: true, value: function (e) { // - var actionEvent, color, input = e._event.input, panelMode, mode = e._event.mode; + var color, input = e._event.input, panelMode, mode = e._event.mode; if (this.colorView) { panelMode = this.colorView.panelMode; } diff --git a/js/models/color-model.js b/js/models/color-model.js index 764feeb5..a2eab2e1 100755 --- a/js/models/color-model.js +++ b/js/models/color-model.js @@ -231,10 +231,10 @@ exports.ColorModel = Montage.create(Component, { // applyNoColor: { enumerable: true, - value: function () { + value: function (code) { // var nocolor = {}; - nocolor.wasSetByCode = true; + nocolor.wasSetByCode = code; nocolor.type = 'change'; this.updateColorSelected('nocolor', nocolor); } @@ -310,29 +310,29 @@ exports.ColorModel = Montage.create(Component, { case 'hex': switch (color.length) { case 1: - this.applyNoColor(); + this.applyNoColor(false); return; break; case 2: - this.applyNoColor(); + this.applyNoColor(false); return; break; case 3: color = color[0]+color[0]+color[1]+color[1]+color[2]+color[2]; break; case 4: - this.applyNoColor(); + this.applyNoColor(false); return; break; case 5: - this.applyNoColor(); + this.applyNoColor(false); return; break; case 6: //Nothing break; default: - this.applyNoColor(); + this.applyNoColor(false); return; break; } diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js index 414be8b7..923beca9 100755 --- a/js/panels/color/colorchippopup.reel/colorchippopup.js +++ b/js/panels/color/colorchippopup.reel/colorchippopup.js @@ -43,8 +43,8 @@ exports.ColorChipPopup = Montage.create(Component, { // setNoColor: { enumerable: true, - value: function (e) { - this.colorManager.applyNoColor(); + value: function (code) { + this.colorManager.applyNoColor(code); } }, //////////////////////////////////////////////////////////////////// diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 7a28c55d..7071f590 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -694,7 +694,7 @@ exports.ColorPanelBase = Montage.create(Component, { case 'nocolor': this._buttons.nocolor.push(button); button.title = 'No Color'; - button.addEventListener('click', this.setNoColor.bind(this)); + button.addEventListener('click', function () {this.setNoColor(false)}.bind(this)); break; //////////////////////////////////////////////////////// case 'swap': @@ -746,7 +746,7 @@ exports.ColorPanelBase = Montage.create(Component, { color.wasSetByCode = false; // if (prev.m === 'nocolor') { - this.setNoColor(); + this.setNoColor(false); } else { this.colorManager.alpha = { value: alpha, wasSetByCode: true, type: 'change' }; this.colorManager[prev.m] = color; @@ -832,11 +832,11 @@ exports.ColorPanelBase = Montage.create(Component, { //TODO: Add set by code property setNoColor: { enumerable: true, - value: function (e) { + value: function (wasSetByCode) { // this.application.ninja.colorController.colorPopupManager.hideColorPopup(); // - this.colorManager.applyNoColor(); + this.colorManager.applyNoColor(wasSetByCode); } }, //////////////////////////////////////////////////////////////////// @@ -879,7 +879,7 @@ exports.ColorPanelBase = Montage.create(Component, { break; //////////////////////////////////////////////////////// default: - this.setNoColor(); + this.setNoColor(false); break; //////////////////////////////////////////////////////// } @@ -911,7 +911,7 @@ exports.ColorPanelBase = Montage.create(Component, { break; //////////////////////////////////////////////////////// default: - this.setNoColor(); + this.setNoColor(false); break; //////////////////////////////////////////////////////// } @@ -1300,7 +1300,7 @@ exports.ColorPanelBase = Montage.create(Component, { update.type = 'change'; this.colorManager.hsl = update; } else { - this.colorManager.applyNoColor(); + this.colorManager.applyNoColor(false); } } else { update = this.colorManager.hexToRgb(color); @@ -1309,7 +1309,7 @@ exports.ColorPanelBase = Montage.create(Component, { update.type = 'change'; this.colorManager.rgb = update; } else { - this.colorManager.applyNoColor(); + this.colorManager.applyNoColor(false); } } } @@ -1553,7 +1553,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.colorManager.hsv = color.c; break; default: - this.colorManager.applyNoColor(); + this.colorManager.applyNoColor(true); break; } // diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 4161cb50..ded06797 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -50,8 +50,8 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // setNoColor: { - value: function (e) { - if (this.colorManager) this.colorManager.applyNoColor(); + value: function (code) { + if (this.colorManager) this.colorManager.applyNoColor(code); } }, //////////////////////////////////////////////////////////////////// @@ -308,7 +308,7 @@ exports.ColorPanelPopup = Montage.create(Component, { color.type = 'change'; this.colorManager.hsl = color; } else { - this.colorManager.applyNoColor(); + this.colorManager.applyNoColor(false); } } else { color = this.colorManager.hexToRgb(b._event.srcElement.colorValue); @@ -317,7 +317,7 @@ exports.ColorPanelPopup = Montage.create(Component, { color.type = 'change'; this.colorManager.rgb = color; } else { - this.colorManager.applyNoColor(); + this.colorManager.applyNoColor(false); } } } diff --git a/js/panels/color/colortoolbar.reel/colortoolbar.js b/js/panels/color/colortoolbar.reel/colortoolbar.js index 6b8e476b..bf4d307f 100755 --- a/js/panels/color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/color/colortoolbar.reel/colortoolbar.js @@ -108,7 +108,7 @@ exports.ColorToolbar = Montage.create(Component, { color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { - this.application.ninja.colorController.colorModel.applyNoColor(); + this.application.ninja.colorController.colorModel.applyNoColor(false); } this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); @@ -125,7 +125,7 @@ exports.ColorToolbar = Montage.create(Component, { color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { - this.application.ninja.colorController.colorModel.applyNoColor(); + this.application.ninja.colorController.colorModel.applyNoColor(false); } this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 43c92b74..fcd0ab01 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -367,7 +367,7 @@ exports.Properties = Montage.create(Component, { } } else { this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); + this.application.ninja.colorController.colorModel.applyNoColor(true); } } } @@ -397,7 +397,7 @@ exports.Properties = Montage.create(Component, { this.application.ninja.colorController.colorModel.hsv = color.c; break; default: - this.application.ninja.colorController.colorModel.applyNoColor(); + this.application.ninja.colorController.colorModel.applyNoColor(true); break; } } diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index c599dcb0..08434b01 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -116,7 +116,11 @@ exports.CustomSection = Montage.create(Component, { value: function(event) { // Change the stage color for now //console.log(this, event); - ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", ''); + if (event._event.color && event._event.color.css) { + ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", ''); + } else { + ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, ['none'], "Change", "pi", ''); + } /* var propEvent = document.createEvent("CustomEvent"); propEvent.initEvent("propertyChange", true, true); diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 6a56004d..30a6a48b 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -240,7 +240,7 @@ exports.EyedropperTool = Montage.create(toolBase, { else { this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: eventType}; - this.application.ninja.colorController.colorModel.applyNoColor(); + this.application.ninja.colorController.colorModel.applyNoColor(true); if(updateColorToolBar) { this._previousColor = "none"; -- cgit v1.2.3 From 28300cc13e31abd630426325f4293eb8ea279fe4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 15 Jun 2012 15:27:38 -0700 Subject: IKNINJA-1746 - Can't select items behind the banner templates' viewport. Signed-off-by: Nivesh Rajbhandari --- js/document/document-html.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/document/document-html.js b/js/document/document-html.js index aded9241..b9c8e797 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -36,7 +36,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // exclusionList: { - value: ["HTML", "BODY", "NINJA-CONTENT"] + value: ["HTML", "BODY", "NINJA-CONTENT", "NINJA-VIEWPORT"] }, //////////////////////////////////////////////////////////////////// // -- cgit v1.2.3 From 60bc2ff4b617ec6bbb3506770401f0adef60671d Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sat, 16 Jun 2012 18:44:35 -0700 Subject: Fixed slider/hottext bindings Also cleaning up, however, needs much refactoring. --- .../color/colorpanelbase.reel/colorpanelbase.html | 77 ++++++---- .../color/colorpanelbase.reel/colorpanelbase.js | 160 +++++++-------------- 2 files changed, 99 insertions(+), 138 deletions(-) diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html index 19bc4b6b..f99f41c7 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -15,7 +15,32 @@ "owner": { "prototype": "js/panels/Color/ColorPanelBase.reel", "properties": { - "element": {"#": "cp_expanded"} + "element": {"#": "cp_expanded"}, + "btnCurrent": {"#": "btn_current"}, + "btnPrevious": {"#": "btn_previous"}, + "btnRgbMode": {"#": "btn_rgb"}, + "btnHslMode": {"#": "btn_hsl"}, + "btnStroke": {"#": "btn_stroke"}, + "btnStrokeIcon": {"#": "btn_istoke"}, + "btnFill": {"#": "btn_fill"}, + "btnFillIcon": {"#": "btn_ifill"}, + "btnDefault": {"#": "btn_default"}, + "btnNoColor": {"#": "btn_nocolor"}, + "btnSwap": {"#": "btn_swap"}, + "label1": {"#": "label1"}, + "label2": {"#": "label2"}, + "label3": {"#": "label3"}, + "label4": {"#": "label4"}, + "slider1": {"#": "slider1"}, + "slider2": {"#": "slider2"}, + "slider3": {"#": "slider3"}, + "slider4": {"#": "slider4"}, + "hottext1": {"#": "hottext1"}, + "hottext2": {"#": "hottext2"}, + "hottext3": {"#": "hottext3"}, + "hottext4": {"#": "hottext4"}, + "hextext": {"#": "hextext"}, + "spectrum": {"#": "spectrum"} } } @@ -28,46 +53,46 @@
- - + +
- +
- +
-
- -
- +
+ +
+
- - - + + +
-
R
-
G
-
B
-
A
+
R
+
G
+
B
+
A
-
-
-
-
+
+
+
+
- - - - + + + +
-
#
-
+
#
+
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 7071f590..26d4932f 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -23,41 +23,28 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode _panelMode: { - enumerable: false, - value: 'rgb' + value: 'rgb' }, //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode panelMode: { - enumerable: true, - get: function () { - return this._panelMode; - }, - set: function (value) { - if (value !== this._panelMode) { - this._panelMode = value; - } - } + get: function () {return this._panelMode;}, + set: function (value) {if (value !== this._panelMode)this._panelMode = value;} }, //////////////////////////////////////////////////////////////////// // _colorBar: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // colorManager: { - enumerable: true, - get: function () { - return this._colorManager; - }, + get: function () {return this._colorManager;}, set: function (value) { if (value !== this._colorManager) { this._colorManager = value; @@ -72,60 +59,41 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Color Panel Container _container: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // _combo: { - enumerable: false, value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}] }, //////////////////////////////////////////////////////////////////// // _buttons: { - enumerable: false, value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] } }, //////////////////////////////////////////////////////////////////// // historyCache: { - enumerable: false, value: { current: null, previous: null } }, //////////////////////////////////////////////////////////////////// // colorChipProps: { - enumerable: true, value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false } }, //////////////////////////////////////////////////////////////////// // currentChip: { - enumerable: true, value: null }, //////////////////////////////////////////////////////////////////// // previousInput: { - enumerable: true, value: null }, //////////////////////////////////////////////////////////////////// - //Setting up elements/components - prepareForDraw: { - enumerable: false, - value: function () { - //TODO: Remove temporary hack, color history should be initilized - this.addEventListener('firstDraw', this, false); - this.application.ninja.colorController.colorView = this; - this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}]; - this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}]; - } - }, - + // handleFirstDraw: { - enumerable: true, value: function (e) { // this.applyDefaultColors(); @@ -137,33 +105,42 @@ exports.ColorPanelBase = Montage.create(Component, { this.application.ninja.colorController.colorPanelDrawn = true; } }, - + //////////////////////////////////////////////////////////////////// + //Setting up elements/components + prepareForDraw: { + value: function () { + //TODO: Remove temporary hack, color history should be initilized + this.addEventListener('firstDraw', this, false); + this.application.ninja.colorController.colorView = this; + this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}]; + this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}]; + } + }, //////////////////////////////////////////////////////////////////// //Assigning values and binding willDraw: { - enumerable: false, value: function () { //////////////////////////////////////////////////////////// - //TODO: remove ID dependencies - createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element); - createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element); - createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element); - createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element); + //Creating slider/hottext components + createCombo(this._combo[0], this.slider1, this.hottext1, true); + createCombo(this._combo[1], this.slider2, this.hottext2, true); + createCombo(this._combo[2], this.slider3, this.hottext3, true); + createCombo(this._combo[3], this.slider4, this.hottext4, false); //////////////////////////////////////////////////////////// //Function to create slider/hottext combination - function createCombo(c, slid, htid, color, e) { + function createCombo(c, sldr, htxt, color) { //Only creating, not drawing c.slider = Slider.create(); c.hottext = HotText.create(); - c.slider.element = e.getElementsByClassName(slid)[0]; - c.hottext.element = e.getElementsByClassName(htid)[0]; + c.slider.element = sldr; + c.hottext.element = htxt; c.slider.changesColor = c.hottext.changesColor = color; c.slider.cInputType = 'slider'; c.slider.cInputType = 'hottext'; //Binding Hottext to Slider Object.defineBinding(c.hottext, "value", { boundObject: c.slider, - boundObjectPropertyPath: "_value", //TODO: Check if needed + boundObjectPropertyPath: "value", //TODO: Check if needed oneway: false, boundValueMutator: function (value) { return Math.round(value); @@ -182,32 +159,28 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////// //Creating ColorBar and sending color manager this._colorBar = ColorBar.create(); - this._colorBar.element = this.element.getElementsByClassName("cp_spectrum")[0]; + this._colorBar.element = this.spectrum; //////////////////////////////////////////////////////////// //Adding/Initializing buttons - this.addButton('fill', this.element.getElementsByClassName('cpe_fill')[0]); - this.addButton('fillicon', this.element.getElementsByClassName('cpe_fill_icon')[0]); - this.addButton('stroke', this.element.getElementsByClassName('cpe_stroke')[0]); - this.addButton('strokeicon', this.element.getElementsByClassName('cpe_stroke_icon')[0]); - - this.addButton('current', this.element.getElementsByClassName('cp_color_current')[0]); - this.addButton('previous', this.element.getElementsByClassName('cp_color_previous')[0]); - - this.addButton('hexinput', this.element.getElementsByClassName('cp_hottext5')[0]); - this.addButton('reset', this.element.getElementsByClassName('cp_reset')[0]); - this.addButton('nocolor', this.element.getElementsByClassName('cp_nocolor')[0]); - this.addButton('swap', this.element.getElementsByClassName('cp_swap')[0]); - + this.addButton('fill', this.btnFill); + this.addButton('fillicon', this.btnFillIcon); + this.addButton('stroke', this.btnStroke); + this.addButton('strokeicon', this.btnStrokeIcon); + // + this.addButton('current', this.btnCurrent); + this.addButton('previous', this.btnPrevious); + // + this.addButton('hexinput', this.hextext); + this.addButton('reset', this.btnDefault); + this.addButton('nocolor', this.btnNoColor); + this.addButton('swap', this.btnSwap); //TODO: Add HSL mode when Chrome can pass proper mode in color, also add in CSS button states - //this.addButton('hslmode', this.element.getElementsByClassName('cp_hsl_mode')[0]); - this.addButton('rgbmode', this.element.getElementsByClassName('cp_rgb_mode')[0]); - - this.addButton('mlabel1', this.element.getElementsByClassName('sh_label1')[0]); - this.addButton('mlabel2', this.element.getElementsByClassName('sh_label2')[0]); - this.addButton('mlabel3', this.element.getElementsByClassName('sh_label3')[0]); - - - + //this.addButton('hslmode', this.btnHslMode); + this.addButton('rgbmode', this.btnRgbMode); + // + this.addButton('mlabel1', this.label1); + this.addButton('mlabel2', this.label2); + this.addButton('mlabel3', this.label3); //Initialing values of sliders according to current mode if (this._panelMode === 'rgb') { this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 255; @@ -225,7 +198,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Drawing elements/components draw: { - enumerable: false, value: function () { //////////////////////////////////////////////////////////// //Drawing slider/hottext combinations @@ -240,7 +212,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // didDraw: { - enumerable: false, value: function () { //Drawing color bar after layout has been drawn since width/height are needed this._colorBar.needsDraw = true; @@ -277,7 +248,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Color Updating from Mananger _update: { - enumerable: false, value: function (e) { //Local variables var i, bgcolor, bgimg, input = this.colorManager.input.toLocaleLowerCase(), other; @@ -356,7 +326,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Updating history buttons (individually kept per input type) _updateHistoryButtons: { - enumerable: false, value: function (e) { //Locals var bg = 'none', img, i, input = this.colorManager.input.toLowerCase(), color, hsv, mode = e._event.mode, prev, alpha, ctx, cvs; @@ -474,7 +443,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Draws no color icon on button's canvas drawButtonNoColor: { - enumerable: true, value: function (btn, cvs) { // var ctx = cvs.getContext('2d'); @@ -493,7 +461,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // addButton: { - enumerable: true, value: function (type, button) { // switch (type.toLocaleLowerCase()) { @@ -722,7 +689,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // removeButton: { - enumerable: true, value: function (type, button) { //Checking for type array to exists before removing item if (this._buttons[type.toLocaleLowerCase()]) { @@ -733,7 +699,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // setPreviousColor: { - enumerable: true, value: function (e) { // this.application.ninja.colorController.colorPopupManager.hideColorPopup(); @@ -757,7 +722,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // rgbMode: { - enumerable: true, value: function (e) { // //this.application.ninja.colorController.colorPopupManager.hideColorPopup(); @@ -794,7 +758,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hslMode: { - enumerable: true, value: function (e) { // //this.application.ninja.colorController.colorPopupManager.hideColorPopup(); @@ -831,7 +794,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //TODO: Add set by code property setNoColor: { - enumerable: true, value: function (wasSetByCode) { // this.application.ninja.colorController.colorPopupManager.hideColorPopup(); @@ -842,7 +804,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // swapColors: { - enumerable: true, value: function (e) { //TODO: Take into account current select input type this.application.ninja.colorController.colorPopupManager.hideColorPopup(); @@ -926,7 +887,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Applying default colors to stroke and fill applyDefaultColors: { - enumerable: true, value: function () { //TODO: Take into account current select input type this.application.ninja.colorController.colorPopupManager.hideColorPopup(); @@ -994,7 +954,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // selectColorWithChip: { - enumerable: true, value: function (e) { // this.currentChip = e._event.srcElement; @@ -1015,7 +974,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _updateValueFromSH: { - enumerable: false, value: function (e) { // var update; @@ -1078,7 +1036,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _updateSliders: { - enumerable: false, value: function (e) { var color, input = this.colorManager.input, i, other; if (input === 'fill') { @@ -1166,7 +1123,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _slider0Background: { - enumerable: false, value: function (c) { // var grdnt, cb_slc; @@ -1205,7 +1161,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _slider1Background: { - enumerable: false, value: function (c) { // var grdnt; @@ -1226,7 +1181,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _slider2Background: { - enumerable: false, value: function (c) { // var grdnt; @@ -1247,7 +1201,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _slider3Background: { - enumerable: false, value: function (c) { // var grdnt; @@ -1260,7 +1213,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _drawSliderBackground: { - enumerable: false, value: function (c, g) { var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height); @@ -1274,7 +1226,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _hottextHexInput: { - enumerable: false, value: function (color) { //If invalid input, no color will be applied var update, rgb; @@ -1317,7 +1268,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _updateHexValue: { - enumerable: false, value: function (v) { return this.colorManager.hex; } @@ -1325,7 +1275,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: false, value: function (e) { if (e._event.input && e._event.input === 'chip' && e._event.mode !== 'gradient') { this.application.ninja.colorController.colorPopupManager.colorChipChange(e); @@ -1350,7 +1299,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChanging: { - enumerable: false, value: function (e) { if (e._event.hsv) { // @@ -1438,26 +1386,17 @@ exports.ColorPanelBase = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - handleResize: - { - enumerable: false, - value: function (e) { - this._killPopup(e); - } + handleResize: { + value: function (e) {this._killPopup(e);} }, //////////////////////////////////////////////////////////////////// // - handleScroll: - { - enumerable: false, - value: function (e) { - this._killPopup(e); - } + handleScroll: { + value: function (e) {this._killPopup(e);} }, //////////////////////////////////////////////////////////////////// // handleClick: { - enumerable: true, value: function (e) { //TODO: Fix this HACK if (this._popupPanel.opened || this._popupChip.opened) { @@ -1468,7 +1407,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _killPopup: { - enumerable: false, value: function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); } @@ -1476,7 +1414,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // selectInputType: { - enumerable: true, value: function (type) { //Checking for the type to be formatted as expected, otherwise we unselected all buttons try { @@ -1580,7 +1517,6 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Creating button highlight via drawing on inner canvas selectInputHighlight: { - enumerable: true, value: function (selected, unselected, selNoColor, unselNoColor) { var cvs, ctx; //Looping through canvases of selected buttons -- cgit v1.2.3 From d5aec31ee519069ff6120e5d5685828750501e67 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sat, 16 Jun 2012 19:04:13 -0700 Subject: More cleaning up Controller will need a review and refactoring. --- js/controllers/color-controller.js | 48 +++++++------------------------------- js/panels/color/colorpanel.js | 13 ----------- 2 files changed, 8 insertions(+), 53 deletions(-) diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 3edaff86..3165988d 100755 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -19,13 +19,11 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: true, value: false }, //////////////////////////////////////////////////////////////////// // deserializedFromTemplate: { - enumerable: true, value: function () { //Setting up colorManager in other classes this.colorPanelBase.colorManager = this.colorModel; @@ -38,60 +36,47 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorModel: { - enumerable: true, value: ColorModel }, //////////////////////////////////////////////////////////////////// // colorPanelBase: { - enumerable: true, value: ColorPanelBase }, //////////////////////////////////////////////////////////////////// // colorPopupManager: { - enumerable: true, value: ColorPopupManager }, //////////////////////////////////////////////////////////////////// // colorButtonManager: { - enumerable: true, value: ColorPopupManager }, //////////////////////////////////////////////////////////////////// // colorView: { - enumerable: true, value: null }, //////////////////////////////////////////////////////////////////// // colorToolbar: { - enumerable: true, value: null }, //////////////////////////////////////////////////////////////////// // _popupTab: { - enumerable: false, value: 'wheel' }, //////////////////////////////////////////////////////////////////// // popupTab: { - enumerable: true, - get: function() { - return this._popupTab; - }, - set: function(value) { - this._popupTab = value.toLowerCase(); - } + get: function() {return this._popupTab;}, + set: function(value) {this._popupTab = value.toLowerCase();} }, //////////////////////////////////////////////////////////////////// // addButton: { - enumerable: true, value: function (type, button) { if (this.colorView) { this.colorView.addButton(type, button); @@ -107,7 +92,6 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // removeButton: { - enumerable: true, value: function (type, button) { if (this.colorView) { this.colorView.removeButton(type, button); @@ -123,41 +107,28 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _fill: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // fill: { - enumerable: true, - get: function() { - return this._fill; - }, - set: function(value) { - this._fill = value; - } + get: function() {return this._fill;}, + set: function(value) {this._fill = value;} }, //////////////////////////////////////////////////////////////////// // _stroke: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // stroke: { - enumerable: true, - get: function() { - return this._stroke; - }, - set: function(value) { - this._stroke = value; - } + get: function() {return this._stroke;}, + set: function(value) {this._stroke = value;} }, //////////////////////////////////////////////////////////////////// // getBackground: { - enumerable: true, value: function (element) { //TODO: Return object with all background properties console.log(ElementsMediator.getProperty(element, 'background-color')); @@ -167,7 +138,6 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // getBorder: { - enumerable: true, value: function (element) { } @@ -175,7 +145,6 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // setColor: { - enumerable: true, value: function (mode, color, isFill, selection) { var elements; //The selection is optional, if none, it asks for the currently selected elements @@ -195,7 +164,6 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: true, value: function (e) { // var color, input = e._event.input, panelMode, mode = e._event.mode; @@ -244,7 +212,6 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Converts CSS to a color object to be used by the color model getColorObjFromCss: { - enumerable: true, value: function (css) { // var color, arr, i, j, temp, c, gradient; @@ -341,7 +308,6 @@ exports.ColorController = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Parses simple solid CSS string into color object parseCssToColor: { - enumerable: true, value: function (css) { var color, r, p; //Parsing string and converting into color object @@ -368,4 +334,6 @@ exports.ColorController = Montage.create(Component, { return color; } } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// }); \ No newline at end of file diff --git a/js/panels/color/colorpanel.js b/js/panels/color/colorpanel.js index 3a603e98..0985c717 100755 --- a/js/panels/color/colorpanel.js +++ b/js/panels/color/colorpanel.js @@ -33,21 +33,8 @@ exports.ColorPanel = Montage.create(PanelBase, { this.content = this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); //Checking for first draw to apply default colors this.content.addEventListener('firstDraw', this, false); - - - //////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////// - //TODO: Remove and add via toolbar draw loop - - //////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////// - - } }, - //////////////////////////////////////////////////////////////////// - //Applying default colors only on first draw - //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// }); \ No newline at end of file -- cgit v1.2.3 From ffc03c14fe9cf6c2ba92338aeae89cc1aea51259 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sun, 17 Jun 2012 14:16:58 -0700 Subject: Tidying up color bar --- js/components/colorbar.reel/colorbar.html | 4 +--- js/components/colorb