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 @@
<div class="cp_pu_history">
- <button class="cp_pu_color_previous">Previous Color</button>
- <button class="cp_pu_color_current">Current Color</button>
+ <button data-montage-id="btn_previous" class="cp_pu_color_previous">Previous Color</button>
+ <button data-montage-id="btn_current" class="cp_pu_color_current">Current Color</button>
</div>
- <div class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
+ <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
- <button class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
- <button class="cp_pu_images" title="Background Image">Images</button>
- <button class="cp_pu_gradients" title="Gradient">Gradients</button>
- <button class="cp_pu_palettes" title="Color Palette">Palettes</button>
- <button class="cp_pu_nocolor" title="No Color">No Color</button>
+ <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
+ <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
+ <button data-montage-id="btn_gradients" class="cp_pu_gradients" title="Gradient">Gradients</button>
+ <button data-montage-id="btn_palettes" class="cp_pu_palettes" title="Color Palette">Palettes</button>
+ <button data-montage-id="btn_nocolor" class="cp_pu_nocolor" title="No Color">No Color</button>
</div>
@@ -60,8 +71,8 @@
<div data-montage-id="cntnr_alpha" class="cp_pu_alpha">
<div class="cp_pu_a_label">Alpha</div>
- <div class="cp_pu_a_slider"></div>
- <input class="cp_pu_a_hottext"/>
+ <div data-montage-id="alpha_slider" class="cp_pu_a_slider"></div>
+ <input data-montage-id="alpha_hottext" class="cp_pu_a_hottext"/>
<div class="cp_pu_a_label2">%</div>
</div>
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 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 @@
<div data-montage-id="cp_expanded" class="cp_expanded">
<div class="cp_history">
- <button class="cp_color_current">Current Color</button>
- <button class="cp_color_previous">Previous Color</button>
+ <button data-montage-id="btn_current" class="cp_color_current">Current Color</button>
+ <button data-montage-id="btn_previous" class="cp_color_previous">Previous Color</button>
</div>
<div class="cp_modes">
- <button class="cp_rgb_mode">RGB</button>
+ <button data-montage-id="btn_rgb" class="cp_rgb_mode">RGB</button>
<hr />
- <button class="cp_hsl_mode">HSL</button>
+ <button data-montage-id="btn_hsl" class="cp_hsl_mode">HSL</button>
</div>
<hr />
<div class="cp_inputs">
- <div class="cp_input_button"><button class="cpe_stroke">Stroke</button></div>
- <button class="cpe_stroke_icon"></button>
- <div class="cp_input_button"><button class="cpe_fill">Fill</button></div>
- <button class="cpe_fill_icon"></button>
+ <div class="cp_input_button"><button data-montage-id="btn_stroke" class="cpe_stroke">Stroke</button></div>
+ <button data-montage-id="btn_istoke" class="cpe_stroke_icon"></button>
+ <div class="cp_input_button"><button data-montage-id="btn_fill" class="cpe_fill">Fill</button></div>
+ <button data-montage-id="btn_ifill" class="cpe_fill_icon"></button>
</div>
<div class="cp_options">
- <button class="cp_reset">Default Colors</button>
- <button class="cp_nocolor">No Color</button>
- <button class="cp_swap">Swap Colors</button>
+ <button data-montage-id="btn_default" class="cp_reset">Default Colors</button>
+ <button data-montage-id="btn_nocolor" class="cp_nocolor">No Color</button>
+ <button data-montage-id="btn_swap" class="cp_swap">Swap Colors</button>
</div>
<div class="cp_labels">
- <div class="sh_label1">R</div>
- <div class="sh_label2">G</div>
- <div class="sh_label3">B</div>
- <div class="sh_label4">A</div>
+ <div data-montage-id="label1" class="sh_label1">R</div>
+ <div data-montage-id="label2" class="sh_label2">G</div>
+ <div data-montage-id="label3" class="sh_label3">B</div>
+ <div data-montage-id="label4" class="sh_label4">A</div>
</div>
<div class="cp_sliders">
- <div class="cp_slider1"></div>
- <div class="cp_slider2"></div>
- <div class="cp_slider3"></div>
- <div class="cp_slider4"></div>
+ <div data-montage-id="slider1" class="cp_slider1"></div>
+ <div data-montage-id="slider2" class="cp_slider2"></div>
+ <div data-montage-id="slider3" class="cp_slider3"></div>
+ <div data-montage-id="slider4" class="cp_slider4"></div>
</div>
<div class="cp_hottext">
- <input class="cp_hottext1"/>
- <input class="cp_hottext2"/>
- <input class="cp_hottext3"/>
- <input class="cp_hottext4"/>
+ <input data-montage-id="hottext1" class="cp_hottext1"/>
+ <input data-montage-id="hottext2" class="cp_hottext2"/>
+ <input data-montage-id="hottext3" class="cp_hottext3"/>
+ <input data-montage-id="hottext4" class="cp_hottext4"/>
</div>
- <div class="cp_hex">#<input class="cp_hottext5" maxlength="6" /></div>
- <div class="cp_spectrum"></div>
+ <div class="cp_hex">#<input data-montage-id="hextext" class="cp_hottext5" maxlength="6" /></div>
+ <div class="cp_spectrum" data-montage-id="spectrum"></div>
</div>
</body>
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/colorbar.reel/colorbar.js | 12 ++----------
2 files changed, 3 insertions(+), 13 deletions(-)
diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html
index 2e189c87..5018b1f4 100755
--- a/js/components/colorbar.reel/colorbar.html
+++ b/js/components/colorbar.reel/colorbar.html
@@ -6,11 +6,9 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright>
-->
-<html lang="en">
+<html>
<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
<link rel="stylesheet" type="text/css" href="css/colorbar.css">
<script type="text/montage-serialization">
diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js
index e547b9bc..e5dd84cf 100755
--- a/js/components/colorbar.reel/colorbar.js
+++ b/js/components/colorbar.reel/colorbar.js
@@ -19,28 +19,22 @@ exports.ColorBar