aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/property-control.reel/property-control.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/ui/property-control.reel/property-control.js')
-rw-r--r--js/components/ui/property-control.reel/property-control.js238
1 files changed, 238 insertions, 0 deletions
diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
new file mode 100644
index 00000000..586d2e9a
--- /dev/null
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -0,0 +1,238 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
9 HotText = require("js/components/hottext").HotText,
10 HotTextUnit = require("js/components/hottextunit").HotTextUnit,
11 Slider = require("js/components/slider").Slider,
12 Button = require("js/components/button").Button,
13 Checkbox = require("js/components/checkbox").Checkbox,
14 Combobox = require("js/components/combobox").Combobox,
15 TextField = require("js/components/TextField").TextField,
16 ColorChip = require("js/components/ui/color-chip").ColorChip,
17 FileInput = require("js/components/ui/file-input").FileInput,
18 InputGroup = require("js/components/ui/input-group").InputGroup;
19
20var PropertyControl = exports.PropertyControl = Montage.create(Component, {
21
22 _labelField: {
23 enumerable: true,
24 serializable: true,
25 value: null
26 },
27
28 labelField: {
29 enumerable: true,
30 serializable: true,
31 get: function () {
32 return this._labelField;
33 },
34 set: function (value) {
35 if (value !== this._labelField) {
36 this._labelField = value;
37 this.needsDraw = true;
38 }
39 }
40 },
41
42 _control: {
43 enumerable: true,
44 value: null
45 },
46
47 // set this to the getter of each control type's "value" accessor,
48 // which could be value, selected, color, checked, etc.
49 _prop: {
50 enumerable: true,
51 value: ""
52 },
53
54 _controlField: {
55 enumerable: true,
56 value: null
57 },
58
59 controlField: {
60 enumerable: true,
61 serializable: true,
62 get: function () {
63 return this._controlField;
64 },
65 set: function (value) {
66 if (value !== this._controlField) {
67 this._controlField = value;
68 }
69 }
70 },
71
72 _label: {
73 enumerable: false,
74 value: "Label:"
75 },
76
77 label: {
78 enumerable: true,
79 serializable: true,
80 get: function () {
81 return this._label;
82 },
83 set: function (value) {
84 if (value !== this._label) {
85 this._label = value + ":";
86 this.needsDraw = true;
87 }
88 }
89 },
90
91 _controlType: {
92 enumerable: false,
93 value: null
94 },
95
96 controlType: {
97 enumerable: true,
98 serializable: true,
99 get: function () {
100 return this._controlType;
101 },
102 set: function (value) {
103 if (value !== this._controlType) {
104 this._controlType = value;
105 }
106 }
107 },
108
109 _data: {
110 enumerable: false,
111 value: null
112 },
113
114 data: {
115 enumerable: true,
116 serializable: true,
117 get: function () {
118 return this._data;
119 },
120 set: function (data) {
121 if (data !== this._data) {
122 this._data = data;
123 this.label = data.label;
124 this.controlType = data.controlType;
125 this.needsDraw = true;
126 }
127 }
128 },
129
130 didDraw :{
131 value: function() {
132 var defaults = this._data.defaults;
133 for(var n in defaults)
134 {
135 this._control[n] = defaults[n];
136 }
137
138 this._control.needsDraw = true;
139 }
140 },
141
142 handleEvent:
143 {
144 value:function(event)
145 {
146 this._dispatchPropEvent(event);
147 }
148 },
149
150 _dispatchPropEvent: {
151 value: function(event) {
152 var propEvent = document.createEvent("CustomEvent");
153 if(event.type === "changing")
154 {
155 propEvent.initEvent("propertyChanging", true, true);
156 propEvent.type = "propertyChanging";
157 }
158 else
159 {
160 propEvent.initEvent("propertyChange", true, true);
161 propEvent.type = "propertyChange";
162 }
163 propEvent.propertyLabel = this.label;
164 propEvent.propertyValue = event.currentTarget[this._prop];
165 propEvent.propertyEvent = event;
166
167 this.dispatchEvent(propEvent);
168 }
169 },
170
171 prepareForDraw: {
172 value: function() {
173 this._labelField.innerHTML = this._label;
174
175 switch(this._controlType)
176 {
177 case "HotText":
178 this._control = HotText.create();
179 this._control.addEventListener("change", this, false);
180 this._control.addEventListener("changing", this, false);
181 this._prop = "value";
182 break;
183 case "HotTextUnit":
184 this._control = HotTextUnit.create();
185 this._control.addEventListener("change", this, false);
186 this._control.addEventListener("changing", this, false);
187 this._prop = "value";
188 break;
189 case "Slider":
190 this._control = Slider.create();
191 this._control.addEventListener("change", this, false);
192 this._control.addEventListener("changing", this, false);
193 this._prop = "value";
194 break;
195 case "Button":
196 this._control = Button.create();
197 this._control.addEventListener("action", this, false);
198 this._prop = "value";
199 break;
200 case "ColorChip":
201 this._control = ColorChip.create();
202 this._control.addEventListener("change", this, false);
203 this._prop = "color";
204 break;
205 case "TextField":
206 this._control = TextField.create();
207 this._control.addEventListener("change", this, false);
208 this._prop = "text";
209 break;
210 case "Checkbox":
211 this._control = Checkbox.create();
212 this._control.addEventListener("change", this, false);
213 this._prop = "checked";
214 break;
215<