aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.html77
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js160
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 @@
15 "owner": { 15 "owner": {
16 "prototype": "js/panels/Color/ColorPanelBase.reel", 16 "prototype": "js/panels/Color/ColorPanelBase.reel",
17 "properties": { 17 "properties": {
18 "element": {"#": "cp_expanded"} 18 "element": {"#": "cp_expanded"},
19 "btnCurrent": {"#": "btn_current"},
20 "btnPrevious": {"#": "btn_previous"},
21 "btnRgbMode": {"#": "btn_rgb"},
22 "btnHslMode": {"#": "btn_hsl"},
23 "btnStroke": {"#": "btn_stroke"},
24 "btnStrokeIcon": {"#": "btn_istoke"},
25 "btnFill": {"#": "btn_fill"},
26 "btnFillIcon": {"#": "btn_ifill"},
27 "btnDefault": {"#": "btn_default"},
28 "btnNoColor": {"#": "btn_nocolor"},
29 "btnSwap": {"#": "btn_swap"},
30 "label1": {"#": "label1"},
31 "label2": {"#": "label2"},
32 "label3": {"#": "label3"},
33 "label4": {"#": "label4"},
34 "slider1": {"#": "slider1"},
35 "slider2": {"#": "slider2"},
36 "slider3": {"#": "slider3"},
37 "slider4": {"#": "slider4"},
38 "hottext1": {"#": "hottext1"},
39 "hottext2": {"#": "hottext2"},
40 "hottext3": {"#": "hottext3"},
41 "hottext4": {"#": "hottext4"},
42 "hextext": {"#": "hextext"},
43 "spectrum": {"#": "spectrum"}
19 } 44 }
20 } 45 }
21 46
@@ -28,46 +53,46 @@
28 53
29 <div data-montage-id="cp_expanded" class="cp_expanded"> 54 <div data-montage-id="cp_expanded" class="cp_expanded">
30 <div class="cp_history"> 55 <div class="cp_history">
31 <button class="cp_color_current">Current Color</button> 56 <button data-montage-id="btn_current" class="cp_color_current">Current Color</button>
32 <button class="cp_color_previous">Previous Color</button> 57 <button data-montage-id="btn_previous" class="cp_color_previous">Previous Color</button>
33 </div> 58 </div>
34 <div class="cp_modes"> 59 <div class="cp_modes">
35 <button class="cp_rgb_mode">RGB</button> 60 <button data-montage-id="btn_rgb" class="cp_rgb_mode">RGB</button>
36 <hr /> 61 <hr />
37 <button class="cp_hsl_mode">HSL</button> 62 <button data-montage-id="btn_hsl" class="cp_hsl_mode">HSL</button>
38 </div> 63 </div>
39 <hr /> 64 <hr />
40 <div class="cp_inputs"> 65 <div class="cp_inputs">
41 <div class="cp_input_button"><button class="cpe_stroke">Stroke</button></div> 66 <div class="cp_input_button"><button data-montage-id="btn_stroke" class="cpe_stroke">Stroke</button></div>
42 <button class="cpe_stroke_icon"></button> 67 <button data-montage-id="btn_istoke" class="cpe_stroke_icon"></button>
43 <div class="cp_input_button"><button class="cpe_fill">Fill</button></div> 68 <div class="cp_input_button"><button data-montage-id="btn_fill" class="cpe_fill">Fill</button></div>
44 <button class="cpe_fill_icon"></button> 69 <button data-montage-id="btn_ifill" class="cpe_fill_icon"></button>
45 </div> 70 </div>
46 <div class="cp_options"> 71 <div class="cp_options">
47 <button class="cp_reset">Default Colors</button> 72 <button data-montage-id="btn_default" class="cp_reset">Default Colors</button>
48 <button class="cp_nocolor">No Color</button> 73 <button data-montage-id="btn_nocolor" class="cp_nocolor">No Color</button>
49 <button class="cp_swap">Swap Colors</button> 74 <button data-montage-id="btn_swap" class="cp_swap">Swap Colors</button>
50 </div> 75 </div>
51 <div class="cp_labels"> 76 <div class="cp_labels">
52 <div class="sh_label1">R</div> 77 <div data-montage-id="label1" class="sh_label1">R</div>
53 <div class="sh_label2">G</div> 78 <div data-montage-id="label2" class="sh_label2">G</div>
54 <div class="sh_label3">B</div> 79 <div data-montage-id="label3" class="sh_label3">B</div>
55 <div class="sh_label4">A</div> 80 <div data-montage-id="label4" class="sh_label4">A</div>
56 </div> 81 </div>
57 <div class="cp_sliders"> 82 <div class="cp_sliders">
58 <div class="cp_slider1"></div> 83 <div data-montage-id="slider1" class="cp_slider1"></div>
59 <div class="cp_slider2"></div> 84 <div data-montage-id="slider2" class="cp_slider2"></div>
60 <div class="cp_slider3"></div> 85 <div data-montage-id="slider3" class="cp_slider3"></div>
61 <div class="cp_slider4"></div> 86 <div data-montage-id="slider4" class="cp_slider4"></div>
62 </div> 87 </div>
63 <div class="cp_hottext"> 88 <div class="cp_hottext">
64 <input class="cp_hottext1"/> 89 <input data-montage-id="hottext1" class="cp_hottext1"/>
65 <input class="cp_hottext2"/> 90 <input data-montage-id="hottext2" class="cp_hottext2"/>
66 <input class="cp_hottext3"/> 91 <input data-montage-id="hottext3" class="cp_hottext3"/>
67 <input class="cp_hottext4"/> 92 <input data-montage-id="hottext4" class="cp_hottext4"/>
68 </div> 93 </div>
69 <div class="cp_hex">#<input class="cp_hottext5" maxlength="6" /></div> 94 <div class="cp_hex">#<input data-montage-id="hextext" class="cp_hottext5" maxlength="6" /></div>
70 <div class="cp_spectrum"></div> 95 <div class="cp_spectrum" data-montage-id="spectrum"></div>
71 </div> 96 </div>
72 97
73 </body> 98 </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, {
23 //////////////////////////////////////////////////////////////////// 23 ////////////////////////////////////////////////////////////////////
24 //Storing ColorPanel sliders mode 24 //Storing ColorPanel sliders mode
25 _panelMode: { 25 _panelMode: {
26 enumerable: false, 26 value: 'rgb'
27 value: 'rgb'
28 }, 27 },
29 //////////////////////////////////////////////////////////////////// 28 ////////////////////////////////////////////////////////////////////
30 //Storing ColorPanel sliders mode 29 //Storing ColorPanel sliders mode
31 panelMode: { 30 panelMode: {
32 enumerable: true, 31 get: function () {return this._panelMode;},
33 get: function () { 32 set: function (value) {if (value !== this._panelMode)this._panelMode = value;}
34 return this._panelMode;
35 },
36 set: function (value) {
37 if (value !== this._panelMode) {
38 this._panelMode = value;
39 }
40 }
41 }, 33 },
42 //////////////////////////////////////////////////////////////////// 34 ////////////////////////////////////////////////////////////////////
43 // 35 //
44 _colorBar: { 36 _colorBar: {
45 enumerable: false,
46 value: null 37 value: null
47 }, 38 },
48 //////////////////////////////////////////////////////////////////// 39 ////////////////////////////////////////////////////////////////////
49 //Storing color manager 40 //Storing color manager
50 _colorManager: { 41 _colorManager: {
51 enumerable: false,
52 value: null 42 value: null
53 }, 43 },
54 //////////////////////////////////////////////////////////////////// 44 ////////////////////////////////////////////////////////////////////
55 // 45 //
56 colorManager: { 46 colorManager: {
57 enumerable: true, 47 get: function () {return this._colorManager;},
58 get: function () {
59 return this._colorManager;
60 },
61 set: function (value) { 48 set: function (value) {
62 if (value !== this._colorManager) { 49 if (value !== this._colorManager) {
63 this._colorManager = value; 50 this._colorManager = value;
@@ -72,60 +59,41 @@ exports.ColorPanelBase = Montage.create(Component, {
72 //////////////////////////////////////////////////////////////////// 59 ////////////////////////////////////////////////////////////////////
73 //Color Panel Container 60 //Color Panel Container
74 _container: { 61 _container: {
75 enumerable: false,
76 value: null 62 value: null
77 }, 63 },
78 //////////////////////////////////////////////////////////////////// 64 ////////////////////////////////////////////////////////////////////
79 // 65 //
80 _combo: { 66 _combo: {
81 enumerable: false,
82 value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}] 67 value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}]
83 }, 68 },
84 //////////////////////////////////////////////////////////////////// 69 ////////////////////////////////////////////////////////////////////
85 // 70 //
86 _buttons: { 71 _buttons: {
87 enumerable: false,
88 value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] } 72 value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] }
89 }, 73 },
90 //////////////////////////////////////////////////////////////////// 74 ////////////////////////////////////////////////////////////////////
91 // 75 //
92 historyCache: {