From 57c3bc5c1e78eb97dea1b71bed7c4b343b22f9ac Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 27 May 2008 11:11:49 +0000 Subject: slider: fixed slider, now uses subclassing of the mouse plugin --- ui/source/ui.slider.js | 98 +++++++++++++++++++++++++++++--------------------- 1 file changed, 58 insertions(+), 40 deletions(-) (limited to 'ui/source') diff --git a/ui/source/ui.slider.js b/ui/source/ui.slider.js index 87c1572fb..19f6247c4 100644 --- a/ui/source/ui.slider.js +++ b/ui/source/ui.slider.js @@ -19,11 +19,13 @@ $(this).parents(expr).eq(0).after(this).remove(); }); }; + - $.widget("ui.slider", $.extend($.ui.mouse, { + $.widget("ui.slider", { plugins: {}, ui: function(e) { return { + instance: this, options: this.options, handle: this.currentHandle, value: this.options.axis != "both" || !this.options.axis ? Math.round(this.value(null,this.options.axis == "vertical" ? "y" : "x")) : { @@ -43,17 +45,17 @@ .removeData("slider") .unbind(".slider"); this.handle - .unwrap("a"); - this.mouseDestroy(); + .unwrap("a") + .mouse("destroy"); this.generated && this.generated.remove(); }, enable: function() { this.element.removeClass("ui-slider-disabled"); - this.options.disabled = false; + this.disabled = false; }, disable: function() { this.element.addClass("ui-slider-disabled"); - this.options.disabled = true; + this.disabled = true; }, setData: function(key, value) { this.options[key] = value; @@ -73,29 +75,49 @@ if (!this.handle.length) { self.handle = self.generated = $(self.options.handles || [0]).map(function() { var handle = $("
").addClass("ui-slider-handle").appendTo(self.element); - handle.data("mouse", {}); if (this.id) handle.attr("id", this.id); return handle[0]; }); } - this.mouseInit(); + + var handleclass = function(el) { + this.element = $(el); + this.element.data("mouse", this); + this.options = self.options; + + this.element.bind("mousedown", function() { + if(self.currentHandle) this.blur(self.currentHandle); + self.focus(this,1); + }); + + this.mouseInit(); + }; + + $.extend(handleclass.prototype, $.ui.mouse, { + mouseStart: function(e) { return self.start.call(self, e, this.element[0]); }, + mouseStop: function(e) { return self.stop.call(self, e, this.element[0]); }, + mouseDrag: function(e) { return self.drag.call(self, e, this.element[0]); }, + trigger: function(e) { this.mouseDown(e); } + }); + $(this.handle) - .data("mouse", {}) + .each(function() { + new handleclass(this); + }) .wrap('') .parent() .bind('focus', function(e) { self.focus(this.firstChild); }) .bind('blur', function(e) { self.blur(this.firstChild); }) .bind('keydown', function(e) { self.keydown(e.keyCode, this.firstChild); }) ; - + // Bind the click to the slider itself this.element.bind('mousedown.slider', function(e) { self.click.apply(self, [e]); - //TODO - fix this. Broken since experimental mouse - //self.currentHandle.data("mouse").trigger(e); + self.currentHandle.data("mouse").trigger(e); self.firstValue = self.firstValue + 1; //This is for always triggering the change event }); @@ -162,7 +184,7 @@ if(this == e.target) clickedHandle = true; }); - if (clickedHandle || this.options.disabled || !(this.currentHandle || this.previousHandle)) + if (clickedHandle || this.disabled || !(this.currentHandle || this.previousHandle)) return; // If a previous handle was focussed, focus it again @@ -178,6 +200,8 @@ }, null, !this.options.distance); }, + + createRange: function() { this.rangeElement = $('
') .addClass('ui-slider-range') @@ -210,7 +234,6 @@ return parseInt(((parseInt(curHandle.css(axis == "x" ? "left" : "top"),10) / (this.actualSize[axis == "x" ? "width" : "height"] - this.handleSize(handle,axis))) * this.options.realMax[axis]) + this.options.min[axis],10); } - }, convertValue: function(value,axis) { return this.options.min[axis] + (value / (this.actualSize[axis == "x" ? "width" : "height"] - this.handleSize(null,axis))) * this.options.realMax[axis]; @@ -251,10 +274,10 @@ }, - mouseStart: function(e) { + start: function(e, handle) { var o = this.options; - var handle = e.target; + if(this.disabled) return false; // Prepare the outer size this.actualSize = { width: this.element.outerWidth() , height: this.element.outerHeight() }; @@ -264,22 +287,27 @@ this.focus(this.previousHandle, true); this.offset = this.element.offset(); + this.handleOffset = this.currentHandle.offset(); this.clickOffset = { top: e.pageY - this.handleOffset.top, left: e.pageX - this.handleOffset.left }; + this.firstValue = this.value(); this.propagate('start', e); - - if(!this.options.disabled) { - if(this.currentHandle) this.blur(this.currentHandle); - this.focus(handle,1); - return !this.options.disabled; - } + return true; + }, - mouseDrag: function(e) { + stop: function(e) { + this.propagate('stop', e); + if (this.firstValue != this.value()) + this.propagate('change', e); + // This is a especially ugly fix for strange blur events happening on mousemove events + this.focus(this.currentHandle, true); + return false; + }, + drag: function(e, handle) { var o = this.options; - var position = { top: e.pageY - this.offset.top - this.clickOffset.top, left: e.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 @@ -305,23 +333,15 @@ //Store the slider's value this.currentHandle.data("mouse").sliderValue = { - x: this.convertValue(position.left, "x"), - y: this.convertValue(position.top, "y") + x: Math.round(this.convertValue(position.left, "x")) || 0, + y: Math.round(this.convertValue(position.top, "y")) || 0 }; - + if (this.rangeElement) this.updateRange(); this.propagate('slide', e); return false; }, - mouseStop: function(e) { - this.propagate('stop', e); - if (this.firstValue != this.value()) - this.propagate('change', e); - // This is a especially ugly fix for strange blur events happening on mousemove events - this.focus(this.currentHandle, true); - return false; - }, moveTo: function(value, handle, noPropagation) { @@ -387,8 +407,8 @@ //Store the slider's value this.currentHandle.data("mouse").sliderValue = { - x: this.convertValue(x, "x"), - y: this.convertValue(y, "y") + x: Math.round(this.convertValue(x, "x")) || 0, + y: Math.round(this.convertValue(y, "y")) || 0 }; if (!noPropagation) { @@ -398,15 +418,13 @@ this.propagate("slide", null); } } - })); + }); $.ui.slider.getter = "value"; $.ui.slider.defaults = { - distance: 0, - delay: 0, - cancel: ":input,button", handle: ".ui-slider-handle", + distance: 1 }; })(jQuery); -- cgit v1.2.3