diff options
author | Eric Guzman | 2012-06-19 01:20:36 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-19 01:20:36 -0700 |
commit | 2ef72cdf0e59fb3623a2c13251ac707522f3dc5a (patch) | |
tree | f69f4e3de7e4441311ef2b38770e0ce26067aac4 /js/panels/color/colorpanelpopup.reel | |
parent | 5260d3dfd99d79924c4aaa3ab798e90c7d328d7d (diff) | |
parent | 1007cbf983ad0f2460a4122a492a96023fdb4439 (diff) | |
download | ninja-2ef72cdf0e59fb3623a2c13251ac707522f3dc5a.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Conflicts:
js/stage/binding-view.reel/binding-view.js
Diffstat (limited to 'js/panels/color/colorpanelpopup.reel')
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 48 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 204 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css | 2 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss | 2 | ||||
-rw-r--r-- | js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg | bin | 0 -> 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.e |