aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/property-control.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/ui/property-control.reel')
-rw-r--r--js/components/ui/property-control.reel/property-control.css27
-rw-r--r--js/components/ui/property-control.reel/property-control.html40
-rw-r--r--js/components/ui/property-control.reel/property-control.js238
3 files changed, 305 insertions, 0 deletions
diff --git a/js/components/ui/property-control.reel/property-control.css b/js/components/ui/property-control.reel/property-control.css
new file mode 100644
index 00000000..a2795226
--- /dev/null
+++ b/js/components/ui/property-control.reel/property-control.css
@@ -0,0 +1,27 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No 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
7.propControl
8{
9 display:block;
10 width: 100%;
11}
12
13.propControl .prop-label
14{
15 width:100px;
16 float:left;
17 clear:left;
18 text-align: right;
19 margin: 2px 10px 2px 0;
20}
21
22.propControl .prop-controller
23{
24 width:200px;
25 float:left;
26 margin: 2px 0;
27} \ No newline at end of file
diff --git a/js/components/ui/property-control.reel/property-control.html b/js/components/ui/property-control.reel/property-control.html
new file mode 100644
index 00000000..2e7c7b53
--- /dev/null
+++ b/js/components/ui/property-control.reel/property-control.html
@@ -0,0 +1,40 @@
1<!DOCTYPE HTML>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="property-control.css">
11 <script type="text/montage-serialization">
12 {
13 "substitution1": {
14 "module": "montage/ui/substitution",
15 "name": "Substitution",
16 "properties": {
17 "element": {"#": "propController"}
18 }
19 },
20 "owner": {
21 "module": "js/components/ui/property-control",
22 "name": "PropertyControl",
23 "properties": {
24 "element": {"#": "propControl"},
25 "labelField": {"#": "propLabel"},
26 "controlField": {"#": "propController"}
27 }
28 }
29 }
30 </script>
31</head>
32<body>
33 <div id="propControl">
34 <div id="propLabel" class="prop-label"></div>
35 <div id="propController" class="prop-controller">
36 <div id="subDummy"></div>
37 </div>
38 </div>
39</body>
40</html> \ No newline at end of file
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