aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html33
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js113
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 @@
21 "images": {"#": "cntnr_images"}, 21 "images": {"#": "cntnr_images"},
22 "gradients": {"#": "cntnr_gradients"}, 22 "gradients": {"#": "cntnr_gradients"},
23 "palettes": {"#": "cntnr_palettes"}, 23 "palettes": {"#": "cntnr_palettes"},
24 "alpha": {"#": "cntnr_alpha"} 24 "alpha": {"#": "cntnr_alpha"},
25 "alphaSlider": {"#": "alpha_slider"},
26 "alphaHottext": {"#": "alpha_hottext"},
27 "btnPrevious": {"#": "btn_previous"},
28 "btnCurrent": {"#": "btn_current"},
29 "btnWheel": {"#": "btn_wheel"},
30 "btnImage": {"#": "btn_images"},
31 "btnGradient": {"#": "btn_gradients"},
32 "btnPalette": {"#": "btn_palettes"},
33 "btnNocolor": {"#": "btn_nocolor"},
34 "inputHex": {"#": "input_hex"}
35
25 } 36 }
26 } 37 }
27 } 38 }
@@ -36,18 +47,18 @@
36 47
37 <div class="cp_pu_history"> 48 <div class="cp_pu_history">
38 49
39 <button class="cp_pu_color_previous">Previous Color</button> 50 <button data-montage-id="btn_previous" class="cp_pu_color_previous">Previous Color</button>
40 <button class="cp_pu_color_current">Current Color</button> 51 <button data-montage-id="btn_current" class="cp_pu_color_current">Current Color</button>
41 52
42 </div> 53 </div>
43 54
44 <div class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div> 55 <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
45 56
46 <button class="cp_pu_wheel" title="Color Wheel">Color Wheel</button> 57 <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
47 <button class="cp_pu_images" title="Background Image">Images</button> 58 <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
48 <button class="cp_pu_gradients" title="Gradient">Gradients</button> 59 <button data-montage-id="btn_gradients" class="cp_pu_gradients" title="Gradient">Gradients</button>
49 <button class="cp_pu_palettes" title="Color Palette">Palettes</button> 60 <button data-montage-id="btn_palettes" class="cp_pu_palettes" title="Color Palette">Palettes</button>
50 <button class="cp_pu_nocolor" title="No Color">No Color</button> 61 <button data-montage-id="btn_nocolor" class="cp_pu_nocolor" title="No Color">No Color</button>
51 62
52 </div> 63 </div>
53 64
@@ -60,8 +71,8 @@
60 71
61 <div data-montage-id="cntnr_alpha" class="cp_pu_alpha"> 72 <div data-montage-id="cntnr_alpha" class="cp_pu_alpha">
62 <div class="cp_pu_a_label">Alpha</div> 73 <div class="cp_pu_a_label">Alpha</div>
63 <div class="cp_pu_a_slider"></div> 74 <div data-montage-id="alpha_slider" class="cp_pu_a_slider"></div>
64 <input class="cp_pu_a_hottext"/> 75 <input data-montage-id="alpha_hottext" class="cp_pu_a_hottext"/>
65 <div class="cp_pu_a_label2">%</div> 76 <div class="cp_pu_a_label2">%</div>
66 </div> 77 </div>
67 78
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, {
23 //////////////////////////////////////////////////////////////////// 23 ////////////////////////////////////////////////////////////////////
24 //Storing color manager 24 //Storing color manager
25 _colorManager: { 25 _colorManager: {
26 value: false 26 value: null
27 }, 27 },
28 //////////////////////////////////////////////////////////////////// 28 ////////////////////////////////////////////////////////////////////
29 //Color manager 29 //Color manager
30 colorManager: { 30 colorManager: {
31 get: function() { 31 get: function() {return this._colorManager;},
32 return this._colorManager; 32 set: function(value) {if (value !== this._colorManager) this._colorManager = value;}
33 },
34 set: function(value) {
35 if (value !== this._colorManager) {
36 this._colorManager = value;
37 }
38 }
39 }, 33 },
40 //////////////////////////////////////////////////////////////////// 34 ////////////////////////////////////////////////////////////////////
41 //Storing color panel 35 //Storing color panel
@@ -45,18 +39,19 @@ exports.ColorPanelPopup = Montage.create(Component, {
45 //////////////////////////////////////////////////////////////////// 39 ////////////////////////////////////////////////////////////////////
46 //Color panel 40 //Color panel
47 colorPanel: { 41 colorPanel: {
48 get: function() { 42 get: function() {return this._colorPanel;},
49 return this._colorPanel; 43 set: function(value) {this._colorPanel = value;}
50 }, 44 },
51 set: function(value) { 45 ////////////////////////////////////////////////////////////////////
52 this._colorPanel = value; 46 //
53 } 47 _components: {
48 value: null
54 }, 49 },
55 //////////////////////////////////////////////////////////////////// 50 ////////////////////////////////////////////////////////////////////
56 // 51 //
57 setNoColor: { 52 setNoColor: {
58 value: function (e) { 53 value: function (e) {
59 this.colorManager.applyNoColor(); 54 if (this.colorManager) this.colorManager.applyNoColor();
60 } 55 }
61 }, 56 },
62 //////////////////////////////////////////////////////////////////// 57 ////////////////////////////////////////////////////////////////////
@@ -64,7 +59,8 @@ exports.ColorPanelPopup = Montage.create(Component, {
64 prepareForDraw: { 59 prepareForDraw: {
65 value: function () { 60 value: function () {
66 // 61 //
67 this.element._components = {wheel: null, combo: null}; 62 this._components = null;
63 this._components = {wheel: null, combo: null};
68 } 64 }
69 }, 65 },
70 //////////////////////////////////////////////////////////////////// 66 ////////////////////////////////////////////////////////////////////
@@ -74,14 +70,14 @@ exports.ColorPanelPopup = Montage.create(Component, {
74 // 70 //
75 this.element.style.opacity = 0; 71 this.element.style.opacity = 0;
76 // 72 //
77 this.element._components.combo = {}; 73 this._components.combo = {};
78 this.element._components.combo.slider = Slider.create(); 74 this._components.combo.slider = Slider.create();
79 this.element._components.combo.hottext = HotText.create(); 75 this._components.combo.hottext = HotText.create();
80 this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0]; 76 this._components.combo.slider.element = this.alphaSlider;
81 this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0]; 77 this._components.combo.hottext.element = this.alphaHottext;
82 // 78 //
83 Object.defineBinding(this.element._components.combo.hottext, "_value", { 79 Object.defineBinding(this._components.combo.hottext, "_value", {
84 boundObject: this.element._components.combo.slider, 80 boundObject: this._components.combo.slider,
85 boundObjectPropertyPath: "value", 81 boundObjectPropertyPath: "value",
86 oneway: false, 82 oneway: false,
87 boundValueMutator: function(value) { 83 boundValueMutator: function(value) {
@@ -89,8 +85,8 @@ exports.ColorPanelPopup = Montage.create(Component, {
89 } 85 }
90 }); 86 });
91 // 87 //
92 Object.defineBinding(this.element._components.combo.hottext, "value", { 88 Object.defineBinding(this._components.combo.hottext, "value", {
93 boundObject: this.element._components.combo.slider, 89 boundObject: this._components.combo.slider,
94 boundObjectPropertyPath: "value", 90 boundObjectPropertyPath: "value",
95 oneway: false, 91 oneway: false,
96 boundValueMutator: function(value) { 92 boundValueMutator: function(value) {
@@ -98,7 +94,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
98 } 94 }
99 }); 95 });
100 if (this.application.ninja.colorController.colorView) { 96 if (this.application.ninja.colorController.colorView) {
101 Object.defineBinding(this.element._components.combo.slider, "value", { 97 Object.defineBinding(this._components.combo.slider, "value", {
102 boundObject: this.application.ninja.colorController.colorView._combo[3].slider, 98 boundObject: this.application.ninja.colorController.colorView._combo[3].slider,
103 boundObjectPropertyPath: "value", 99 boundObjectPropertyPath: "value",
104 oneway: false, 100 oneway: false,
@@ -108,25 +104,26 @@ exports.ColorPanelPopup = Montage.create(Component, {
108 }); 104 });
109 } 105 }
110 // 106 //
111 this.element._components.combo.slider.maxValue = this.element._components.combo.hottext.maxValue = 100; 107 this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100;
108 //
112 if (this.application.ninja.colorController.colorView) { 109 if (this.application.ninja.colorController.colorView) {
113 this.element._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); 110 this._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView);
114 } 111 }
115 // 112 //
116 this.element._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true);