Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fix slider handle position

- center handle under the mouse when click on slider
- keep relative handle position to the mouse when click and drag an handle
- update layout.js according to http://github.com/sstephenson/prototype/commit/38e85b86dd5d218fe735afab969b87ac58983b77 before using prototype 1.7 RC2
  • Loading branch information...
commit 9fdd76e33f342707c1789c65a298e7295f092534 1 parent 4199cbe
@sgruhier sgruhier authored committed
View
4 src/layout.js
@@ -26,8 +26,8 @@
}
// Non-IE browsers will always return pixels.
- if ((/^\d+(px)?$/i).test(value)) {
- return window.parseInt(value, 10);
+ if ((/^(?:-)?\d+(\.\d+)?(px)?$/i).test(value)) {
+ return window.parseFloat(value);
}
// When IE gives us something other than a pixel value, this technique
View
32 src/ui/controls/slider.js
@@ -141,10 +141,12 @@
dim = handle.offsetHeight;
length = (dim !== 0) ? dim :
window.parseInt(handle.getStyle('height'), 10);
+ this._trackLength -= 2 * handle.getLayout().get('margin-top');
} else {
dim = handle.offsetWidth;
length = (dim !== 0) ? dim :
window.parseInt(handle.getStyle('width'), 10);
+ this._trackLength -= 2 * handle.getLayout().get('margin-left');
}
this._handleLength = length;
@@ -310,7 +312,7 @@
_valueToPx: function(value) {
var range = this.options.value;
- var pixels = (this._trackLength - (this._handleLength / 2)) /
+ var pixels = (this._trackLength - this._handleLength ) /
(range.max - range.min);
pixels *= (value - range.min);
@@ -340,10 +342,8 @@
var trackOffset = this.element.cumulativeOffset();
var newPosition = {
- x: Math.round((pointer.x - trackOffset.left) +
- (this._handleLength / 4)),
- y: Math.round((pointer.y - trackOffset.top) +
- (this._handleLength / 4))
+ x: Math.round(pointer.x - trackOffset.left),
+ y: Math.round(pointer.y - trackOffset.top)
};
this.setValue(this._pxToValue(newPosition));
@@ -351,6 +351,7 @@
this.activeHandle = this.activeHandle || this.handles.first();
handle = this.activeHandle;
this._updateStyles();
+ this._offsets = {x: 0, y: 0};
} else {
// The user clicked on a handle.
handle = event.findElement('.ui-slider-handle');
@@ -358,15 +359,13 @@
this.activeHandle = handle;
this._updateStyles();
+ var handleOffset = handle.cumulativeOffset();
+ this._offsets = {
+ x: pointer.x - (handleOffset.left + this._handleLength / 2),
+ y: pointer.y - (handleOffset.top + this._handleLength / 2)
+ };
}
- var handleOffset = handle.cumulativeOffset();
-
- this._offsets = {
- x: pointer.x - handleOffset.left,
- y: pointer.y - handleOffset.top
- };
-
// Listen for mousemove and mouseup on document.
document.observe('mousemove', this.observers.mousemove);
document.observe('mouseup', this.observers.mouseup);
@@ -463,18 +462,9 @@
var pointer = event.pointer();
var trackOffset = this.element.cumulativeOffset();
- var newPosition = {
- x: Math.round((pointer.x - trackOffset.left) +
- (this._handleLength / 4)),
- y: Math.round((pointer.y - trackOffset.top) +
- (this._handleLength / 4))
- };
-
pointer.x -= (this._offsets.x + trackOffset.left);
pointer.y -= (this._offsets.y + trackOffset.top);
- //pointer.x += this._handleLength;
-
this.setValue(this._pxToValue(pointer));
},
View
2  themes/default/ui.slider.css
@@ -11,7 +11,7 @@
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-top: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }
View
2  themes/test/theme.css
@@ -400,7 +400,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-top: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
Please sign in to comment.
Something went wrong with that request. Please try again.