From ad3cfd1c08d7b062a50a24bbb55973db1f7e5a5d Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Sat, 26 May 2012 21:26:31 -0400 Subject: [PATCH 1/8] Added ability to specify initial start position, allowing you to re-crop a previously cropped image. --- README.markdown | 8 ++++++++ jquery.jWindowCrop.js | 43 ++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/README.markdown b/README.markdown index 4698f85..49ab8e2 100644 --- a/README.markdown +++ b/README.markdown @@ -39,6 +39,14 @@ Options targetHeightinteger180no Height in pixels of the cropping window + + cropX / cropYintegernullno + Specifies the initial start position. If you've previously stored the results of JWC you can set these values (along with cropH and cropW) to what they were in order to continue where you left off. You must specify both cropX and cropY to use this feature (and it won't make much sense without cropW and cropH). + + + cropW / cropHintegernullno + Specifies the initial zoom level. If you've previously stored the results of JWC you can set these values (along with cropX and cropY) to what they were in order to continue where you left off. You must specify both cropW and cropH to use this feature (and it won't make much sense without cropX and cropY) + onChangefunctionfunction(){}no Callback function that gets called whenever the values change. cropX, cropY, cropW, cropH, mustStretch (boolean) values are passed to this function in a hash. Use the this keyword in the function for a reference to the element that was updated. diff --git a/jquery.jWindowCrop.js b/jquery.jWindowCrop.js index 4614ad1..b81a385 100644 --- a/jquery.jWindowCrop.js +++ b/jquery.jWindowCrop.js @@ -76,17 +76,50 @@ base.originalHeight = base.$image.height(); } if(base.originalWidth > 0) { + // first calculate the "all the way zoomed out" position + // this should always still fill the frame so there's no blank space. + // this will be the value you're never allowed to get lower than. 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; } + + // now if they've set initial width and height, calculate the + // starting zoom percentage. + if (base.options.cropW!==null && base.options.cropH!==null) { + widthRatio = base.options.targetWidth / base.options.cropW; + heightRatio = base.options.targetHeight / base.options.cropH; + if(widthRatio >= heightRatio) { + var cropPercent = (base.originalWidth < base.options.targetWidth) ? (base.options.targetWidth / base.originalWidth) : widthRatio; + } else { + var cropPercent = (base.originalHeight < base.options.targetHeight) ? (base.options.targetHeight / base.originalHeight) : heightRatio; + } + } + // If they didn't specify anything then use the above "all the + // way zoomed out" value. + else { + var cropPercent = base.minPercent; + } + + // for the initial zoom we'll just jump into the center of the image. base.focalPoint = {'x': Math.round(base.originalWidth/2), 'y': Math.round(base.originalHeight/2)}; - base.setZoom(base.minPercent); - base.$image.fadeIn('fast'); //display image now that it has loaded + base.setZoom(cropPercent); + + // now if presets x&y have been passed, then we have to slide over + // to the new position after zooming. Why after? because the initial + // position might not be valid until after we zoom... + if (base.options.cropX!==null && base.options.cropY!==null) { + base.$image.css({'left' : ('-'+base.options.cropX.toString()+'px'), 'top' : ('-'+base.options.cropY.toString()+'px')}); + storeFocalPoint(); + // make sure we notify the onChange function about this... + updateResult(); + } + + // now that we've loaded and positioned the image, we can display it + base.$image.fadeIn('fast'); } } function storeFocalPoint() { @@ -150,6 +183,10 @@ loadingText: 'Loading...', smartControls: true, showControlsOnStart: true, + cropX: null, + cropY: null, + cropW: null, + cropH: null, onChange: function() {} }; From 5326cc4524d416178fc7034eda47fc4d5a240296 Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Wed, 27 Jun 2012 17:47:29 -0400 Subject: [PATCH 2/8] Added a reset function that you can call after changing the image or crop dimensions while jWindowCrop is running. For example, choose an image, play with cropping, choose a different image (call reset) play with cropping, etc. --- jquery.jWindowCrop.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/jquery.jWindowCrop.js b/jquery.jWindowCrop.js index b81a385..a6d0ddc 100644 --- a/jquery.jWindowCrop.js +++ b/jquery.jWindowCrop.js @@ -69,6 +69,18 @@ base.setZoom(base.workingPercent-zoomIncrement); return false; }; + base.reset = function() { + base.originalWidth = 0; + base.originalHeight = 0; + base.options.cropX = null; + base.options.cropY = null; + base.options.cropW = null; + base.options.cropH = null; + base.workingPercent = null; + base.$image.width(''); + base.$frame.css({'width': base.options.targetWidth, 'height': base.options.targetHeight}); + initializeDimensions(); + } function initializeDimensions() { if(base.originalWidth == 0) { From 54dd83ff9005c9e86f78774895487b634baee605 Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Wed, 27 Jun 2012 17:48:27 -0400 Subject: [PATCH 3/8] Fixed a positioning bug when calling jWindowCrop with pre-saved cropping data. --- jquery.jWindowCrop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.jWindowCrop.js b/jquery.jWindowCrop.js index a6d0ddc..92d395f 100644 --- a/jquery.jWindowCrop.js +++ b/jquery.jWindowCrop.js @@ -124,7 +124,7 @@ // to the new position after zooming. Why after? because the initial // position might not be valid until after we zoom... if (base.options.cropX!==null && base.options.cropY!==null) { - base.$image.css({'left' : ('-'+base.options.cropX.toString()+'px'), 'top' : ('-'+base.options.cropY.toString()+'px')}); + base.$image.css({'left' : (Math.floor(parseInt(base.options.cropX)*base.workingPercent*-1)+'px'), 'top' : (Math.floor(parseInt(base.options.cropY)*base.workingPercent*-1)+'px')}); storeFocalPoint(); // make sure we notify the onChange function about this... updateResult(); From 1d7f0dde6a4c7f530c5101255ae4eb9fe05ac7b9 Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Wed, 27 Jun 2012 17:54:30 -0400 Subject: [PATCH 4/8] Updated docs to include new reset() method --- README.markdown | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.markdown b/README.markdown index 49ab8e2..4423291 100644 --- a/README.markdown +++ b/README.markdown @@ -69,6 +69,20 @@ Options +Methods +====== + + + + + + + + + + +
MethodReturnDescription
reset()voidRe-initializes the cropping area, including re-zooming and re-centering the image, and adjusting the canvas size to the new values in options.targetWidth and options.targetHeight (if changed).
+ Advanced ======== The structure for this plugin comes from http://starter.pixelgraphics.us/. An object is created for each dom element jWindowCrop is initialized on. A reverse reference to that object can be accessed like so: From c9985c88cfc5f24aaf36815e0ba9a69776d79979 Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Tue, 17 Jul 2012 12:14:14 -0400 Subject: [PATCH 5/8] Added destroy() method to undo what init() does --- jquery.jWindowCrop.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/jquery.jWindowCrop.js b/jquery.jWindowCrop.js index 92d395f..bb6850a 100644 --- a/jquery.jWindowCrop.js +++ b/jquery.jWindowCrop.js @@ -30,7 +30,7 @@ base.$image.addClass('jwc_image').wrap('
'); // wrap image in frame base.$frame = base.$image.parent(); - base.$frame.append(base.options.loadingText); + base.$frame.append($('').text(base.options.loadingText)); base.$frame.append('
click to drag
'); base.$frame.css({'overflow': 'hidden', 'position': 'relative', 'width': base.options.targetWidth, 'height': base.options.targetHeight}); base.$image.css({'position': 'absolute', 'top': '0px', 'left': '0px'}); @@ -80,7 +80,25 @@ base.$image.width(''); base.$frame.css({'width': base.options.targetWidth, 'height': base.options.targetHeight}); initializeDimensions(); - } + }; + base.destroy = function() { + // remove event handlers + base.$image.off('load.'+base.namespace, handeImageLoad); + base.$image.off('mousedown.'+base.namespace, handleMouseDown); + $(document).off('mousemove.'+base.namespace, handleMouseMove); + $(document).off('mouseup.'+base.namespace, handleMouseUp); + base.$image.css({display:''}); // re-show image + // clear out the positioning info we added + base.$image.css({'position': '', 'top': '', 'left': ''}); + // remove the controls + base.$frame.find('.jwc_controls').remove(); + // remove the "loading" text + base.$frame.find('.jwc_loading_text').remove(); + // remove the css from the image and then unwrap the frame from the image + base.$image.removeClass('jwc_image').unwrap(); // unwrap image from the frame + base.$frame = null; + base.$image = null; + }; function initializeDimensions() { if(base.originalWidth == 0) { From b614b61676ebbfd1fa83d07cf1009ecf02f30e7f Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Tue, 17 Jul 2012 12:20:08 -0400 Subject: [PATCH 6/8] Added docs for destroy() --- README.markdown | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.markdown b/README.markdown index 4423291..5102748 100644 --- a/README.markdown +++ b/README.markdown @@ -81,6 +81,10 @@ Methods reset()void Re-initializes the cropping area, including re-zooming and re-centering the image, and adjusting the canvas size to the new values in options.targetWidth and options.targetHeight (if changed). + + destroy()void + Undoes everything init() does and returns the DOM to it's initial state. + Advanced From 36c74730461226b7ceb8424a95b83bd61128a28b Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Tue, 17 Jul 2012 18:32:55 -0400 Subject: [PATCH 7/8] Recognize empty strings in initialized variables (cropX, cropY, cropH, cropW) as needing to calculate defaults (same as null) --- jquery.jWindowCrop.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.jWindowCrop.js b/jquery.jWindowCrop.js index bb6850a..f883a94 100644 --- a/jquery.jWindowCrop.js +++ b/jquery.jWindowCrop.js @@ -119,7 +119,7 @@ // now if they've set initial width and height, calculate the // starting zoom percentage. - if (base.options.cropW!==null && base.options.cropH!==null) { + if (base.options.cropW!==null && base.options.cropW!=='' && base.options.cropH!==null && base.options.cropH!=='') { widthRatio = base.options.targetWidth / base.options.cropW; heightRatio = base.options.targetHeight / base.options.cropH; if(widthRatio >= heightRatio) { @@ -141,7 +141,7 @@ // now if presets x&y have been passed, then we have to slide over // to the new position after zooming. Why after? because the initial // position might not be valid until after we zoom... - if (base.options.cropX!==null && base.options.cropY!==null) { + if (base.options.cropX!==null && base.options.cropX!=='' && base.options.cropY!==null && base.options.cropY!=='') { base.$image.css({'left' : (Math.floor(parseInt(base.options.cropX)*base.workingPercent*-1)+'px'), 'top' : (Math.floor(parseInt(base.options.cropY)*base.workingPercent*-1)+'px')}); storeFocalPoint(); // make sure we notify the onChange function about this... From 169cde119229c6d75b59253a52e172383e672acf Mon Sep 17 00:00:00 2001 From: Travis Richardson Date: Fri, 3 Aug 2012 15:06:47 -0400 Subject: [PATCH 8/8] When destroying, return image to original height / width (also set height as well as width when zooming) --- jquery.jWindowCrop.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/jquery.jWindowCrop.js b/jquery.jWindowCrop.js index f883a94..ad9073c 100644 --- a/jquery.jWindowCrop.js +++ b/jquery.jWindowCrop.js @@ -1,3 +1,4 @@ + /* * jWindowCrop v1.0.0 * @@ -16,6 +17,8 @@ $.jWindowCrop = function(image, options){ var base = this; base.$image = $(image); // target image jquery element + base.originalHeight = base.$image.css('height'); + base.originalWidth = base.$image.css('width'); base.image = image; // target image dom element base.$image.data("jWindowCrop", base); // target frame jquery element @@ -55,6 +58,7 @@ percent = base.minPercent; } base.$image.width(Math.ceil(base.originalWidth*percent)); + base.$image.height(Math.ceil(base.originalHeight*percent)); base.workingPercent = percent; focusOnCenter(); updateResult(); @@ -89,7 +93,7 @@ $(document).off('mouseup.'+base.namespace, handleMouseUp); base.$image.css({display:''}); // re-show image // clear out the positioning info we added - base.$image.css({'position': '', 'top': '', 'left': ''}); + base.$image.css({'position': '', 'top': '', 'left': '', 'width':base.originalWidth, 'height':base.originalHeight}); // remove the controls base.$frame.find('.jwc_controls').remove(); // remove the "loading" text