diff --git a/build/ouibounce.js b/build/ouibounce.js index b37b96a..f32290f 100644 --- a/build/ouibounce.js +++ b/build/ouibounce.js @@ -16,6 +16,7 @@ return function ouibounce(el, custom_config) { var config = custom_config || {}, aggressive = config.aggressive || false, sensitivity = setDefault(config.sensitivity, 20), + scrollSpeed = setDefault(config.scrollSpeed, 1000), timer = setDefault(config.timer, 1000), delay = setDefault(config.delay, 0), callback = config.callback || function() {}, @@ -24,6 +25,9 @@ return function ouibounce(el, custom_config) { cookieName = config.cookieName ? config.cookieName : 'viewedOuibounceModal', sitewide = config.sitewide === true ? ';path=/' : '', _delayTimer = null, + _scrollTimer = null, + _scrollTime = new Date().getTime(), + _scrollY = window.scrollY, _html = document.documentElement; function setDefault(_property, _default) { @@ -45,30 +49,59 @@ return function ouibounce(el, custom_config) { if (isDisabled()) { return; } _html.addEventListener('mouseleave', handleMouseleave); - _html.addEventListener('mouseenter', handleMouseenter); + _html.addEventListener('mousemove', handleMousemove); _html.addEventListener('keydown', handleKeydown); + window.addEventListener('scroll', handleScroll); } - function handleMouseleave(e) { - if (e.clientY > sensitivity) { return; } - - _delayTimer = setTimeout(fire, delay); + function fireDelayed() { + if (!_delayTimer) { + _delayTimer = setTimeout(fire, delay); + } } - function handleMouseenter() { + function abortFire() { if (_delayTimer) { clearTimeout(_delayTimer); _delayTimer = null; } } - var disableKeydown = false; + function handleMouseleave(e) { + if (e.clientY <= sensitivity) { + fireDelayed(); + } + } + + function handleMousemove() { + abortFire(); + } + function handleKeydown(e) { - if (disableKeydown) { return; } - else if(!e.metaKey || e.keyCode !== 76) { return; } + if(e.metaKey && e.keyCode === 76) { + fireDelayed(); + } else { + abortFire(); + } + } - disableKeydown = true; - _delayTimer = setTimeout(fire, delay); + function handleScroll() { + if (!_scrollTimer) { + var scrollTime = new Date().getTime(), + scrollY = window.scrollY; + _scrollTimer = setTimeout(function() { + _scrollTime = scrollTime; + _scrollY = scrollY; + _scrollTimer = null; + }, 10); + } + if (window.scrollY <= 0) { + if ((_scrollY - window.scrollY) / (new Date().getTime() - _scrollTime + 1) * 1000 >= scrollSpeed) { + fireDelayed(); + } + } else { + abortFire(); + } } function checkCookieValue(cookieName, value) { @@ -131,8 +164,9 @@ return function ouibounce(el, custom_config) { // remove listeners _html.removeEventListener('mouseleave', handleMouseleave); - _html.removeEventListener('mouseenter', handleMouseenter); + _html.removeEventListener('mousemove', handleMousemove); _html.removeEventListener('keydown', handleKeydown); + window.removeEventListener('scroll', handleScroll); } return { diff --git a/build/ouibounce.min.js b/build/ouibounce.min.js index cd43043..68e6188 100644 --- a/build/ouibounce.min.js +++ b/build/ouibounce.min.js @@ -1 +1 @@ -!function(e,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):e.ouibounce=n()}(this,function(e,n,o){return function(e,n){"use strict";function o(e,n){return"undefined"==typeof e?n:e}function i(e){var n=24*e*60*60*1e3,o=new Date;return o.setTime(o.getTime()+n),"; expires="+o.toUTCString()}function t(){s()||(L.addEventListener("mouseleave",u),L.addEventListener("mouseenter",r),L.addEventListener("keydown",c))}function u(e){e.clientY>k||(D=setTimeout(m,y))}function r(){D&&(clearTimeout(D),D=null)}function c(e){g||e.metaKey&&76===e.keyCode&&(g=!0,D=setTimeout(m,y))}function d(e,n){return a()[e]===n}function a(){for(var e=document.cookie.split("; "),n={},o=e.length-1;o>=0;o--){var i=e[o].split("=");n[i[0]]=i[1]}return n}function s(){return d(T,"true")&&!v}function m(){s()||(e&&(e.style.display="block"),E(),f())}function f(e){var n=e||{};"undefined"!=typeof n.cookieExpire&&(b=i(n.cookieExpire)),n.sitewide===!0&&(w=";path=/"),"undefined"!=typeof n.cookieDomain&&(x=";domain="+n.cookieDomain),"undefined"!=typeof n.cookieName&&(T=n.cookieName),document.cookie=T+"=true"+b+x+w,L.removeEventListener("mouseleave",u),L.removeEventListener("mouseenter",r),L.removeEventListener("keydown",c)}var l=n||{},v=l.aggressive||!1,k=o(l.sensitivity,20),p=o(l.timer,1e3),y=o(l.delay,0),E=l.callback||function(){},b=i(l.cookieExpire)||"",x=l.cookieDomain?";domain="+l.cookieDomain:"",T=l.cookieName?l.cookieName:"viewedOuibounceModal",w=l.sitewide===!0?";path=/":"",D=null,L=document.documentElement;setTimeout(t,p);var g=!1;return{fire:m,disable:f,isDisabled:s}}}); \ No newline at end of file +!function(e,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):e.ouibounce=n()}(this,function(e,n,o){return function(e,n){"use strict";function o(e,n){return"undefined"==typeof e?n:e}function i(e){var n=24*e*60*60*1e3,o=new Date;return o.setTime(o.getTime()+n),"; expires="+o.toUTCString()}function t(){f()||(j.addEventListener("mouseleave",c),j.addEventListener("mousemove",d),j.addEventListener("keydown",s),window.addEventListener("scroll",l))}function r(){h||(h=setTimeout(v,D))}function u(){h&&(clearTimeout(h),h=null)}function c(e){e.clientY<=y&&r()}function d(){u()}function s(e){e.metaKey&&76===e.keyCode?r():u()}function l(){if(!N){var e=(new Date).getTime(),n=window.scrollY;N=setTimeout(function(){C=e,S=n,N=null},10)}window.scrollY<=0?(S-window.scrollY)/((new Date).getTime()-C+1)*1e3>=E&&r():u()}function a(e,n){return m()[e]===n}function m(){for(var e=document.cookie.split("; "),n={},o=e.length-1;o>=0;o--){var i=e[o].split("=");n[i[0]]=i[1]}return n}function f(){return a(x,"true")&&!k}function v(){f()||(e&&(e.style.display="block"),g(),w())}function w(e){var n=e||{};"undefined"!=typeof n.cookieExpire&&(L=i(n.cookieExpire)),n.sitewide===!0&&(Y=";path=/"),"undefined"!=typeof n.cookieDomain&&(b=";domain="+n.cookieDomain),"undefined"!=typeof n.cookieName&&(x=n.cookieName),document.cookie=x+"=true"+L+b+Y,j.removeEventListener("mouseleave",c),j.removeEventListener("mousemove",d),j.removeEventListener("keydown",s),window.removeEventListener("scroll",l)}var p=n||{},k=p.aggressive||!1,y=o(p.sensitivity,20),E=o(p.scrollSpeed,1e3),T=o(p.timer,1e3),D=o(p.delay,0),g=p.callback||function(){},L=i(p.cookieExpire)||"",b=p.cookieDomain?";domain="+p.cookieDomain:"",x=p.cookieName?p.cookieName:"viewedOuibounceModal",Y=p.sitewide===!0?";path=/":"",h=null,N=null,C=(new Date).getTime(),S=window.scrollY,j=document.documentElement;return setTimeout(t,T),{fire:v,disable:w,isDisabled:f}}}); \ No newline at end of file diff --git a/source/ouibounce.js b/source/ouibounce.js index 1bb73dd..6444376 100644 --- a/source/ouibounce.js +++ b/source/ouibounce.js @@ -4,6 +4,7 @@ function ouibounce(el, custom_config) { var config = custom_config || {}, aggressive = config.aggressive || false, sensitivity = setDefault(config.sensitivity, 20), + scrollSpeed = setDefault(config.scrollSpeed, 1000), timer = setDefault(config.timer, 1000), delay = setDefault(config.delay, 0), callback = config.callback || function() {}, @@ -12,6 +13,9 @@ function ouibounce(el, custom_config) { cookieName = config.cookieName ? config.cookieName : 'viewedOuibounceModal', sitewide = config.sitewide === true ? ';path=/' : '', _delayTimer = null, + _scrollTimer = null, + _scrollTime = new Date().getTime(), + _scrollY = window.scrollY, _html = document.documentElement; function setDefault(_property, _default) { @@ -33,30 +37,59 @@ function ouibounce(el, custom_config) { if (isDisabled()) { return; } _html.addEventListener('mouseleave', handleMouseleave); - _html.addEventListener('mouseenter', handleMouseenter); + _html.addEventListener('mousemove', handleMousemove); _html.addEventListener('keydown', handleKeydown); + window.addEventListener('scroll', handleScroll); } - function handleMouseleave(e) { - if (e.clientY > sensitivity) { return; } - - _delayTimer = setTimeout(fire, delay); + function fireDelayed() { + if (!_delayTimer) { + _delayTimer = setTimeout(fire, delay); + } } - function handleMouseenter() { + function abortFire() { if (_delayTimer) { clearTimeout(_delayTimer); _delayTimer = null; } } - var disableKeydown = false; + function handleMouseleave(e) { + if (e.clientY <= sensitivity) { + fireDelayed(); + } + } + + function handleMousemove() { + abortFire(); + } + function handleKeydown(e) { - if (disableKeydown) { return; } - else if(!e.metaKey || e.keyCode !== 76) { return; } + if(e.metaKey && e.keyCode === 76) { + fireDelayed(); + } else { + abortFire(); + } + } - disableKeydown = true; - _delayTimer = setTimeout(fire, delay); + function handleScroll() { + if (!_scrollTimer) { + var scrollTime = new Date().getTime(), + scrollY = window.scrollY; + _scrollTimer = setTimeout(function() { + _scrollTime = scrollTime; + _scrollY = scrollY; + _scrollTimer = null; + }, 10); + } + if (window.scrollY <= 0) { + if ((_scrollY - window.scrollY) / (new Date().getTime() - _scrollTime + 1) * 1000 >= scrollSpeed) { + fireDelayed(); + } + } else { + abortFire(); + } } function checkCookieValue(cookieName, value) { @@ -119,8 +152,9 @@ function ouibounce(el, custom_config) { // remove listeners _html.removeEventListener('mouseleave', handleMouseleave); - _html.removeEventListener('mouseenter', handleMouseenter); + _html.removeEventListener('mousemove', handleMousemove); _html.removeEventListener('keydown', handleKeydown); + window.removeEventListener('scroll', handleScroll); } return { diff --git a/test/index.html b/test/index.html index b08698b..8d8f5b3 100644 --- a/test/index.html +++ b/test/index.html @@ -9,7 +9,7 @@ body { background-color: #F0F1F2; color: #2E4052; - min-height: 500px; + min-height: 200vh; padding: 0; -webkit-font-smoothing: antialiased; font-family: sans-serif;