aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/input-group.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/ui/input-group.reel')
-rw-r--r--js/components/ui/input-group.reel/input-group.css33
-rw-r--r--js/components/ui/input-group.reel/input-group.html78
-rw-r--r--js/components/ui/input-group.reel/input-group.js85
3 files changed, 196 insertions, 0 deletions
diff --git a/js/components/ui/input-group.reel/input-group.css b/js/components/ui/input-group.reel/input-group.css
new file mode 100644
index 00000000..8e2267eb
--- /dev/null
+++ b/js/components/ui/input-group.reel/input-group.css
@@ -0,0 +1,33 @@
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 .inputRow div
8{
9 float: left;
10}
11
12.propControl div div .propControl
13{
14 width: auto !important;
15}
16
17.propControl .inputRow div .prop-label
18{
19 width: 20px;
20 float:left;
21 margin: 3px 4px 2px 0;
22}
23
24.propControl .inputRow div .hottext,
25.propControl .inputRow div .hottextInput,
26.prop-controller .textfield
27{
28 border: 1px solid black;
29 width: 30px !important;
30 float:left;
31 margin: 2px 0;
32 text-align: center;
33} \ No newline at end of file
diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html
new file mode 100644
index 00000000..c99e29d6
--- /dev/null
+++ b/js/components/ui/input-group.reel/input-group.html
@@ -0,0 +1,78 @@
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="input-group.css">
11 <script type="text/montage-serialization">
12 {
13 "eventDelegator": {
14 "module": "montage/event/action-event-listener",
15 "name": "ActionEventListener",
16 "properties": {
17 "handler": {"@": "owner"},
18 "action": "forwardEvent"
19 }
20 },
21 "propControl1": {
22 "module": "js/components/ui/property-control",
23 "name": "PropertyControl",
24 "properties": {
25 "element": {"#": "inputPair"}
26 },
27 "bindings": {
28 "data": {
29 "boundObject": {"@": "propList"},
30 "boundObjectPropertyPath": "objectAtCurrentIteration"
31 }
32 },
33 "listeners": [
34 {
35 "type": "propertyChange",
36 "listener": {"@": "eventDelegator"},
37 "capture": false
38 },
39 {
40 "type": "propertyChanging",
41 "listener": {"@": "eventDelegator"},
42 "capture": false
43 }
44 ]
45 },
46 "propList": {
47 "module": "montage/ui/repetition",
48 "name": "Repetition",
49 "properties": {
50 "element": {"#": "inputList"}
51 },
52 "bindings": {
53 "objects": {
54 "boundObject": {"@": "owner"},
55 "boundObjectPropertyPath": "data",
56 "oneway": true
57 }
58 }
59 },
60 "owner": {
61 "module": "js/components/ui/input-group",
62 "name": "InputGroup",
63 "properties": {
64 "element": {"#": "inputRow"},
65 "controlsList": {"@": "propList"}
66 }
67 }
68 }
69 </script>
70</head>
71<body>
72 <div id="inputRow" style="-webkit-user-select: none;">
73 <div id="inputList">
74 <div id="inputPair"></div>
75 </div>
76 </div>
77</body>
78</html> \ No newline at end of file
diff --git a/js/components/ui/input-group.reel/input-group.js b/js/components/ui/input-group.reel/input-group.js
new file mode 100644
index 00000000..456a146c
--- /dev/null
+++ b/js/components/ui/input-group.reel/input-group.js
@@ -0,0 +1,85 @@
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
10var InputGroup = exports.InputGroup = Montage.create(Component, {
11
12 forwardEvent:
13 {
14 value: function(event)
15 {
16 if(event.type === "propertyChanging")
17 {
18 this._handlePropertyChanging(event);
19 }
20 else
21 {
22 this._handlePropertyChange(event);
23 }
24 }
25 },
26
27 _handlePropertyChanging:
28 {
29 value: function(event)
30 {
31 this._dispatchPropEvent(event);
32 }
33 },
34
35 _handlePropertyChange:
36 {
37 value: function(event)
38 {
39 this._dispatchPropEvent(event);
40 }
41 },
42
43 _dispatchPropEvent: {
44 value: function(event) {
45 var propEvent = document.createEvent("CustomEvent");
46 if(event.type === "propertyChanging")
47 {
48 propEvent.initEvent("changing", true, true);
49 propEvent.type = "changing";
50 }
51 else
52 {
53 propEvent.initEvent("change", true, true);
54 propEvent.type = "change";
55 }
56 propEvent.propertyLabel = event.propertyLabel;
57 propEvent.propertyValue = event.propertyValue;
58 propEvent.propertyEvent = event;
59
60 this.dispatchEvent(propEvent);
61 }
62 },
63
64 value: {
65 enumerable: true,
66 serializable: true,
67 get: function () {
68 var retObject = {};
69 for(var i=0, len=this.controlsList.childComponents.length; i< len; i++)
70 {
71 var childControl = this.controlsList.childComponents[i];
72 retObject[childControl.label] = childControl._control[childControl._prop];
73 }
74 return retObject;
75
76 }
77 },
78
79 controlsList: {
80 enumerable: true,
81 serializable: true,
82 value: null
83 }
84
85});