diff options
Diffstat (limited to 'node_modules/montage/ui/input-range.reel/input-range.js')
-rw-r--r-- | node_modules/montage/ui/input-range.reel/input-range.js | 343 |
1 files changed, 343 insertions, 0 deletions
diff --git a/node_modules/montage/ui/input-range.reel/input-range.js b/node_modules/montage/ui/input-range.reel/input-range.js new file mode 100644 index 00000000..faa8f2af --- /dev/null +++ b/node_modules/montage/ui/input-range.reel/input-range.js | |||
@@ -0,0 +1,343 @@ | |||
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 | /*global require,exports */ | ||
7 | var Montage = require("montage").Montage, | ||
8 | Component = require("ui/component").Component, | ||
9 | dom = require("ui/dom"); | ||
10 | |||
11 | /** | ||
12 | * The input type="range" field | ||
13 | */ | ||
14 | var InputRange = exports.InputRange = Montage.create(Component, { | ||
15 | |||
16 | DEFAULT_WIDTH: { | ||
17 | value: 100 | ||
18 | }, | ||
19 | |||
20 | HANDLE_ADJUST: { | ||
21 | value: 13 | ||
22 | }, | ||
23 | |||
24 | // public API | ||
25 | _min: { | ||
26 | value: null | ||
27 | }, | ||
28 | |||
29 | min: { | ||
30 | get: function() { | ||
31 | return this._min; | ||
32 | }, | ||
33 | set: function(value) { | ||
34 | this._min = String.isString(value) ? parseFloat(value) : value; | ||
35 | this.needsDraw = true; | ||
36 | }, | ||
37 | serializable: true | ||
38 | }, | ||
39 | |||
40 | _max: { | ||
41 | value: null | ||
42 | }, | ||
43 | |||
44 | max: { | ||
45 | get: function() { | ||
46 | return this._max; | ||
47 | }, | ||
48 | set: function(value) { | ||
49 | this._max = String.isString(value) ? parseFloat(value) : value; | ||
50 | this.needsDraw = true; | ||
51 | }, | ||
52 | serializable: true | ||
53 | }, | ||
54 | |||
55 | _step: { | ||
56 | value: null | ||
57 | }, | ||
58 | |||
59 | step: { | ||
60 | get: function() { | ||
61 | return this._step; | ||
62 | }, | ||
63 | set: function(value) { | ||
64 | this._step = String.isString(value) ? parseFloat(value) : value; | ||
65 | this.needsDraw = true; | ||
66 | }, | ||
67 | serializable: true | ||
68 | }, | ||
69 | |||
70 | /** Width of the slider in px. Default = 300 */ | ||
71 | _width: { | ||
72 | value: null | ||
73 | }, | ||
74 | |||
75 | width: { | ||
76 | get: function() { | ||
77 | return this._width; | ||
78 | }, | ||
79 | set: function(value) { | ||
80 | this._width = String.isString(value) ? parseFloat(value) : value; | ||
81 | this.needsDraw = true; | ||
82 | }, | ||
83 | serializable: true | ||
84 | }, | ||
85 | |||
86 | percent: { | ||
87 | value: null | ||
88 | }, | ||
89 | |||
90 | _valueSyncedWithPosition: { | ||
91 | value: null | ||
92 | }, | ||
93 | |||
94 | _value: { | ||
95 | value: null | ||
96 | }, | ||
97 | |||
98 | value: { | ||
99 | get: function() { | ||
100 | return this._value; | ||
101 | }, | ||
102 | set: function(value, fromInput) { | ||
103 | this._value = String.isString(value) ? parseFloat(value) : value; | ||
104 | //console.log('value set', this._value); | ||
105 | if(fromInput) { | ||
106 | this._valueSyncedWithPosition = true; | ||
107 | } else { | ||
108 | this._valueSyncedWithPosition = false; | ||
109 | this.needsDraw = true; | ||
110 | } | ||
111 | }, | ||
112 | serializable: true | ||
113 | }, | ||
114 | |||
115 | // private | ||
116 | _handleEl: { | ||
117 | value: null, | ||
118 | serializable: true | ||
119 | }, | ||
120 | |||
121 | _translateComposer: { | ||
122 | value: null, | ||
123 | serializable: true | ||
124 | }, | ||
125 | |||
126 | _sliderLeft: { | ||
127 | value: null | ||
128 | }, | ||
129 | |||
130 | _sliderWidth: { | ||
131 | value: null | ||
132 | }, | ||
133 | |||
134 | __positionX: { | ||
135 | value: null | ||
136 | }, | ||
137 | |||
138 | _positionX: { | ||
139 | get: function() { | ||
140 | return this.__positionX; | ||
141 | }, | ||
142 | set: function(value, fromValue) { | ||
143 | //console.log('positionX', value); | ||
144 | if(value !== null && !isNaN(value)) { | ||
145 | this.__positionX = value; | ||
146 | if(!fromValue) { | ||
147 | this._calculateValueFromPosition(); | ||
148 | } | ||
149 | this.needsDraw = true; | ||
150 | } | ||
151 | } | ||
152 | }, | ||
153 | |||
154 | _calculateValueFromPosition: { | ||
155 | value: function() { | ||
156 | if(this._sliderWidth > 0) { | ||
157 | var percent = this.percent = (this._positionX / this._sliderWidth) * 100; | ||
158 | var value = (this.min + ((percent/100) * (this.max - this.min))); | ||
159 | Object.getPropertyDescriptor(this, "value").set.call(this, value, true); | ||
160 | this._valueSyncedWithPosition = true; | ||
161 | } | ||
162 | |||
163 | } | ||
164 | }, | ||
165 | |||
166 | _calculatePositionFromValue: { | ||
167 | value: function() { | ||
168 | // unless the element is ready, we cannot position the handle | ||
169 | if(this._sliderWidth) { | ||
170 | var percent, value = this.value; | ||
171 | var range = (this.max - this.min); | ||
172 | percent = ((this.value-this.min)/range) * 100; | ||
173 | var positionX = (percent/100)*this._sliderWidth; | ||
174 | Object.getPropertyDescriptor(this, "_positionX").set.call(this, positionX, true); | ||
175 | |||
176 | this.percent = percent; | ||
177 | this._valueSyncedWithPosition = true; | ||
178 | } else { | ||
179 | this._valueSyncedWithPosition = false; | ||
180 | } | ||
181 | } | ||
182 | }, | ||
183 | |||
184 | _positionOfElement: { | ||
185 | value: function(element) { | ||
186 | return dom.convertPointFromNodeToPage(element); | ||
187 | } | ||
188 | }, | ||
189 | |||
190 | _getElementPosition: { | ||
191 | value: function(obj) { | ||
192 | var curleft = 0, curtop = 0, curHt = 0, curWd = 0; | ||
193 | if (obj.offsetParent) { | ||
194 | do { | ||
195 | curleft += obj.offsetLeft; | ||
196 | curtop += obj.offsetTop; | ||
197 | curHt += obj.offsetHeight; | ||
198 | curWd += obj.offsetWidth; | ||
199 | } while ((obj = obj.offsetParent)); | ||
200 | } | ||
201 | return { | ||
202 | top: curtop, | ||
203 | left: curleft, | ||
204 | height: curHt, | ||
205 | width: curWd | ||
206 | }; | ||
207 | //return [curleft,curtop, curHt, curWd]; | ||
208 | |||
209 | } | ||
210 | }, | ||
211 | |||
212 | |||
213 | prepareForDraw: { | ||
214 | value: function() { | ||
215 | // read initial values from the input type=range | ||
216 | this.min = this.min || this.element.getAttribute('min') || 0; | ||
217 | this.max = this.max || this.element.getAttribute('max') || 100; | ||
218 | this.step = this.step || this.element.getAttribute('step') || 1; | ||
219 | this.value = this.value || this.element.getAttribute('value') || 0; | ||
220 | } | ||
221 | }, | ||
222 | |||
223 | // @todo: Without prepareForActivationEvents, the _translateComposer does not work | ||
224 | prepareForActivationEvents: { | ||