jquery.jWindowCrop.js

/*
 * jWindowCrop v1.0.1
 *
 * Copyright (c) 2012 Tyler Brown
 * Licensed under the MIT license.
 *
 */

(function($){
  // ensure that no gaps are between target's edges and container's edges
	function fillContainer(val, targetLength, containerLength) {
		if(val + targetLength < containerLength) val = containerLength-targetLength;
		if(val > 0) val = 0;
		return val;
	}

	$.jWindowCrop = function(image, options){
		var base = this;
		base.$image = $(image); // target image jquery element
		base.image = image; // target image dom element
		base.$image.data("jWindowCrop", base); // target frame jquery element

		base.namespace = 'jWindowCrop';
		base.originalWidth = 0;
		base.isDragging = false;
		
		base.init = function(){
			base.$image.css({display:'none'}); // hide image until loaded
			base.options = $.extend({},$.jWindowCrop.defaultOptions, options);
			if(base.options.zoomSteps < 2) base.options.zoomSteps = 2;

      // wrap image in frame
			base.$image.addClass('jwc_image').wrap('<div class="jwc_wrap" />').wrap('<div class="jwc_frame" />');
			base.$frame = base.$image.parent();
			base.$wrap = base.$frame.parent();
			base.$frame.append('<div class="jwc_loader">' + base.options.loadingText + '</div>');
			base.$frame.after(
          '<div class="jwc_controls" style="width: ' + base.options.targetWidth + 'px; ' +
          'display:' + (base.options.showControlsOnStart ? 'block' : 'none') + ';">' +
          '<span>click to drag</span><a href="#" class="jwc_zoom_in ' + base.options.zoomButtonClass + ' ' +
          base.options.zoomInButtonClass + '"></a>' +
          '<a href="#" class="jwc_zoom_out ' + base.options.zoomButtonClass + ' ' +
          base.options.zoomOutButtonClass + '"></a></div>');
			base.$frame.css({
        'overflow': 'hidden', 'position': 'relative',
        'width': base.options.targetWidth, 'height': base.options.targetHeight});
			base.$image.css({'position': 'absolute', 'top': '0px', 'left': '0px'});
			initializeDimensions();

			base.$wrap.find('.jwc_zoom_in').on('click.'+base.namespace, base.zoomIn);
			base.$wrap.find('.jwc_zoom_out').on('click.'+base.namespace, base.zoomOut);
			base.$frame.on('mouseenter.'+base.namespace, handleMouseEnter);
			base.$frame.on('mouseleave.'+base.namespace, handleMouseLeave);
			base.$image.on('load.'+base.namespace, handeImageLoad);
			base.$image.on('mousedown.'+base.namespace, handleMouseDown);
			$(document).on('mousemove.'+base.namespace, handleMouseMove);
			$(document).on('mouseup.'+base.namespace, handleMouseUp);
		};

		base.destroy = function() {
			base.$image.removeData("jWindowCrop"); // remove data
			$(document).unbind(); // remove body binds
			base.$image.unbind(); // remove image binds
			base.$frame.unbind(); // remove frame binds
			base.$wrap.find('.jwc_zoom_out').unbind(); // remove zoom triggers
			base.$wrap.find('.jwc_zoom_in').unbind();  // remove zoom triggers
			$('.jwc_loader').remove();   // remove the added text
			$('.jwc_controls').remove(); // remove the added controls
			base.$image.removeAttr( 'style' ); // undo the style
			base.$image.unwrap(); // undo the wrap
			base.$image.unwrap(); // undo our extra wrap
		};
		
		base.setZoom = function(percent) {
			if(base.minPercent >= 1) {
				percent = base.minPercent;
			} else if(percent > 1.0) {
				percent = 1;
			} else if(percent < base.minPercent) {
				percent = base.minPercent;	
			}
			base.$image.width(Math.ceil(base.originalWidth*percent));
			base.workingPercent = percent;
			focusOnCenter();
			updateResult();
		};
		base.zoomIn = function() {
			var zoomIncrement = (1.0 - base.minPercent) / (base.options.zoomSteps-1);
			base.setZoom(base.workingPercent+zoomIncrement);
			return false;
		};
		base.zoomOut = function() {
			var zoomIncrement = (1.0 - base.minPercent) / (base.options.zoomSteps-1);
			base.setZoom(base.workingPercent-zoomIncrement);
			return false;
		};
        base.touchCropCoordinates = function() {
            updateResult();
        };

		function initializeDimensions() {
			if(base.originalWidth == 0) {
				base.originalWidth = base.$image.width();
				base.originalHeight = base.$image.height();
			}
			if(base.originalWidth > 0) {
				var widthRatio = base.options.targetWidth / base.originalWidth;
				var heightRatio = base.options.targetHeight / base.originalHeight;
				//base.minPercent = (widthRatio >= heightRatio) ? widthRatio : heightRatio;
				if(widthRatio >= heightRatio) {
					base.minPercent = (base.originalWidth < base.options.targetWidth) ?
							(base.options.targetWidth / base.originalWidth) :
							widthRatio;
				} else {
					base.minPercent = (base.originalHeight < base.options.targetHeight) ?
							(base.options.targetHeight / base.originalHeight) :
							heightRatio;
				}

				base.workingPercent = base.minPercent;
				if(base.options.initialCropValues != null) {
					base.workingPercent = (base.options.targetHeight / base.options.initialCropValues.cropH +
							base.options.targetWidth / base.options.initialCropValues.cropW) / 2;
					base.workingPercent = Math.max(base.minPercent, base.workingPercent);
					base.focalPoint = {
						'x': Math.round(base.options.initialCropValues.cropX + base.options.initialCropValues.cropW/2),
						'y': Math.round(base.options.initialCropValues.cropY + base.options.initialCropValues.cropH/2)
					};
				} else {
					base.focalPoint = {
						'x': Math.round(base.originalWidth/2),
						'y': Math.round(base.originalHeight/2)
					};
				}

				base.setZoom(base.workingPercent);
				base.$image.fadeIn('fast'); //display image now that it has loaded
			}
		}
		function storeFocalPoint() {
			var x = (parseInt(base.$image.css('left'))*-1 + base.options.targetWidth/2) / base.workingPercent;
			var y = (parseInt(base.$image.css('top'))*-1 + base.options.targetHeight/2) / base.workingPercent;
			base.focalPoint = {'x': Math.round(x), 'y': Math.round(y)};
		}
		function focusOnCenter() {
			var left = fillContainer(
					(Math.round((base.focalPoint.x*base.workingPercent) - base.options.targetWidth/2)*-1),
					base.$image.width(), base.options.targetWidth);
			var top = fillContainer(
					(Math.round((base.focalPoint.y*base.workingPercent) - base.options.targetHeight/2)*-1),
					base.$image.height(), base.options.targetHeight);
			base.$image.css({'left': (left.toString()+'px'), 'top': (top.toString()+'px')})
			storeFocalPoint();
		}
		function updateResult() {
			base.result = {
				cropX: Math.round(parseInt(base.$image.css('left'))/base.workingPercent*-1),
				cropY: Math.round(parseInt(base.$image.css('top'))/base.workingPercent*-1),
				cropW: Math.round(base.options.targetWidth/base.workingPercent),
				cropH: Math.round(base.options.targetHeight/base.workingPercent),
                cropS: base.workingPercent,
                origW: base.originalWidth,
                origH: base.originalHeight,
				mustStretch: (base.minPercent > 1)
			};
			base.options.onChange.call(base.image, base.result);
		}
		function handeImageLoad() {
			initializeDimensions();
		}
		function handleMouseDown(event) {
			event.preventDefault(); //some browsers do image dragging themselves
			base.isDragging = true;
			base.dragMouseCoords = {x: event.pageX, y: event.pageY};
			base.dragImageCoords = {x: parseInt(base.$image.css('left')), y: parseInt(base.$image.css('top'))}
		}
		function handleMouseUp() {
			base.isDragging = false;
		}
		function handleMouseMove(event) {
			if(base.isDragging) {
				var xDif = event.pageX - base.dragMouseCoords.x;
				var yDif = event.pageY - base.dragMouseCoords.y;
				var newLeft = fillContainer((base.dragImageCoords.x + xDif), base.$image.width(), base.options.targetWidth);
				var newTop = fillContainer((base.dragImageCoords.y + yDif), base.$image.height(), base.options.targetHeight);
				base.$image.css({'left' : (newLeft.toString()+'px'), 'top' : (newTop.toString()+'px')});
				storeFocalPoint();
				updateResult();
			}
		}
		function handleMouseEnter() {
			if(base.options.smartControls) base.$frame.find('.jwc_controls').fadeIn('fast');
		}
		function handleMouseLeave() {
			if(base.options.smartControls) base.$frame.find('.jwc_controls').fadeOut('fast');
		}
		
		base.init();
	};
	
	$.jWindowCrop.defaultOptions = {
		targetWidth: 320,
		targetHeight: 180,
		initialCropValues: null,
		zoomSteps: 10,
		loadingText: 'Loading...',
		smartControls: true,
    zoomButtonClass: '',
    zoomInButtonClass: '',
    zoomOutButtonClass: '',
		showControlsOnStart: true,
		onChange: function() {}
	};
	
	$.fn.jWindowCrop = function(options){
		return this.each(function(){
			(new $.jWindowCrop(this, options));
		});
	};
	
	$.fn.getjWindowCrop = function(){
		return this.data("jWindowCrop");
	};
})(jQuery);