From ccf8d7e48d3ccb04c67a080837fe811c129ff7c4 Mon Sep 17 00:00:00 2001 From: Jono Menz Date: Sat, 6 Sep 2014 08:01:33 +0930 Subject: [PATCH] Added throttling on window resize updates --- README.md | 24 +++++++++++++++++++++++- bower.json | 2 +- focuspoint.jquery.json | 2 +- js/jquery.focuspoint.js | 16 +++++++++++++--- js/jquery.focuspoint.min.js | 4 ++-- 5 files changed, 40 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 24a2ae4..45d4ae9 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,11 @@ Usually the best place for this will be inside your `$(document).ready()` functi $('.focuspoint').focusPoint(); ``` -There aren't many configuration options available at the moment, but if you want to you can prevent images being re-focused when the window is resized like so: +That's it! + +#### Configuration options + +By default images are re-focused when the window is resized. You can disable this like so: ```javascript $('.focuspoint').focusPoint({ @@ -81,6 +85,22 @@ $('.focuspoint').focusPoint({ }); ``` +You can also change how often images are re-focused during window resizing: + +```javascript +//Re-focus images at most once every 100ms +$('.focuspoint').focusPoint({ + throttleDuration: 100 +}); + +//Disable throttling +$('.focuspoint').focusPoint({ + throttleDuration: 0 +}); +``` + +#### Other functions + You can re-focus images at any time with `adjustFocus()`. This recalculates where the image should be positioned in the frame. An example where you may need to do this is if you are using FocusPoint images within a slider. FocusPoint can't do it's calculations properly if an image container is hidden (as it won't have any dimensions), so you should trigger `adjustFocus()` on the target container as soon as it becomes visible. Example: ```javascript @@ -111,6 +131,8 @@ If FocusPoint helped you impress a client and you want to say thanks, you're wel ## Changelog +#### v1.0.3 2014-09-06 +Throttled window resize updates #### v1.0.2 2014-09-05 Made setting image width and height on shell optional (thanks @luruke) #### v1.0.1 2014-09-04 diff --git a/bower.json b/bower.json index 9b6af08..0eef668 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jquery-focuspoint", - "version": "1.0.2", + "version": "1.0.3", "homepage": "https://github.com/jonom/jquery-focuspoint", "authors": [ "Jonathon Menz" diff --git a/focuspoint.jquery.json b/focuspoint.jquery.json index 3d0eec7..b1bd976 100644 --- a/focuspoint.jquery.json +++ b/focuspoint.jquery.json @@ -13,7 +13,7 @@ "focus", "focuspoint" ], - "version": "1.0.2", + "version": "1.0.3", "author": { "name": "Jonathon Menz", "url": "http://jonathonmenz.com" diff --git a/js/jquery.focuspoint.js b/js/jquery.focuspoint.js index 51e3063..eba9786 100755 --- a/js/jquery.focuspoint.js +++ b/js/jquery.focuspoint.js @@ -1,5 +1,5 @@ /** - * jQuery FocusPoint; version: 1.0.2 + * jQuery FocusPoint; version: 1.0.3 * Author: http://jonathonmenz.com * Source: https://github.com/jonom/jquery-focuspoint * Copyright (c) 2014 J. Menz; MIT License @@ -10,11 +10,12 @@ $.fn.focusPoint = function(options) { var settings = $.extend({ //These are the defaults. - reCalcOnWindowResize: true + reCalcOnWindowResize: true, + throttleDuration: 17 //ms - set to 0 to disable throttling }, options); return this.each(function() { //Initial adjustments - var container = $(this); + var container = $(this), isThrottled = false; //Replace basic css positioning with more accurate version container.removeClass('focus-left-top focus-left-center focus-left-bottom focus-center-top focus-center-center focus-center-bottom focus-right-top focus-right-center focus-right-bottom'); //Focus image in container @@ -22,6 +23,15 @@ if (settings.reCalcOnWindowResize) { //Recalculate each time the window is resized $(window).resize(function() { + //Throttle redraws + if (settings.throttleDuration > 0){ + if (isThrottled) { return; } + isThrottled = true; + setTimeout(function () { + isThrottled = false; + container.adjustFocus(); + }, settings.throttleDuration); + } container.adjustFocus(); }); } diff --git a/js/jquery.focuspoint.min.js b/js/jquery.focuspoint.min.js index 465614e..697ad9f 100644 --- a/js/jquery.focuspoint.min.js +++ b/js/jquery.focuspoint.min.js @@ -1,8 +1,8 @@ /** - * jQuery FocusPoint; version: 1.0.2 + * jQuery FocusPoint; version: 1.0.3 * Author: http://jonathonmenz.com * Source: https://github.com/jonom/jquery-focuspoint * Copyright (c) 2014 J. Menz; MIT License * @preserve */ -!function($){$.fn.focusPoint=function(t){var s=$.extend({reCalcOnWindowResize:!0},t);return this.each(function(){var t=$(this);t.removeClass("focus-left-top focus-left-center focus-left-bottom focus-center-top focus-center-center focus-center-bottom focus-right-top focus-right-center focus-right-bottom"),t.adjustFocus(),s.reCalcOnWindowResize&&$(window).resize(function(){t.adjustFocus()})})},$.fn.adjustFocus=function(){return this.each(function(){var t,s,o,i,e,a,c,h,n,r,f,u,d,m,g,l,w,x,p,M,b,j,v,F,W;return t=$(this).width(),s=$(this).height(),o=$(this).find("img").first(),i=$(this).data("imageW"),e=$(this).data("imageH"),i&&e?t>0&&s>0&&i>0&&e>0?(h=i/t,n=e/s,i>t&&e>s?h>n?(o.css("max-width",""),o.css("max-height","100%")):(o.css("max-width","100%"),o.css("max-height","")):(o.css("max-width",""),o.css("max-height","")),r=0,f=0,h>n?(u=Math.floor(t/2),d=(Number($(this).data("focus-x"))+1)/2,m=Math.floor(i/n),g=Math.floor(d*m),l=g-u,w=m-g,x=t-u,x>w&&(l-=x-w),0>l&&(l=0),r=-1*l):n>h&&(p=Math.floor(s/2),M=(Number($(this).data("focus-y"))+1)/2,b=Math.floor(e/h),j=b-Math.floor(M*b),v=j-p,F=b-j,W=s-p,W>F&&(v-=W-F),0>v&&(v=0),f=-1*v),o.css("left",r+"px"),void o.css("top",f+"px")):!1:(a=this,c=new Image,c.onload=function(){$(a).data("imageW",this.width),$(a).data("imageH",this.height),$(a).adjustFocus()},c.src=o.attr("src"),!1)})}}(jQuery); \ No newline at end of file +!function($){$.fn.focusPoint=function(t){var o=$.extend({reCalcOnWindowResize:!0,throttleDuration:17},t);return this.each(function(){var t=$(this),s=!1;t.removeClass("focus-left-top focus-left-center focus-left-bottom focus-center-top focus-center-center focus-center-bottom focus-right-top focus-right-center focus-right-bottom"),t.adjustFocus(),o.reCalcOnWindowResize&&$(window).resize(function(){if(o.throttleDuration>0){if(s)return;s=!0,setTimeout(function(){s=!1,t.adjustFocus()},o.throttleDuration)}t.adjustFocus()})})},$.fn.adjustFocus=function(){return this.each(function(){var t,o,s,i,e,a,c,r,h,n,u,f,d,m,l,g,w,x,j,p,M,b,v,F,W;return t=$(this).width(),o=$(this).height(),s=$(this).find("img").first(),i=$(this).data("imageW"),e=$(this).data("imageH"),i&&e?t>0&&o>0&&i>0&&e>0?(r=i/t,h=e/o,i>t&&e>o?r>h?(s.css("max-width",""),s.css("max-height","100%")):(s.css("max-width","100%"),s.css("max-height","")):(s.css("max-width",""),s.css("max-height","")),n=0,u=0,r>h?(f=Math.floor(t/2),d=(Number($(this).data("focus-x"))+1)/2,m=Math.floor(i/h),l=Math.floor(d*m),g=l-f,w=m-l,x=t-f,x>w&&(g-=x-w),0>g&&(g=0),n=-1*g):h>r&&(j=Math.floor(o/2),p=(Number($(this).data("focus-y"))+1)/2,M=Math.floor(e/r),b=M-Math.floor(p*M),v=b-j,F=M-b,W=o-j,W>F&&(v-=W-F),0>v&&(v=0),u=-1*v),s.css("left",n+"px"),void s.css("top",u+"px")):!1:(a=this,c=new Image,c.onload=function(){$(a).data("imageW",this.width),$(a).data("imageH",this.height),$(a).adjustFocus()},c.src=s.attr("src"),!1)})}}(jQuery); \ No newline at end of file