aboutsummaryrefslogtreecommitdiff
path: root/node_modules/ninja-components/slider-base.js
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/ninja-components/slider-base.js')
-rw-r--r--node_modules/ninja-components/slider-base.js278
1 files changed, 278 insertions, 0 deletions
diff --git a/node_modules/ninja-components/slider-base.js b/node_modules/ninja-components/slider-base.js
new file mode 100644
index 00000000..9cd0a145
--- /dev/null
+++ b/node_modules/ninja-components/slider-base.js
@@ -0,0 +1,278 @@
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").Montage,
8 Component = require("ui/component").Component;
9
10var SliderBase = exports.SliderBase = Montage.create(Component, {
11
12 _hasFocus: {
13 enumerable: false,
14 value: false
15 },
16
17 _touchIdentifier: {
18 enumerable: false,
19 value: null
20 },
21
22 _xStart: {
23 enumerable: false,
24 value: 0
25 },
26
27 _yStart: {
28 enumerable: false,
29 value: 0
30 },
31
32 _previousValue: {
33 enumerable: false,
34 value: null
35 },
36
37 _isMouseDown: {
38 enumerable: true,
39 value: false
40 },
41
42 // We need to calculate some metrics on the first draw after prepareForDraw because
43 // styles values are not available during prepareForDraw
44 _firstTime: {
45 enumerable: false,
46 value: true
47 },
48
49 _enabled: {
50 enumerable: true,
51 value: true
52 },
53
54 enabled: {
55 enumerable: true,
56 get: function() {
57 return this._enabled;
58 },
59 set: function(value) {
60
61 if (value !== this._enabled) {
62 this._enabled = value;
63 if(this._enabled)
64 {
65 this.element.classList.remove("disabled");
66
67 this.element.addEventListener("blur", this);
68 this.element.addEventListener("focus", this);
69
70 this.element.addEventListener("touchstart", this, false);
71 this.element.addEventListener("mousedown", this, false);
72 }
73 else
74 {
75 this.element.classList.add("disabled");
76
77 this.element.removeEventListener("blur", this);
78 this.element.removeEventListener("focus", this);
79
80 this.element.removeEventListener("touchstart", this, false);
81 this.element.removeEventListener("mousedown", this, false);
82 }
83 this.needsDraw = true;
84 }
85 }
86 },
87
88 // Internal flags to determine what the change/changing events will contain
89 _eventType: {
90 enumerable: false,
91 value: "change"
92 },
93
94 _wasSetByCode: {
95 enumerable: false,
96 value: true
97 },
98
99 _setEventFlags: {
100 value: function (eventType, wasSetByCode) {
101 this._eventType = eventType;
102 this._wasSetByCode = wasSetByCode;
103 }
104 },
105
106 _value: {
107 enumerable: false,
108 value: 0
109 },
110
111 value: {
112 enumerable: true,
113 get: function() {
114 return this._value;
115 },
116 set: function(value) {
117 if (isNaN(value)) {
118 return;
119 }
120
121 if (value < this._minValue) {
122 value = this._minValue;
123 }
124 else if (value > this._maxValue) {
125 value = this._maxValue;
126 }
127
128 if (value !== this._value) {
129 this._value = value;
130 this.needsDraw = true;
131 this._dispatchActionEvent();
132 }
133 }
134 },
135
136 _minValue: {
137 enumerable: false,
138 value: 0
139 },
140
141 minValue: {
142 get: function() {
143 return this._minValue;
144 },
145 set: function(value) {
146 if (value !== this._minValue) {
147 if (this._value < value)
148 this._value = value;
149 this._minValue = value;
150 this._firstTime = true; // Force layout recalculation.
151 this.needsDraw = true;
152 }
153 }
154 },
155
156 _maxValue: {
157 enumerable: false,
158 value: 100
159 },
160
161 maxValue: {
162 get: function() {
163 return this._maxValue;
164 },
165 set: function(value) {
166 if (value !== this._maxValue) {
167 if (this._value > value)
168 this._value = value;
169 this._maxValue = value;
170 this._firstTime = true; // Force layout recalculation.
171 this.needsDraw = true;
172 }
173 }
174 },
175
176 _valueCoef: {
177 value: 1
178 },
179
180 _valueFromPageOffset: {
181 value: function(offset, pageY, isShiftKeyPressed) {
182 // Implement in subclass.
183 }
184 },
185
186 handleMousedown: {
187 value: function (event) {
188// event.preventDefault(); // Commenting out -- other elements need to blur when we are moused down
189 var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(event.pageX, event.pageY));
190 this._xStart = clickPoint.x;
191 this._yStart = clickPoint.y;
192 this._previousValue = this.value;
193 this._isMouseDown = true;
194 document.addEventListener("mousemove", this, false);
195 document.addEventListener("mouseup", this, false);
196 }
197 },
198
199 handleTouchstart: {
200 value: function (event) {
201 event.preventDefault(); // Not sure how to let other elements blur if we need to override mobile behavior
202 var touch = event.targetTouches[0];
203 this._touchIdentifier = touch.identifier;
204 var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(touch.pageX,touch.pageY));
205 this._xStart = clickPoint.x;
206 this._yStart = clickPoint.y;
207 this._previousValue = this.value;
208 this._isMouseDown = true;
209 document.addEventListener("touchmove", this, false);
210 document.addEventListener("touchend", this, false);
211 }
212 },
213
214 handleMousemove: {
215 value: function (event) {
216 event.target.style.cursor = "pointer";
217 this._setEventFlags("changing", false);
218 this._valueFromPageOffset(event.pageX, event.pageY, event.shiftKey);
219 }
220 },
221
222 handleTouchmove: {
223 value: function (event) {
224 for(var i=0, iTouch; iTouch = event.changedTouches[i]; i++) {
225 if (iTouch.identifier === this._touchIdentifier) {
226 this._setEventFlags("changing", false);
227 this._valueFromPageOffset(iTouch.pageX, iTouch.pageY, false);
228 break;
229 }
230 }