source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/ui/jquery.ui.slider.js@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.
  • Property svn:executable set to *
File size: 16.2 KB
Line 
1/*
2 * jQuery UI Slider 1.8rc1
3 *
4 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT (MIT-LICENSE.txt)
6 * and GPL (GPL-LICENSE.txt) licenses.
7 *
8 * http://docs.jquery.com/UI/Slider
9 *
10 * Depends:
11 * jquery.ui.core.js
12 * jquery.ui.mouse.js
13 * jquery.ui.widget.js
14 */
15
16(function($) {
17
18// number of pages in a slider
19// (how many times can you page up/down to go through the whole range)
20var numPages = 5;
21
22$.widget("ui.slider", $.ui.mouse, {
23 options: {
24 animate: false,
25 distance: 0,
26 max: 100,
27 min: 0,
28 orientation: 'horizontal',
29 range: false,
30 step: 1,
31 value: 0,
32 values: null
33 },
34 _create: function() {
35
36 var self = this, o = this.options;
37 this._keySliding = false;
38 this._animateOff = true;
39 this._handleIndex = null;
40 this._detectOrientation();
41 this._mouseInit();
42
43 this.element
44 .addClass("ui-slider"
45 + " ui-slider-" + this.orientation
46 + " ui-widget"
47 + " ui-widget-content"
48 + " ui-corner-all");
49
50 if (o.disabled) {
51 this.element.addClass('ui-slider-disabled ui-disabled');
52 }
53
54 this.range = $([]);
55
56 if (o.range) {
57
58 if (o.range === true) {
59 this.range = $('<div></div>');
60 if (!o.values) o.values = [this._valueMin(), this._valueMin()];
61 if (o.values.length && o.values.length != 2) {
62 o.values = [o.values[0], o.values[0]];
63 }
64 } else {
65 this.range = $('<div></div>');
66 }
67
68 this.range
69 .appendTo(this.element)
70 .addClass("ui-slider-range");
71
72 if (o.range == "min" || o.range == "max") {
73 this.range.addClass("ui-slider-range-" + o.range);
74 }
75
76 // note: this isn't the most fittingly semantic framework class for this element,
77 // but worked best visually with a variety of themes
78 this.range.addClass("ui-widget-header");
79
80 }
81
82 if ($(".ui-slider-handle", this.element).length == 0)
83 $('<a href="#"></a>')
84 .appendTo(this.element)
85 .addClass("ui-slider-handle");
86
87 if (o.values && o.values.length) {
88 while ($(".ui-slider-handle", this.element).length < o.values.length)
89 $('<a href="#"></a>')
90 .appendTo(this.element)
91 .addClass("ui-slider-handle");
92 }
93
94 this.handles = $(".ui-slider-handle", this.element)
95 .addClass("ui-state-default"
96 + " ui-corner-all");
97
98 this.handle = this.handles.eq(0);
99
100 this.handles.add(this.range).filter("a")
101 .click(function(event) {
102 event.preventDefault();
103 })
104 .hover(function() {
105 if (!o.disabled) {
106 $(this).addClass('ui-state-hover');
107 }
108 }, function() {
109 $(this).removeClass('ui-state-hover');
110 })
111 .focus(function() {
112 if (!o.disabled) {
113 $(".ui-slider .ui-state-focus").removeClass('ui-state-focus'); $(this).addClass('ui-state-focus');
114 } else {
115 $(this).blur();
116 }
117 })
118 .blur(function() {
119 $(this).removeClass('ui-state-focus');
120 });
121
122 this.handles.each(function(i) {
123 $(this).data("index.ui-slider-handle", i);
124 });
125
126 this.handles.keydown(function(event) {
127
128 var ret = true;
129
130 var index = $(this).data("index.ui-slider-handle");
131
132 if (self.options.disabled)
133 return;
134
135 switch (event.keyCode) {
136 case $.ui.keyCode.HOME:
137 case $.ui.keyCode.END:
138 case $.ui.keyCode.PAGE_UP:
139 case $.ui.keyCode.PAGE_DOWN:
140 case $.ui.keyCode.UP:
141 case $.ui.keyCode.RIGHT:
142 case $.ui.keyCode.DOWN:
143 case $.ui.keyCode.LEFT:
144 ret = false;
145 if (!self._keySliding) {
146 self._keySliding = true;
147 $(this).addClass("ui-state-active");
148 self._start(event, index);
149 }
150 break;
151 }
152
153 var curVal, newVal, step = self._step();
154 if (self.options.values && self.options.values.length) {
155 curVal = newVal = self.values(index);
156 } else {
157 curVal = newVal = self.value();
158 }
159
160 switch (event.keyCode) {
161 case $.ui.keyCode.HOME:
162 newVal = self._valueMin();
163 break;
164 case $.ui.keyCode.END:
165 newVal = self._valueMax();
166 break;
167 case $.ui.keyCode.PAGE_UP:
168 newVal = curVal + ((self._valueMax() - self._valueMin()) / numPages);
169 break;
170 case $.ui.keyCode.PAGE_DOWN:
171 newVal = curVal - ((self._valueMax() - self._valueMin()) / numPages);
172 break;
173 case $.ui.keyCode.UP:
174 case $.ui.keyCode.RIGHT:
175 if(curVal == self._valueMax()) return;
176 newVal = curVal + step;
177 break;
178 case $.ui.keyCode.DOWN:
179 case $.ui.keyCode.LEFT:
180 if(curVal == self._valueMin()) return;
181 newVal = curVal - step;
182 break;
183 }
184
185 self._slide(event, index, newVal);
186
187 return ret;
188
189 }).keyup(function(event) {
190
191 var index = $(this).data("index.ui-slider-handle");
192
193 if (self._keySliding) {
194 self._stop(event, index);
195 self._change(event, index);
196 self._keySliding = false;
197 $(this).removeClass("ui-state-active");
198 }
199
200 });
201
202 this._refreshValue();
203
204 this._animateOff = false;
205
206 },
207
208 destroy: function() {
209
210 this.handles.remove();
211 this.range.remove();
212
213 this.element
214 .removeClass("ui-slider"
215 + " ui-slider-horizontal"
216 + " ui-slider-vertical"
217 + " ui-slider-disabled"
218 + " ui-widget"
219 + " ui-widget-content"
220 + " ui-corner-all")
221 .removeData("slider")
222 .unbind(".slider");
223
224 this._mouseDestroy();
225
226 return this;
227 },
228
229 _mouseCapture: function(event) {
230
231 var o = this.options;
232
233 if (o.disabled)
234 return false;
235
236 this.elementSize = {
237 width: this.element.outerWidth(),
238 height: this.element.outerHeight()
239 };
240 this.elementOffset = this.element.offset();
241
242 var position = { x: event.pageX, y: event.pageY };
243 var normValue = this._normValueFromMouse(position);
244
245 var distance = this._valueMax() - this._valueMin() + 1, closestHandle;
246 var self = this, index;
247 this.handles.each(function(i) {
248 var thisDistance = Math.abs(normValue - self.values(i));
249 if (distance > thisDistance) {
250 distance = thisDistance;
251 closestHandle = $(this);
252 index = i;
253 }
254 });
255
256 // workaround for bug #3736 (if both handles of a range are at 0,
257 // the first is always used as the one with least distance,
258 // and moving it is obviously prevented by preventing negative ranges)
259 if(o.range == true && this.values(1) == o.min) {
260 closestHandle = $(this.handles[++index]);
261 }
262
263 this._start(event, index);
264
265 self._handleIndex = index;
266
267 closestHandle
268 .addClass("ui-state-active")
269 .focus();
270
271 var offset = closestHandle.offset();
272 var mouseOverHandle = !$(event.target).parents().andSelf().is('.ui-slider-handle');
273 this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
274 left: event.pageX - offset.left - (closestHandle.width() / 2),
275 top: event.pageY - offset.top
276 - (closestHandle.height() / 2)
277 - (parseInt(closestHandle.css('borderTopWidth'),10) || 0)
278 - (parseInt(closestHandle.css('borderBottomWidth'),10) || 0)
279 + (parseInt(closestHandle.css('marginTop'),10) || 0)
280 };
281
282 normValue = this._normValueFromMouse(position);
283 this._slide(event, index, normValue);
284 this._animateOff = true;
285 return true;
286
287 },
288
289 _mouseStart: function(event) {
290 return true;
291 },
292
293 _mouseDrag: function(event) {
294
295 var position = { x: event.pageX, y: event.pageY };
296 var normValue = this._normValueFromMouse(position);
297
298 this._slide(event, this._handleIndex, normValue);
299
300 return false;
301
302 },
303
304 _mouseStop: function(event) {
305
306 this.handles.removeClass("ui-state-active");
307 this._stop(event, this._handleIndex);
308 this._change(event, this._handleIndex);
309 this._handleIndex = null;
310 this._clickOffset = null;
311
312 this._animateOff = false;
313 return false;
314
315 },
316
317 _detectOrientation: function() {
318 this.orientation = this.options.orientation == 'vertical' ? 'vertical' : 'horizontal';
319 },
320
321 _normValueFromMouse: function(position) {
322
323 var pixelTotal, pixelMouse;
324 if ('horizontal' == this.orientation) {
325 pixelTotal = this.elementSize.width;
326 pixelMouse = position.x - this.elementOffset.left - (this._clickOffset ? this._clickOffset.left : 0);
327 } else {
328 pixelTotal = this.elementSize.height;
329 pixelMouse = position.y - this.elementOffset.top - (this._clickOffset ? this._clickOffset.top : 0);
330 }
331
332 var percentMouse = (pixelMouse / pixelTotal);
333 if (percentMouse > 1) percentMouse = 1;
334 if (percentMouse < 0) percentMouse = 0;
335 if ('vertical' == this.orientation)
336 percentMouse = 1 - percentMouse;
337
338 var valueTotal = this._valueMax() - this._valueMin(),
339 valueMouse = percentMouse * valueTotal,
340 valueMouseModStep = valueMouse % this.options.step,
341 normValue = this._valueMin() + valueMouse - valueMouseModStep;
342
343 if (valueMouseModStep > (this.options.step / 2))
344 normValue += this.options.step;
345
346 // Since JavaScript has problems with large floats, round
347 // the final value to 5 digits after the decimal point (see #4124)
348 return parseFloat(normValue.toFixed(5));
349
350 },
351
352 _start: function(event, index) {
353 var uiHash = {
354 handle: this.handles[index],
355 value: this.value()
356 };
357 if (this.options.values && this.options.values.length) {
358 uiHash.value = this.values(index);
359 uiHash.values = this.values();
360 }
361 this._trigger("start", event, uiHash);
362 },
363
364 _slide: function(event, index, newVal) {
365
366 var handle = this.handles[index];
367
368 if (this.options.values && this.options.values.length) {
369
370 var otherVal = this.values(index ? 0 : 1);
371
372 if ((this.options.values.length == 2 && this.options.range === true) &&
373 ((index == 0 && newVal > otherVal) || (index == 1 && newVal < otherVal))){
374 newVal = otherVal;
375 }
376
377 if (newVal != this.values(index)) {
378 var newValues = this.values();
379 newValues[index] = newVal;
380 // A slide can be canceled by returning false from the slide callback
381 var allowed = this._trigger("slide", event, {
382 handle: this.handles[index],
383 value: newVal,
384 values: newValues
385 });
386 var otherVal = this.values(index ? 0 : 1);
387 if (allowed !== false) {
388 this.values(index, newVal, true);
389 }
390 }
391
392 } else {
393
394 if (newVal != this.value()) {
395 // A slide can be canceled by returning false from the slide callback
396 var allowed = this._trigger("slide", event, {
397 handle: this.handles[index],
398 value: newVal
399 });
400 if (allowed !== false) {
401 this.value(newVal);
402 }
403
404 }
405
406 }
407
408 },
409
410 _stop: function(event, index) {
411 var uiHash = {
412 handle: this.handles[index],
413 value: this.value()
414 };
415 if (this.options.values && this.options.values.length) {
416 uiHash.value = this.values(index);
417 uiHash.values = this.values();
418 }
419 this._trigger("stop", event, uiHash);
420 },
421
422 _change: function(event, index) {
423 var uiHash = {
424 handle: this.handles[index],
425 value: this.value()
426 };
427 if (this.options.values && this.options.values.length) {
428 uiHash.value = this.values(index);
429 uiHash.values = this.values();
430 }
431 this._trigger("change", event, uiHash);
432 },
433
434 value: function(newValue) {
435
436 if (arguments.length) {
437 this.options.value = this._trimValue(newValue);
438 this._refreshValue();
439 this._change(null, 0);
440 }
441
442 return this._value();
443
444 },
445
446 values: function(index, newValue) {
447
448 if (arguments.length > 1) {
449 this.options.values[index] = this._trimValue(newValue);
450 this._refreshValue();
451 this._change(null, index);
452 }
453
454 if (arguments.length) {
455 if ($.isArray(arguments[0])) {
456 var vals = this.options.values, newValues = arguments[0];
457 for (var i = 0, l = vals.length; i < l; i++) {
458 vals[i] = this._trimValue(newValues[i]);
459 this._change(null, i);
460 }
461 this._refreshValue();
462 } else {
463 if (this.options.values && this.options.values.length) {
464 return this._values(index);
465 } else {
466 return this.value();
467 }
468 }
469 } else {
470 return this._values();
471 }
472
473 },
474
475 _setOption: function(key, value) {
476
477 $.Widget.prototype._setOption.apply(this, arguments);
478
479 switch (key) {
480 case 'disabled':
481 if (value) {
482 this.handles.filter(".ui-state-focus").blur();
483 this.handles.removeClass("ui-state-hover");
484 this.handles.attr("disabled", "disabled");
485 this.element.addClass("ui-disabled");
486 } else {
487 this.handles.removeAttr("disabled");
488 this.element.removeClass("ui-disabled");
489 }
490 case 'orientation':
491
492 this._detectOrientation();
493
494 this.element
495 .removeClass("ui-slider-horizontal ui-slider-vertical")
496 .addClass("ui-slider-" + this.orientation);
497 this._refreshValue();
498 break;
499 case 'value':
500 this._animateOff = true;
501 this._refreshValue();
502 this._animateOff = false;
503 break;
504 case 'values':
505 this._animateOff = true;
506 this._refreshValue();
507 this._animateOff = false;
508 break;
509 }
510
511 },
512
513 _step: function() {
514 var step = this.options.step;
515 return step;
516 },
517
518 _value: function() {
519 //internal value getter
520 // _value() returns value trimmed by min and max
521 var val = this.options.value;
522 val = this._trimValue(val);
523
524 return val;
525 },
526
527 _values: function(index) {
528 //internal values getter
529 // _values() returns array of values trimmed by min and max
530 // _values(index) returns single value trimmed by min and max
531
532 if (arguments.length) {
533 var val = this.options.values[index];
534 val = this._trimValue(val);
535
536 return val;
537 } else {
538 // .slice() creates a copy of the array
539 // this copy gets trimmed by min and max and then returned
540 var vals = this.options.values.slice();
541 for (var i = 0, l = vals.length; i < l; i++) {
542 vals[i] = this._trimValue(vals[i]);
543 }
544
545 return vals;
546 }
547
548 },
549
550 _trimValue: function(val) {
551 if (val < this._valueMin()) val = this._valueMin();
552 if (val > this._valueMax()) val = this._valueMax();
553
554 return val;
555 },
556
557 _valueMin: function() {
558 var valueMin = this.options.min;
559 return valueMin;
560 },
561
562 _valueMax: function() {
563 var valueMax = this.options.max;
564 return valueMax;
565 },
566
567 _refreshValue: function() {
568
569 var oRange = this.options.range, o = this.options, self = this;
570 var animate = (!this._animateOff) ? o.animate : false;
571
572 if (this.options.values && this.options.values.length) {
573 var vp0, vp1;
574 this.handles.each(function(i, j) {
575 var valPercent = (self.values(i) - self._valueMin()) / (self._valueMax() - self._valueMin()) * 100;
576 var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%';
577 $(this).stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate);
578 if (self.options.range === true) {
579 if (self.orientation == 'horizontal') {
580 (i == 0) && self.range.stop(1,1)[animate ? 'animate' : 'css']({ left: valPercent + '%' }, o.animate);
581 (i == 1) && self.range[animate ? 'animate' : 'css']({ width: (valPercent - lastValPercent) + '%' }, { queue: false, duration: o.animate });
582 } else {
583 (i == 0) && self.range.stop(1,1)[animate ? 'animate' : 'css']({ bottom: (valPercent) + '%' }, o.animate);
584 (i == 1) && self.range[animate ? 'animate' : 'css']({ height: (valPercent - lastValPercent) + '%' }, { queue: false, duration: o.animate });
585 }
586 }
587 lastValPercent = valPercent;
588 });
589 } else {
590 var value = this.value(),
591 valueMin = this._valueMin(),
592 valueMax = this._valueMax(),
593 valPercent = valueMax != valueMin
594 ? (value - valueMin) / (valueMax - valueMin) * 100
595 : 0;
596 var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%';
597 this.handle.stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate);
598
599 (oRange == "min") && (this.orientation == "horizontal") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ width: valPercent + '%' }, o.animate);
600 (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
601 (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate);
602 (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
603 }
604
605 }
606
607});
608
609$.extend($.ui.slider, {
610 version: "1.8rc1",
611 eventPrefix: "slide"
612});
613
614})(jQuery);
Note: See TracBrowser for help on using the repository browser.