r1220 - in branches/dev/slider: tests/visual themes/base ui
Author: rdworth
Date: Mon Dec 22 15:28:01 2008
New Revision: 1220
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: ref/branches/dev/slider: slider refactor for #3650
- added mouse click and drag support
- added start/slide/stop callbacks
Modified: branches/dev/slider/tests/visual/slider.html
==============================================================================
--- branches/dev/slider/tests/visual/slider.html (original)
+++ branches/dev/slider/tests/visual/slider.html Mon Dec 22 15:28:01 2008
@@ -11,6 +11,21 @@
$(function() {
$("#slider1").slider();
$("#slider2").slider({
+ min: -7,
+ max: 83,
+ step: 1,
+ start: function(event, ui) {
+ console.log('start');
+ },
+ slide: function(event, ui) {
+ console.log('slide');
+ return (ui.value < 50);
+ },
+ stop: function(event, ui) {
+ console.log('stop');
+ }
+ });
+ $("#slider3").slider({
max: 10,
orientation: 'vertical',
step: 2,
@@ -23,13 +38,20 @@
<body>
<ul class="plugins">
-<li class="plugin" style="width:400px;padding:1em;">
+
+<li class="plugin" style="padding:1em;">
Slider
<div id="slider1"></div>
</li>
-<li class="plugin" style="height:auto;padding:1em;">
+
+<li class="plugin" style="padding:1em;">
Slider
- <div id="slider2" style="height:300px;"></div>
+ <div id="slider2"></div>
+</li>
+
+<li class="plugin" style="padding:1em;">
+ Slider - vertical
+ <div id="slider3" style="height:100%;"></div>
</li>
</ul>
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 Mon Dec 22 15:28:01 2008
@@ -1,7 +1,7 @@
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
-.ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height:
1.2em; }
+.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-horizontal { height: .8em; }
Modified: branches/dev/slider/ui/ui.slider.js
==============================================================================
--- branches/dev/slider/ui/ui.slider.js (original)
+++ branches/dev/slider/ui/ui.slider.js Mon Dec 22 15:28:01 2008
@@ -10,14 +10,19 @@
* Depends:
* ui.core.js
*/
+
(function($) {
-$.widget("ui.slider", {
+$.widget("ui.slider", $.extend({}, $.ui.mouse, {
_init: function() {
var self = this;
+ this._keySliding = false;
+
+ this._mouseInit();
+
this.element
.addClass("ui-slider"
+ " ui-slider-" + this._orientation()
@@ -31,22 +36,67 @@
+ " ui-state-default"
+ " ui-corner-all");
+ var uiSliderHandle = this.handle;
+
+ 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.handle.keydown(function(event) {
- if (self.options.disabled) return;
+ if (self.options.disabled)
+ return;
+
switch (event.keyCode) {
case $.ui.keyCode.HOME:
- self._setData('value', self._valueMin());
+ case $.ui.keyCode.END:
+ case $.ui.keyCode.UP:
+ case $.ui.keyCode.RIGHT:
+ case $.ui.keyCode.DOWN:
+ case $.ui.keyCode.LEFT:
+ self._keySliding = true;
+ self._start(event);
+ break;
+ }
+
+ var curVal = self.value(), newVal = curVal, step = self._step();
+
+ switch (event.keyCode) {
+ case $.ui.keyCode.HOME:
+ newVal = self._valueMin();
break;
case $.ui.keyCode.END:
- self._setData('value', self._valueMax());
+ newVal = self._valueMax();
break;
case $.ui.keyCode.UP:
case $.ui.keyCode.RIGHT:
- self._setData('value', self.value() + self._step());
+ newVal = curVal + step;
break;
case $.ui.keyCode.DOWN:
case $.ui.keyCode.LEFT:
- self._setData('value', self.value() - self._step());
+ newVal = curVal - step;
+ break;
+ }
+
+ self._slide(event, newVal);
+ }).keyup(function(event) {
+ if (self._keySliding) {
+ self._stop(event);
+ self._keySliding = false;
}
});
@@ -69,6 +119,107 @@
.removeData("slider")
.unbind(".slider");
+ this._mouseDestroy();
+
+ },
+
+ _mouseCapture: function(event) {
+
+ var o = this.options;
+
+ if (o.disabled)
+ return false;
+
+ this._start(event);
+
+ this.elementSize = {
+ width: this.element.outerWidth(),
+ height: this.element.outerHeight()
+ };
+ this.elementOffset = this.element.offset();
+
+ var position = { x: event.pageX, y: event.pageY };
+ var normValue = this._normValueFromMouse(position);
+
+ this._slide(event, normValue);
+
+ this.handle.focus();
+
+ return true;
+
+ },
+
+ _mouseStart: function(event) {
+ return true;
+ },
+
+ _mouseDrag: function(event) {
+ var position = { x: event.pageX, y: event.pageY };
+ var normValue = this._normValueFromMouse(position);
+
+ this._slide(event, normValue);
+
+ return false;
+ },
+
+ _mouseStop: function(event) {
+ this._stop(event);
+
+ return false;
+ },
+
+ _normValueFromMouse: function(position) {
+
+ var pixelTotal, pixelMouse;
+ if ('horizontal' == this._orientation()) {
+ pixelTotal = this.elementSize.width;
+ pixelMouse = position.x - this.elementOffset.left;
+ } else {
+ pixelTotal = this.elementSize.height;
+ pixelMouse = position.y - this.elementOffset.top;
+ }
+
+ var percentMouse = (pixelMouse / pixelTotal);
+ if (percentMouse > 1) percentMouse = 1;
+ if (percentMouse < 0) percentMouse = 0;
+ if ('vertical' == this._orientation())
+ percentMouse = 1 - percentMouse;
+
+ var valueTotal = this._valueMax() - this._valueMin();
+
+ var valueMouse = percentMouse * valueTotal;
+
+ var valueMouseModStep = valueMouse % this.options.step;
+
+ var normValue = this._valueMin() + valueMouse - valueMouseModStep;
+
+ if (valueMouseModStep > (this.options.step / 2))
+ normValue += this.options.step;
+
+ return normValue;
+ },
+
+ _start: function(event) {
+ this._trigger("start", event, {
+ value: this.value()
+ });
+ },
+
+ _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);
+ }
+ },
+
+ _stop: function(event) {
+ this._trigger("stop", event, {
+ value: this.value()
+ });
},
value: function(newValue) {
@@ -132,12 +283,14 @@
this.handle.css(this.options.orientation
== 'horizontal' ? 'left' : 'bottom', valPercent + '%');
}
-});
+}));
$.extend($.ui.slider, {
getter: "value",
version: "@VERSION",
defaults: {
+ delay: 0,
+ distance: 1,
max: 100,
min: 0,
orientation: 'horizontal',