diff options
Diffstat (limited to 'js/components')
-rwxr-xr-x | js/components/radio.reel/radio.html | 9 | ||||
-rwxr-xr-x | js/components/radio.reel/radio.js | 24 | ||||
-rwxr-xr-x | js/components/ui/color-chip.reel/color-chip.js | 13 | ||||
-rwxr-xr-x | js/components/ui/file-input.reel/file-input.js | 2 | ||||
-rwxr-xr-x | js/components/ui/input-group.reel/input-group.html | 3 | ||||
-rwxr-xr-x | js/components/ui/property-control.reel/property-control.js | 12 |
6 files changed, 46 insertions, 17 deletions
diff --git a/js/components/radio.reel/radio.html b/js/components/radio.reel/radio.html index 01b76b92..cee4c369 100755 --- a/js/components/radio.reel/radio.html +++ b/js/components/radio.reel/radio.html | |||
@@ -11,13 +11,18 @@ | |||
11 | "owner": { | 11 | "owner": { |
12 | "prototype": "js/components/radio.reel", | 12 | "prototype": "js/components/radio.reel", |
13 | "properties": { | 13 | "properties": { |
14 | "element": {"#": "ch_comp"} | 14 | "element": {"#": "radio_comp"}, |
15 | "labelField": {"#": "labelField"}, | ||
16 | "radioField": {"#": "radioField"} | ||
15 | } | 17 | } |
16 | } | 18 | } |
17 | } | 19 | } |
18 | </script> | 20 | </script> |
19 | </head> | 21 | </head> |
20 | <body> | 22 | <body> |
21 | <input data-montage-id="ch_comp" class="nj-skinned" type="radio"> | 23 | <div data-montage-id="radio_comp"> |
24 | <input data-montage-id="radioField" class="nj-skinned" type="radio"> | ||
25 | <label data-montage-id="labelField" class="nj-skinned"></label> | ||
26 | </div> | ||
22 | </body> | 27 | </body> |
23 | </html> \ No newline at end of file | 28 | </html> \ No newline at end of file |
diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js index c661ec11..cec4f52e 100755 --- a/js/components/radio.reel/radio.js +++ b/js/components/radio.reel/radio.js | |||
@@ -62,7 +62,7 @@ exports.RadioGroup = Montage.create(Component, { | |||
62 | { | 62 | { |
63 | value:function(radio) | 63 | value:function(radio) |
64 | { | 64 | { |
65 | radio.element.setAttribute("name", this.name); | 65 | radio.radioField.setAttribute("name", this.name); |
66 | radio.addEventListener("change", this, false); | 66 | radio.addEventListener("change", this, false); |
67 | this.radios.push(radio); | 67 | this.radios.push(radio); |
68 | } | 68 | } |
@@ -104,6 +104,14 @@ exports.Radio = Montage.create(Component, { | |||
104 | value: null | 104 | value: null |
105 | }, | 105 | }, |
106 | 106 | ||
107 | labelField: { | ||
108 | value: null | ||
109 | }, | ||
110 | |||
111 | radioField: { | ||
112 | value: null | ||
113 | }, | ||
114 | |||
107 | _checked: { | 115 | _checked: { |
108 | enumerable: false, | 116 | enumerable: false, |
109 | value: false | 117 | value: false |
@@ -140,13 +148,13 @@ exports.Radio = Montage.create(Component, { | |||
140 | { | 148 | { |
141 | this._valueSyncedWithInputField = true; | 149 | this._valueSyncedWithInputField = true; |
142 | this._wasSetByCode = false; | 150 | this._wasSetByCode = false; |
143 | this.checked = this.element.checked; | 151 | this.checked = this.radioField.checked; |
144 | } | 152 | } |
145 | }, | 153 | }, |
146 | handleClick: { | 154 | handleClick: { |
147 | value: function() { | 155 | value: function() { |
148 | this._wasSetByCode = false; | 156 | this._wasSetByCode = false; |
149 | this.checked = !this.element.checked; | 157 | this.checked = !this.radioField.checked; |
150 | } | 158 | } |
151 | }, | 159 | }, |
152 | 160 | ||
@@ -154,7 +162,7 @@ exports.Radio = Montage.create(Component, { | |||
154 | value: function() { | 162 | value: function() { |
155 | if(!this._valueSyncedWithInputField) | 163 | if(!this._valueSyncedWithInputField) |
156 | { | 164 | { |
157 | this.element.checked = this._checked; | 165 | this.radioField.checked = this._checked; |
158 | } | 166 | } |
159 | this._valueSyncedWithInputField = false; | 167 | this._valueSyncedWithInputField = false; |
160 | } | 168 | } |
@@ -163,15 +171,13 @@ exports.Radio = Montage.create(Component, { | |||
163 | prepareForDraw: { | 171 | prepareForDraw: { |
164 | value: function() { | 172 | value: function() { |
165 | if (this.label !== null) { | 173 | if (this.label !== null) { |
166 | var b = document.createElement("label"); | 174 | this.labelField.innerHTML = this.label; |
167 | b.innerHTML = this.label; | ||
168 | this.element.appendChild(b); | ||
169 | b.addEventListener("click", this, false); | ||
170 | } | 175 | } |
176 | this.element.addEventListener("click", this, false); | ||
171 | if (this.group !== null) { | 177 | if (this.group !== null) { |
172 | this.group.addRadio(this); | 178 | this.group.addRadio(this); |
173 | } | 179 | } |
174 | this.element.addEventListener("change", this, false); | 180 | this.radioField.addEventListener("change", this, false); |
175 | } | 181 | } |
176 | } | 182 | } |
177 | 183 | ||
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 4e64b2e8..630dcd4b 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js | |||
@@ -33,6 +33,11 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { | |||
33 | value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} | 33 | value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} |
34 | }, | 34 | }, |
35 | 35 | ||
36 | chipBtn: { | ||
37 | serializable: true, | ||
38 | value: null | ||
39 | }, | ||
40 | |||
36 | changeDelegate: { | 41 | changeDelegate: { |
37 | value: function(event) { | 42 | value: function(event) { |
38 | this.color = event._event.color; | 43 | this.color = event._event.color; |
@@ -60,7 +65,7 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { | |||
60 | this.icon.style.display = "none"; | 65 | this.icon.style.display = "none"; |
61 | } | 66 | } |
62 | 67 | ||
63 | this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset}; | 68 | this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, nocolor: true, offset: this.offset}; |
64 | this.application.ninja.colorController.addButton(this.mode, this.chipBtn); | 69 | this.application.ninja.colorController.addButton(this.mode, this.chipBtn); |
65 | 70 | ||
66 | } | 71 | } |
@@ -80,9 +85,13 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { | |||
80 | b = colorObj.value.b; | 85 | b = colorObj.value.b; |
81 | a = colorObj.value.a; | 86 | a = colorObj.value.a; |
82 | css = colorObj.css; | 87 | css = colorObj.css; |
88 | this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); | ||
89 | } else { | ||
90 | mode = "nocolor"; | ||
91 | this.chipBtn.color(mode, null); | ||
92 | |||
83 | } | 93 | } |
84 | 94 | ||
85 | this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); | ||
86 | this.chipBtn.addEventListener("change", this, false); | 95 | this.chipBtn.addEventListener("change", this, false); |
87 | } | 96 | } |
88 | } | 97 | } |
diff --git a/js/components/ui/file-input.reel/file-input.js b/js/components/ui/file-input.reel/file-input.js index b57f7c21..584380ec 100755 --- a/js/components/ui/file-input.reel/file-input.js +++ b/js/components/ui/file-input.reel/file-input.js | |||
@@ -38,7 +38,7 @@ var FileInput = exports.FileInput = Montage.create(Component, { | |||
38 | { | 38 | { |
39 | value:function(event) | 39 | value:function(event) |
40 | { | 40 | { |
41 | if(event.currentTarget.id === "fileInputControl") | 41 | if(event.currentTarget.type === "file") |
42 | { | 42 | { |
43 | this.filePath = this.inputField.value; | 43 | this.filePath = this.inputField.value; |
44 | } | 44 | } |
diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html index ba85c089..7da4a855 100755 --- a/js/components/ui/input-group.reel/input-group.html +++ b/js/components/ui/input-group.reel/input-group.html | |||
@@ -25,7 +25,8 @@ | |||
25 | "bindings": { | 25 | "bindings": { |
26 | "data": { | 26 | "data": { |
27 | "boundObject": {"@": "propList"}, | 27 | "boundObject": {"@": "propList"}, |
28 | "boundObjectPropertyPath": "objectAtCurrentIteration" | 28 | "boundObjectPropertyPath": "objectAtCurrentIteration", |
29 | "oneway": true | ||
29 | } | 30 | } |
30 | }, | 31 | }, |
31 | "listeners": [ | 32 | "listeners": [ |
diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js index c28979a9..20ec173e 100755 --- a/js/components/ui/property-control.reel/property-control.js +++ b/js/components/ui/property-control.reel/property-control.js | |||
@@ -120,8 +120,13 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { | |||
120 | set: function (data) { | 120 | set: function (data) { |
121 | if (data !== this._data) { | 121 | if (data !== this._data) { |
122 | this._data = data; | 122 | this._data = data; |
123 | this.label = data.label; | 123 | if(data) { |
124 | this.controlType = data.controlType; | 124 | this._label = data.label; |
125 | this._controlType = data.controlType; | ||
126 | } else { | ||
127 | this._label = ""; | ||
128 | this._controlType = null; | ||
129 | } | ||
125 | this.needsDraw = true; | 130 | this.needsDraw = true; |
126 | } | 131 | } |
127 | } | 132 | } |
@@ -143,6 +148,9 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { | |||
143 | { | 148 | { |
144 | value:function(event) | 149 | value:function(event) |
145 | { | 150 | { |
151 | if(event.wasSetByCode) { | ||
152 | return; | ||
153 | } | ||
146 | this._dispatchPropEvent(event); | 154 | this._dispatchPropEvent(event); |
147 | } | 155 | } |
148 | }, | 156 | }, |