From e98934200f606d7973902495450ea5b5d79440af Mon Sep 17 00:00:00 2001 From: Richard Worth Date: Fri, 21 Nov 2008 04:40:23 +0000 Subject: [PATCH] slider: formatting changes - moved some things around for consistency. _init and destroy at the top, then _mouse methods. plugins, ui last. Sorted defaults alphabetically. --- ui/ui.slider.js | 516 ++++++++++++++++++++++++++++-------------------- 1 file changed, 300 insertions(+), 216 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, { - _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; }, + _mouseStart: function(event) { return self._start.call(self, event, this.element[0]); }, + _mouseDrag: function(event) { return self._drag.call(self, event, this.element[0]); }, + _mouseStop: function(event) { return self._stop.call(self, event, this.element[0]); }, trigger: function(event) { this._mouseDown(event); } }); @@ -135,168 +86,27 @@ $.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(); - }, - _initBoundaries: function() { - var element = this.element[0], o = this.options; - this.actualSize = { width: this.element.outerWidth() , height: this.element.outerHeight() }; - - $.extend(o, { - axis: o.axis || (element.offsetWidth < element.offsetHeight ? 'vertical' : 'horizontal'), - max: !isNaN(parseInt(o.max,10)) ? { x: parseInt(o.max, 10), y: parseInt(o.max, 10) } : ({ x: o.max && o.max.x || 100, y: o.max && o.max.y || 100 }), - min: !isNaN(parseInt(o.min,10)) ? { x: parseInt(o.min, 10), y: parseInt(o.min, 10) } : ({ x: o.min && o.min.x || 0, y: o.min && o.min.y || 0 }) - }); - //Prepare the real maxValue - o.realMax = { - x: o.max.x - o.min.x, - y: o.max.y - o.min.y - }; - //Calculate stepping based on steps - o.stepping = { - 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; + destroy: function() { - var k = keyCode; - if(/(33|34|35|36|37|38|39|40)/.test(k)) { - var o = this.options, xpos, ypos; - if (/(35|36)/.test(k)) { - xpos = (k == 35) ? o.max.x : o.min.x; - ypos = (k == 35) ? o.max.y : o.min.y; - } else { - var oper = /(34|37|40)/.test(k) ? "-=" : "+="; - var step = /(37|38|39|40)/.test(k) ? "_oneStep" : "_pageStep"; - xpos = oper + this[step]("x"); - ypos = oper + this[step]("y"); - } - this.moveTo({ - x: xpos, - y: ypos - }, handle); - 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; }; - }, - _click: function(event) { - // This method is only used if: - // - The user didn't click a handle - // - The Slider is not disabled - // - There is a current, or previous selected handle (otherwise we wouldn't know which one to move) + this.element + .removeClass("ui-slider ui-slider-disabled") + .removeData("slider") + .unbind(".slider"); - var pointer = [event.pageX, event.pageY]; - - var clickedHandle = false; - this.handle.each(function() { - if(this == event.target) - clickedHandle = true; - }); - if (clickedHandle || this.options.disabled || !(this.currentHandle || this.previousHandle)) - return; - - // If a previous handle was focussed, focus it again - if (!this.currentHandle && this.previousHandle) - this._focus(this.previousHandle, true); - - // propagate only for distance > 0, otherwise propagation is done my drag - this.offset = this.element.offset(); - - this.moveTo({ - 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 = $('
') - .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"; - - var curHandle = $(handle != undefined && handle !== null ? this.handle[handle] || handle : this.currentHandle); - - if(curHandle.data("mouse").sliderValue) { - return this._round(curHandle.data("mouse").sliderValue[axis]); - } else { - return this._round(((this._round(curHandle.css(axis == "x" ? "left" : "top")) / (this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(handle,axis))) * this.options.realMax[axis]) + this.options.min[axis]); + if(this.handle && this.handle.length) { + this.handle + .unwrap("a"); + this.handle.each(function() { + var mouse = $(this).data("mouse"); + mouse && mouse._mouseDestroy(); + }); } - }, - _convertValue: function(value,axis) { - return this.options.min[axis] + (value / (this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(null,axis))) * this.options.realMax[axis]; - }, + this.generated && this.generated.remove(); - _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)) { - value = this._translateValue(handle.min,axis); - } else if (value > this._translateValue(handle.max,axis)) { - 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) { @@ -323,17 +133,11 @@ $.widget("ui.slider", { return true; }, - _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 @@ -367,6 +171,261 @@ $.widget("ui.slider", { 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; + this.actualSize = { width: this.element.outerWidth() , height: this.element.outerHeight() }; + + $.extend(o, { + axis: o.axis || (element.offsetWidth < element.offsetHeight ? 'vertical' : 'horizontal'), + max: !isNaN(parseInt(o.max,10)) ? { x: parseInt(o.max, 10), y: parseInt(o.max, 10) } : ({ x: o.max && o.max.x || 100, y: o.max && o.max.y || 100 }), + min: !isNaN(parseInt(o.min,10)) ? { x: parseInt(o.min, 10), y: parseInt(o.min, 10) } : ({ x: o.min && o.min.x || 0, y: o.min && o.min.y || 0 }) + }); + //Prepare the real maxValue + o.realMax = { + x: o.max.x - o.min.x, + y: o.max.y - o.min.y + }; + //Calculate stepping based on steps + o.stepping = { + 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; + + var k = keyCode; + if(/(33|34|35|36|37|38|39|40)/.test(k)) { + var o = this.options, xpos, ypos; + if (/(35|36)/.test(k)) { + xpos = (k == 35) ? o.max.x : o.min.x; + ypos = (k == 35) ? o.max.y : o.min.y; + } else { + var oper = /(34|37|40)/.test(k) ? "-=" : "+="; + var step = /(37|38|39|40)/.test(k) ? "_oneStep" : "_pageStep"; + xpos = oper + this[step]("x"); + ypos = oper + this[step]("y"); + } + this.moveTo({ + x: xpos, + y: ypos + }, handle); + 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; + }; + + }, + + _click: function(event) { + + // This method is only used if: + // - The user didn't click a handle + // - The Slider is not disabled + // - There is a current, or previous selected handle (otherwise we wouldn't know which one to move) + + var pointer = [event.pageX, event.pageY]; + + var clickedHandle = false; + this.handle.each(function() { + if(this == event.target) + clickedHandle = true; + }); + if (clickedHandle || this.options.disabled || !(this.currentHandle || this.previousHandle)) + return; + + // If a previous handle was focussed, focus it again + if (!this.currentHandle && this.previousHandle) + this._focus(this.previousHandle, true); + + // propagate only for distance > 0, otherwise propagation is done my drag + this.offset = this.element.offset(); + + this.moveTo({ + 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 = $('
') + .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"; + + var curHandle = $(handle != undefined && handle !== null ? this.handle[handle] || handle : this.currentHandle); + + if(curHandle.data("mouse").sliderValue) { + return this._round(curHandle.data("mouse").sliderValue[axis]); + } else { + return this._round(((this._round(curHandle.css(axis == "x" ? "left" : "top")) / (this.actualSize[axis == "x" ? "width" : "height"] - this._handleSize(handle,axis))) * this.options.realMax[axis]) + this.options.min[axis]); + } + + }, + + _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)) { + value = this._translateValue(handle.min,axis); + } else if (value > this._translateValue(handle.max,axis)) { + 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; + }, 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 } });