- + + + diff --git a/demos/test/test.css b/demos/test/test.css index a7630f7..ffffdbb 100755 --- a/demos/test/test.css +++ b/demos/test/test.css @@ -1,11 +1,28 @@ /* !CONTAINERS */ /*-----------------------------------------*/ +.test { + margin-bottom: 20px; + position: relative; + background: #ccc; +} +.test:after { + content: ""; + display: table; + clear: both; +} .focuspoint { + float: left; + width: 50%; height: 200px; - margin-bottom: 20px; } -.focuspoint .label { +/* +img, +video { + transition: transform .5s, width .5s, height .5s, left .5s, top .5s; +} +*/ +.test .label { position: absolute; left: 0; bottom: 0; diff --git a/js/jquery.focuspoint.helper-basic.js b/js/jquery.focuspoint.helper-basic.js index 961b5d6..9be3f02 100755 --- a/js/jquery.focuspoint.helper-basic.js +++ b/js/jquery.focuspoint.helper-basic.js @@ -11,8 +11,8 @@ //Calculate FocusPoint coordinates var offsetX = e.pageX - $(this).offset().left; var offsetY = e.pageY - $(this).offset().top; - var focusX = (offsetX/imageW - .5)*2; - var focusY = (offsetY/imageH - .5)*-2; + var focusX = offsetX/imageW; + var focusY = offsetY/imageH; //Calculate CSS Percentages var percentageX = (offsetX/imageW)*100; diff --git a/js/jquery.focuspoint.helpertool.js b/js/jquery.focuspoint.helpertool.js index d406894..ee10ff0 100644 --- a/js/jquery.focuspoint.helpertool.js +++ b/js/jquery.focuspoint.helpertool.js @@ -119,8 +119,8 @@ //Calculate FocusPoint coordinates var offsetX = e.pageX - $(this).offset().left; var offsetY = e.pageY - $(this).offset().top; - var focusX = (offsetX/imageW - .5)*2; - var focusY = (offsetY/imageH - .5)*-2; + var focusX = offsetX/imageW; + var focusY = offsetY/imageH; focusPointAttr.x = focusX; focusPointAttr.y = focusY; @@ -168,19 +168,12 @@ function updateFocusPoint(){ /*-----------------------------------------*/ - // See note in setImage() function regarding these attribute assignments. - //TLDR - You don't need them for this to work. - /*-----------------------------------------*/ - $focusPointContainers.attr({ - 'data-focus-x': focusPointAttr.x, - 'data-focus-y': focusPointAttr.y - }); - /*-----------------------------------------*/ - // These you DO need :) + // Re-initialise each container as focuspoint may have changed /*-----------------------------------------*/ $focusPointContainers.data('focusX', focusPointAttr.x); $focusPointContainers.data('focusY', focusPointAttr.y); - $focusPointContainers.adjustFocus(); + $focusPointContainers.focusPoint('init'); + $focusPointContainers.focusPoint('adjustFocus'); }; }); }(jQuery)); \ No newline at end of file diff --git a/js/jquery.focuspoint.js b/js/jquery.focuspoint.js index a720d74..576f5d9 100755 --- a/js/jquery.focuspoint.js +++ b/js/jquery.focuspoint.js @@ -1,191 +1,339 @@ /** - * jQuery FocusPoint; version: 1.1.3 - * Author: http://jonathonmenz.com + * jQuery FocusPoint; version: v2-dev + * Author: J. Menz http://jonathonmenz.com * Source: https://github.com/jonom/jquery-focuspoint - * Copyright (c) 2014 J. Menz; MIT License + * Copyright (c) 2014 - 2016 J. Menz; License TBC * @preserve */ -; -(function($) { +;(function ( $, window, document, undefined ) { var defaults = { reCalcOnWindowResize: true, - throttleDuration: 17 //ms - set to 0 to disable throttling + setTransformOrigin: true, + legacyGrid: false }; + var $resizeElements = $(); // Which focuspoint containers are listening to resize event - //Setup a container instance - var setupContainer = function($el) { - var imageSrc = $el.find('img').attr('src'); - $el.data('imageSrc', imageSrc); - - resolveImageSize(imageSrc, function(err, dim) { - $el.data({ - imageW: dim.width, - imageH: dim.height - }); - adjustFocus($el); - }); - }; - - //Get the width and the height of an image - //by creating a new temporary image - var resolveImageSize = function(src, cb) { - //Create a new image and set a - //handler which listens to the first - //call of the 'load' event. - $('').one('load', function() { - //'this' references to the new - //created image - cb(null, { - width: this.width, - height: this.height - }); - }).attr('src', src); - }; - - //Create a throttled version of a function - var throttle = function(fn, ms) { - var isRunning = false; + // https://davidwalsh.name/javascript-debounce-function + var debounce = function(func, wait, immediate) { + var timeout; return function() { - var args = Array.prototype.slice.call(arguments, 0); - if (isRunning) return false; - isRunning = true; - setTimeout(function() { - isRunning = false; - fn.apply(null, args); - }, ms); + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); }; }; - //Calculate the new left/top values of an image - var calcShift = function(conToImageRatio, containerSize, imageSize, focusSize, toMinus) { - var containerCenter = Math.floor(containerSize / 2); //Container center in px - var focusFactor = (focusSize + 1) / 2; //Focus point of resize image in px - var scaledImage = Math.floor(imageSize / conToImageRatio); //Can't use width() as images may be display:none - var focus = Math.floor(focusFactor * scaledImage); - if (toMinus) focus = scaledImage - focus; - var focusOffset = focus - containerCenter; //Calculate difference between focus point and center - var remainder = scaledImage - focus; //Reduce offset if necessary so image remains filled - var containerRemainder = containerSize - containerCenter; - if (remainder < containerRemainder) focusOffset -= containerRemainder - remainder; - if (focusOffset < 0) focusOffset = 0; - - return (focusOffset * -100 / containerSize) + '%'; + // Resize throttling. Let requestAnimationFrame set framerate rather than using resize event rate which may be too rapid or too slow. + var running = false; + // Called on resize event + var resize = function() { + if (!running) { + running = true; + doResize(); + cancelResize(); + } }; - - //Re-adjust the focus - var adjustFocus = function($el) { - var imageW = $el.data('imageW'); - var imageH = $el.data('imageH'); - var imageSrc = $el.data('imageSrc'); - - if (!imageW && !imageH && !imageSrc) { - return setupContainer($el); //Setup the container first + var cancelResize = debounce(function() { + running = false; + }, 250); + var doResize = function() { + $resizeElements.focusPoint('adjustFocus'); + // Repeat if still running + if (running) { + if (window.requestAnimationFrame) { + window.requestAnimationFrame(doResize); + } else { + setTimeout(doResize, 1000/15); //15fps fallback + } } + }; - var containerW = $el.width(); - var containerH = $el.height(); - var focusX = parseFloat($el.data('focusX')); - var focusY = parseFloat($el.data('focusY')); - var $image = $el.find('img').first(); + // Single resize listener for all focus point instances + var updateResizeListener = function() { + $(window).off('resize.focuspoint'); + if ($resizeElements.length) { + $(window).on('resize.focuspoint', resize); + } + }; - //Amount position will be shifted - var hShift = 0; - var vShift = 0; + // For sorting + var compareNumbers = function(a, b) { + return a - b; + }; - if (!(containerW > 0 && containerH > 0 && imageW > 0 && imageH > 0)) { - return false; //Need dimensions to proceed + // Calculate the left or top offset for an image on an axis + var getOffset = function(focusPos, scale) { + // How much bigger is the image than the container? + var spareSpace = scale - 1; + // If the image doesn't fill the container, position image on center + if (spareSpace < 0) { + return (1 - scale) * 0.5; } + // Otherwise move image so focus point is as close to center of frame as possible + else if (spareSpace > 0) { + var negSpareSpace = spareSpace * -1; + var offset = 0.5 - (focusPos * scale); + if (offset > 0) { + return 0; + } + if (offset < 0 && offset < negSpareSpace) { + return negSpareSpace; + } + return offset; + } + return 0; + }; - //Which is over by more? - var wR = imageW / containerW; - var hR = imageH / containerH; + // Convert one or two coords in to an array of min,max and average values. If one coord is passed they will all be the same. + var getRange = function(axis, coordString, legacyGrid) { + var axisCoords = coordString.split(','), + axisRange = []; - //Reset max-width and -height - $image.css({ - 'max-width': '', - 'max-height': '' + // Make numeric and account for classic grid + $.each(axisCoords, function( index, value ) { + axisCoords[index] = parseFloat(value.trim()); + if (legacyGrid === true) { + if (axis === 'X') { + axisCoords[index] = (axisCoords[index] + 1)*0.5; + } + else { + axisCoords[index] = (axisCoords[index] - 1)*-0.5; + } + } }); - //Minimize image while still filling space - if (imageW > containerW && imageH > containerH) { - $image.css((wR > hR) ? 'max-height' : 'max-width', '100%'); + // Set ranges + if (axisCoords.length > 1) { + axisCoords.sort(compareNumbers); + axisRange.start = axisCoords[0]; + axisRange.stop = axisCoords[1]; + // Average of min cropping region for classic focus point + axisRange.average = (axisCoords[0] + axisCoords[1]) / 2; } - - if (wR > hR) { - hShift = calcShift(hR, containerW, imageW, focusX); - } else if (wR < hR) { - vShift = calcShift(wR, containerH, imageH, focusY, true); + else { + // Same values for all + axisRange.start = axisRange.stop = axisRange.average = axisCoords[0]; } + // Ratio of range to image on this axis, inverted so we can determine the maximum allowable zoom level before the region will not all be viewable + axisRange.maxScale = 1 / (axisRange.stop - axisRange.start); - $image.css({ - top: vShift, - left: hShift - }); + return axisRange; }; - var $window = $(window); + // The FocusPoint plugin constructor + function FocusPoint ( element, options ) { + this.element = element; + this.settings = $.extend( {}, defaults, options ); + this.init(); + } - var focusPoint = function($el, settings) { - var thrAdjustFocus = settings.throttleDuration ? - throttle(function(){adjustFocus($el);}, settings.throttleDuration) - : function(){adjustFocus($el);};//Only throttle when desired - var isListening = false; + // Avoid Plugin.prototype conflicts + $.extend(FocusPoint.prototype, { + init: function () { + // Set up the values which won't change + this.$el = $(this.element); + this.$image = this.$el.find('img, video').first(); + this.imageW = this.$el.data('imageW'); + this.imageH = this.$el.data('imageH'); + this.imageRatio = this.imageW / this.imageH; - adjustFocus($el); //Focus image in container + // Determine image dimensions if missing + if (!this.imageW && !this.imageH) { + return this.resolveImageSize(); + } - //Expose a public API - return { + // Separate and sanitise focus points. + // There may be one or two focus coordinates per axis, defining a single point or area + var fp = this; + $.each(['X','Y'], function( index, axis ) { + // Get the main coordinates, including min cropping region if set + var axisRange = getRange(axis, String(fp.$el.data('focus' + axis)), fp.settings.legacyGrid); + fp['focus' + axis + 'MinStart'] = axisRange.start; + fp['focus' + axis + 'MinStop'] = axisRange.stop; + fp['focus' + axis] = axisRange.average; + fp['minCroppingRegionMaxScale' + axis] = axisRange.maxScale; - adjustFocus: function() { - return adjustFocus($el); - }, + // Get the ideal region coordinates if set + axisRange = getRange(axis, String(fp.$el.data('focus' + axis + 'Ideal')), fp.settings.legacyGrid); + fp['focus' + axis + 'IdealStart'] = axisRange.start; + fp['focus' + axis + 'IdealStop'] = axisRange.stop; + fp['idealCroppingRegionMaxScale' + axis] = axisRange.maxScale; + }); - windowOn: function() { - if (isListening) return; - //Recalculate each time the window is resized - $window.on('resize', thrAdjustFocus); - return isListening = true; - }, + this.minCroppingRegionW = (this.focusXMinStop - this.focusXMinStart) * this.imageW; + this.minCroppingRegionH = (this.focusYMinStop - this.focusYMinStart) * this.imageH; + this.minCroppingRegionRatio = this.minCroppingRegionW / this.minCroppingRegionH; + this.idealCroppingRegionW = (this.focusXIdealStop - this.focusXIdealStart) * this.imageW; + this.idealCroppingRegionH = (this.focusYIdealStop - this.focusYIdealStart) * this.imageH; + this.idealCroppingRegionRatio = this.idealCroppingRegionW / this.idealCroppingRegionH; - windowOff: function() { - if (!isListening) return; - //Stop listening to the resize event - $window.off('resize', thrAdjustFocus); - isListening = false; - return true; + // Set transform origin + if (this.settings.setTransformOrigin) { + var transformOrigin = (fp.focusX * 100) + '% ' + (fp.focusY * 100) + '%'; + this.$image.css({ + 'webkit-transform-origin': transformOrigin, + 'transform-origin': transformOrigin + }); + } + // Mark active + this.$el.addClass('focuspoint-active'); + // Focus image in container + this.adjustFocus(); + // Adjust on resize + if (this.settings.reCalcOnWindowResize) { + this.windowOn(); } + }, + // Get the width and the height of an image by creating a new temporary image + resolveImageSize: function() { + // Don't try this more than once + if (this.triedAutoResolution) { + return false; + } + this.triedAutoResolution = true; + // Create a new image and set a handler which listens to the first call of the 'load' event. + var $el = this.$el; + $('').one('load', function() { + // 'this' references to the new created image + $el.data('imageW', this.width); + $el.data('imageH', this.height); + $el.focusPoint('init'); + }).attr('src', this.$image.attr('src')); + }, + // Adjust focus automatically when screen is resized + windowOn: function() { + $resizeElements = $resizeElements.add(this.element); + updateResizeListener(); + }, + // Cancel automatic adjustments + windowOff: function() { + $resizeElements = $resizeElements.not(this.element); + updateResizeListener(); + }, + // Optimally position image in container + adjustFocus: function() { + // Store all the cropping data in one var for easy debugging + var data = {}; + data.containerW = this.$el.width(); + data.containerH = this.$el.height(); + if (!(data.containerW > 0 && data.containerH > 0 && this.imageW > 0 && this.imageH > 0)) { + return false; //Need dimensions to proceed + } + data.containerRatio = data.containerW / data.containerH; - }; - }; + // Stop processing if the image and container aspect ratio match + if (data.containerRatio === this.imageRatio) { + this.$image.css({ + 'width': '100%', + 'height': '100%', + 'left': 0, + 'top': 0 + }); + return; + } + + // ToDo: this is weird + data.axisScale = { + X: this.imageRatio / data.containerRatio, + Y: data.containerRatio / this.imageRatio + }; - $.fn.focusPoint = function(optionsOrMethod) { - //Shortcut to functions - if string passed assume method name and execute + // Determing the method of cropping to use + if (data.containerRatio >= this.idealCroppingRegionRatio && data.containerRatio <= (this.imageW / this.idealCroppingRegionH)) { + // Show entire ideal cropping range area, with extra image shown on the X axis + data.clippingMode = 'ideal'; + data.primaryClippingAxis = 'Y'; + data.secondaryClippingAxis = 'X'; + } + else if (data.containerRatio <= this.idealCroppingRegionRatio && data.containerRatio >= (this.idealCroppingRegionW / this.imageH)) { + // Show entire ideal cropping range area, with extra image shown on the Y axis + data.clippingMode = 'ideal'; + data.primaryClippingAxis = 'X'; + data.secondaryClippingAxis = 'Y'; + } + else if (this.imageRatio > data.containerRatio) { + // Show as much of the image as possible, cropping on the X axis + data.clippingMode = 'classic'; + data.primaryClippingAxis = 'X'; + if (data.axisScale.X > this.minCroppingRegionMaxScaleX) { + // Shrink the image to preserve the entire minimum cropping region, padding evenly on the Y axis + data.clippingMode = 'min'; + } + } + else { + // Show as much of the image as possible, cropping on the Y axis + data.clippingMode = 'classic'; + data.primaryClippingAxis = 'Y'; + if (data.axisScale.Y > this.minCroppingRegionMaxScaleY) { + // Shrink the image to preserve the entire minimum cropping region, padding evenly on the X axis + data.clippingMode = 'min'; + } + } + + data.scale = 1; + data.shiftPrimary = 0; + data.shiftSecondary = 0; + if (data.clippingMode === 'ideal') { + // Scale up image to fit ideal cropping region in frame + data.scale = this['idealCroppingRegionMaxScale' + data.primaryClippingAxis] / data.axisScale[data.primaryClippingAxis]; + data.shiftSecondary = (getOffset(this['focus' + data.secondaryClippingAxis], data.scale) * 100) + '%'; + data.shiftPrimary = (this['focus' + data.primaryClippingAxis + 'IdealStart'] * -100 * data.axisScale[data.primaryClippingAxis] * data.scale) + '%'; + } + else if (data.clippingMode === 'min') { + // Scale down image to fit min cropping region in frame + data.scale = this['minCroppingRegionMaxScale' + data.primaryClippingAxis] / data.axisScale[data.primaryClippingAxis]; + data.shiftSecondary = (getOffset(this['focus' + data.secondaryClippingAxis], data.scale) * 100) + '%'; + data.shiftPrimary = (this['focus' + data.primaryClippingAxis + 'MinStart'] * -100 * data.axisScale[data.primaryClippingAxis] * data.scale) + '%'; + } + else { + // Show as much image as possible, with focus point as close to center as possible + data.shiftPrimary = (getOffset(this['focus' + data.primaryClippingAxis], data.axisScale[data.primaryClippingAxis]) * 100) + '%'; + } + + // Assign CSS values to image container + if (data.primaryClippingAxis === 'X') { + this.$image.css({ + 'width': ((data.axisScale[data.primaryClippingAxis] * data.scale * 100) + '%'), + 'height': ((data.scale * 100) + '%'), + 'left': (data.shiftPrimary), + 'top': (data.shiftSecondary) + }); + } + else { //clippingAxis === 'Y' + this.$image.css({ + 'width': ((data.scale * 100) + '%'), + 'height': ((data.axisScale[data.primaryClippingAxis] * data.scale * 100) + '%'), + 'left': (data.shiftSecondary), + 'top': (data.shiftPrimary) + }); + } + } + }); + + // Plugin wrapper around the constructor, preventing against multiple instantiations + $.fn.focusPoint = function ( optionsOrMethod ) { + this.each(function() { + if ( !$.data( this, "focusPoint" ) ) { + $.data( this, "focusPoint", new FocusPoint( this, optionsOrMethod ) ); + } + }); + // Shortcut to functions - if string passed assume method name and execute if (typeof optionsOrMethod === 'string') { return this.each(function() { var $el = $(this); $el.data('focusPoint')[optionsOrMethod](); }); } - //Otherwise assume options being passed and setup - var settings = $.extend({}, defaults, optionsOrMethod); - return this.each(function() { - var $el = $(this); - var fp = focusPoint($el, settings); - //Stop the resize event of any previous attached - //focusPoint instances - if ($el.data('focusPoint')) $el.data('focusPoint').windowOff(); - $el.data('focusPoint', fp); - if (settings.reCalcOnWindowResize) fp.windowOn(); - }); + // Chain jQuery functions + return this; }; - $.fn.adjustFocus = function() { - //Deprecated v1.2 - return this.each(function() { - adjustFocus($(this)); - }); - }; - -})(jQuery); \ No newline at end of file +})( jQuery, window, document ); diff --git a/js/jquery.focuspoint.min.js b/js/jquery.focuspoint.min.js index b3a0da9..d18d57b 100644 --- a/js/jquery.focuspoint.min.js +++ b/js/jquery.focuspoint.min.js @@ -1,8 +1,8 @@ /** - * jQuery FocusPoint; version: 1.1.3 - * Author: http://jonathonmenz.com + * jQuery FocusPoint; version: v2-dev + * Author: J. Menz http://jonathonmenz.com * Source: https://github.com/jonom/jquery-focuspoint - * Copyright (c) 2014 J. Menz; MIT License + * Copyright (c) 2014 - 2016 J. Menz; License TBC * @preserve */ -!function($){var t={reCalcOnWindowResize:!0,throttleDuration:17},n=function(t){var n=t.find("img").attr("src");t.data("imageSrc",n),i(n,function(n,i){t.data({imageW:i.width,imageH:i.height}),r(t)})},i=function(t,n){$("").one("load",function(){n(null,{width:this.width,height:this.height})}).attr("src",t)},a=function(t,n){var i=!1;return function(){var a=Array.prototype.slice.call(arguments,0);if(i)return!1;i=!0,setTimeout(function(){i=!1,t.apply(null,a)},n)}},o=function(t,n,i,a,o){var r=Math.floor(n/2),e=(a+1)/2,u=Math.floor(i/t),f=Math.floor(e*u);o&&(f=u-f);var c=f-r,s=u-f,h=n-r;return s<0&&(c=0),-100*c/n+"%"},r=function(t){var i=t.data("imageW"),a=t.data("imageH"),r=t.data("imageSrc");if(!i&&!a&&!r)return n(t);var e=t.width(),u=t.height(),f=parseFloat(t.data("focusX")),c=parseFloat(t.data("focusY")),s=t.find("img").first(),h=0,d=0;if(!(e>0&&u>0&&i>0&&a>0))return!1;var l=i/e,w=a/u;s.css({"max-width":"","max-height":""}),i>e&&a>u&&s.css(l>w?"max-height":"max-width","100%"),l>w?h=o(w,e,i,f):l0){var e=-1*a,n=.5-i*t;return n>0?0:n<0&&n1?(n.sort(m),s.start=n[0],s.stop=n[1],s.average=(n[0]+n[1])/2):s.start=s.stop=s.average=n[0],s.maxScale=1/(s.stop-s.start),s};i.extend(n.prototype,{init:function(){if(this.$el=i(this.element),this.$image=this.$el.find("img, video").first(),this.imageW=this.$el.data("imageW"),this.imageH=this.$el.data("imageH"),this.imageRatio=this.imageW/this.imageH,!this.imageW&&!this.imageH)return this.resolveImageSize();var t=this;if(i.each(["X","Y"],(function(i,a){var e=u(a,String(t.$el.data("focus"+a)),t.settings.legacyGrid);t["focus"+a+"MinStart"]=e.start,t["focus"+a+"MinStop"]=e.stop,t["focus"+a]=e.average,t["minCroppingRegionMaxScale"+a]=e.maxScale,e=u(a,String(t.$el.data("focus"+a+"Ideal")),t.settings.legacyGrid),t["focus"+a+"IdealStart"]=e.start,t["focus"+a+"IdealStop"]=e.stop,t["idealCroppingRegionMaxScale"+a]=e.maxScale})),this.minCroppingRegionW=(this.focusXMinStop-this.focusXMinStart)*this.imageW,this.minCroppingRegionH=(this.focusYMinStop-this.focusYMinStart)*this.imageH,this.minCroppingRegionRatio=this.minCroppingRegionW/this.minCroppingRegionH,this.idealCroppingRegionW=(this.focusXIdealStop-this.focusXIdealStart)*this.imageW,this.idealCroppingRegionH=(this.focusYIdealStop-this.focusYIdealStart)*this.imageH,this.idealCroppingRegionRatio=this.idealCroppingRegionW/this.idealCroppingRegionH,this.settings.setTransformOrigin){var a=100*t.focusX+"% "+100*t.focusY+"%";this.$image.css({"webkit-transform-origin":a,"transform-origin":a})}this.$el.addClass("focuspoint-active"),this.adjustFocus(),this.settings.reCalcOnWindowResize&&this.windowOn()},resolveImageSize:function(){if(this.triedAutoResolution)return!1;this.triedAutoResolution=!0;var t=this.$el;i("").one("load",(function(){t.data("imageW",this.width),t.data("imageH",this.height),t.focusPoint("init")})).attr("src",this.$image.attr("src"))},windowOn:function(){o=o.add(this.element),l()},windowOff:function(){o=o.not(this.element),l()},adjustFocus:function(){var i={};if(i.containerW=this.$el.width(),i.containerH=this.$el.height(),!(i.containerW>0&&i.containerH>0&&this.imageW>0&&this.imageH>0))return!1;i.containerRatio=i.containerW/i.containerH,i.containerRatio!==this.imageRatio?(i.axisScale={X:this.imageRatio/i.containerRatio,Y:i.containerRatio/this.imageRatio},i.containerRatio>=this.idealCroppingRegionRatio&&i.containerRatio<=this.imageW/this.idealCroppingRegionH?(i.clippingMode="ideal",i.primaryClippingAxis="Y",i.secondaryClippingAxis="X"):i.containerRatio<=this.idealCroppingRegionRatio&&i.containerRatio>=this.idealCroppingRegionW/this.imageH?(i.clippingMode="ideal",i.primaryClippingAxis="X",i.secondaryClippingAxis="Y"):this.imageRatio>i.containerRatio?(i.clippingMode="classic",i.primaryClippingAxis="X",i.axisScale.X>this.minCroppingRegionMaxScaleX&&(i.clippingMode="min")):(i.clippingMode="classic",i.primaryClippingAxis="Y",i.axisScale.Y>this.minCroppingRegionMaxScaleY&&(i.clippingMode="min")),i.scale=1,i.shiftPrimary=0,i.shiftSecondary=0,"ideal"===i.clippingMode?(i.scale=this["idealCroppingRegionMaxScale"+i.primaryClippingAxis]/i.axisScale[i.primaryClippingAxis],i.shiftSecondary=100*f(this["focus"+i.secondaryClippingAxis],i.scale)+"%",i.shiftPrimary=-100*this["focus"+i.primaryClippingAxis+"IdealStart"]*i.axisScale[i.primaryClippingAxis]*i.scale+"%"):"min"===i.clippingMode?(i.scale=this["minCroppingRegionMaxScale"+i.primaryClippingAxis]/i.axisScale[i.primaryClippingAxis],i.shiftSecondary=100*f(this["focus"+i.secondaryClippingAxis],i.scale)+"%",i.shiftPrimary=-100*this["focus"+i.primaryClippingAxis+"MinStart"]*i.axisScale[i.primaryClippingAxis]*i.scale+"%"):i.shiftPrimary=100*f(this["focus"+i.primaryClippingAxis],i.axisScale[i.primaryClippingAxis])+"%","X"===i.primaryClippingAxis?this.$image.css({width:i.axisScale[i.primaryClippingAxis]*i.scale*100+"%",height:100*i.scale+"%",left:i.shiftPrimary,top:i.shiftSecondary}):this.$image.css({width:100*i.scale+"%",height:i.axisScale[i.primaryClippingAxis]*i.scale*100+"%",left:i.shiftSecondary,top:i.shiftPrimary})):this.$image.css({width:"100%",height:"100%",left:0,top:0})}}),i.fn.focusPoint=function(t){return this.each((function(){i.data(this,"focusPoint")||i.data(this,"focusPoint",new n(this,t))})),"string"==typeof t?this.each((function(){var a;i(this).data("focusPoint")[t]()})):this}}(jQuery,window,document); \ No newline at end of file