From bf491afde4157960680cdd8763ed016bd5a17620 Mon Sep 17 00:00:00 2001 From: Daniel Korte Date: Wed, 26 Nov 2014 14:29:56 -0600 Subject: [PATCH 1/3] Remove window event listeners when plugin is destroyed --- background-check.js | 23 ++++++++++++++----- background-check.min.js | 2 +- .../build/scripts/background-check.min.js | 2 +- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/background-check.js b/background-check.js index 5aadb32..d45ca40 100755 --- a/background-check.js +++ b/background-check.js @@ -19,6 +19,8 @@ 'use strict'; var resizeEvent = window.orientation !== undefined ? 'orientationchange' : 'resize'; + var resizeFn; + var scrollFn; var supported; var canvas; var context; @@ -70,12 +72,14 @@ canvas.style.width = '100%'; canvas.style.height = '100%'; - window.addEventListener(resizeEvent, throttle.bind(null, function () { + resizeFn = throttle.bind(null, function () { resizeCanvas(); check(); - })); + }); + window.addEventListener(resizeEvent, resizeFn); - window.addEventListener('scroll', throttle.bind(null, check)); + scrollFn = throttle.bind(null, check); + window.addEventListener('scroll', scrollFn); resizeCanvas(); check(); @@ -88,6 +92,13 @@ * Destructor */ function destroy() { + if (supported) { + window.removeEventListener(resizeEvent, resizeFn); + window.removeEventListener('scroll', scrollFn); + resizeFn = null; + scrollFn = null; + } + supported = null; canvas = null; context = null; @@ -241,7 +252,7 @@ */ function kill(start) { var duration = new Date().getTime() - start; - + log('Duration: ' + duration + 'ms'); if (duration > get('maxDuration')) { @@ -540,7 +551,7 @@ for (var t = 0; t < targets.length; t++) { target = targets[t]; target = get('changeParent') ? target.parentNode : target; - + classList(target, get('classes').light, 'remove'); classList(target, get('classes').dark, 'remove'); classList(target, get('classes').complex, 'remove'); @@ -549,7 +560,7 @@ /* - * Calculate average pixel brightness of a region + * Calculate average pixel brightness of a region * and add 'light' or 'dark' accordingly */ function calculatePixelBrightness(target) { diff --git a/background-check.min.js b/background-check.min.js index a1dafcb..82d9e12 100644 --- a/background-check.min.js +++ b/background-check.min.js @@ -2,4 +2,4 @@ http://kennethcachia.com/background-check v1.2.2 */ -!function(a,b){"function"==typeof define&&define.amd?define(b):a.BackgroundCheck=b(a)}(this,function(){"use strict";function a(a){if(void 0===a||void 0===a.targets)throw"Missing attributes";H.debug=d(a.debug,!1),H.debugOverlay=d(a.debugOverlay,!1),H.targets=g(a.targets),H.images=g(a.images||"img",!0),H.changeParent=d(a.changeParent,!1),H.threshold=d(a.threshold,50),H.minComplexity=d(a.minComplexity,30),H.minOverlap=d(a.minOverlap,50),H.windowEvents=d(a.windowEvents,!0),H.maxDuration=d(a.maxDuration,500),H.mask=d(a.mask,{r:0,g:255,b:0}),H.classes=d(a.classes,{dark:"background--dark",light:"background--light",complex:"background--complex"}),void 0===B&&(h(),B&&(C.style.position="fixed",C.style.top="0px",C.style.left="0px",C.style.width="100%",C.style.height="100%",window.addEventListener(G,x.bind(null,function(){k(),w()})),window.addEventListener("scroll",x.bind(null,w)),k(),w()))}function b(){B=null,C=null,D=null,H={},E&&clearTimeout(E)}function c(a){z("debug")&&console.log(a)}function d(a,b){return e(a,typeof b),void 0===a?b:a}function e(a,b){if(void 0!==a&&typeof a!==b)throw"Incorrect attribute type"}function f(a){for(var b,d,e=[],f=0;f1)throw"Multiple backgrounds are not supported";if(!d||"none"===d)throw"Element is not an but does not have a background-image";e[f]={img:new Image,el:e[f]},d=d.slice(4,-1),d=d.replace(/"/g,""),e[f].img.src=d,c("CSS Image - "+d)}return e}function g(a,b){var c=a;if("string"==typeof a?c=document.querySelectorAll(a):a&&1===a.nodeType&&(c=[a]),!c||0===c.length||void 0===c.length)throw"Elements not found";return b&&(c=f(c)),c=Array.prototype.slice.call(c)}function h(){C=document.createElement("canvas"),C&&C.getContext?(D=C.getContext("2d"),B=!0):B=!1,i()}function i(){z("debugOverlay")?(C.style.opacity=.5,C.style.pointerEvents="none",document.body.appendChild(C)):C.parentNode&&C.parentNode.removeChild(C)}function j(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>z("maxDuration")&&(console.log("BackgroundCheck - Killed"),q(),b())}function k(){F={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},C.width=document.body.clientWidth,C.height=window.innerHeight}function l(a,b,c){var d,e;return-1!==a.indexOf("px")?d=parseFloat(a):-1!==a.indexOf("%")?(d=parseFloat(a),e=d/100,d=e*b,c&&(d-=c*e)):d=b,d}function m(a){var b=window.getComputedStyle(a.el);a.el.style.backgroundRepeat="no-repeat",a.el.style.backgroundOrigin="padding-box";var c=b.backgroundSize.split(" "),d=c[0],e=void 0===c[1]?"auto":c[1],f=a.el.clientWidth/a.el.clientHeight,g=a.img.naturalWidth/a.img.naturalHeight;"cover"===d?f>=g?(d="100%",e="auto"):(d="auto",c[0]="auto",e="100%"):"contain"===d&&(1/g>1/f?(d="auto",c[0]="auto",e="100%"):(d="100%",e="auto")),d="auto"===d?a.img.naturalWidth:l(d,a.el.clientWidth),e="auto"===e?d/a.img.naturalWidth*a.img.naturalHeight:l(e,a.el.clientHeight),"auto"===c[0]&&"auto"!==c[1]&&(d=e/a.img.naturalHeight*a.img.naturalWidth);var h=b.backgroundPosition;"top"===h?h="50% 0%":"left"===h?h="0% 50%":"right"===h?h="100% 50%":"bottom"===h?h="50% 100%":"center"===h&&(h="50% 50%"),h=h.split(" ");var i,j;return 4===h.length?(i=h[1],j=h[3]):(i=h[0],j=h[1]),j=j||"50%",i=l(i,a.el.clientWidth,d),j=l(j,a.el.clientHeight,e),4===h.length&&("right"===h[0]&&(i=a.el.clientWidth-a.img.naturalWidth-i),"bottom"===h[2]&&(j=a.el.clientHeight-a.img.naturalHeight-j)),i+=a.el.getBoundingClientRect().left,j+=a.el.getBoundingClientRect().top,{left:Math.floor(i),right:Math.floor(i+d),top:Math.floor(j),bottom:Math.floor(j+e),width:Math.floor(d),height:Math.floor(e)}}function n(a){var b,c,d;if(a.nodeType){var e=a.getBoundingClientRect();b={left:e.left,right:e.right,top:e.top,bottom:e.bottom,width:e.width,height:e.height},d=a.parentNode,c=a}else b=m(a),d=a.el,c=a.img;d=d.getBoundingClientRect(),b.imageTop=0,b.imageLeft=0,b.imageWidth=c.naturalWidth,b.imageHeight=c.naturalHeight;var f,g=b.imageHeight/b.height;return b.topd.bottom&&(f=b.bottom-d.bottom,b.imageHeight-=g*f,b.height-=f),b.right>d.right&&(f=b.right-d.right,b.imageWidth-=g*f,b.width-=f),b.imageTop=Math.floor(b.imageTop),b.imageLeft=Math.floor(b.imageLeft),b.imageHeight=Math.floor(b.imageHeight),b.imageWidth=Math.floor(b.imageWidth),b}function o(a){var b=n(a);a=a.nodeType?a:a.img,b.imageWidth>0&&b.imageHeight>0&&b.width>0&&b.height>0?D.drawImage(a,b.imageLeft,b.imageTop,b.imageWidth,b.imageHeight,b.left,b.top,b.width,b.height):c("Skipping image - "+a.src+" - area too small")}function p(a,b,c){var d=a.className;switch(c){case"add":d+=" "+b;break;case"remove":var e=new RegExp("(?:^|\\s)"+b+"(?!\\S)","g");d=d.replace(e,"")}a.className=d.trim()}function q(a){for(var b,c=a?[a]:z("targets"),d=0;d0&&g.height>0){q(a),a=z("changeParent")?a.parentNode:a,d=D.getImageData(g.left,g.top,g.width,g.height).data;for(var m=0;mz("minComplexity")/100&&p(a,z("classes").complex,"add"))}}function s(a,b){return a=(a.nodeType?a:a.el).getBoundingClientRect(),b=b===F?b:(b.nodeType?b:b.el).getBoundingClientRect(),!(a.rightb.right||a.top>b.bottom||a.bottomg;g++)b=z("targets")[g],s(b,F)&&("targets"!==d||a&&a!==b?"image"===d&&s(b,a)&&r(b):(e=!0,r(b)));if("targets"===d&&!e)throw a+" is not a target";j(c)}function u(a){var b=function(a){var b=0;return"static"!==window.getComputedStyle(a).position&&(b=parseInt(window.getComputedStyle(a).zIndex,10)||0,b>=0&&b++),b},c=a.parentNode,d=c?b(c):0,e=b(a);return 1e5*d+e}function v(a){var b=!1;return a.sort(function(a,c){a=a.nodeType?a:a.el,c=c.nodeType?c:c.el;var d=a.compareDocumentPosition(c),e=0;return a=u(a),c=u(c),a>c&&(b=!0),a===c&&2===d?e=1:a===c&&4===d&&(e=-1),e||a-c}),c("Sorted: "+b),b&&c(a),b}function w(a,b,d){if(B){var e=z("mask");c("--- BackgroundCheck ---"),c("onLoad event: "+(d&&d.src)),b!==!0&&(D.clearRect(0,0,C.width,C.height),D.fillStyle="rgb("+e.r+", "+e.g+", "+e.b+")",D.fillRect(0,0,C.width,C.height));for(var f,g,h=d?[d]:z("images"),i=v(h),j=!1,k=0;k1)throw"Multiple backgrounds are not supported";if(!d||"none"===d)throw"Element is not an but does not have a background-image";e[f]={img:new Image,el:e[f]},d=d.slice(4,-1),d=d.replace(/"/g,""),e[f].img.src=d,c("CSS Image - "+d)}return e}function g(a,b){var c=a;if("string"==typeof a?c=document.querySelectorAll(a):a&&1===a.nodeType&&(c=[a]),!c||0===c.length||void 0===c.length)throw"Elements not found";return b&&(c=f(c)),c=Array.prototype.slice.call(c)}function h(){E=document.createElement("canvas"),E&&E.getContext?(F=E.getContext("2d"),D=!0):D=!1,i()}function i(){z("debugOverlay")?(E.style.opacity=.5,E.style.pointerEvents="none",document.body.appendChild(E)):E.parentNode&&E.parentNode.removeChild(E)}function j(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>z("maxDuration")&&(console.log("BackgroundCheck - Killed"),q(),b())}function k(){H={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},E.width=document.body.clientWidth,E.height=window.innerHeight}function l(a,b,c){var d,e;return-1!==a.indexOf("px")?d=parseFloat(a):-1!==a.indexOf("%")?(d=parseFloat(a),e=d/100,d=e*b,c&&(d-=c*e)):d=b,d}function m(a){var b=window.getComputedStyle(a.el);a.el.style.backgroundRepeat="no-repeat",a.el.style.backgroundOrigin="padding-box";var c=b.backgroundSize.split(" "),d=c[0],e=void 0===c[1]?"auto":c[1],f=a.el.clientWidth/a.el.clientHeight,g=a.img.naturalWidth/a.img.naturalHeight;"cover"===d?f>=g?(d="100%",e="auto"):(d="auto",c[0]="auto",e="100%"):"contain"===d&&(1/g>1/f?(d="auto",c[0]="auto",e="100%"):(d="100%",e="auto")),d="auto"===d?a.img.naturalWidth:l(d,a.el.clientWidth),e="auto"===e?d/a.img.naturalWidth*a.img.naturalHeight:l(e,a.el.clientHeight),"auto"===c[0]&&"auto"!==c[1]&&(d=e/a.img.naturalHeight*a.img.naturalWidth);var h=b.backgroundPosition;"top"===h?h="50% 0%":"left"===h?h="0% 50%":"right"===h?h="100% 50%":"bottom"===h?h="50% 100%":"center"===h&&(h="50% 50%"),h=h.split(" ");var i,j;return 4===h.length?(i=h[1],j=h[3]):(i=h[0],j=h[1]),j=j||"50%",i=l(i,a.el.clientWidth,d),j=l(j,a.el.clientHeight,e),4===h.length&&("right"===h[0]&&(i=a.el.clientWidth-a.img.naturalWidth-i),"bottom"===h[2]&&(j=a.el.clientHeight-a.img.naturalHeight-j)),i+=a.el.getBoundingClientRect().left,j+=a.el.getBoundingClientRect().top,{left:Math.floor(i),right:Math.floor(i+d),top:Math.floor(j),bottom:Math.floor(j+e),width:Math.floor(d),height:Math.floor(e)}}function n(a){var b,c,d;if(a.nodeType){var e=a.getBoundingClientRect();b={left:e.left,right:e.right,top:e.top,bottom:e.bottom,width:e.width,height:e.height},d=a.parentNode,c=a}else b=m(a),d=a.el,c=a.img;d=d.getBoundingClientRect(),b.imageTop=0,b.imageLeft=0,b.imageWidth=c.naturalWidth,b.imageHeight=c.naturalHeight;var f,g=b.imageHeight/b.height;return b.topd.bottom&&(f=b.bottom-d.bottom,b.imageHeight-=g*f,b.height-=f),b.right>d.right&&(f=b.right-d.right,b.imageWidth-=g*f,b.width-=f),b.imageTop=Math.floor(b.imageTop),b.imageLeft=Math.floor(b.imageLeft),b.imageHeight=Math.floor(b.imageHeight),b.imageWidth=Math.floor(b.imageWidth),b}function o(a){var b=n(a);a=a.nodeType?a:a.img,b.imageWidth>0&&b.imageHeight>0&&b.width>0&&b.height>0?F.drawImage(a,b.imageLeft,b.imageTop,b.imageWidth,b.imageHeight,b.left,b.top,b.width,b.height):c("Skipping image - "+a.src+" - area too small")}function p(a,b,c){var d=a.className;switch(c){case"add":d+=" "+b;break;case"remove":var e=new RegExp("(?:^|\\s)"+b+"(?!\\S)","g");d=d.replace(e,"")}a.className=d.trim()}function q(a){for(var b,c=a?[a]:z("targets"),d=0;d0&&g.height>0){q(a),a=z("changeParent")?a.parentNode:a,d=F.getImageData(g.left,g.top,g.width,g.height).data;for(var m=0;mz("minComplexity")/100&&p(a,z("classes").complex,"add"))}}function s(a,b){return a=(a.nodeType?a:a.el).getBoundingClientRect(),b=b===H?b:(b.nodeType?b:b.el).getBoundingClientRect(),!(a.rightb.right||a.top>b.bottom||a.bottomg;g++)b=z("targets")[g],s(b,H)&&("targets"!==d||a&&a!==b?"image"===d&&s(b,a)&&r(b):(e=!0,r(b)));if("targets"===d&&!e)throw a+" is not a target";j(c)}function u(a){var b=function(a){var b=0;return"static"!==window.getComputedStyle(a).position&&(b=parseInt(window.getComputedStyle(a).zIndex,10)||0,b>=0&&b++),b},c=a.parentNode,d=c?b(c):0,e=b(a);return 1e5*d+e}function v(a){var b=!1;return a.sort(function(a,c){a=a.nodeType?a:a.el,c=c.nodeType?c:c.el;var d=a.compareDocumentPosition(c),e=0;return a=u(a),c=u(c),a>c&&(b=!0),a===c&&2===d?e=1:a===c&&4===d&&(e=-1),e||a-c}),c("Sorted: "+b),b&&c(a),b}function w(a,b,d){if(D){var e=z("mask");c("--- BackgroundCheck ---"),c("onLoad event: "+(d&&d.src)),b!==!0&&(F.clearRect(0,0,E.width,E.height),F.fillStyle="rgb("+e.r+", "+e.g+", "+e.b+")",F.fillRect(0,0,E.width,E.height));for(var f,g,h=d?[d]:z("images"),i=v(h),j=!1,k=0;k1)throw"Multiple backgrounds are not supported";if(!d||"none"===d)throw"Element is not an but does not have a background-image";e[f]={img:new Image,el:e[f]},d=d.slice(4,-1),d=d.replace(/"/g,""),e[f].img.src=d,c("CSS Image - "+d)}return e}function g(a,b){var c=a;if("string"==typeof a?c=document.querySelectorAll(a):a&&1===a.nodeType&&(c=[a]),!c||0===c.length||void 0===c.length)throw"Elements not found";return b&&(c=f(c)),c=Array.prototype.slice.call(c)}function h(){C=document.createElement("canvas"),C&&C.getContext?(D=C.getContext("2d"),B=!0):B=!1,i()}function i(){z("debugOverlay")?(C.style.opacity=.5,C.style.pointerEvents="none",document.body.appendChild(C)):C.parentNode&&C.parentNode.removeChild(C)}function j(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>z("maxDuration")&&(console.log("BackgroundCheck - Killed"),q(),b())}function k(){F={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},C.width=document.body.clientWidth,C.height=window.innerHeight}function l(a,b,c){var d,e;return-1!==a.indexOf("px")?d=parseFloat(a):-1!==a.indexOf("%")?(d=parseFloat(a),e=d/100,d=e*b,c&&(d-=c*e)):d=b,d}function m(a){var b=window.getComputedStyle(a.el);a.el.style.backgroundRepeat="no-repeat",a.el.style.backgroundOrigin="padding-box";var c=b.backgroundSize.split(" "),d=c[0],e=void 0===c[1]?"auto":c[1],f=a.el.clientWidth/a.el.clientHeight,g=a.img.naturalWidth/a.img.naturalHeight;"cover"===d?f>=g?(d="100%",e="auto"):(d="auto",c[0]="auto",e="100%"):"contain"===d&&(1/g>1/f?(d="auto",c[0]="auto",e="100%"):(d="100%",e="auto")),d="auto"===d?a.img.naturalWidth:l(d,a.el.clientWidth),e="auto"===e?d/a.img.naturalWidth*a.img.naturalHeight:l(e,a.el.clientHeight),"auto"===c[0]&&"auto"!==c[1]&&(d=e/a.img.naturalHeight*a.img.naturalWidth);var h=b.backgroundPosition;"top"===h?h="50% 0%":"left"===h?h="0% 50%":"right"===h?h="100% 50%":"bottom"===h?h="50% 100%":"center"===h&&(h="50% 50%"),h=h.split(" ");var i,j;return 4===h.length?(i=h[1],j=h[3]):(i=h[0],j=h[1]),j=j||"50%",i=l(i,a.el.clientWidth,d),j=l(j,a.el.clientHeight,e),4===h.length&&("right"===h[0]&&(i=a.el.clientWidth-a.img.naturalWidth-i),"bottom"===h[2]&&(j=a.el.clientHeight-a.img.naturalHeight-j)),i+=a.el.getBoundingClientRect().left,j+=a.el.getBoundingClientRect().top,{left:Math.floor(i),right:Math.floor(i+d),top:Math.floor(j),bottom:Math.floor(j+e),width:Math.floor(d),height:Math.floor(e)}}function n(a){var b,c,d;if(a.nodeType){var e=a.getBoundingClientRect();b={left:e.left,right:e.right,top:e.top,bottom:e.bottom,width:e.width,height:e.height},d=a.parentNode,c=a}else b=m(a),d=a.el,c=a.img;d=d.getBoundingClientRect(),b.imageTop=0,b.imageLeft=0,b.imageWidth=c.naturalWidth,b.imageHeight=c.naturalHeight;var f,g=b.imageHeight/b.height;return b.topd.bottom&&(f=b.bottom-d.bottom,b.imageHeight-=g*f,b.height-=f),b.right>d.right&&(f=b.right-d.right,b.imageWidth-=g*f,b.width-=f),b.imageTop=Math.floor(b.imageTop),b.imageLeft=Math.floor(b.imageLeft),b.imageHeight=Math.floor(b.imageHeight),b.imageWidth=Math.floor(b.imageWidth),b}function o(a){var b=n(a);a=a.nodeType?a:a.img,b.imageWidth>0&&b.imageHeight>0&&b.width>0&&b.height>0?D.drawImage(a,b.imageLeft,b.imageTop,b.imageWidth,b.imageHeight,b.left,b.top,b.width,b.height):c("Skipping image - "+a.src+" - area too small")}function p(a,b,c){var d=a.className;switch(c){case"add":d+=" "+b;break;case"remove":var e=new RegExp("(?:^|\\s)"+b+"(?!\\S)","g");d=d.replace(e,"")}a.className=d.trim()}function q(a){for(var b,c=a?[a]:z("targets"),d=0;d0&&g.height>0){q(a),a=z("changeParent")?a.parentNode:a,d=D.getImageData(g.left,g.top,g.width,g.height).data;for(var m=0;mz("minComplexity")/100&&p(a,z("classes").complex,"add"))}}function s(a,b){return a=(a.nodeType?a:a.el).getBoundingClientRect(),b=b===F?b:(b.nodeType?b:b.el).getBoundingClientRect(),!(a.rightb.right||a.top>b.bottom||a.bottomg;g++)b=z("targets")[g],s(b,F)&&("targets"!==d||a&&a!==b?"image"===d&&s(b,a)&&r(b):(e=!0,r(b)));if("targets"===d&&!e)throw a+" is not a target";j(c)}function u(a){var b=function(a){var b=0;return"static"!==window.getComputedStyle(a).position&&(b=parseInt(window.getComputedStyle(a).zIndex,10)||0,b>=0&&b++),b},c=a.parentNode,d=c?b(c):0,e=b(a);return 1e5*d+e}function v(a){var b=!1;return a.sort(function(a,c){a=a.nodeType?a:a.el,c=c.nodeType?c:c.el;var d=a.compareDocumentPosition(c),e=0;return a=u(a),c=u(c),a>c&&(b=!0),a===c&&2===d?e=1:a===c&&4===d&&(e=-1),e||a-c}),c("Sorted: "+b),b&&c(a),b}function w(a,b,d){if(B){var e=z("mask");c("--- BackgroundCheck ---"),c("onLoad event: "+(d&&d.src)),b!==!0&&(D.clearRect(0,0,C.width,C.height),D.fillStyle="rgb("+e.r+", "+e.g+", "+e.b+")",D.fillRect(0,0,C.width,C.height));for(var f,g,h=d?[d]:z("images"),i=v(h),j=!1,k=0;k1)throw"Multiple backgrounds are not supported";if(!d||"none"===d)throw"Element is not an but does not have a background-image";e[f]={img:new Image,el:e[f]},d=d.slice(4,-1),d=d.replace(/"/g,""),e[f].img.src=d,c("CSS Image - "+d)}return e}function g(a,b){var c=a;if("string"==typeof a?c=document.querySelectorAll(a):a&&1===a.nodeType&&(c=[a]),!c||0===c.length||void 0===c.length)throw"Elements not found";return b&&(c=f(c)),c=Array.prototype.slice.call(c)}function h(){E=document.createElement("canvas"),E&&E.getContext?(F=E.getContext("2d"),D=!0):D=!1,i()}function i(){z("debugOverlay")?(E.style.opacity=.5,E.style.pointerEvents="none",document.body.appendChild(E)):E.parentNode&&E.parentNode.removeChild(E)}function j(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>z("maxDuration")&&(console.log("BackgroundCheck - Killed"),q(),b())}function k(){H={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},E.width=document.body.clientWidth,E.height=window.innerHeight}function l(a,b,c){var d,e;return-1!==a.indexOf("px")?d=parseFloat(a):-1!==a.indexOf("%")?(d=parseFloat(a),e=d/100,d=e*b,c&&(d-=c*e)):d=b,d}function m(a){var b=window.getComputedStyle(a.el);a.el.style.backgroundRepeat="no-repeat",a.el.style.backgroundOrigin="padding-box";var c=b.backgroundSize.split(" "),d=c[0],e=void 0===c[1]?"auto":c[1],f=a.el.clientWidth/a.el.clientHeight,g=a.img.naturalWidth/a.img.naturalHeight;"cover"===d?f>=g?(d="100%",e="auto"):(d="auto",c[0]="auto",e="100%"):"contain"===d&&(1/g>1/f?(d="auto",c[0]="auto",e="100%"):(d="100%",e="auto")),d="auto"===d?a.img.naturalWidth:l(d,a.el.clientWidth),e="auto"===e?d/a.img.naturalWidth*a.img.naturalHeight:l(e,a.el.clientHeight),"auto"===c[0]&&"auto"!==c[1]&&(d=e/a.img.naturalHeight*a.img.naturalWidth);var h=b.backgroundPosition;"top"===h?h="50% 0%":"left"===h?h="0% 50%":"right"===h?h="100% 50%":"bottom"===h?h="50% 100%":"center"===h&&(h="50% 50%"),h=h.split(" ");var i,j;return 4===h.length?(i=h[1],j=h[3]):(i=h[0],j=h[1]),j=j||"50%",i=l(i,a.el.clientWidth,d),j=l(j,a.el.clientHeight,e),4===h.length&&("right"===h[0]&&(i=a.el.clientWidth-a.img.naturalWidth-i),"bottom"===h[2]&&(j=a.el.clientHeight-a.img.naturalHeight-j)),i+=a.el.getBoundingClientRect().left,j+=a.el.getBoundingClientRect().top,{left:Math.floor(i),right:Math.floor(i+d),top:Math.floor(j),bottom:Math.floor(j+e),width:Math.floor(d),height:Math.floor(e)}}function n(a){var b,c,d;if(a.nodeType){var e=a.getBoundingClientRect();b={left:e.left,right:e.right,top:e.top,bottom:e.bottom,width:e.width,height:e.height},d=a.parentNode,c=a}else b=m(a),d=a.el,c=a.img;d=d.getBoundingClientRect(),b.imageTop=0,b.imageLeft=0,b.imageWidth=c.naturalWidth,b.imageHeight=c.naturalHeight;var f,g=b.imageHeight/b.height;return b.topd.bottom&&(f=b.bottom-d.bottom,b.imageHeight-=g*f,b.height-=f),b.right>d.right&&(f=b.right-d.right,b.imageWidth-=g*f,b.width-=f),b.imageTop=Math.floor(b.imageTop),b.imageLeft=Math.floor(b.imageLeft),b.imageHeight=Math.floor(b.imageHeight),b.imageWidth=Math.floor(b.imageWidth),b}function o(a){var b=n(a);a=a.nodeType?a:a.img,b.imageWidth>0&&b.imageHeight>0&&b.width>0&&b.height>0?F.drawImage(a,b.imageLeft,b.imageTop,b.imageWidth,b.imageHeight,b.left,b.top,b.width,b.height):c("Skipping image - "+a.src+" - area too small")}function p(a,b,c){var d=a.className;switch(c){case"add":d+=" "+b;break;case"remove":var e=new RegExp("(?:^|\\s)"+b+"(?!\\S)","g");d=d.replace(e,"")}a.className=d.trim()}function q(a){for(var b,c=a?[a]:z("targets"),d=0;d0&&g.height>0){q(a),a=z("changeParent")?a.parentNode:a,d=F.getImageData(g.left,g.top,g.width,g.height).data;for(var m=0;mz("minComplexity")/100&&p(a,z("classes").complex,"add"))}}function s(a,b){return a=(a.nodeType?a:a.el).getBoundingClientRect(),b=b===H?b:(b.nodeType?b:b.el).getBoundingClientRect(),!(a.rightb.right||a.top>b.bottom||a.bottomg;g++)b=z("targets")[g],s(b,H)&&("targets"!==d||a&&a!==b?"image"===d&&s(b,a)&&r(b):(e=!0,r(b)));if("targets"===d&&!e)throw a+" is not a target";j(c)}function u(a){var b=function(a){var b=0;return"static"!==window.getComputedStyle(a).position&&(b=parseInt(window.getComputedStyle(a).zIndex,10)||0,b>=0&&b++),b},c=a.parentNode,d=c?b(c):0,e=b(a);return 1e5*d+e}function v(a){var b=!1;return a.sort(function(a,c){a=a.nodeType?a:a.el,c=c.nodeType?c:c.el;var d=a.compareDocumentPosition(c),e=0;return a=u(a),c=u(c),a>c&&(b=!0),a===c&&2===d?e=1:a===c&&4===d&&(e=-1),e||a-c}),c("Sorted: "+b),b&&c(a),b}function w(a,b,d){if(D){var e=z("mask");c("--- BackgroundCheck ---"),c("onLoad event: "+(d&&d.src)),b!==!0&&(F.clearRect(0,0,E.width,E.height),F.fillStyle="rgb("+e.r+", "+e.g+", "+e.b+")",F.fillRect(0,0,E.width,E.height));for(var f,g,h=d?[d]:z("images"),i=v(h),j=!1,k=0;k Date: Tue, 25 Aug 2015 12:00:45 +0200 Subject: [PATCH 2/3] fix destroy functionality Fix destroy functionality in order to be able to reinitialize the plugin (vars need to be undefined instead of null). Additionally the classes are removed on destroy --- background-check.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/background-check.js b/background-check.js index d45ca40..b10aafb 100755 --- a/background-check.js +++ b/background-check.js @@ -92,16 +92,17 @@ * Destructor */ function destroy() { + removeClasses(); if (supported) { window.removeEventListener(resizeEvent, resizeFn); window.removeEventListener('scroll', scrollFn); - resizeFn = null; - scrollFn = null; + resizeFn = undefined; + scrollFn = undefined; } - supported = null; - canvas = null; - context = null; + supported = undefined; + canvas = undefined; + context = undefined; attrs = {}; if (throttleDelay) { From ad36258e78d396a4a8818a2c79e255c6daf85f7c Mon Sep 17 00:00:00 2001 From: LOK-Soft Date: Tue, 25 Aug 2015 12:05:57 +0200 Subject: [PATCH 3/3] fix destroy functionality --- background-check.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/background-check.min.js b/background-check.min.js index 82d9e12..34f501e 100644 --- a/background-check.min.js +++ b/background-check.min.js @@ -2,4 +2,4 @@ http://kennethcachia.com/background-check v1.2.2 */ -!function(a,b){"function"==typeof define&&define.amd?define(b):a.BackgroundCheck=b(a)}(this,function(){"use strict";function a(a){if(void 0===a||void 0===a.targets)throw"Missing attributes";J.debug=d(a.debug,!1),J.debugOverlay=d(a.debugOverlay,!1),J.targets=g(a.targets),J.images=g(a.images||"img",!0),J.changeParent=d(a.changeParent,!1),J.threshold=d(a.threshold,50),J.minComplexity=d(a.minComplexity,30),J.minOverlap=d(a.minOverlap,50),J.windowEvents=d(a.windowEvents,!0),J.maxDuration=d(a.maxDuration,500),J.mask=d(a.mask,{r:0,g:255,b:0}),J.classes=d(a.classes,{dark:"background--dark",light:"background--light",complex:"background--complex"}),void 0===D&&(h(),D&&(E.style.position="fixed",E.style.top="0px",E.style.left="0px",E.style.width="100%",E.style.height="100%",B=x.bind(null,function(){k(),w()}),window.addEventListener(I,B),C=x.bind(null,w),window.addEventListener("scroll",C),k(),w()))}function b(){D&&(window.removeEventListener(I,B),window.removeEventListener("scroll",C),B=null,C=null),D=null,E=null,F=null,J={},G&&clearTimeout(G)}function c(a){z("debug")&&console.log(a)}function d(a,b){return e(a,typeof b),void 0===a?b:a}function e(a,b){if(void 0!==a&&typeof a!==b)throw"Incorrect attribute type"}function f(a){for(var b,d,e=[],f=0;f1)throw"Multiple backgrounds are not supported";if(!d||"none"===d)throw"Element is not an but does not have a background-image";e[f]={img:new Image,el:e[f]},d=d.slice(4,-1),d=d.replace(/"/g,""),e[f].img.src=d,c("CSS Image - "+d)}return e}function g(a,b){var c=a;if("string"==typeof a?c=document.querySelectorAll(a):a&&1===a.nodeType&&(c=[a]),!c||0===c.length||void 0===c.length)throw"Elements not found";return b&&(c=f(c)),c=Array.prototype.slice.call(c)}function h(){E=document.createElement("canvas"),E&&E.getContext?(F=E.getContext("2d"),D=!0):D=!1,i()}function i(){z("debugOverlay")?(E.style.opacity=.5,E.style.pointerEvents="none",document.body.appendChild(E)):E.parentNode&&E.parentNode.removeChild(E)}function j(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>z("maxDuration")&&(console.log("BackgroundCheck - Killed"),q(),b())}function k(){H={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},E.width=document.body.clientWidth,E.height=window.innerHeight}function l(a,b,c){var d,e;return-1!==a.indexOf("px")?d=parseFloat(a):-1!==a.indexOf("%")?(d=parseFloat(a),e=d/100,d=e*b,c&&(d-=c*e)):d=b,d}function m(a){var b=window.getComputedStyle(a.el);a.el.style.backgroundRepeat="no-repeat",a.el.style.backgroundOrigin="padding-box";var c=b.backgroundSize.split(" "),d=c[0],e=void 0===c[1]?"auto":c[1],f=a.el.clientWidth/a.el.clientHeight,g=a.img.naturalWidth/a.img.naturalHeight;"cover"===d?f>=g?(d="100%",e="auto"):(d="auto",c[0]="auto",e="100%"):"contain"===d&&(1/g>1/f?(d="auto",c[0]="auto",e="100%"):(d="100%",e="auto")),d="auto"===d?a.img.naturalWidth:l(d,a.el.clientWidth),e="auto"===e?d/a.img.naturalWidth*a.img.naturalHeight:l(e,a.el.clientHeight),"auto"===c[0]&&"auto"!==c[1]&&(d=e/a.img.naturalHeight*a.img.naturalWidth);var h=b.backgroundPosition;"top"===h?h="50% 0%":"left"===h?h="0% 50%":"right"===h?h="100% 50%":"bottom"===h?h="50% 100%":"center"===h&&(h="50% 50%"),h=h.split(" ");var i,j;return 4===h.length?(i=h[1],j=h[3]):(i=h[0],j=h[1]),j=j||"50%",i=l(i,a.el.clientWidth,d),j=l(j,a.el.clientHeight,e),4===h.length&&("right"===h[0]&&(i=a.el.clientWidth-a.img.naturalWidth-i),"bottom"===h[2]&&(j=a.el.clientHeight-a.img.naturalHeight-j)),i+=a.el.getBoundingClientRect().left,j+=a.el.getBoundingClientRect().top,{left:Math.floor(i),right:Math.floor(i+d),top:Math.floor(j),bottom:Math.floor(j+e),width:Math.floor(d),height:Math.floor(e)}}function n(a){var b,c,d;if(a.nodeType){var e=a.getBoundingClientRect();b={left:e.left,right:e.right,top:e.top,bottom:e.bottom,width:e.width,height:e.height},d=a.parentNode,c=a}else b=m(a),d=a.el,c=a.img;d=d.getBoundingClientRect(),b.imageTop=0,b.imageLeft=0,b.imageWidth=c.naturalWidth,b.imageHeight=c.naturalHeight;var f,g=b.imageHeight/b.height;return b.topd.bottom&&(f=b.bottom-d.bottom,b.imageHeight-=g*f,b.height-=f),b.right>d.right&&(f=b.right-d.right,b.imageWidth-=g*f,b.width-=f),b.imageTop=Math.floor(b.imageTop),b.imageLeft=Math.floor(b.imageLeft),b.imageHeight=Math.floor(b.imageHeight),b.imageWidth=Math.floor(b.imageWidth),b}function o(a){var b=n(a);a=a.nodeType?a:a.img,b.imageWidth>0&&b.imageHeight>0&&b.width>0&&b.height>0?F.drawImage(a,b.imageLeft,b.imageTop,b.imageWidth,b.imageHeight,b.left,b.top,b.width,b.height):c("Skipping image - "+a.src+" - area too small")}function p(a,b,c){var d=a.className;switch(c){case"add":d+=" "+b;break;case"remove":var e=new RegExp("(?:^|\\s)"+b+"(?!\\S)","g");d=d.replace(e,"")}a.className=d.trim()}function q(a){for(var b,c=a?[a]:z("targets"),d=0;d0&&g.height>0){q(a),a=z("changeParent")?a.parentNode:a,d=F.getImageData(g.left,g.top,g.width,g.height).data;for(var m=0;mz("minComplexity")/100&&p(a,z("classes").complex,"add"))}}function s(a,b){return a=(a.nodeType?a:a.el).getBoundingClientRect(),b=b===H?b:(b.nodeType?b:b.el).getBoundingClientRect(),!(a.rightb.right||a.top>b.bottom||a.bottomg;g++)b=z("targets")[g],s(b,H)&&("targets"!==d||a&&a!==b?"image"===d&&s(b,a)&&r(b):(e=!0,r(b)));if("targets"===d&&!e)throw a+" is not a target";j(c)}function u(a){var b=function(a){var b=0;return"static"!==window.getComputedStyle(a).position&&(b=parseInt(window.getComputedStyle(a).zIndex,10)||0,b>=0&&b++),b},c=a.parentNode,d=c?b(c):0,e=b(a);return 1e5*d+e}function v(a){var b=!1;return a.sort(function(a,c){a=a.nodeType?a:a.el,c=c.nodeType?c:c.el;var d=a.compareDocumentPosition(c),e=0;return a=u(a),c=u(c),a>c&&(b=!0),a===c&&2===d?e=1:a===c&&4===d&&(e=-1),e||a-c}),c("Sorted: "+b),b&&c(a),b}function w(a,b,d){if(D){var e=z("mask");c("--- BackgroundCheck ---"),c("onLoad event: "+(d&&d.src)),b!==!0&&(F.clearRect(0,0,E.width,E.height),F.fillStyle="rgb("+e.r+", "+e.g+", "+e.b+")",F.fillRect(0,0,E.width,E.height));for(var f,g,h=d?[d]:z("images"),i=v(h),j=!1,k=0;k1)throw"Multiple backgrounds are not supported";if(!n||"none"===n)throw"Element is not an but does not have a background-image";o[a]={img:new Image,el:o[a]},n=n.slice(4,-1),n=n.replace(/"/g,""),o[a].img.src=n,i("CSS Image - "+n)}return o}function r(t,e){var i=t;if("string"==typeof t?i=document.querySelectorAll(t):t&&1===t.nodeType&&(i=[t]),!i||0===i.length||void 0===i.length)throw"Elements not found";return e&&(i=a(i)),i=Array.prototype.slice.call(i)}function g(){S=document.createElement("canvas"),S&&S.getContext?(I=S.getContext("2d"),L=!0):L=!1,l()}function l(){H("debugOverlay")?(S.style.opacity=.5,S.style.pointerEvents="none",document.body.appendChild(S)):S.parentNode&&S.parentNode.removeChild(S)}function d(t){var n=(new Date).getTime()-t;i("Duration: "+n+"ms"),n>H("maxDuration")&&(console.log("BackgroundCheck - Killed"),p(),e())}function h(){R={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},S.width=document.body.clientWidth,S.height=window.innerHeight}function u(t,e,i){var n,o;return-1!==t.indexOf("px")?n=parseFloat(t):-1!==t.indexOf("%")?(n=parseFloat(t),o=n/100,n=o*e,i&&(n-=i*o)):n=e,n}function m(t){var e=window.getComputedStyle(t.el);t.el.style.backgroundRepeat="no-repeat",t.el.style.backgroundOrigin="padding-box";var i=e.backgroundSize.split(" "),n=i[0],o=void 0===i[1]?"auto":i[1],a=t.el.clientWidth/t.el.clientHeight,r=t.img.naturalWidth/t.img.naturalHeight;"cover"===n?a>=r?(n="100%",o="auto"):(n="auto",i[0]="auto",o="100%"):"contain"===n&&(1/r>1/a?(n="auto",i[0]="auto",o="100%"):(n="100%",o="auto")),n="auto"===n?t.img.naturalWidth:u(n,t.el.clientWidth),o="auto"===o?n/t.img.naturalWidth*t.img.naturalHeight:u(o,t.el.clientHeight),"auto"===i[0]&&"auto"!==i[1]&&(n=o/t.img.naturalHeight*t.img.naturalWidth);var g=e.backgroundPosition;"top"===g?g="50% 0%":"left"===g?g="0% 50%":"right"===g?g="100% 50%":"bottom"===g?g="50% 100%":"center"===g&&(g="50% 50%"),g=g.split(" ");var l,d;return 4===g.length?(l=g[1],d=g[3]):(l=g[0],d=g[1]),d=d||"50%",l=u(l,t.el.clientWidth,n),d=u(d,t.el.clientHeight,o),4===g.length&&("right"===g[0]&&(l=t.el.clientWidth-t.img.naturalWidth-l),"bottom"===g[2]&&(d=t.el.clientHeight-t.img.naturalHeight-d)),l+=t.el.getBoundingClientRect().left,d+=t.el.getBoundingClientRect().top,{left:Math.floor(l),right:Math.floor(l+n),top:Math.floor(d),bottom:Math.floor(d+o),width:Math.floor(n),height:Math.floor(o)}}function s(t){var e,i,n;if(t.nodeType){var o=t.getBoundingClientRect();e={left:o.left,right:o.right,top:o.top,bottom:o.bottom,width:o.width,height:o.height},n=t.parentNode,i=t}else e=m(t),n=t.el,i=t.img;n=n.getBoundingClientRect(),e.imageTop=0,e.imageLeft=0,e.imageWidth=i.naturalWidth,e.imageHeight=i.naturalHeight;var a,r=e.imageHeight/e.height;return e.topn.bottom&&(a=e.bottom-n.bottom,e.imageHeight-=r*a,e.height-=a),e.right>n.right&&(a=e.right-n.right,e.imageWidth-=r*a,e.width-=a),e.imageTop=Math.floor(e.imageTop),e.imageLeft=Math.floor(e.imageLeft),e.imageHeight=Math.floor(e.imageHeight),e.imageWidth=Math.floor(e.imageWidth),e}function c(t){var e=s(t);t=t.nodeType?t:t.img,e.imageWidth>0&&e.imageHeight>0&&e.width>0&&e.height>0?I.drawImage(t,e.imageLeft,e.imageTop,e.imageWidth,e.imageHeight,e.left,e.top,e.width,e.height):i("Skipping image - "+t.src+" - area too small")}function f(t,e,i){var n=t.className;switch(i){case"add":n+=" "+e;break;case"remove":var o=new RegExp("(?:^|\\s)"+e+"(?!\\S)","g");n=n.replace(o,"")}t.className=n.trim()}function p(t){for(var e,i=t?[t]:H("targets"),n=0;n0&&r.height>0){p(t),t=H("changeParent")?t.parentNode:t,n=I.getImageData(r.left,r.top,r.width,r.height).data;for(var m=0;mH("minComplexity")/100&&f(t,H("classes").complex,"add"))}}function w(t,e){return t=(t.nodeType?t:t.el).getBoundingClientRect(),e=e===R?e:(e.nodeType?e:e.el).getBoundingClientRect(),!(t.righte.right||t.top>e.bottom||t.bottomr;r++)e=H("targets")[r],w(e,R)&&("targets"!==n||t&&t!==e?"image"===n&&w(e,t)&&v(e):(o=!0,v(e)));if("targets"===n&&!o)throw t+" is not a target";d(i)}function b(t){var e=function(t){var e=0;return"static"!==window.getComputedStyle(t).position&&(e=parseInt(window.getComputedStyle(t).zIndex,10)||0,e>=0&&e++),e},i=t.parentNode,n=i?e(i):0,o=e(t);return 1e5*n+o}function k(t){var e=!1;return t.sort(function(t,i){t=t.nodeType?t:t.el,i=i.nodeType?i:i.el;var n=t.compareDocumentPosition(i),o=0;return t=b(t),i=b(i),t>i&&(e=!0),t===i&&2===n?o=1:t===i&&4===n&&(o=-1),o||t-i}),i("Sorted: "+e),e&&i(t),e}function C(t,e,n){if(L){var o=H("mask");i("--- BackgroundCheck ---"),i("onLoad event: "+(n&&n.src)),e!==!0&&(I.clearRect(0,0,S.width,S.height),I.fillStyle="rgb("+o.r+", "+o.g+", "+o.b+")",I.fillRect(0,0,S.width,S.height));for(var a,r,g=n?[n]:H("images"),l=k(g),d=!1,h=0;h