src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
/**
 * Sets up elem as a slider; returns an access object. Elem must be positioned!
 * Note that the element may contain other elements; this is used for instance
 * for the image diff overlay slider.
 *
 * The styling of the slider is to be done in CSS. Currently recognized options:
 * - initial: <float> clipped to [0..1], default 0
 * - handleClass: <string> to assign to the handle span element created.
 * If no handleClass is specified, a very plain default style is assigned.
 */
Sets up elem as a slider; returns an access object. Elem must be positioned.
Note that the element may contain other elements; this is used for instance
for the image diff overlay slider.

The styling of the slider is to be done in CSS. Currently recognized options:
- initial:  clipped to [0..1], default 0
- handleClass:  to assign to the handle span element created.
If no handleClass is specified, a very plain default style is assigned.
Sets up elem as a slider ; returns an access object . Elem must be positioned . Note that the element may contain other elements ; this is used for instance for the image diff overlay slider . The styling of the slider is to be done in CSS . Currently recognized options : - initial : clipped to [ 0 .. 1 ] default 0 - handleClass : to assign to the handle span element created . If no handleClass is specified a very plain default style is assigned .
function rangeSlider(elem, options) {
	options = $.extend({ initial : 0 }, options || {});
	options.initial = Math.min(1.0, Math.max(0, options.initial));
	var $elem = $(elem);
	var $handle = $('<span></span>').css({ position: 'absolute', left: 0, cursor: 'ew-resize' });
	var $root = $(document.documentElement);
	var $doc = $(document);	
	var lastRatio = options.initial;
	function track(e) {
		var pos = $elem.offset().left;
		var width = $elem.innerWidth();
		var handleWidth = $handle.outerWidth(false);
		var range = width - handleWidth;
		if (range <= 0) return;
		var delta = Math.min(range, Math.max (0, e.pageX - pos - handleWidth / 2));
		lastRatio = delta / range;
		$handle.css('left', "" + (delta * 100 / width) + '%');
		$elem.trigger('slider:pos', { ratio: lastRatio, handle: $handle[0] });
	}
	function end(e) {
		$doc.off('mousemove', track);
		$doc.off('mouseup', end);
		$root.removeClass('no-select');
	}
	function setTo(ratio) {
		var w = $elem.innerWidth();
		if (w <= 0 || $elem.is(':hidden')) return;
		lastRatio = Math.min( 1.0, Math.max(0, ratio));
		$handle.css('left', "" + Math.max(0, 100 * (lastRatio * (w - $handle.outerWidth(false))) / w) + '%');
		$elem.trigger('slider:pos', { ratio: lastRatio, handle: $handle[0] });
	}
	function moveTo(ratio, duration, callback) {
		ratio = Math.min(1.0, Math.max(0, ratio));
		if (ratio === lastRatio) {
			if (typeof callback == 'function') callback();
			return;
		}
		if (typeof duration == 'undefined') duration = 500;
		if (duration <= 30) {
			setTo(ratio);
			if (typeof callback == 'function') callback();
		} else {
			var target = ratio * ($elem.innerWidth() - $handle.outerWidth(false));
			if (ratio > lastRatio) target--; else target++;
			$handle.stop().animate({left: target},
				{ 'duration' : duration,
				  'step' : function() {
						lastRatio = Math.min(1.0, Math.max(0, $handle.position().left / ($elem.innerWidth() - $handle.outerWidth(false))));
						$elem.trigger('slider:pos', { ratio : lastRatio, handle : $handle[0] });
					},
				  'complete' : function() { setTo(ratio); if (typeof callback == 'function') callback(); } 
				}
			);
		}
	}
	function moveAuto(ratio, maxDuration, callback) {
		if (typeof maxDuration == 'undefined') maxDuration = 1500;
		var delta = ratio - lastRatio;
		if (delta < 0) delta = -delta;
		var speed = $elem.innerWidth() * delta * 2;
		if (speed > maxDuration) speed = maxDuration;
		moveTo(ratio, speed, callback);
	}
	function getValue() {
		return lastRatio;
	}
	$elem.append($handle);
	if (options.handleClass) {
		$handle.addClass(options.handleClass);
	} else { 
		$handle.css({ width: '10px', height: '10px', background: 'white', border: '1px solid black' });
	}
	if (options.initial) setTo(options.initial);
	$handle.on('mousedown', function(e) {
		$root.addClass('no-select');
		$doc.on('mousemove', track);
		$doc.on('mouseup', end);
		e.stopPropagation();
		e.preventDefault();
	});
	return { setRatio: setTo, moveRatio: moveTo, 'moveAuto': moveAuto, getRatio: getValue, handle: $handle[0] };
}
function rangeSlider ( elem , options ) { options = $ . extend ( { initial : 0 } , options || { } ) ; options . initial = Math . min ( 1.0 , Math . max ( 0 , options . initial ) ) ; var $elem = $ ( elem ) ; var $handle = $ ( '<span></span>' ) . css ( { position : 'absolute' , left : 0 , cursor : 'ew-resize' } ) ; var $root = $ ( document . documentElement ) ; var $doc = $ ( document ) ; var lastRatio = options . initial ; function track ( e ) { var pos = $elem . offset ( ) . left ; var width = $elem . innerWidth ( ) ; var handleWidth = $handle . outerWidth ( false ) ; var range = width - handleWidth ; if ( range <= 0 ) return ; var delta = Math . min ( range , Math . max ( 0 , e . pageX - pos - handleWidth / 2 ) ) ; lastRatio = delta / range ; $handle . css ( 'left' , "" + ( delta * 100 / width ) + '%' ) ; $elem . trigger ( 'slider:pos' , { ratio : lastRatio , handle : $handle [ 0 ] } ) ; } function end ( e ) { $doc . off ( 'mousemove' , track ) ; $doc . off ( 'mouseup' , end ) ; $root . removeClass ( 'no-select' ) ; } function setTo ( ratio ) { var w = $elem . innerWidth ( ) ; if ( w <= 0 || $elem . is ( ':hidden' ) ) return ; lastRatio = Math . min ( 1.0 , Math . max ( 0 , ratio ) ) ; $handle . css ( 'left' , "" + Math . max ( 0 , 100 * ( lastRatio * ( w - $handle . outerWidth ( false ) ) ) / w ) + '%' ) ; $elem . trigger ( 'slider:pos' , { ratio : lastRatio , handle : $handle [ 0 ] } ) ; } function moveTo ( ratio , duration , callback ) { ratio = Math . min ( 1.0 , Math . max ( 0 , ratio ) ) ; if ( ratio === lastRatio ) { if ( typeof callback == 'function' ) callback ( ) ; return ; } if ( typeof duration == 'undefined' ) duration = 500 ; if ( duration <= 30 ) { setTo ( ratio ) ; if ( typeof callback == 'function' ) callback ( ) ; } else { var target = ratio * ( $elem . innerWidth ( ) - $handle . outerWidth ( false ) ) ; if ( ratio > lastRatio ) target -- ; else target ++ ; $handle . stop ( ) . animate ( { left : target } , { 'duration' : duration , 'step' : function ( ) { lastRatio = Math . min ( 1.0 , Math . max ( 0 , $handle . position ( ) . left / ( $elem . innerWidth ( ) - $handle . outerWidth ( false ) ) ) ) ; $elem . trigger ( 'slider:pos' , { ratio : lastRatio , handle : $handle [ 0 ] } ) ; } , 'complete' : function ( ) { setTo ( ratio ) ; if ( typeof callback == 'function' ) callback ( ) ; } } ) ; } } function moveAuto ( ratio , maxDuration , callback ) { if ( typeof maxDuration == 'undefined' ) maxDuration = 1500 ; var delta = ratio - lastRatio ; if ( delta < 0 ) delta = - delta ; var speed = $elem . innerWidth ( ) * delta * 2 ; if ( speed > maxDuration ) speed = maxDuration ; moveTo ( ratio , speed , callback ) ; } function getValue ( ) { return lastRatio ; } $elem . append ( $handle ) ; if ( options . handleClass ) { $handle . addClass ( options . handleClass ) ; } else { $handle . css ( { width : '10px' , height : '10px' , background : 'white' , border : '1px solid black' } ) ; } if ( options . initial ) setTo ( options . initial ) ; $handle . on ( 'mousedown' , function ( e ) { $root . addClass ( 'no-select' ) ; $doc . on ( 'mousemove' , track ) ; $doc . on ( 'mouseup' , end ) ; e . stopPropagation ( ) ; e . preventDefault ( ) ; } ) ; return { setRatio : setTo , moveRatio : moveTo , 'moveAuto' : moveAuto , getRatio : getValue , handle : $handle [ 0 ] } ; }
Sets up elem as a slider; returns an access object.
Sets up elem as a slider ; returns an access object .
/** Mousemove event handler to track the mouse and move the slider. Generates slider:pos events. */ /** Mouseup event handler to stop mouse tracking. */ /** Snaps the slider to the given ratio and generates a slider:pos event with the new ratio. */ /**
	 * Moves the slider to the given ratio, clipped to [0..1], in duration milliseconds.
	 * Generates slider:pos events during the animation. If duration <= 30, same as setTo.
	 * Default duration is 500ms. If a callback is given, it's called once the animation
	 * has completed.
	 */ // Cinema is 24 or 48 frames/sec, so 20-40ms per frame. Makes no sense to animate for such a short duration. // Ensure we have again a % value /**
	 * As moveTo, but determines an appropriate duration in the range [0..maxDuration] on its own,
	 * depending on the distance the handle would move. If no maxDuration is given it defaults
	 * to 1500ms.
	 */ /** Returns the current ratio. */ // Provide a default style so that it is at least visible /** Install mousedown handler to start mouse tracking. */