doevisualizations/doeVisualization/node_modules/jquerypp/event/drag/step/step.js

Data Visualization Library based on RequireJS and D3.js (v4+)

/**
 * @add jQuery.Drag.prototype
 */

steal('jquery', 'jquerypp/event/drag/core', function( $ ) {
	var round = function( x, m ) {
		return Math.round(x / m) * m;
	}

	$.Drag.prototype.
	/**
	 * @function step
	 * @plugin jquerypp/event/drag/step
	 * @download  http://jmvcsite.heroku.com/pluginify?plugins[]=jquerypp/event/drag/step/step.js
	 * makes the drag move in steps of amount pixels.
	 * 
	 *     drag.step({x: 5}, $('foo'), "xy")
	 * 
	 * ## Demo
	 * 
	 * @demo jquerypp/event/drag/step/step.html
	 * 
	 * @param {number|Object} amount make the drag move the amount in pixels from the top-left of container.
	 * 
	 * If the amount is a `number`, the drag will move step-wise that number pixels in both 
	 * dimensions.  If it's an object like `{x: 20, y: 10}` the drag will move in steps 20px from
	 * left to right and 10px up and down.
	 * 
	 * @param {jQuery} [container] the container to move in reference to.  If not provided, the document is used.
	 * @param {String} [center] Indicates how to position the drag element in relationship to the container.
	 * 
	 *   -  If nothing is provided, places the top left corner of the drag element at
	 *      'amount' intervals from the top left corner of the container.  
	 *   -  If 'x' is provided, it centers the element horizontally on the top-left corner.
	 *   -  If 'y' is provided, it centers the element vertically on the top-left corner of the container.
	 *   -  If 'xy' is provided, it centers the element on the top-left corner of the container.
	 *   
	 * @return {jQuery.Drag} the drag object for chaining.
	 */
	step = function( amount, container, center ) {
		//on draws ... make sure this happens
		if ( typeof amount == 'number' ) {
			amount = {
				x: amount,
				y: amount
			};
		}
		container = container || $(document.body);
		this._step = amount;

		var styles = container.css(["borderTopWidth", "paddingTop", "borderLeftWidth", "paddingLeft"]);
		var top = parseInt(styles.borderTopWidth) + parseInt(styles.paddingTop),
			left = parseInt(styles.borderLeftWidth) + parseInt(styles.paddingLeft);

		this._step.offset = container.offsetv().plus(left, top);
		this._step.center = center;
		return this;
	};

	(function() {
		var oldPosition = $.Drag.prototype.position;
		$.Drag.prototype.position = function( offsetPositionv ) {
			//adjust required_css_position accordingly
			if ( this._step ) {
				var step = this._step,
					center = step.center && step.center.toLowerCase(),
					movingSize = this.movingElement.dimensionsv('outer'),
					lot = step.offset.top()- (center && center != 'x' ? movingSize.height() / 2 : 0),
					lof = step.offset.left() - (center && center != 'y' ? movingSize.width() / 2 : 0);

				if ( this._step.x ) {
					offsetPositionv.left(Math.round(lof + round(offsetPositionv.left() - lof, this._step.x)))
				}
				if ( this._step.y ) {
					offsetPositionv.top(Math.round(lot + round(offsetPositionv.top() - lot, this._step.y)))
				}
			}

			oldPosition.call(this, offsetPositionv);
		};
	})();

	return $;
});