r1228 - in branches/dev/slider: tests/visual themes/base ui
Author: rdworth
Date: Tue Dec 23 02:24:39 2008
New Revision: 1228
Modified:
branches/dev/slider/tests/visual/slider.html
branches/dev/slider/themes/base/ui.slider.css
branches/dev/slider/ui/ui.slider.js
Log:
branches/dev/slider: slider refactor for #3650
- added range: true support
- added multiple handle/values support
Modified: branches/dev/slider/tests/visual/slider.html
==============================================================================
--- branches/dev/slider/tests/visual/slider.html (original)
+++ branches/dev/slider/tests/visual/slider.html Tue Dec 23 02:24:39 2008
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
- <title>Simple Slider</title>
+ <title>Slider Visual Test Page</title>
<link rel="stylesheet" href="all.css" type="text/css">
<link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
@@ -11,22 +11,21 @@
$(function() {
$("#slider1").slider();
$("#slider2").slider({
- min: -7,
- max: 83,
step: 2,
start: function(event, ui) {
//console.log('start');
},
slide: function(event, ui) {
//console.log('slide');
- return (ui.value < 50 || ui.value > 63);
+ //return (ui.value < 50 || ui.value > 63);
},
stop: function(event, ui) {
//console.log('stop');
},
change: function(event, ui) {
//console.log('change');
- }
+ },
+ values: [10, 50, 90]
});
$("#slider3").slider({
max: 10,
@@ -34,6 +33,12 @@
step: 2,
value: 3
});
+ $("#h-range-true").slider({ orientation: "horizontal", range: true });
+ $("#h-range-max").slider({ orientation: "horizontal", range: 'max' });
+ $("#h-range-min").slider({ orientation: "horizontal", range: 'min' });
+ $("#v-range-true").slider({ orientation: "vertical", range: true });
+ $("#v-range-max").slider({ orientation: "vertical", range: 'max' });
+ $("#v-range-min").slider({ orientation: "vertical", range: 'min' });
});
</script>
</head>
@@ -48,14 +53,56 @@
</li>
<li class="plugin" style="padding:1em;">
- Slider
- <div id="slider2"></div>
+ Slider - values: [10, 50, 90]
+ <div id="slider2">
+ <a id="foo" href="#" class="ui-slider-handle"></a>
+ <a id="bar" href="#" class="ui-slider-handle"></a>
+ </div>
</li>
<li class="plugin" style="padding:1em;">
- Slider - vertical
+ Slider - orientation: vertical
<div id="slider3" style="height:100%;"></div>
</li>
+
+</ul>
+
+<ul class="plugins">
+
+<li class="plugin" style="padding:1em;">
+ Slider - range: true
+ <div id="h-range-true"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+ Slider - range: 'max'
+ <div id="h-range-max"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+ Slider - range: 'min'
+ <div id="h-range-min"></div>
+</li>
+
+</ul>
+
+<ul class="plugins">
+
+<li class="plugin" style="padding:1em;">
+ Slider - range: true
+ <div id="v-range-true"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+ Slider - range: 'max'
+ <div id="v-range-max"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+ Slider - range: 'min'
+ <div id="v-range-min"></div>
+</li>
+
</ul>
</body>
Modified: branches/dev/slider/themes/base/ui.slider.css
==============================================================================
--- branches/dev/slider/themes/base/ui.slider.css (original)
+++ branches/dev/slider/themes/base/ui.slider.css Tue Dec 23 02:24:39 2008
@@ -2,12 +2,12 @@
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height:
1.2em; cursor: default; }
-.ui-slider-range { position: relative; z-index: 1; font-size: 1%; display:
block; border: 0; }
+.ui-slider-range { position: absolute; z-index: 1; font-size: 1%; display:
block; border: 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
-.ui-slider-vertical { width: .8em; }
+.ui-slider-vertical { width: .8em; height: 100%; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0;
margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; height: auto; width: 100%;
}
Modified: branches/dev/slider/ui/ui.slider.js
==============================================================================
--- branches/dev/slider/ui/ui.slider.js (original)
+++ branches/dev/slider/ui/ui.slider.js Tue Dec 23 02:24:39 2008
@@ -30,34 +30,61 @@
+ " ui-widget-content"
+ " ui-corner-all");
- this.handle = $('<a href="#"></a>')
- .appendTo(this.element)
- .addClass("ui-slider-handle"
- + " ui-state-default"
+ this.range = $([]);
+
+ if (this.options.range) {
+ if (this.options.range === true) {
+ this.range = $('<a href="#"></a>');
+ if (!this.options.values) this.options.values = [this._valueMin(),
this._valueMin()];
+ if (this.options.values.length && this.options.values.length != 2) {
+ this.options.values = [this.options.values[0],
this.options.values[0]];
+ }
+ } else {
+ this.range = $('<div></div>');
+ }
+ this.range
+ .appendTo(this.element)
+ .addClass("ui-slider-range"
+ + " ui-widget-header");
+
+ var oRange = this.options.range, oOrientation = this._orientation();
+ (oRange == "min") && (oOrientation == "horizontal") && this.range.css({
left : 0 });
+ (oRange == "max") && (oOrientation == "horizontal") && this.range.css({
right : 0 });
+ (oRange == "min") && (oOrientation == "vertical") && this.range.css({
bottom : 0 });
+ (oRange == "max") && (oOrientation == "vertical") && this.range.css({
top : 0 });
+ }
+
+ if ($(".ui-slider-handle", this.element).length == 0)
+ $('<a href="#"></a>')
+ .appendTo(this.element)
+ .addClass("ui-slider-handle");
+
+ if (this.options.values && this.options.values.length) {
+ while ($(".ui-slider-handle", this.element).length <
this.options.values.length)
+ $('<a href="#"></a>')
+ .appendTo(this.element)
+ .addClass("ui-slider-handle");
+ }
+
+ this.handles = $(".ui-slider-handle", this.element)
+ .addClass("ui-state-default"
+ " ui-corner-all");
- var uiSliderHandle = this.handle;
+ this.handle = this.handles.eq(0);
- uiSliderHandle
- .click(function(event) {
- event.preventDefault();
- })
- .hover(
- function() {
- uiSliderHandle.addClass('ui-state-hover');
- },
- function() {
- uiSliderHandle.removeClass('ui-state-hover');
- }
- )
- .focus(function() {
- uiSliderHandle.addClass('ui-state-focus');
- })
- .blur(function() {
- uiSliderHandle.removeClass('ui-state-focus');
- });
+ this.handles.add(this.range).filter("a")
+ .click(function(event) { event.preventDefault(); })
+ .hover(function() { $(this).addClass('ui-state-hover'); }, function() {
$(this).removeClass('ui-state-hover'); })
+ .focus(function() { self.handles.removeClass('ui-state-focus');
$(this).addClass('ui-state-focus'); })
+ .blur(function() { $(this).removeClass('ui-state-focus'); });
+
+ this.handles.each(function(i) {
+ $(this).data("index.ui-slider-handle", i);
+ })
+
+ this.handles.keydown(function(event) {
+ var index = $(this).data("index.ui-slider-handle");
- this.handle.keydown(function(event) {
if (self.options.disabled)
return;
@@ -70,12 +97,18 @@
case $.ui.keyCode.LEFT:
if (!self._keySliding) {
self._keySliding = true;
+ $(this).addClass("ui-state-active");
self._start(event);
}
break;
}
- var curVal = self.value(), newVal = curVal, step = self._step();
+ var curVal, newVal, step = self._step();
+ if (self.options.values && self.options.values.length) {
+ curVal = newVal = self.values(index);
+ } else {
+ curVal = newVal = self.value();
+ }
switch (event.keyCode) {
case $.ui.keyCode.HOME:
@@ -100,6 +133,7 @@
self._stop(event);
self._change(event);
self._keySliding = false;
+ $(this).removeClass("ui-state-active");
}
});
@@ -109,7 +143,7 @@
destroy: function() {
- this.handle.remove();
+ this.handles.remove();
this.element
.removeClass("ui-slider"
@@ -144,9 +178,21 @@
var position = { x: event.pageX, y: event.pageY };
var normValue = this._normValueFromMouse(position);
- this._slide(event, normValue);
+ var distance = this._valueMax(), closestHandle;
+ var self = this;
+ this.handles.each(function(i) {
+ var thisDistance = Math.abs(normValue - self.values(i));
+ if (distance > thisDistance) {
+ distance = thisDistance;
+ closestHandle = $(this);
+ }
+ });
- this.handle.focus();
+ closestHandle
+ .addClass("ui-state-active")
+ .focus();
+
+ this._slide(event, normValue);
return true;
@@ -166,6 +212,7 @@
},
_mouseStop: function(event) {
+ this.handles.removeClass("ui-state-active");
this._stop(event);
this._change(event);
@@ -210,13 +257,27 @@
},
_slide: function(event, newVal) {
- if (newVal != this.value()) {
- // A slide can be canceled by returning false from the slide callback
- var allowed = this._trigger("slide", event, {
- value: newVal
- });
- if (allowed !== false)
- this._setData('value', newVal);
+ if (this.options.values && this.options.values.length) {
+ var handle = this.handles.filter(".ui-state-active");
+ var index = handle.data("index.ui-slider-handle");
+ if (newVal != this.values(index)) {
+ // A slide can be canceled by returning false from the slide callback
+ var allowed = this._trigger("slide", event, {
+ handle: handle,
+ value: newVal
+ });
+ if (allowed !== false)
+ this.values(index, newVal);
+ }
+ } else {
+ if (newVal != this.value()) {
+ // A slide can be canceled by returning false from the slide callback
+ var allowed = this._trigger("slide", event, {
+ value: newVal
+ });
+ if (allowed !== false)
+ this._setData('value', newVal);
+ }
}
},
@@ -241,6 +302,24 @@
return this._value();
},
+ values: function(index, newValue) {
+ if (arguments.length > 1) {
+ this.options.values[index] = newValue;
+ this._refreshValue();
+ this._change();
+ }
+
+ if (arguments.length) {
+ if (this.options.values && this.options.values.length) {
+ return this._values(index);
+ } else {
+ return this.value();
+ }
+ } else {
+ return this._values();
+ }
+ },
+
_setData: function(key, value) {
$.widget.prototype._setData.apply(this, arguments);
@@ -279,6 +358,18 @@
return val;
},
+ _values: function(index) {
+ if (arguments.length) {
+ var val = this.options.values[index];
+ if (val < this._valueMin()) val = this._valueMin();
+ if (val > this._valueMax()) val = this._valueMax();
+
+ return val;
+ } else {
+ return this.options.values;
+ }
+ },
+
_valueMin: function() {
var valueMin = this.options.min;
@@ -292,23 +383,50 @@
},
_refreshValue: function() {
- var valPercent = (this.value() - this._valueMin()) / (this._valueMax() -
this._valueMin()) * 100;
- this.handle.css(this.options.orientation
== 'horizontal' ? 'left' : 'bottom', valPercent + '%');
+ var oRange = this.options.range, oOrientation = this._orientation();
+
+ if (this.options.values && this.options.values.length) {
+ var self = this, vp0, vp1;
+ this.handles.each(function(i, j) {
+ var valPercent = (self.values(i) - self._valueMin()) /
(self._valueMax() - self._valueMin()) * 100;
+ $(this).css(oOrientation == 'horizontal' ? 'left' : 'bottom',
valPercent + '%');
+ if (self.options.range === true) {
+ if (oOrientation == 'horizontal') {
+ (i == 0) && self.range.css('left', valPercent + '%');
+ (i == 1) && self.range.css('width', (valPercent - lastValPercent)
+ '%');
+ } else {
+ (i == 0) && self.range.css('bottom', (valPercent) + '%');
+ (i == 1) && self.range.css('height', (valPercent - lastValPercent)
+ '%');
+ }
+ }
+ lastValPercent = valPercent;
+ });
+ } else {
+ var valPercent = (this.value() - this._valueMin()) / (this._valueMax()
- this._valueMin()) * 100;
+ this.handle.css(oOrientation == 'horizontal' ? 'left' : 'bottom',
valPercent + '%');
+
+ (oRange == "min") && (oOrientation == "horizontal") && this.range.css({
left: 0, width: valPercent + '%' });
+ (oRange == "max") && (oOrientation == "horizontal") && this.range.css({
left: valPercent + '%', width: (100 - valPercent) + '%' });
+ (oRange == "min") && (oOrientation == "vertical") && this.range.css({
top: (100 - valPercent) + '%', height: valPercent + '%' });
+ (oRange == "max") && (oOrientation == "vertical") && this.range.css({
bottom: valPercent + '%', height: (100 - valPercent) + '%' });
+ }
}
}));
$.extend($.ui.slider, {
- getter: "value",
+ getter: "value values",
version: "@VERSION",
defaults: {
delay: 0,
- distance: 1,
+ distance: 0,
max: 100,
min: 0,
orientation: 'horizontal',
+ range: false,
step: 1,
- value: 0
+ value: 0,
+ values: null
}
});