tua-body-scroll-lock - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0-0

dist/tua-bsl.esm.browser.js

 /**
- * tua-body-scroll-lock v0.3.1
+ * tua-body-scroll-lock v0.4.0-0
  * (c) 2019 Evinma, BuptStEve
@@ -47,2 +47,3 @@ * @license MIT
 let initialClientY = 0;
+let initialClientX = 0;
 let unLockCallback = null;
@@ -94,7 +95,13 @@ let documentListenerAdded = false;
     const clientY = event.targetTouches[0].clientY - initialClientY;
+    const clientX = event.targetTouches[0].clientX - initialClientX;
+    const absClientY = Math.abs(clientY);
+    const absClientX = Math.abs(clientX);
     if (targetElement) {
-        const { scrollTop, scrollHeight, clientHeight } = targetElement;
+        const { scrollLeft, scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth, } = targetElement;
         const isOnTop = clientY > 0 && scrollTop === 0;
+        const isOnLeft = clientX > 0 && scrollLeft === 0;
         const isOnBottom = clientY < 0 && scrollTop + clientHeight + 1 >= scrollHeight;
-        if (isOnTop || isOnBottom) {
+        const isOnRight = clientX < 0 && scrollLeft + clientWidth + 1 >= scrollWidth;
+        if ((absClientY > absClientX && (isOnTop || isOnBottom)) ||
+            (absClientX > absClientY && (isOnLeft || isOnRight))) {
             return preventDefault(event);
@@ -123,2 +130,3 @@ }
                 initialClientY = event.targetTouches[0].clientY;
+                initialClientX = event.targetTouches[0].clientX;
             };
@@ -125,0 +133,0 @@ targetElement.ontouchmove = (event) => {

dist/tua-bsl.esm.browser.min.js

@@ -1,1 +0,1 @@
-const e=()=>"undefined"==typeof window,t=e=>document.querySelector(e),o=e=>{e=e||navigator.userAgent;const t=/(iPad).*OS\s([\d_]+)/.test(e);return{ios:!t&&/(iPhone\sOS)\s([\d_]+)/.test(e)||t,android:/(Android);?[\s\/]+([\d.]+)?/.test(e)}};let n=0,i=0,s=null,r=!1;const l=[],d=function(t){if(e())return!1;if(!t)throw new Error("options must be provided");let o=!1;const n={get passive(){o=!0}},i=()=>{};window.addEventListener("__TUA_BSL_TEST_PASSIVE__",i,n),window.removeEventListener("__TUA_BSL_TEST_PASSIVE__",i,n);const{capture:s}=t;return o?t:void 0!==s&&s}({passive:!1}),c=e=>{e.cancelable&&e.preventDefault()},h=h=>{e()||(o().ios?(h&&-1===l.indexOf(h)&&(h.ontouchstart=e=>{i=e.targetTouches[0].clientY},h.ontouchmove=e=>{1===e.targetTouches.length&&((e,t)=>{const o=e.targetTouches[0].clientY-i;if(t){const{scrollTop:n,scrollHeight:i,clientHeight:s}=t,r=o<0&&n+s+1>=i;if(o>0&&0===n||r)return c(e)}e.stopPropagation()})(e,h)},l.push(h)),r||(document.addEventListener("touchmove",c,d),r=!0)):n<=0&&(s=o().android?(()=>{const e=t("html"),o=t("body"),n=e.scrollTop||o.scrollTop,i=Object.assign({},e.style),s=Object.assign({},o.style);return e.style.height="100%",e.style.overflow="hidden",o.style.top=`-${n}px`,o.style.width="100%",o.style.height="auto",o.style.position="fixed",o.style.overflow="hidden",()=>{e.style.height=i.height||"",e.style.overflow=i.overflow||"",["top","width","height","overflow","position"].forEach(e=>{o.style[e]=s[e]||""}),window.scrollTo(0,n)}})():(()=>{const e=t("body"),o=Object.assign({},e.style),n=window.innerWidth-document.body.clientWidth;return e.style.overflow="hidden",e.style.boxSizing="border-box",e.style.paddingRight=`${n}px`,()=>{["overflow","boxSizing","paddingRight"].forEach(t=>{e.style[t]=o[t]||""})}})()),n+=1)},u=t=>{if(!(e()||(n-=1)>0))if(o().ios||"function"!=typeof s){if(t){const e=l.indexOf(t);-1!==e&&(t.ontouchmove=null,t.ontouchstart=null,l.splice(e,1))}r&&(document.removeEventListener("touchmove",c,d),r=!1)}else s()};export{h as lock,u as unlock};
+const t=()=>"undefined"==typeof window,e=t=>document.querySelector(t),o=t=>{t=t||navigator.userAgent;const e=/(iPad).*OS\s([\d_]+)/.test(t);return{ios:!e&&/(iPhone\sOS)\s([\d_]+)/.test(t)||e,android:/(Android);?[\s\/]+([\d.]+)?/.test(t)}};let n=0,i=0,s=0,l=null,r=!1;const c=[],d=function(e){if(t())return!1;if(!e)throw new Error("options must be provided");let o=!1;const n={get passive(){o=!0}},i=()=>{};window.addEventListener("__TUA_BSL_TEST_PASSIVE__",i,n),window.removeEventListener("__TUA_BSL_TEST_PASSIVE__",i,n);const{capture:s}=e;return o?e:void 0!==s&&s}({passive:!1}),h=t=>{t.cancelable&&t.preventDefault()},a=a=>{t()||(o().ios?(a&&-1===c.indexOf(a)&&(a.ontouchstart=t=>{i=t.targetTouches[0].clientY,s=t.targetTouches[0].clientX},a.ontouchmove=t=>{1===t.targetTouches.length&&((t,e)=>{const o=t.targetTouches[0].clientY-i,n=t.targetTouches[0].clientX-s,l=Math.abs(o),r=Math.abs(n);if(e){const{scrollLeft:i,scrollTop:s,scrollHeight:c,clientHeight:d,scrollWidth:a,clientWidth:u}=e,f=o>0&&0===s,g=n>0&&0===i,p=o<0&&s+d+1>=c,v=n<0&&i+u+1>=a;if(l>r&&(f||p)||r>l&&(g||v))return h(t)}t.stopPropagation()})(t,a)},c.push(a)),r||(document.addEventListener("touchmove",h,d),r=!0)):n<=0&&(l=o().android?(()=>{const t=e("html"),o=e("body"),n=t.scrollTop||o.scrollTop,i=Object.assign({},t.style),s=Object.assign({},o.style);return t.style.height="100%",t.style.overflow="hidden",o.style.top=`-${n}px`,o.style.width="100%",o.style.height="auto",o.style.position="fixed",o.style.overflow="hidden",()=>{t.style.height=i.height||"",t.style.overflow=i.overflow||"",["top","width","height","overflow","position"].forEach(t=>{o.style[t]=s[t]||""}),window.scrollTo(0,n)}})():(()=>{const t=e("body"),o=Object.assign({},t.style),n=window.innerWidth-document.body.clientWidth;return t.style.overflow="hidden",t.style.boxSizing="border-box",t.style.paddingRight=`${n}px`,()=>{["overflow","boxSizing","paddingRight"].forEach(e=>{t.style[e]=o[e]||""})}})()),n+=1)},u=e=>{if(!(t()||(n-=1)>0))if(o().ios||"function"!=typeof l){if(e){const t=c.indexOf(e);-1!==t&&(e.ontouchmove=null,e.ontouchstart=null,c.splice(t,1))}r&&(document.removeEventListener("touchmove",h,d),r=!1)}else l()};export{a as lock,u as unlock};

dist/tua-bsl.esm.js

 /**
- * tua-body-scroll-lock v0.3.1
+ * tua-body-scroll-lock v0.4.0-0
  * (c) 2019 Evinma, BuptStEve
@@ -55,2 +55,3 @@ * @license MIT
 var initialClientY = 0;
+var initialClientX = 0;
 var unLockCallback = null;
@@ -107,11 +108,19 @@ var documentListenerAdded = false;
   var clientY = event.targetTouches[0].clientY - initialClientY;
+  var clientX = event.targetTouches[0].clientX - initialClientX;
+  var absClientY = Math.abs(clientY);
+  var absClientX = Math.abs(clientX);
 
   if (targetElement) {
-    var scrollTop = targetElement.scrollTop,
+    var scrollLeft = targetElement.scrollLeft,
+        scrollTop = targetElement.scrollTop,
         scrollHeight = targetElement.scrollHeight,
-        clientHeight = targetElement.clientHeight;
+        clientHeight = targetElement.clientHeight,
+        scrollWidth = targetElement.scrollWidth,
+        clientWidth = targetElement.clientWidth;
     var isOnTop = clientY > 0 && scrollTop === 0;
+    var isOnLeft = clientX > 0 && scrollLeft === 0;
     var isOnBottom = clientY < 0 && scrollTop + clientHeight + 1 >= scrollHeight;
+    var isOnRight = clientX < 0 && scrollLeft + clientWidth + 1 >= scrollWidth;
 
-    if (isOnTop || isOnBottom) {
+    if (absClientY > absClientX && (isOnTop || isOnBottom) || absClientX > absClientY && (isOnLeft || isOnRight)) {
       return preventDefault(event);
@@ -141,2 +150,3 @@ }
         initialClientY = event.targetTouches[0].clientY;
+        initialClientX = event.targetTouches[0].clientX;
       };
@@ -143,0 +153,0 @@

dist/tua-bsl.umd.js

 /**
- * tua-body-scroll-lock v0.3.1
+ * tua-body-scroll-lock v0.4.0-0
  * (c) 2019 Evinma, BuptStEve
@@ -61,2 +61,3 @@ * @license MIT
     var initialClientY = 0;
+    var initialClientX = 0;
     var unLockCallback = null;
@@ -113,11 +114,19 @@ var documentListenerAdded = false;
       var clientY = event.targetTouches[0].clientY - initialClientY;
+      var clientX = event.targetTouches[0].clientX - initialClientX;
+      var absClientY = Math.abs(clientY);
+      var absClientX = Math.abs(clientX);
 
       if (targetElement) {
-        var scrollTop = targetElement.scrollTop,
+        var scrollLeft = targetElement.scrollLeft,
+            scrollTop = targetElement.scrollTop,
             scrollHeight = targetElement.scrollHeight,
-            clientHeight = targetElement.clientHeight;
+            clientHeight = targetElement.clientHeight,
+            scrollWidth = targetElement.scrollWidth,
+            clientWidth = targetElement.clientWidth;
         var isOnTop = clientY > 0 && scrollTop === 0;
+        var isOnLeft = clientX > 0 && scrollLeft === 0;
         var isOnBottom = clientY < 0 && scrollTop + clientHeight + 1 >= scrollHeight;
+        var isOnRight = clientX < 0 && scrollLeft + clientWidth + 1 >= scrollWidth;
 
-        if (isOnTop || isOnBottom) {
+        if (absClientY > absClientX && (isOnTop || isOnBottom) || absClientX > absClientY && (isOnLeft || isOnRight)) {
           return preventDefault(event);
@@ -146,2 +155,3 @@ }
             initialClientY = event.targetTouches[0].clientY;
+            initialClientX = event.targetTouches[0].clientX;
           };
@@ -148,0 +158,0 @@

dist/tua-bsl.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).bodyScrollLock={})}(this,function(e){"use strict";var t=function(){return"undefined"==typeof window},o=function(e){return document.querySelector(e)},n=function(e){e=e||navigator.userAgent;var t=/(iPad).*OS\s([\d_]+)/.test(e);return{ios:!t&&/(iPhone\sOS)\s([\d_]+)/.test(e)||t,android:/(Android);?[\s\/]+([\d.]+)?/.test(e)}};var i=0,r=0,s=null,c=!1,l=[],d=function(e){if(t())return!1;if(!e)throw new Error("options must be provided");var o=!1,n={get passive(){o=!0}},i=function(){};window.addEventListener("__TUA_BSL_TEST_PASSIVE__",i,n),window.removeEventListener("__TUA_BSL_TEST_PASSIVE__",i,n);var r=e.capture;return o?e:void 0!==r&&r}({passive:!1}),u=function(e){e.cancelable&&e.preventDefault()};e.lock=function(e){var f,a,h,v,p;t()||(n().ios?(e&&-1===l.indexOf(e)&&(e.ontouchstart=function(e){r=e.targetTouches[0].clientY},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){var o=e.targetTouches[0].clientY-r;if(t){var n=t.scrollTop,i=t.scrollHeight,s=t.clientHeight;if(o>0&&0===n||o<0&&n+s+1>=i)return u(e)}e.stopPropagation()}(t,e)},l.push(e)),c||(document.addEventListener("touchmove",u,d),c=!0)):i<=0&&(s=n().android?(f=o("html"),a=o("body"),h=f.scrollTop||a.scrollTop,v=Object.assign({},f.style),p=Object.assign({},a.style),f.style.height="100%",f.style.overflow="hidden",a.style.top="-".concat(h,"px"),a.style.width="100%",a.style.height="auto",a.style.position="fixed",a.style.overflow="hidden",function(){f.style.height=v.height||"",f.style.overflow=v.overflow||"",["top","width","height","overflow","position"].forEach(function(e){a.style[e]=p[e]||""}),window.scrollTo(0,h)}):function(){var e=o("body"),t=Object.assign({},e.style),n=window.innerWidth-document.body.clientWidth;return e.style.overflow="hidden",e.style.boxSizing="border-box",e.style.paddingRight="".concat(n,"px"),function(){["overflow","boxSizing","paddingRight"].forEach(function(o){e.style[o]=t[o]||""})}}()),i+=1)},e.unlock=function(e){if(!(t()||(i-=1)>0))if(n().ios||"function"!=typeof s){if(e){var o=l.indexOf(e);-1!==o&&(e.ontouchmove=null,e.ontouchstart=null,l.splice(o,1))}c&&(document.removeEventListener("touchmove",u,d),c=!1)}else s()},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).bodyScrollLock={})}(this,function(e){"use strict";var t=function(){return"undefined"==typeof window},o=function(e){return document.querySelector(e)},n=function(e){e=e||navigator.userAgent;var t=/(iPad).*OS\s([\d_]+)/.test(e);return{ios:!t&&/(iPhone\sOS)\s([\d_]+)/.test(e)||t,android:/(Android);?[\s\/]+([\d.]+)?/.test(e)}};var i=0,r=0,s=0,c=null,l=!1,d=[],u=function(e){if(t())return!1;if(!e)throw new Error("options must be provided");var o=!1,n={get passive(){o=!0}},i=function(){};window.addEventListener("__TUA_BSL_TEST_PASSIVE__",i,n),window.removeEventListener("__TUA_BSL_TEST_PASSIVE__",i,n);var r=e.capture;return o?e:void 0!==r&&r}({passive:!1}),f=function(e){e.cancelable&&e.preventDefault()};e.lock=function(e){var a,h,v,p,y;t()||(n().ios?(e&&-1===d.indexOf(e)&&(e.ontouchstart=function(e){r=e.targetTouches[0].clientY,s=e.targetTouches[0].clientX},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){var o=e.targetTouches[0].clientY-r,n=e.targetTouches[0].clientX-s,i=Math.abs(o),c=Math.abs(n);if(t){var l=t.scrollLeft,d=t.scrollTop,u=t.scrollHeight,a=t.clientHeight,h=t.scrollWidth,v=t.clientWidth;if(i>c&&(o>0&&0===d||o<0&&d+a+1>=u)||c>i&&(n>0&&0===l||n<0&&l+v+1>=h))return f(e)}e.stopPropagation()}(t,e)},d.push(e)),l||(document.addEventListener("touchmove",f,u),l=!0)):i<=0&&(c=n().android?(a=o("html"),h=o("body"),v=a.scrollTop||h.scrollTop,p=Object.assign({},a.style),y=Object.assign({},h.style),a.style.height="100%",a.style.overflow="hidden",h.style.top="-".concat(v,"px"),h.style.width="100%",h.style.height="auto",h.style.position="fixed",h.style.overflow="hidden",function(){a.style.height=p.height||"",a.style.overflow=p.overflow||"",["top","width","height","overflow","position"].forEach(function(e){h.style[e]=y[e]||""}),window.scrollTo(0,v)}):function(){var e=o("body"),t=Object.assign({},e.style),n=window.innerWidth-document.body.clientWidth;return e.style.overflow="hidden",e.style.boxSizing="border-box",e.style.paddingRight="".concat(n,"px"),function(){["overflow","boxSizing","paddingRight"].forEach(function(o){e.style[o]=t[o]||""})}}()),i+=1)},e.unlock=function(e){if(!(t()||(i-=1)>0))if(n().ios||"function"!=typeof c){if(e){var o=d.indexOf(e);-1!==o&&(e.ontouchmove=null,e.ontouchstart=null,d.splice(o,1))}l&&(document.removeEventListener("touchmove",f,u),l=!1)}else c()},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
     "name": "tua-body-scroll-lock",
-    "version": "0.3.1",
+    "version": "0.4.0-0",
     "description": "🔐Body scroll locking that just works with everything",
@@ -5,0 +5,0 @@ "main": "dist/tua-bsl.umd.js",

README.md

@@ -18,9 +18,9 @@ # tua-body-scroll-lock
 
-### Why not [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)?
+### Why not [body-scroll-lock(BSL)](https://github.com/willmcpo/body-scroll-lock)?
 * Doesn't work on Android webview
 * Doesn't work on PC with mouse wheel
-* Doesn't work on iOS, if you touch somewhere instead of targetElement
-* Must pass targetElement, even if it's not necessary
+* Doesn't work on iOS, if you touch somewhere instead of `targetElement`
+* Must pass `targetElement`, even if it's not necessary
 
-[Try This](https://codepen.io/buptsteve/pen/EJoKQK)
+[😱Can't believe it? Please try this demo with BSL yourself.](https://codepen.io/buptsteve/pen/EJoKQK)
 
@@ -149,7 +149,14 @@ ## Install
 
-## Test
-[testLink](https://tuateam.github.io/tua-body-scroll-lock)
+## Demo
 
 ![bodyScrollLock](./tua-bsl.png)
 
+platform | link |
+| - | -
+gh-pages | https://tuateam.github.io/tua-body-scroll-lock |
+jsbin | https://jsbin.com/cafiful/edit?output |
+codepen | https://codepen.io/buptsteve/pen/PvNQjP |
+jsfiddle | https://jsfiddle.net/buptsteve/6u8g3Lf5/ |
+codesandbox | https://codesandbox.io/s/o73z4jy5q9 |
+
 ## Contributors
@@ -156,0 +163,0 @@

src/index.ts

@@ -13,2 +13,3 @@ import {
 let initialClientY = 0
+let initialClientX = 0
 let unLockCallback: any = null
@@ -72,9 +73,24 @@ let documentListenerAdded = false
     const clientY = event.targetTouches[0].clientY - initialClientY
+    const clientX = event.targetTouches[0].clientX - initialClientX
+    const absClientY = Math.abs(clientY)
+    const absClientX = Math.abs(clientX)
 
     if (targetElement) {
-        const { scrollTop, scrollHeight, clientHeight } = targetElement
+        const {
+            scrollLeft,
+            scrollTop,
+            scrollHeight,
+            clientHeight,
+            scrollWidth,
+            clientWidth,
+        } = targetElement
         const isOnTop = clientY > 0 && scrollTop === 0
+        const isOnLeft = clientX > 0 && scrollLeft === 0
         const isOnBottom = clientY < 0 && scrollTop + clientHeight + 1 >= scrollHeight
+        const isOnRight = clientX < 0 && scrollLeft + clientWidth + 1 >= scrollWidth
 
-        if (isOnTop || isOnBottom) {
+        if (
+            (absClientY > absClientX && (isOnTop || isOnBottom)) ||
+            (absClientX > absClientY && (isOnLeft || isOnRight))
+        ) {
             return preventDefault(event)
@@ -109,2 +125,3 @@ }
                 initialClientY = event.targetTouches[0].clientY
+                initialClientX = event.targetTouches[0].clientX
             }
@@ -111,0 +128,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46727

increased by7.64%

Lines of code

730

increased by6.73%

Number of lines in readme file

171

increased by4.27%

No dependency changes