aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color/colorpanelpopup.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel')
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html48
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js204
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css2
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss2
-rw-r--r--js/panels/color/colorpanelpopup.reel/img/icon_palette.jpgbin0 -> 1352 bytes
5 files changed, 117 insertions, 139 deletions
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index f65d5bc0..596580b4 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -16,7 +16,23 @@
16 "owner": { 16 "owner": {
17 "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]", 17 "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]",
18 "properties": { 18 "properties": {
19 "element": {"#": "cpp_popup"} 19 "element": {"#": "cpp_popup"},
20 "wheel": {"#": "cntnr_wheel"},
21 "images": {"#": "cntnr_images"},
22 "gradients": {"#": "cntnr_gradients"},
23 "palettes": {"#": "cntnr_palettes"},
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
20 } 36 }
21 } 37 }
22 } 38 }
@@ -31,32 +47,32 @@
31 47
32 <div class="cp_pu_history"> 48 <div class="cp_pu_history">
33 49
34 <button class="cp_pu_color_previous">Previous Color</button> 50 <button data-montage-id="btn_previous" class="cp_pu_color_previous">Previous Color</button>
35 <button class="cp_pu_color_current">Current Color</button> 51 <button data-montage-id="btn_current" class="cp_pu_color_current">Current Color</button>
36 52
37 </div> 53 </div>
38 54
39 <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>
40 56
41 <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>
42 <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>
43 <button class="cp_pu_gradients" title="Gradient">Gradients</button> 59 <button data-montage-id="btn_gradients" class="cp_pu_gradients" title="Gradient">Gradients</button>
44 <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>
45 <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>
46 62
47 </div> 63 </div>
48 64
49 <div class="cp_pu_content"> 65 <div class="cp_pu_content">
50 <div class="cp_pu_wheel_container cp_pu_content_container"></div> 66 <div data-montage-id="cntnr_wheel" class="cp_pu_wheel_container cp_pu_content_container"></div>
51 <div class="cp_pu_gradient_container cp_pu_content_container"></div> 67 <div data-montage-id="cntnr_gradients" class="cp_pu_gradient_container cp_pu_content_container"></div>
52 <div class="cp_pu_palette_container cp_pu_content_container"></div> 68 <div data-montage-id="cntnr_palettes" class="cp_pu_palette_container cp_pu_content_container"></div>
53 <div class="cp_pu_image_container cp_pu_content_container"></div> 69 <div data-montage-id="cntnr_images" class="cp_pu_image_container cp_pu_content_container"></div>
54 </div> 70 </div>
55 71
56 <div class="cp_pu_alpha"> 72 <div data-montage-id="cntnr_alpha" class="cp_pu_alpha">
57 <div class="cp_pu_a_label">Alpha</div> 73 <div class="cp_pu_a_label">Alpha</div>
58 <div class="cp_pu_a_slider"></div> 74 <div data-montage-id="alpha_slider" class="cp_pu_a_slider"></div>
59 <input class="cp_pu_a_hottext"/> 75 <input data-montage-id="alpha_hottext" class="cp_pu_a_hottext"/>
60 <div class="cp_pu_a_label2">%</div> 76 <div class="cp_pu_a_label2">%</div>
61 </div> 77 </div>
62 78
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index dd7e6192..192c62fb 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -23,79 +23,61 @@ exports.ColorPanelPopup = Montage.create(Component, {
23 //////////////////////////////////////////////////////////////////// 23 ////////////////////////////////////////////////////////////////////
24 //Storing color manager 24 //Storing color manager
25 _colorManager: { 25 _colorManager: {
26 enumerable: false, 26 value: null
27 value: false
28 }, 27 },
29 //////////////////////////////////////////////////////////////////// 28 ////////////////////////////////////////////////////////////////////
30 //Color manager 29 //Color manager
31 colorManager: { 30 colorManager: {
32 enumerable: true, 31 get: function() {return this._colorManager;},
33 get: function() { 32 set: function(value) {if (value !== this._colorManager) this._colorManager = value;}
34 return this._colorManager;
35 },
36 set: function(value) {
37 if (value !== this._colorManager) {
38 this._colorManager = value;
39 }
40 }
41 }, 33 },
42 //////////////////////////////////////////////////////////////////// 34 ////////////////////////////////////////////////////////////////////
43 //Storing color panel 35 //Storing color panel
44 _colorPanel: { 36 _colorPanel: {
45 enumerable: false,
46 value: false 37 value: false
47 }, 38 },
48 //////////////////////////////////////////////////////////////////// 39 ////////////////////////////////////////////////////////////////////
49 //Color panel 40 //Color panel
50 colorPanel: { 41 colorPanel: {
51 enumerable: true, 42 get: function() {return this._colorPanel;},
52 get: function() { 43 set: function(value) {this._colorPanel = value;}
53 return this._colorPanel; 44 },
54 }, 45 ////////////////////////////////////////////////////////////////////
55 set: function(value) { 46 //
56 this._colorPanel = value; 47 _components: {
57 } 48 value: null
58 }, 49 },
59 //////////////////////////////////////////////////////////////////// 50 ////////////////////////////////////////////////////////////////////
60 // 51 //
61 setNoColor: { 52 setNoColor: {
62 enumerable: true, 53 value: function (code) {
63 value: function (e) { 54 if (this.colorManager) this.colorManager.applyNoColor(code);
64 this.colorManager.applyNoColor();
65 } 55 }
66 }, 56 },
67 //////////////////////////////////////////////////////////////////// 57 ////////////////////////////////////////////////////////////////////
68 // 58 //
69 prepareForDraw: { 59 prepareForDraw: {
70 enumerable: false,
71 value: function () { 60 value: function () {
72 // 61 //
73 this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}}; 62 this._components = null;
74 this.element._components = {wheel: null, combo: null}; 63 this._components = {wheel: null, combo: null};
75 //Storing containers for reference
76 this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
77 this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
78 this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
79 this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
80 this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
81 } 64 }
82 }, 65 },
83 //////////////////////////////////////////////////////////////////// 66 ////////////////////////////////////////////////////////////////////
84 // 67 //
85 willDraw: { 68 willDraw: {
86 enumerable: false,
87 value: function() { 69 value: function() {
88 // 70 //
89 this.element.style.opacity = 0; 71 this.element.style.opacity = 0;
90 // 72 //
91 this.element._components.combo = {}; 73 this._components.combo = {};
92 this.element._components.combo.slider = Slider.create(); 74 this._components.combo.slider = Slider.create();
93 this.element._components.combo.hottext = HotText.create(); 75 this._components.combo.hottext = HotText.create();
94 this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0]; 76 this._components.combo.slider.element = this.alphaSlider;
95 this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0]; 77 this._components.combo.hottext.element = this.alphaHottext;
96 // 78 //
97 Object.defineBinding(this.