clickable-rail.js revision 5770dec23508300b0e77edf1fd63b699b89e4615
252N/A * Adds support for mouse interaction with the Slider rail triggering thumb 252N/A * @submodule clickable-rail 252N/A * Slider extension that allows clicking on the Slider's rail element, 252N/A * triggering the thumb to align with the location of the click. 252N/A // Prototype methods added to host class 252N/A * Initializes the internal state and sets up events. 252N/A * @method _initClickableRail * Broadcasts when the rail has received a mousedown event and * triggers the thumb positioning. Use * <code>e.preventDefault()</code> or * <code>set("clickableRail", false)</code> to prevent * @preventable _defRailMouseDownFn * Attaches DOM event subscribers to support rail interaction. * @method _bindClickableRail * @method _unbindClickableRail if (
this.
get(
'rendered')) {
* Dispatches the railMouseDown event. * @method _onRailMouseDown * @param e {DOMEvent} the mousedown event object if (
this.
get(
'clickableRail') && !
this.
get(
'disabled')) {
this.
fire(
'railMouseDown', {
ev: e });
* Default behavior for the railMouseDown event. Centers the thumb at * the click location and passes control to the DDM to behave as though * the thumb itself were clicked in preparation for a drag operation. * @method _defRailMouseDownFn * @param e {Event} the EventFacade for the railMouseDown custom event // Logic that determines which thumb should be used is abstracted // to someday support multi-thumb sliders // Step 1. Allow for aligning to thumb center or edge, etc // Step 2. Remove page offsets to give just top/left style val // Step 3. Constrain within the rail in case of attempt to // center the thumb when clicking on the end of the rail // Set e.target for DD's IE9 patch which calls // e.target._node.setCapture() to allow imgs to be dragged. // Without this, setCapture is called from the rail and rail // clicks on other Sliders may have their thumb movements // overridden by a different Slider (the thumb on the wrong // Delegate to DD's natural behavior // TODO: this won't trigger a slideEnd if the rail is clicked // check if dd._move(e); dd._dragThreshMet = true; dd.start(); // will do the trick. Is that even a good idea? * Resolves which thumb to actuate if any. Override this if you want to * support multiple thumbs. By default, returns the Drag instance for * the thumb stored by the Slider. * @param e {DOMEvent} the mousedown event object * @return {DD.Drag} the Drag instance that should be moved var primaryOnly = this._dd.get('primaryButtonOnly'), validClick = !primaryOnly || e.button <= 1; return (validClick) ? this._dd : null; * Calculates the top left position the thumb should be moved to to * align the click XY with the center of the specified node. * @method _getThumbDestination * @param e {DOMEvent} The mousedown event object * @param node {Node} The node to position * @return {Array} the [top, left] pixel position of the destination // Static properties added onto host class * Enable or disable clickable rail support. * @attribute clickableRail },
'@VERSION@' ,{
requires:[
'slider-base']});