Alpha
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index dd7e6192..aebbbd41 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -23,13 +23,11 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//Storing color manager
_colorManager: {
- enumerable: false,
value: false
},
////////////////////////////////////////////////////////////////////
//Color manager
colorManager: {
- enumerable: true,
get: function() {
return this._colorManager;
},
@@ -42,13 +40,11 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//Storing color panel
_colorPanel: {
- enumerable: false,
value: false
},
////////////////////////////////////////////////////////////////////
//Color panel
colorPanel: {
- enumerable: true,
get: function() {
return this._colorPanel;
},
@@ -59,7 +55,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
setNoColor: {
- enumerable: true,
value: function (e) {
this.colorManager.applyNoColor();
}
@@ -67,23 +62,14 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
prepareForDraw: {
- enumerable: false,
value: function () {
//
- this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}};
this.element._components = {wheel: null, combo: null};
- //Storing containers for reference
- this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
- this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
- this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
- this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
- this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
}
},
////////////////////////////////////////////////////////////////////
//
willDraw: {
- enumerable: false,
value: function() {
//
this.element.style.opacity = 0;
@@ -131,7 +117,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true);
//
this.element._components.wheel = ColorWheel.create();
- this.element._components.wheel.element = this.element._popups.containers.wheel;
+ 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;
@@ -152,7 +138,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
draw: {
- enumerable: false,
value: function() {
//
this.drawPalette(this.defaultPalette);
@@ -171,20 +156,20 @@ exports.ColorPanelPopup = Montage.create(Component, {
}.bind(this), true);
//
this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () {
- this.popupSwitchInputTo(this.element._popups.containers.palette);
+ this.popupSwitchInputTo(this.palettes);
}.bind(this), true);
//
this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () {
- this.popupSwitchInputTo(this.element._popups.containers.wheel);
+ this.popupSwitchInputTo(this.wheel);
}.bind(this), true);
//
this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () {
- this.popupSwitchInputTo(this.element._popups.containers.gradient);
+ this.popupSwitchInputTo(this.gradients);
}.bind(this), true);
//
this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button
this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () {
- //this.popupSwitchInputTo(this.element._popups.containers.image);
+ //this.popupSwitchInputTo(this.images);
}.bind(this), true);
//
this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]);
@@ -198,7 +183,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
didDraw: {
- enumerable: false,
value: function() {
//
@@ -207,7 +191,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//Reworking logic, firstDraw bubbles up, so target must be checked
handleFirstDraw: {
- enumerable: false,
value: function (e) {
//
if (this.element._components.wheel) {
@@ -217,16 +200,16 @@ exports.ColorPanelPopup = Montage.create(Component, {
//Switching to tab from previous selection
switch (this.application.ninja.colorController.popupTab) {
case 'wheel':
- this.popupSwitchInputTo(this.element._popups.containers.wheel);
+ this.popupSwitchInputTo(this.wheel);
break;
case 'palette':
- this.popupSwitchInputTo(this.element._popups.containers.palette);
+ this.popupSwitchInputTo(this.palettes);
break;
case 'image':
- this.popupSwitchInputTo(this.element._popups.containers.image);
+ this.popupSwitchInputTo(this.images);
break;
default:
- this.popupSwitchInputTo(this.element._popups.containers.wheel);
+ this.popupSwitchInputTo(this.wheel);
break
}
//Checking for a gradient to be current color
@@ -237,7 +220,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
} else {
//Gradient has been set, so opening gradient tab with gradient
this.drawGradient(this.colorManager.gradient);
- this.popupSwitchInputTo(this.element._popups.containers.gradient);
+ this.popupSwitchInputTo(this.gradients);
}
}
//Displaying element once it's been drawn
@@ -247,40 +230,39 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
popupSwitchInputTo: {
- enumerable: true,
value: function (tab) {
//
- if (tab !== this.element._popups.containers.palette) {
- this.element._popups.containers.palette.style.display = 'none';
+ if (tab !== this.palettes) {
+ this.palettes.style.display = 'none';
} else {
- this.element._popups.containers.palette.style.display = 'block';
- this.element._popups.containers.alpha.style.display = 'block';
+ this.palettes.style.display = 'block';
+ this.alpha.style.display = 'block';
//
this.application.ninja.colorController.popupTab = 'palette';
}
//
- if (tab !== this.element._popups.containers.wheel && this.element._components.wheel.element) {
+ 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';
- this.element._popups.containers.alpha.style.display = 'block';
+ this.alpha.style.display = 'block';
//
this.application.ninja.colorController.popupTab = 'wheel';
} else {
- this.element._popups.containers.wheel.style.display = 'none';
+ this.wheel.style.display = 'none';
}
//
- if (tab !== this.element._popups.containers.image) {
- this.element._popups.containers.image.style.display = 'none';
+ if (tab !== this.images) {
+ this.images.style.display = 'none';
} else {
- this.element._popups.containers.image.style.display = 'block';
- this.element._popups.containers.alpha.style.display = 'none';
+ this.images.style.display = 'block';
+ this.alpha.style.display = 'none';
//
this.application.ninja.colorController.popupTab = 'image';
}
//
- if (tab !== this.element._popups.containers.gradient) {
- this.element._popups.containers.gradient.style.display = 'none';
+ 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};
@@ -288,8 +270,8 @@ exports.ColorPanelPopup = Montage.create(Component, {
this.element._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false};
}
} else {
- this.element._popups.containers.gradient.style.display = 'block';
- this.element._popups.containers.alpha.style.display = 'none';
+ this.gradients.style.display = 'block';
+ this.alpha.style.display = 'none';
//
this.application.ninja.colorController.popupTab = 'gradient';
}
@@ -300,11 +282,10 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
drawPalette: {
- enumerable: true,
value: function (c) {
var i, button;
//
- this.element._popups.containers.palette.style.display = 'block';
+ this.palettes.style.display = 'block';
//
for (i in c) {
button = document.createElement('button');
@@ -312,7 +293,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
button.title = c[i].css.toUpperCase();
button.colorMode = c[i].mode;
button.colorValue = c[i].value;
- this.element._popups.containers.palette.appendChild(button);
+ this.palettes.appendChild(button);
button.addEventListener('click', function (b) {
var rgb, color;
//
@@ -346,13 +327,12 @@ exports.ColorPanelPopup = Montage.create(Component, {
}.bind(this), true);
}
//
- this.element._popups.containers.palette.style.display = 'none';
+ this.palettes.style.display = 'none';
}
},
////////////////////////////////////////////////////////////////////
//
defaultPalette: {
- enumerable: true,
value: [{mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '003300', css: '#003300'}, {mode: 'hex', value: '006600', css: '#006600'}, {mode: 'hex', value: '009900', css: '#009900'}, {mode: 'hex', value: '00cc00', css: '#00cc00'}, {mode: 'hex', value: '00ff00', css: '#00ff00'}, {mode: 'hex', value: '330000', css: '#330000'}, {mode: 'hex', value: '333300', css: '#333300'}, {mode: 'hex', value: '336600', css: '#336600'}, {mode: 'hex', value: '339900', css: '#339900'}, {mode: 'hex', value: '33cc00', css: '#33cc00'}, {mode: 'hex', value: '33ff00', css: '#33ff00'}, {mode: 'hex', value: '660000', css: '#660000'}, {mode: 'hex', value: '663300', css: '#663300'}, {mode: 'hex', value: '666600', css: '#666600'}, {mode: 'hex', value: '669900', css: '#669900'}, {mode: 'hex', value: '66cc00', css: '#66cc00'}, {mode: 'hex', value: '66ff00', css: '#66ff00'},
{mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000033', css: '#000033'}, {mode: 'hex', value: '003333', css: '#003333'}, {mode: 'hex', value: '006633', css: '#006633'}, {mode: 'hex', value: '009933', css: '#009933'}, {mode: 'hex', value: '00cc33', css: '#00cc33'}, {mode: 'hex', value: '00ff33', css: '#00ff33'}, {mode: 'hex', value: '330033', css: '#330033'}, {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '336633', css: '#336633'}, {mode: 'hex', value: '339933', css: '#339933'}, {mode: 'hex', value: '33cc33', css: '#33cc33'}, {mode: 'hex', value: '33ff33', css: '#33ff33'}, {mode: 'hex', value: '660033', css: '#660033'}, {mode: 'hex', value: '663333', css: '#663333'}, {mode: 'hex', value: '666633', css: '#666633'}, {mode: 'hex', value: '669933', css: '#669933'}, {mode: 'hex', value: '66cc33', css: '#66cc33'}, {mode: 'hex', value: '66ff33', css: '#66ff33'},
{mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000066', css: '#000066'}, {mode: 'hex', value: '003366', css: '#003366'}, {mode: 'hex', value: '006666', css: '#006666'}, {mode: 'hex', value: '009966', css: '#009966'}, {mode: 'hex', value: '00cc66', css: '#00cc66'}, {mode: 'hex', value: '00ff66', css: '#00ff66'}, {mode: 'hex', value: '330066', css: '#330066'}, {mode: 'hex', value: '333366', css: '#333366'}, {mode: 'hex', value: '336666', css: '#336666'}, {mode: 'hex', value: '339966', css: '#339966'}, {mode: 'hex', value: '33cc66', css: '#33cc66'}, {mode: 'hex', value: '33ff66', css: '#33ff66'}, {mode: 'hex', value: '660066', css: '#660066'}, {mode: 'hex', value: '663366', css: '#663366'}, {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '669966', css: '#669966'}, {mode: 'hex', value: '66cc66', css: '#66cc66'}, {mode: 'hex', value: '66ff66', css: '#66ff66'},
@@ -369,11 +349,10 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
drawGradient: {
- enumerable: true,
value: function (g) {
//TODO: Remove container, insert in reel
var container = document.createElement('div'), gradient = GradientPicker.create();
- this.element._popups.containers.gradient.appendChild(container);
+ this.gradients.appendChild(container);
//Creating gradient picker from components
gradient.element = container;
gradient.hack = this.hack; // TODO: Remove
@@ -403,13 +382,11 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
defaultGradient: {
- enumerable: true,
value: {mode: 'linear', gradientMode: 'linear', stops: [{mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}, position: 0}, {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}, position: 100}]}
},
////////////////////////////////////////////////////////////////////
//
alphaChange: {
- enumerable: false,
value: function (e) {
if (!e._event.wasSetByCode) {
var update = {value: this.element._components.combo.slider.value/100, wasSetByCode: false, type: 'change'};
@@ -420,7 +397,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
handleChange: {
- enumerable: false,
value: function (e) {
this.dispatchEvent(e._event);
}
@@ -428,7 +404,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
handleChanging: {
- enumerable: false,
value: function (e) {
this.dispatchEvent(e._event);
}
@@ -436,7 +411,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
_handleWheelEvent: {
- enumerable: false,
value: function (e) {
if (!e._event.wasSetByCode) {
//
@@ -448,7 +422,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//Garbage collection (Manual method)
destroy: {
- enumerable: false,
value: function() {
//
this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]);
--
cgit v1.2.3
From 118fda42958e4dcf6d2cdbb58eb31cbc08e6ce91 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Wed, 13 Jun 2012 15:29:18 -0700
Subject: Fix: IKNINJA-1608
Changing icon, seems low res and improper size, should be hi-res PNG for future reference, using negative space offset to better display.
---
.../color/colorpanelpopup.reel/css/colorpanelpopup.css | 2 +-
.../color/colorpanelpopup.reel/css/colorpanelpopup.scss | 2 +-
.../color/colorpanelpopup.reel/img/icon_palette.jpg | Bin 0 -> 1352 bytes
3 files changed, 2 insertions(+), 2 deletions(-)
create mode 100644 js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg
(limited to 'js/panels/color/colorpanelpopup.reel')
diff --git a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css
index 4db0abff..3ffcd2f5 100755
--- a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css
+++ b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css
@@ -56,7 +56,7 @@
/* line 62, colorpanelpopup.scss */
.cp_pu_palettes {
- background: #000;
+ background: url(../img/icon_palette.jpg) no-repeat black -1px -1px;
}
/* line 67, colorpanelpopup.scss */
diff --git a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss
index 1f63658a..cd9f47a2 100755
--- a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss
+++ b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss
@@ -60,7 +60,7 @@ $grey_light: #494949;
.cp_pu_palettes
{
- background: #000;
+ background: url(../img/icon_palette.jpg) no-repeat #000 -1px -1px;
}
.cp_pu_nocolor
diff --git a/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg b/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg
new file mode 100644
index 00000000..1ea9ac4a
Binary files /dev/null and b/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg differ
--
cgit v1.2.3
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(-)
(limited to 'js/panels/color/colorpanelpopup.reel')
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index 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 @@
-
-
+
+
-
#
+
#
-
-
-
-
-
+
+
+
+
+
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/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
(limited to 'js/panels/color/colorpanelpopup.reel')
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 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);
}
}
}
--
cgit v1.2.3
From 69f69c7bf43bdd9a80d8efe329cd648f975f14e9 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 18 Jun 2012 16:28:18 -0700
Subject: Fixing binding of alpha slider/hottext in popup with panel
---
js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 10 +---------
1 file changed, 1 insertion(+), 9 deletions(-)
(limited to 'js/panels/color/colorpanelpopup.reel')
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index ded06797..192c62fb 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -76,7 +76,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
this._components.combo.slider.element = this.alphaSlider;
this._components.combo.hottext.element = this.alphaHottext;
//
- Object.defineBinding(this._components.combo.hottext, "_value", {
+ Object.defineBinding(this._components.combo.hottext, "value", {
boundObject: this._components.combo.slider,
boundObjectPropertyPath: "value",
oneway: false,
@@ -85,14 +85,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
}
});
//
- Object.defineBinding(this._components.combo.hottext, "value", {
- boundObject: this._components.combo.slider,
- boundObjectPropertyPath: "value",
- oneway: false,
- boundValueMutator: function(value) {
- return Math.round(value);
- }
- });
if (this.application.ninja.colorController.colorView) {
Object.defineBinding(this._components.combo.slider, "value", {
boundObject: this.application.ninja.colorController.colorView._combo[3].slider,
--
cgit v1.2.3