diff options
author | Jose Antonio Marquez | 2012-06-16 18:44:35 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-06-16 18:44:35 -0700 |
commit | 60bc2ff4b617ec6bbb3506770401f0adef60671d (patch) | |
tree | 1ff5fc30a0f59008ec79616744f556a7d5c3d466 /js | |
parent | ddedee035553f607a72ce34b26736cca5b8e1aae (diff) | |
download | ninja-60bc2ff4b617ec6bbb3506770401f0adef60671d.tar.gz |
Fixed slider/hottext bindings
Also cleaning up, however, needs much refactoring.
Diffstat (limited to 'js')
-rwxr-xr-x | js/panels/color/colorpanelbase.reel/colorpanelbase.html | 77 | ||||
-rwxr-xr-x | js/panels/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 @@ | |||
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 |