diff options
author | Richard Worth <rdworth@gmail.com> | 2008-11-21 04:40:23 +0000 |
---|---|---|
committer | Richard Worth <rdworth@gmail.com> | 2008-11-21 04:40:23 +0000 |
commit | e98934200f606d7973902495450ea5b5d79440af (patch) | |
tree | bb72b591548a85e14b20a223ea43a77e6712e33f /ui | |
parent | 8ab19f209a8effbbd5ee4d1cba2a49ca8e6672b6 (diff) | |
download | jquery-ui-e98934200f606d7973902495450ea5b5d79440af.tar.gz jquery-ui-e98934200f606d7973902495450ea5b5d79440af.zip |
slider: formatting changes - moved some things around for consistency.
_init and destroy at the top, then _mouse methods. plugins, ui last. Sorted defaults alphabetically.
Diffstat (limited to 'ui')
-rw-r--r-- | ui/ui.slider.js | 328 |
1 files changed, 206 insertions, 122 deletions
diff --git a/ui/ui.slider.js b/ui/ui.slider.js index 9a1c476e6..b678d0af4 100644 --- a/ui/ui.slider.js +++ b/ui/ui.slider.js @@ -19,55 +19,6 @@ $.fn.unwrap = $.fn.unwrap || function(expr) { }; $.widget("ui.slider", { - plugins: {}, - _round: function(value) { - return this.options.round ? parseInt(value,10) : parseFloat(value); - }, - ui: function(event) { - return { - options: this.options, - handle: this.currentHandle, - value: this.options.axis != "both" || !this.options.axis ? this._round(this.value(null,this.options.axis == "vertical" ? "y" : "x")) : { - x: this._round(this.value(null,"x")), - y: this._round(this.value(null,"y")) - }, - range: this._getRange() - }; - }, - _propagate: function(n, event) { - $.ui.plugin.call(this, n, [event, this.ui()]); - this.element.triggerHandler(n == "slide" ? n : "slide"+n, [event, this.ui()], this.options[n]); - }, - destroy: function() { - - this.element - .removeClass("ui-slider ui-slider-disabled") - .removeData("slider") - .unbind(".slider"); - - if(this.handle && this.handle.length) { - this.handle - .unwrap("a"); - this.handle.each(function() { - var mouse = $(this).data("mouse"); - mouse && mouse._mouseDestroy(); - }); - } - - this.generated && this.generated.remove(); - - }, - _setData: function(key, value) { - $.widget.prototype._setData.apply(this, arguments); - if (/min|max|steps/.test(key)) { - this._initBoundaries(); - } - - if(key == "range") { - value ? this.handle.length == 2 && this._createRange() : this._removeRange(); - } - - }, _init: function() { @@ -100,10 +51,10 @@ $.widget("ui.slider", { }; $.extend(handleclass.prototype, $.ui.mouse, { + _mouseCapture: function() { return true; }, _mouseStart: function(event) { return self._start.call(self, event, this.element[0]); }, - _mouseStop: function(event) { return self._stop.call(self, event, this.element[0]); }, _mouseDrag: function(event) { return self._drag.call(self, event, this.element[0]); }, - _mouseCapture: function() { return true; }, + _mouseStop: function(event) { return self._stop.call(self, event, this.element[0]); }, trigger: function(event) { this._mouseDown(event); } }); @@ -135,7 +86,128 @@ $.widget("ui.slider", { this.previousHandle = $(this.handle[0]); //set the previous handle to the first to allow clicking before selecting the handle if(this.handle.length == 2 && this.options.range) this._createRange(); + + }, + + destroy: function() { + + this.element + .removeClass("ui-slider ui-slider-disabled") + .removeData("slider") + .unbind(".slider"); + + if(this.handle && this.handle.length) { + this.handle + .unwrap("a"); + this.handle.each(function() { + var mouse = $(this).data("mouse"); + mouse && mouse._mouseDestroy(); + }); + } + + this.generated && this.generated.remove(); + + }, + + _start: function(event, handle) { + + var o = this.options; + if(o.disabled) return false; + + // Prepare the outer size + this.actualSize = { width: this.element.outerWidth() , height: this.element.outerHeight() }; + + // This is a especially ugly fix for strange blur events happening on mousemove events + if (!this.currentHandle) + this._focus(this.previousHandle, true); + + this.offset = this.element.offset(); + + this.handleOffset = this.currentHandle.offset(); + this.clickOffset = { top: event.pageY - this.handleOffset.top, left: event.pageX - this.handleOffset.left }; + + this.firstValue = this.value(); + + this._propagate('start', event); + this._drag(event, handle); + return true; + + }, + + _drag: function(event, handle) { + + var o = this.options; + + var position = { top: event.pageY - this.offset.top - this.clickOffset.top, left: event.pageX - this.offset.left - this.clickOffset.left}; + if(!this.currentHandle) this._focus(this.previousHandle, true); //This is a especially ugly fix for strange blur events happening on mousemove events + + position.left = this._translateLimits(position.left, "x"); + position.top = this._translateLimits(position.top, "y"); + + if (o.stepping.x) { + var value = this._convertValue(position.left, "x"); + value = this._round(value / o.stepping.x) * o.stepping.x; + position.left = this._translateValue(value, "x"); + } + if (o.stepping.y) { + var value = this._convertValue(position.top, "y"); + value = this._round(value / o.stepping.y) * o.stepping.y; + position.top = this._translateValue(value, "y"); + } + + position.left = this._translateRange(position.left, "x"); + position.top = this._translateRange(position.top, "y"); + + if(o.axis != "vertical") this.currentHandle.css({ left: position.left }); + if(o.axis != "horizontal") this.currentHandle.css({ top: position.top }); + + //Store the slider's value + this.currentHandle.data("mouse").sliderValue = { + x: this._round(this._convertValue(position.left, "x")) || 0, + y: this._round(this._convertValue(position.top, "y")) || 0 + }; + + if (this.rangeElement) + this._updateRange(); + this._propagate('slide', event); + return false; + + }, + + _stop: function(event) { + + this._propagate('stop', event); + + if (this.firstValue != this.value()) + this._propagate('change', event); + + // This is a especially ugly fix for strange blur events happening on mousemove events + this._focus(this.currentHandle, true); + + return false; + + }, + + _round: function(value) { + + return this.options.round ? parseInt(value,10) : parseFloat(value); + + }, + + _setData: function(key, value) { + + $.widget.prototype._setData.apply(this, arguments); + + if (/min|max|steps/.test(key)) { + this._initBoundaries(); + } + + if(key == "range") { + value ? this.handle.length == 2 && this._createRange() : this._removeRange(); + } + }, + _initBoundaries: function() { var element = this.element[0], o = this.options; @@ -156,9 +228,11 @@ $.widget("ui.slider", { x: o.stepping && o.stepping.x || parseInt(o.stepping, 10) || (o.steps ? o.realMax.x/(o.steps.x || parseInt(o.steps, 10) || o.realMax.x) : 0), y: o.stepping && o.stepping.y || parseInt(o.stepping, 10) || (o.steps ? o.realMax.y/(o.steps.y || parseInt(o.steps, 10) || o.realMax.y) : 0) }; + }, _keydown: function(keyCode, handle) { + if (this.options.disabled) return; @@ -181,17 +255,31 @@ $.widget("ui.slider", { return false; } return true; + }, + _focus: function(handle,hard) { + this.currentHandle = $(handle).addClass('ui-slider-handle-active'); + if (hard) this.currentHandle.parent()[0].focus(); + }, + _blur: function(handle) { + $(handle).removeClass('ui-slider-handle-active'); - if(this.currentHandle && this.currentHandle[0] == handle) { this.previousHandle = this.currentHandle; this.currentHandle = null; }; + + if(this.currentHandle && this.currentHandle[0] == handle) { + this.previousHandle = this.currentHandle; + this.currentHandle = null; + }; + }, + _click: function(event) { + // This method is only used if: // - The user didn't click a handle // - The Slider is not disabled @@ -218,34 +306,51 @@ $.widget("ui.slider", { y: this._convertValue(event.pageY - this.offset.top - this.currentHandle[0].offsetHeight/2, "y"), x: this._convertValue(event.pageX - this.offset.left - this.currentHandle[0].offsetWidth/2, "x") }, null, !this.options.distance); + }, _createRange: function() { + if(this.rangeElement) return; this.rangeElement = $('<div></div>') .addClass('ui-slider-range') .css({ position: 'absolute' }) .appendTo(this.element); this._updateRange(); + }, + _removeRange: function() { + this.rangeElement.remove(); this.rangeElement = null; + }, + _updateRange: function() { + var prop = this.options.axis == "vertical" ? "top" : "left"; var size = this.options.axis == "vertical" ? "height" : "width"; + this.rangeElement.css(prop, (this._round($(this.handle[0]).css(prop)) || 0) + this._handleSize(0, this.options.axis == "vertical" ? "y" : "x")/2); this.rangeElement.css(size, (this._round($(this.handle[1]).css(prop)) || 0) - (this._round($(this.handle[0]).css(prop)) || 0)); + }, + _getRange: function() { + return this.rangeElement ? this._convertValue(this._round(this.rangeElement.css(this.options.axis == "vertical" ? "height" : "width")), this.options.axis == "vertical" ? "y" : "x") : null; + }, _handleIndex: function() { + return this.handle.index(this.currentHandle[0]); + }, + value: function(handle, axis) { + if(this.handle.length == 1) this.currentHandle = this.handle; if(!axis) axis = this.options.axis == "vertical" ? "y" : "x"; @@ -258,20 +363,28 @@ $.widget("ui.slider", { } }, + _convertValue: function(value,axis) { + return this.options.min[axis] + (value / (this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(null,axis))) * this.options.realMax[axis]; + }, _translateValue: function(value,axis) { + return ((value - this.options.min[axis]) / this.options.realMax[axis]) * (this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(null,axis)); + }, + _translateRange: function(value,axis) { + if (this.rangeElement) { if (this.currentHandle[0] == this.handle[0] && value >= this._translateValue(this.value(1),axis)) value = this._translateValue(this.value(1,axis) - this._oneStep(axis), axis); if (this.currentHandle[0] == this.handle[1] && value <= this._translateValue(this.value(0),axis)) value = this._translateValue(this.value(0,axis) + this._oneStep(axis), axis); } + if (this.options.handles) { var handle = this.options.handles[this._handleIndex()]; if (value < this._translateValue(handle.min,axis)) { @@ -280,93 +393,39 @@ $.widget("ui.slider", { value = this._translateValue(handle.max,axis); } } + return value; + }, + _translateLimits: function(value,axis) { + if (value >= this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(null,axis)) value = this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(null,axis); + if (value <= 0) value = 0; - return value; - }, - _handleSize: function(handle,axis) { - return $(handle != undefined && handle !== null ? this.handle[handle] : this.currentHandle)[0]["offset"+(axis == "x" ? "Width" : "Height")]; - }, - _oneStep: function(axis) { - return this.options.stepping[axis] || 1; - }, - _pageStep: function(axis) { - return /* this.options.paging[axis] ||*/ 10; - }, - - _start: function(event, handle) { - var o = this.options; - if(o.disabled) return false; - - // Prepare the outer size - this.actualSize = { width: this.element.outerWidth() , height: this.element.outerHeight() }; - - // This is a especially ugly fix for strange blur events happening on mousemove events - if (!this.currentHandle) - this._focus(this.previousHandle, true); - - this.offset = this.element.offset(); + return value; - this.handleOffset = this.currentHandle.offset(); - this.clickOffset = { top: event.pageY - this.handleOffset.top, left: event.pageX - this.handleOffset.left }; + }, - this.firstValue = this.value(); + _handleSize: function(handle,axis) { - this._propagate('start', event); - this._drag(event, handle); - return true; + return $(handle != undefined && handle !== null ? this.handle[handle] : this.currentHandle)[0]["offset"+(axis == "x" ? "Width" : "Height")]; }, - _stop: function(event) { - this._propagate('stop', event); - if (this.firstValue != this.value()) - this._propagate('change', event); - // This is a especially ugly fix for strange blur events happening on mousemove events - this._focus(this.currentHandle, true); - return false; - }, - _drag: function(event, handle) { - - var o = this.options; - var position = { top: event.pageY - this.offset.top - this.clickOffset.top, left: event.pageX - this.offset.left - this.clickOffset.left}; - if(!this.currentHandle) this._focus(this.previousHandle, true); //This is a especially ugly fix for strange blur events happening on mousemove events - position.left = this._translateLimits(position.left, "x"); - position.top = this._translateLimits(position.top, "y"); + _oneStep: function(axis) { - if (o.stepping.x) { - var value = this._convertValue(position.left, "x"); - value = this._round(value / o.stepping.x) * o.stepping.x; - position.left = this._translateValue(value, "x"); - } - if (o.stepping.y) { - var value = this._convertValue(position.top, "y"); - value = this._round(value / o.stepping.y) * o.stepping.y; - position.top = this._translateValue(value, "y"); - } + return this.options.stepping[axis] || 1; - position.left = this._translateRange(position.left, "x"); - position.top = this._translateRange(position.top, "y"); + }, - if(o.axis != "vertical") this.currentHandle.css({ left: position.left }); - if(o.axis != "horizontal") this.currentHandle.css({ top: position.top }); + _pageStep: function(axis) { - //Store the slider's value - this.currentHandle.data("mouse").sliderValue = { - x: this._round(this._convertValue(position.left, "x")) || 0, - y: this._round(this._convertValue(position.top, "y")) || 0 - }; + return /* this.options.paging[axis] ||*/ 10; - if (this.rangeElement) - this._updateRange(); - this._propagate('slide', event); - return false; }, moveTo: function(value, handle, noPropagation) { @@ -443,16 +502,41 @@ $.widget("ui.slider", { this._propagate('stop', null); this._propagate('change', null); } + + }, + + _propagate: function(n, event) { + + $.ui.plugin.call(this, n, [event, this.ui()]); + this.element.triggerHandler(n == "slide" ? n : "slide"+n, [event, this.ui()], this.options[n]); + + }, + + plugins: {}, + + ui: function(event) { + return { + options: this.options, + handle: this.currentHandle, + value: this.options.axis != "both" || !this.options.axis ? + this._round(this.value(null, this.options.axis == "vertical" ? "y" : "x")) : + { + x: this._round(this.value(null, "x")), + y: this._round(this.value(null, "y")) + }, + range: this._getRange() + }; } + }); $.extend($.ui.slider, { getter: "value", version: "@VERSION", defaults: { - handle: ".ui-slider-handle", - distance: 1, animate: false, + distance: 1, + handle: ".ui-slider-handle", round: true } }); |