|
0
|
1 /*----------------------------------------------------------------------------\
|
|
|
2 | Slider 1.02 |
|
|
|
3 |-----------------------------------------------------------------------------|
|
|
|
4 | Created by Erik Arvidsson |
|
|
|
5 | (http://webfx.eae.net/contact.html#erik) |
|
|
|
6 | For WebFX (http://webfx.eae.net/) |
|
|
|
7 |-----------------------------------------------------------------------------|
|
|
|
8 | A slider control that degrades to an input control for non supported |
|
|
|
9 | browsers. |
|
|
|
10 |-----------------------------------------------------------------------------|
|
|
|
11 | Copyright (c) 2002, 2003, 2006 Erik Arvidsson |
|
|
|
12 |-----------------------------------------------------------------------------|
|
|
|
13 | Licensed under the Apache License, Version 2.0 (the "License"); you may not |
|
|
|
14 | use this file except in compliance with the License. You may obtain a copy |
|
|
|
15 | of the License at http://www.apache.org/licenses/LICENSE-2.0 |
|
|
|
16 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
|
|
17 | Unless required by applicable law or agreed to in writing, software |
|
|
|
18 | distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
|
|
|
19 | WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
|
|
|
20 | License for the specific language governing permissions and limitations |
|
|
|
21 | under the License. |
|
|
|
22 |-----------------------------------------------------------------------------|
|
|
|
23 | Dependencies: timer.js - an OO abstraction of timers |
|
|
|
24 | range.js - provides the data model for the slider |
|
|
|
25 | winclassic.css or any other css file describing the look |
|
|
|
26 |-----------------------------------------------------------------------------|
|
|
|
27 | 2002-10-14 | Original version released |
|
|
|
28 | 2003-03-27 | Added a test in the constructor for missing oElement arg |
|
|
|
29 | 2003-11-27 | Only use mousewheel when focused |
|
|
|
30 | 2006-05-28 | Changed license to Apache Software License 2.0. |
|
|
|
31 |-----------------------------------------------------------------------------|
|
|
|
32 | Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
|
|
|
33 \----------------------------------------------------------------------------*/
|
|
|
34
|
|
|
35 Slider.isSupported = typeof document.createElement != "undefined" &&
|
|
|
36 typeof document.documentElement != "undefined" &&
|
|
|
37 typeof document.documentElement.offsetWidth == "number";
|
|
|
38
|
|
|
39
|
|
|
40 function Slider(oElement, oInput, sOrientation) {
|
|
|
41 if (!oElement) return;
|
|
|
42 this._orientation = sOrientation || "horizontal";
|
|
|
43 this._range = new Range();
|
|
|
44 this._range.setExtent(0);
|
|
|
45 this._blockIncrement = 10;
|
|
|
46 this._unitIncrement = 1;
|
|
|
47 this._timer = new Timer(100);
|
|
|
48
|
|
|
49
|
|
|
50 if (Slider.isSupported && oElement) {
|
|
|
51
|
|
|
52 this.document = oElement.ownerDocument || oElement.document;
|
|
|
53
|
|
|
54 this.element = oElement;
|
|
|
55 this.element.slider = this;
|
|
|
56 this.element.unselectable = "on";
|
|
|
57
|
|
|
58 // add class name tag to class name
|
|
|
59 this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;
|
|
|
60
|
|
|
61 // create line
|
|
|
62 this.line = this.document.createElement("DIV");
|
|
|
63 this.line.className = "line";
|
|
|
64 this.line.unselectable = "on";
|
|
|
65 this.line.appendChild(this.document.createElement("DIV"));
|
|
|
66 this.element.appendChild(this.line);
|
|
|
67
|
|
|
68 // create handle
|
|
|
69 this.handle = this.document.createElement("DIV");
|
|
|
70 this.handle.className = "handle";
|
|
|
71 this.handle.unselectable = "on";
|
|
|
72 this.handle.appendChild(this.document.createElement("DIV"));
|
|
|
73 this.handle.firstChild.appendChild(
|
|
|
74 this.document.createTextNode(String.fromCharCode(160)));
|
|
|
75 this.element.appendChild(this.handle);
|
|
|
76 }
|
|
|
77
|
|
|
78 this.input = oInput;
|
|
|
79
|
|
|
80 // events
|
|
|
81 var oThis = this;
|
|
|
82 this._range.onchange = function () {
|
|
|
83 oThis.recalculate();
|
|
|
84 if (typeof oThis.onchange == "function")
|
|
|
85 oThis.onchange();
|
|
|
86 };
|
|
|
87
|
|
|
88 if (Slider.isSupported && oElement) {
|
|
|
89 this.element.onfocus = Slider.eventHandlers.onfocus;
|
|
|
90 this.element.onblur = Slider.eventHandlers.onblur;
|
|
|
91 this.element.onmousedown = Slider.eventHandlers.onmousedown;
|
|
|
92 this.element.onmouseover = Slider.eventHandlers.onmouseover;
|
|
|
93 this.element.onmouseout = Slider.eventHandlers.onmouseout;
|
|
|
94 this.element.onkeydown = Slider.eventHandlers.onkeydown;
|
|
|
95 this.element.onkeypress = Slider.eventHandlers.onkeypress;
|
|
|
96 this.element.onmousewheel = Slider.eventHandlers.onmousewheel;
|
|
|
97 this.handle.onselectstart =
|
|
|
98 this.element.onselectstart = function () { return false; };
|
|
|
99
|
|
|
100 this._timer.ontimer = function () {
|
|
|
101 oThis.ontimer();
|
|
|
102 };
|
|
|
103
|
|
|
104 // extra recalculate for ie
|
|
|
105 window.setTimeout(function() {
|
|
|
106 oThis.recalculate();
|
|
|
107 }, 1);
|
|
|
108 }
|
|
|
109 else {
|
|
|
110 this.input.onchange = function (e) {
|
|
|
111 oThis.setValue(oThis.input.value);
|
|
|
112 };
|
|
|
113 }
|
|
|
114 }
|
|
|
115
|
|
|
116 Slider.eventHandlers = {
|
|
|
117
|
|
|
118 // helpers to make events a bit easier
|
|
|
119 getEvent: function (e, el) {
|
|
|
120 if (!e) {
|
|
|
121 if (el)
|
|
|
122 e = el.document.parentWindow.event;
|
|
|
123 else
|
|
|
124 e = window.event;
|
|
|
125 }
|
|
|
126 if (!e.srcElement) {
|
|
|
127 var el = e.target;
|
|
|
128 while (el != null && el.nodeType != 1)
|
|
|
129 el = el.parentNode;
|
|
|
130 e.srcElement = el;
|
|
|
131 }
|
|
|
132 if (typeof e.offsetX == "undefined") {
|
|
|
133 e.offsetX = e.layerX;
|
|
|
134 e.offsetY = e.layerY;
|
|
|
135 }
|
|
|
136
|
|
|
137 return e;
|
|
|
138 },
|
|
|
139
|
|
|
140 getDocument: function (e) {
|
|
|
141 if (e.target)
|
|
|
142 return e.target.ownerDocument;
|
|
|
143 return e.srcElement.document;
|
|
|
144 },
|
|
|
145
|
|
|
146 getSlider: function (e) {
|
|
|
147 var el = e.target || e.srcElement;
|
|
|
148 while (el != null && el.slider == null) {
|
|
|
149 el = el.parentNode;
|
|
|
150 }
|
|
|
151 if (el)
|
|
|
152 return el.slider;
|
|
|
153 return null;
|
|
|
154 },
|
|
|
155
|
|
|
156 getLine: function (e) {
|
|
|
157 var el = e.target || e.srcElement;
|
|
|
158 while (el != null && el.className != "line") {
|
|
|
159 el = el.parentNode;
|
|
|
160 }
|
|
|
161 return el;
|
|
|
162 },
|
|
|
163
|
|
|
164 getHandle: function (e) {
|
|
|
165 var el = e.target || e.srcElement;
|
|
|
166 var re = /handle/;
|
|
|
167 while (el != null && !re.test(el.className)) {
|
|
|
168 el = el.parentNode;
|
|
|
169 }
|
|
|
170 return el;
|
|
|
171 },
|
|
|
172 // end helpers
|
|
|
173
|
|
|
174 onfocus: function (e) {
|
|
|
175 var s = this.slider;
|
|
|
176 s._focused = true;
|
|
|
177 s.handle.className = "handle hover";
|
|
|
178 },
|
|
|
179
|
|
|
180 onblur: function (e) {
|
|
|
181 var s = this.slider
|
|
|
182 s._focused = false;
|
|
|
183 s.handle.className = "handle";
|
|
|
184 },
|
|
|
185
|
|
|
186 onmouseover: function (e) {
|
|
|
187 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
188 var s = this.slider;
|
|
|
189 if (e.srcElement == s.handle)
|
|
|
190 s.handle.className = "handle hover";
|
|
|
191 },
|
|
|
192
|
|
|
193 onmouseout: function (e) {
|
|
|
194 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
195 var s = this.slider;
|
|
|
196 if (e.srcElement == s.handle && !s._focused)
|
|
|
197 s.handle.className = "handle";
|
|
|
198 },
|
|
|
199
|
|
|
200 onmousedown: function (e) {
|
|
|
201 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
202 var s = this.slider;
|
|
|
203 if (s.element.focus)
|
|
|
204 s.element.focus();
|
|
|
205
|
|
|
206 Slider._currentInstance = s;
|
|
|
207 var doc = s.document;
|
|
|
208
|
|
|
209 if (doc.addEventListener) {
|
|
|
210 doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
|
|
|
211 doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
|
|
|
212 }
|
|
|
213 else if (doc.attachEvent) {
|
|
|
214 doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
|
|
|
215 doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
|
|
|
216 doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
|
|
|
217 s.element.setCapture();
|
|
|
218 }
|
|
|
219
|
|
|
220 if (Slider.eventHandlers.getHandle(e)) { // start drag
|
|
|
221 Slider._sliderDragData = {
|
|
|
222 screenX: e.screenX,
|
|
|
223 screenY: e.screenY,
|
|
|
224 dx: e.screenX - s.handle.offsetLeft,
|
|
|
225 dy: e.screenY - s.handle.offsetTop,
|
|
|
226 startValue: s.getValue(),
|
|
|
227 slider: s
|
|
|
228 };
|
|
|
229 }
|
|
|
230 else {
|
|
|
231 return;
|
|
|
232 var lineEl = Slider.eventHandlers.getLine(e);
|
|
|
233 s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
|
|
|
234 s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
|
|
|
235 s._increasing = null;
|
|
|
236 s.ontimer();
|
|
|
237 }
|
|
|
238 },
|
|
|
239
|
|
|
240 onmousemove: function (e) {
|
|
|
241 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
242
|
|
|
243 if (Slider._sliderDragData) { // drag
|
|
|
244 var s = Slider._sliderDragData.slider;
|
|
|
245
|
|
|
246 var boundSize = s.getMaximum() - s.getMinimum();
|
|
|
247 var size, pos, reset;
|
|
|
248
|
|
|
249 if (s._orientation == "horizontal") {
|
|
|
250 size = s.element.offsetWidth - s.handle.offsetWidth;
|
|
|
251 pos = e.screenX - Slider._sliderDragData.dx;
|
|
|
252 reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100;
|
|
|
253 }
|
|
|
254 else {
|
|
|
255 size = s.element.offsetHeight - s.handle.offsetHeight;
|
|
|
256 pos = s.element.offsetHeight - s.handle.offsetHeight -
|
|
|
257 (e.screenY - Slider._sliderDragData.dy);
|
|
|
258 reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100;
|
|
|
259 }
|
|
|
260 s.setValue(reset ? Slider._sliderDragData.startValue :
|
|
|
261 s.getMinimum() + boundSize * pos / size);
|
|
|
262 return false;
|
|
|
263 }
|
|
|
264 else {
|
|
|
265 return;
|
|
|
266 var s = Slider._currentInstance;
|
|
|
267 if (s != null) {
|
|
|
268 var lineEl = Slider.eventHandlers.getLine(e);
|
|
|
269 s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
|
|
|
270 s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
|
|
|
271 }
|
|
|
272 }
|
|
|
273
|
|
|
274 },
|
|
|
275
|
|
|
276 onmouseup: function (e) {
|
|
|
277 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
278 var s = Slider._currentInstance;
|
|
|
279 var doc = s.document;
|
|
|
280 if (doc.removeEventListener) {
|
|
|
281 doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
|
|
|
282 doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
|
|
|
283 }
|
|
|
284 else if (doc.detachEvent) {
|
|
|
285 doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
|
|
|
286 doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
|
|
|
287 doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
|
|
|
288 s.element.releaseCapture();
|
|
|
289 }
|
|
|
290
|
|
|
291 if (Slider._sliderDragData) { // end drag
|
|
|
292 Slider._sliderDragData = null;
|
|
|
293 }
|
|
|
294 else {
|
|
|
295 return;
|
|
|
296 s._timer.stop();
|
|
|
297 s._increasing = null;
|
|
|
298 }
|
|
|
299 Slider._currentInstance = null;
|
|
|
300 },
|
|
|
301
|
|
|
302 onkeydown: function (e) {
|
|
|
303 return;
|
|
|
304 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
305 //var s = Slider.eventHandlers.getSlider(e);
|
|
|
306 var s = this.slider;
|
|
|
307 var kc = e.keyCode;
|
|
|
308 switch (kc) {
|
|
|
309 case 33: // page up
|
|
|
310 s.setValue(s.getValue() + s.getBlockIncrement());
|
|
|
311 break;
|
|
|
312 case 34: // page down
|
|
|
313 s.setValue(s.getValue() - s.getBlockIncrement());
|
|
|
314 break;
|
|
|
315 case 35: // end
|
|
|
316 s.setValue(s.getOrientation() == "horizontal" ?
|
|
|
317 s.getMaximum() :
|
|
|
318 s.getMinimum());
|
|
|
319 break;
|
|
|
320 case 36: // home
|
|
|
321 s.setValue(s.getOrientation() == "horizontal" ?
|
|
|
322 s.getMinimum() :
|
|
|
323 s.getMaximum());
|
|
|
324 break;
|
|
|
325 case 38: // up
|
|
|
326 case 39: // right
|
|
|
327 s.setValue(s.getValue() + s.getUnitIncrement());
|
|
|
328 break;
|
|
|
329
|
|
|
330 case 37: // left
|
|
|
331 case 40: // down
|
|
|
332 s.setValue(s.getValue() - s.getUnitIncrement());
|
|
|
333 break;
|
|
|
334 }
|
|
|
335
|
|
|
336 if (kc >= 33 && kc <= 40) {
|
|
|
337 return false;
|
|
|
338 }
|
|
|
339 },
|
|
|
340
|
|
|
341 onkeypress: function (e) {
|
|
|
342 return;
|
|
|
343 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
344 var kc = e.keyCode;
|
|
|
345 if (kc >= 33 && kc <= 40) {
|
|
|
346 return false;
|
|
|
347 }
|
|
|
348 },
|
|
|
349
|
|
|
350 onmousewheel: function (e) {
|
|
|
351 return;
|
|
|
352 e = Slider.eventHandlers.getEvent(e, this);
|
|
|
353 var s = this.slider;
|
|
|
354 if (s._focused) {
|
|
|
355 s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
|
|
|
356 // windows inverts this on horizontal sliders. That does not
|
|
|
357 // make sense to me
|
|
|
358 return false;
|
|
|
359 }
|
|
|
360 }
|
|
|
361 };
|
|
|
362
|
|
|
363
|
|
|
364
|
|
|
365 Slider.prototype.classNameTag = "dynamic-slider-control",
|
|
|
366
|
|
|
367 Slider.prototype.setValue = function (v) {
|
|
|
368 this._range.setValue(v);
|
|
|
369 this.input.value = this.getValue();
|
|
|
370 };
|
|
|
371
|
|
|
372 Slider.prototype.getValue = function () {
|
|
|
373 return this._range.getValue();
|
|
|
374 };
|
|
|
375
|
|
|
376 Slider.prototype.setMinimum = function (v) {
|
|
|
377 this._range.setMinimum(v);
|
|
|
378 this.input.value = this.getValue();
|
|
|
379 };
|
|
|
380
|
|
|
381 Slider.prototype.getMinimum = function () {
|
|
|
382 return this._range.getMinimum();
|
|
|
383 };
|
|
|
384
|
|
|
385 Slider.prototype.setMaximum = function (v) {
|
|
|
386 this._range.setMaximum(v);
|
|
|
387 this.input.value = this.getValue();
|
|
|
388 };
|
|
|
389
|
|
|
390 Slider.prototype.getMaximum = function () {
|
|
|
391 return this._range.getMaximum();
|
|
|
392 };
|
|
|
393
|
|
|
394 Slider.prototype.setUnitIncrement = function (v) {
|
|
|
395 this._unitIncrement = v;
|
|
|
396 };
|
|
|
397
|
|
|
398 Slider.prototype.getUnitIncrement = function () {
|
|
|
399 return this._unitIncrement;
|
|
|
400 };
|
|
|
401
|
|
|
402 Slider.prototype.setBlockIncrement = function (v) {
|
|
|
403 this._blockIncrement = v;
|
|
|
404 };
|
|
|
405
|
|
|
406 Slider.prototype.getBlockIncrement = function () {
|
|
|
407 return this._blockIncrement;
|
|
|
408 };
|
|
|
409
|
|
|
410 Slider.prototype.getOrientation = function () {
|
|
|
411 return this._orientation;
|
|
|
412 };
|
|
|
413
|
|
|
414 Slider.prototype.setOrientation = function (sOrientation) {
|
|
|
415 if (sOrientation != this._orientation) {
|
|
|
416 if (Slider.isSupported && this.element) {
|
|
|
417 // add class name tag to class name
|
|
|
418 this.element.className = this.element.className.replace(this._orientation,
|
|
|
419 sOrientation);
|
|
|
420 }
|
|
|
421 this._orientation = sOrientation;
|
|
|
422 this.recalculate();
|
|
|
423
|
|
|
424 }
|
|
|
425 };
|
|
|
426
|
|
|
427 Slider.prototype.recalculate = function() {
|
|
|
428 if (!Slider.isSupported || !this.element) return;
|
|
|
429
|
|
|
430 var w = this.element.offsetWidth;
|
|
|
431 var h = this.element.offsetHeight;
|
|
|
432 var hw = this.handle.offsetWidth;
|
|
|
433 var hh = this.handle.offsetHeight;
|
|
|
434 var lw = this.line.offsetWidth;
|
|
|
435 var lh = this.line.offsetHeight;
|
|
|
436
|
|
|
437 // this assumes a border-box layout
|
|
|
438
|
|
|
439 if (this._orientation == "horizontal") {
|
|
|
440 this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
|
|
|
441 (this.getMaximum() - this.getMinimum()) + "px";
|
|
|
442 this.handle.style.top = (h - hh) / 2 + "px";
|
|
|
443
|
|
|
444 this.line.style.top = (h - lh) / 2 + "px";
|
|
|
445 this.line.style.left = hw / 2 + "px";
|
|
|
446 //this.line.style.right = hw / 2 + "px";
|
|
|
447 this.line.style.width = Math.max(0, w - hw - 2)+ "px";
|
|
|
448 this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
|
|
|
449 }
|
|
|
450 else {
|
|
|
451 this.handle.style.left = (w - hw) / 2 + "px";
|
|
|
452 this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
|
|
|
453 (this.getMaximum() - this.getMinimum()) + "px";
|
|
|
454
|
|
|
455 this.line.style.left = (w - lw) / 2 + "px";
|
|
|
456 this.line.style.top = hh / 2 + "px";
|
|
|
457 this.line.style.height = Math.max(0, h - hh - 2) + "px"; //hard coded border width
|
|
|
458 //this.line.style.bottom = hh / 2 + "px";
|
|
|
459 this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px"; //hard coded border width
|
|
|
460 }
|
|
|
461 };
|
|
|
462
|
|
|
463 Slider.prototype.ontimer = function () {
|
|
|
464 var hw = this.handle.offsetWidth;
|
|
|
465 var hh = this.handle.offsetHeight;
|
|
|
466 var hl = this.handle.offsetLeft;
|
|
|
467 var ht = this.handle.offsetTop;
|
|
|
468
|
|
|
469 if (this._orientation == "horizontal") {
|
|
|
470 if (this._mouseX > hl + hw &&
|
|
|
471 (this._increasing == null || this._increasing)) {
|
|
|
472 this.setValue(this.getValue() + this.getBlockIncrement());
|
|
|
473 this._increasing = true;
|
|
|
474 }
|
|
|
475 else if (this._mouseX < hl &&
|
|
|
476 (this._increasing == null || !this._increasing)) {
|
|
|
477 this.setValue(this.getValue() - this.getBlockIncrement());
|
|
|
478 this._increasing = false;
|
|
|
479 }
|
|
|
480 }
|
|
|
481 else {
|
|
|
482 if (this._mouseY > ht + hh &&
|
|
|
483 (this._increasing == null || !this._increasing)) {
|
|
|
484 this.setValue(this.getValue() - this.getBlockIncrement());
|
|
|
485 this._increasing = false;
|
|
|
486 }
|
|
|
487 else if (this._mouseY < ht &&
|
|
|
488 (this._increasing == null || this._increasing)) {
|
|
|
489 this.setValue(this.getValue() + this.getBlockIncrement());
|
|
|
490 this._increasing = true;
|
|
|
491 }
|
|
|
492 }
|
|
|
493
|
|
|
494 this._timer.start();
|
|
|
495 };
|
