aboutsummaryrefslogtreecommitdiff
path: root/js/components/hottextunit.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/components/hottextunit.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/components/hottextunit.reel')
-rw-r--r--js/components/hottextunit.reel/hottextunit.css41
-rw-r--r--js/components/hottextunit.reel/hottextunit.html28
-rw-r--r--js/components/hottextunit.reel/hottextunit.js185
3 files changed, 254 insertions, 0 deletions
diff --git a/js/components/hottextunit.reel/hottextunit.css b/js/components/hottextunit.reel/hottextunit.css
new file mode 100644
index 00000000..02994085
--- /dev/null
+++ b/js/components/hottextunit.reel/hottextunit.css
@@ -0,0 +1,41 @@
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.hottextunit
8{
9 -webkit-user-select:none;
10 cursor:default;
11 width:50px;
12 float:left;
13}
14
15.hottextunit:hover
16{
17 cursor: pointer;
18}
19
20.hottextunit input
21{
22 width:50px;
23 border:none;
24 padding:0;
25 margin:0;
26}
27
28.underline
29{
30 border-bottom:1px dotted white;
31}
32
33.hide
34{
35 display:none;
36}
37
38.disabled
39{
40 color:#999999;
41} \ No newline at end of file
diff --git a/js/components/hottextunit.reel/hottextunit.html b/js/components/hottextunit.reel/hottextunit.html
new file mode 100644
index 00000000..cc0835fb
--- /dev/null
+++ b/js/components/hottextunit.reel/hottextunit.html
@@ -0,0 +1,28 @@
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="hottextunit.css">
11
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "module": "js/components/hottextunit.reel",
16 "name": "HotTextUnit",
17 "properties": {
18 "element": {"#": "hottextunit"}
19 }
20 }
21 }
22 </script>
23
24</head>
25<body>
26 <div id="hottextunit" class="hottextunit"></div>
27</body>
28</html> \ No newline at end of file
diff --git a/js/components/hottextunit.reel/hottextunit.js b/js/components/hottextunit.reel/hottextunit.js
new file mode 100644
index 00000000..448eb9d7
--- /dev/null
+++ b/js/components/hottextunit.reel/hottextunit.js
@@ -0,0 +1,185 @@
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;
8var HotText = require("js/components/hottext.reel").HotText;
9
10var HotTextUnit = exports.HotTextUnit = Montage.create(HotText, {
11
12 numericField: {
13 enumerable: false,
14 value:null
15 },
16
17 unitsField: {
18 enumerable: false,
19 value:null
20 },
21
22 inputField: {
23 enumerable: false,
24 value:null
25 },
26
27 _units: {
28 enumerable: false,
29 value: "px"
30 },
31
32 units: {
33 serializable: true,
34 enumerable: true,
35 get: function() {
36 return this._units;
37 },
38 set: function(value) {
39 if (value !== this._units) {
40 if(this._acceptableUnits.indexOf(value) !== -1)
41 {
42 this._units = value;
43 this.needsDraw = true;
44
45 this._setEventFlags("change", false);
46 this._dispatchActionEvent();
47 }
48 }
49 }
50 },
51
52 // Some controls will only support certain units
53 // For example, Oval would specify an innerRadius with acceptableUnits = ["%"]
54 // and Stroke Size with acceptableUnits = ["px", "pt", "%"]
55 _acceptableUnits: {
56 enumerable: false,
57 value: ["px"]
58 },
59
60
61 acceptableUnits: {
62 serializable: true,
63 enumerable: true,
64 get: function() {
65 return this._acceptableUnits;
66 },
67 set: function(value) {
68 if (value !== this._acceptableUnits) {
69 this._acceptableUnits = value;
70 }
71 }
72 },
73
74 // We don't want to handle every input; we only want to handle input from tab or enter
75 // Thus, we don't listen for an input event; we call this from handleKeydown
76 handleInput: {
77 enumerable: false,
78 value: function() {
79 var inputString = this.inputField.value;
80
81 // Ignore all whitespace, digits, negative sign and "." when looking for units label
82 // The units must come after one or more digits
83 var objRegExp = /(\-*\d+\.*\d*)(\s*)(\w*\%*)/;
84 var unitsString = inputString.replace(objRegExp, "$3");
85 if(unitsString)
86 {
87 var noSpaces = /(\s*)(\S*)(\s*)/;
88 // strip out spaces and convert to lower case
89 var match = (unitsString.replace(noSpaces, "$2")).toLowerCase();
90 if(match)
91 {
92 Object.getPropertyDescriptor(this, "units").set.call(this, match);
93 }
94 }
95
96 this._setEventFlags("change", false);
97 // Moving this call to after setting the value since value changes are dispatching events before units are set
98 Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(inputString), false);
99 }
100 },
101
102 draw: {
103 enumerable: false,
104 value: function() {
105 this.inputField.value = this._value + " " + this._units;
106 this.numericField.innerText = this._value;
107 this.unitsField.innerText = " " + this._units;
108
109
110 if(this._hasFocus)
111 {
112 this.numericField.classList.add("hide");
113 this.unitsField.classList.add("hide");
114
115 this.inputField.classList.remove("hide");
116
117 // if element targeted; balancing demands of multitouch
118 // with traditional single focus model
119 this.inputField.addEventListener("keydown", this, false);
120 }
121 else
122 {
123 this.numericField.classList.remove("hide");
124 this.unitsField.classList.remove("hide");
125
126 this.inputField.classList.add("hide");
127 }
128 }
129 },
130
131 didDraw: {
132 enumerable: false,
133 value: function() {
134 if(this._hasFocus)
135 {
136 var length = 0;
137 if(this.labelFunction)
138 {
139 length = this.labelFunction(this._value).length;
140 }
141 else
142 {
143 length = this.inputField.value.toString().length;
144 }
145 this.inputField.setSelectionRange(0, length);
146 }
147 this._valueSyncedWithInputField = true;
148 }
149 },
150
<