scrollbooster - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/scrollbooster.js

@@ -352,2 +352,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+      var vp = this.props.viewport;
       var scroll = { x: 0, y: 0 };
@@ -380,3 +381,5 @@ var mousedown = { x: 0, y: 0 };
         var pageX = void 0,
-            pageY = void 0;
+            pageY = void 0,
+            clientX = void 0,
+            clientY = void 0;
 
@@ -388,7 +391,25 @@ isTouch = !!(event.touches && event.touches[0]);
           pageY = event.touches[0].pageY;
+          clientX = event.touches[0].clientX;
+          clientY = event.touches[0].clientY;
         } else {
           pageX = event.pageX;
           pageY = event.pageY;
+          clientX = event.clientX;
+          clientY = event.clientY;
         }
 
+        console.log(pageX - vp.offsetLeft, vp.clientLeft + vp.clientWidth);
+        var rect = vp.getBoundingClientRect();
+        // click on vertical scrollbar
+        if (clientX - rect.left >= vp.clientLeft + vp.clientWidth) {
+          console.log('lol x');
+          return;
+        }
+
+        // click on horizontal scrollbar
+        if (clientY - rect.top >= vp.clientTop + vp.clientHeight) {
+          console.log('lol y');
+          return;
+        }
+
         _this3.isDragging = true;
@@ -395,0 +416,0 @@ if (scroll.x || scroll.y) {

dist/scrollbooster.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("ScrollBooster",[],i):"object"==typeof exports?exports.ScrollBooster=i():t.ScrollBooster=i()}("undefined"!=typeof self?self:this,function(){return function(t){function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}var e={};return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="/dist/",i(i.s=0)}([function(t,i,e){"use strict";function o(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function n(t){return Math.max(t.offsetWidth,t.scrollWidth)}function s(t){return Math.max(t.offsetHeight,t.scrollHeight)}Object.defineProperty(i,"__esModule",{value:!0});var r=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var e=arguments[i];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},h=function(){function t(t,i){for(var e=0;e<i.length;e++){var o=i[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(i,e,o){return e&&t(i.prototype,e),o&&t(i,o),i}}(),p=function(){function t(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(o(this,t),!(i.viewport&&i.viewport instanceof Element))return void console.error('"viewport" config property must be present and must be Element');var e={handle:i.viewport,content:i.viewport.children[0],bounce:!0,onUpdate:function(){}};if(this.props=r({},e,i),!this.props.content)return void console.error("Viewport does not have any content");this.viewport={width:this.props.viewport.clientWidth,height:this.props.viewport.clientHeight},this.content={width:n(this.props.content),height:s(this.props.content)},this.position={x:0,y:0},this.velocity={x:0,y:0},this.friction=.95,this.isDragging=!1,this.dragStartPosition={x:0,y:0},this.dragPosition=r({},this.position),this.isScrollEnabled=!!this.props.emulateScroll,this.isScrolling=!1,this.scrollOffset={x:0,y:0},this.bounce=this.props.bounce,this.boundX={from:Math.min(-this.content.width+this.viewport.width,0),to:0},this.boundY={from:Math.min(-this.content.height+this.viewport.height,0),to:0},this.mode={x:"x"==this.props.mode,y:"y"==this.props.mode,xy:"x"!==this.props.mode&&"y"!==this.props.mode},this.isRunning=!1,this.rafID=null,this.events={},this.animate(),this.handleEvents()}return h(t,[{key:"run",value:function(){var t=this;this.isRunning=!0,cancelAnimationFrame(this.rafID),this.rafID=requestAnimationFrame(function(){return t.animate()})}},{key:"animate",value:function(){var t=this;this.isRunning&&(this.update(),this.notify(),this.rafID=requestAnimationFrame(function(){return t.animate()}))}},{key:"update",value:function(){this.applyBoundForce(),this.applyDragForce(),this.applyScrollForce(),this.velocity.x*=this.friction,this.velocity.y*=this.friction,this.mode.y||(this.position.x+=this.velocity.x),this.mode.x||(this.position.y+=this.velocity.y),this.bounce&&!this.isScrolling||(this.position.x=Math.max(Math.min(this.position.x,this.boundX.to),this.boundX.from),this.position.y=Math.max(Math.min(this.position.y,this.boundY.to),this.boundY.from)),!this.isDragging&&!this.isScrolling&&Math.abs(this.velocity.x)<.005&&Math.abs(this.velocity.y)<.005&&(this.isRunning=!1)}},{key:"applyForce",value:function(t){this.velocity.x+=t.x,this.velocity.y+=t.y}},{key:"applyBoundForce",value:function(){if(this.bounce&&!this.isDragging){var t=this.position.x<this.boundX.from,i=this.position.x>this.boundX.to,e=this.position.y<this.boundY.from,o=this.position.y>this.boundY.to,n={x:0,y:0};if(t||i){var s=t?this.boundX.from:this.boundX.to,r=s-this.position.x,h=.1*r,p=this.position.x+(this.velocity.x+h)/(1-this.friction);t&&p<this.boundX.from||i&&p>this.boundX.to||(h=.1*r-this.velocity.x),n.x=h}if(e||o){var a=e?this.boundY.from:this.boundY.to,c=a-this.position.y,l=.1*c,u=this.position.y+(this.velocity.y+l)/(1-this.friction);e&&u<this.boundY.from||o&&u>this.boundY.to||(l=.1*c-this.velocity.y),n.y=l}this.applyForce(n)}}},{key:"applyDragForce",value:function(){if(this.isDragging){var t={x:this.dragPosition.x-this.position.x,y:this.dragPosition.y-this.position.y},i={x:t.x-this.velocity.x,y:t.y-this.velocity.y};this.applyForce(i)}}},{key:"applyScrollForce",value:function(){if(this.isScrolling){var t={x:this.scrollOffset.x-this.velocity.x,y:this.scrollOffset.y-this.velocity.y};this.scrollOffset.x=0,this.scrollOffset.y=0,this.applyForce(t)}}},{key:"setPosition",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.velocity.x=0,this.velocity.y=0,this.position.x=-t.x||0,this.position.y=-t.y||0,this.run()}},{key:"getUpdate",value:function(){return{position:{x:-this.position.x,y:-this.position.y},viewport:r({},this.viewport),content:r({},this.content)}}},{key:"notify",value:function(){this.props.onUpdate(this.getUpdate())}},{key:"updateMetrics",value:function(){this.viewport.width=this.props.viewport.clientWidth,this.viewport.height=this.props.viewport.clientHeight,this.content.width=n(this.props.content),this.content.height=s(this.props.content),this.boundX.from=Math.min(-this.content.width+this.viewport.width,0),this.boundY.from=Math.min(-this.content.height+this.viewport.height,0),this.run()}},{key:"handleEvents",value:function(){var t=this,i={x:0,y:0},e={x:0,y:0},o=!1,n=function(i){var n=void 0,s=void 0;o?(n=i.touches[0].pageX,s=i.touches[0].pageY):(n=i.pageX,s=i.pageY);var r=n-e.x,h=s-e.y;t.dragPosition.x=t.dragStartPosition.x+r,t.dragPosition.y=t.dragStartPosition.y+h,o||i.preventDefault()};this.events.pointerdown=function(s){var r=void 0,h=void 0;o=!(!s.touches||!s.touches[0]),o?(r=s.touches[0].pageX,h=s.touches[0].pageY):(r=s.pageX,h=s.pageY),t.isDragging=!0,(i.x||i.y)&&(t.position.x=i.x,t.position.y=i.y,i.x=0,i.y=0),e.x=r,e.y=h,t.dragStartPosition.x=t.position.x,t.dragStartPosition.y=t.position.y,n(s),t.run();var p=void 0,a=void 0;a=function(i){t.isDragging=!1,o?(window.removeEventListener("touchmove",n),window.removeEventListener("touchend",p)):(window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",p))},o?(p=window.addEventListener("touchend",a),window.addEventListener("touchmove",n)):(p=window.addEventListener("mouseup",a),window.addEventListener("mousemove",n))};var s=null;this.events.wheel=function(i){t.velocity.x=0,t.isScrollEnabled&&(t.isScrolling=!0,t.scrollOffset.x=-i.deltaX,t.scrollOffset.y=-i.deltaY,t.run(),clearTimeout(s),s=setTimeout(function(){return t.isScrolling=!1},80),i.preventDefault())},this.events.scroll=function(e){var o=t.props.viewport.scrollLeft,n=t.props.viewport.scrollTop;Math.abs(t.position.x+o)>3&&(t.position.x=-o,t.velocity.x=0),Math.abs(t.position.y+n)>3&&(t.position.y=-n,t.velocity.y=0),i.x=-t.props.viewport.scrollLeft,i.y=-t.props.viewport.scrollTop},this.events.resize=this.updateMetrics.bind(this),this.props.handle.addEventListener("mousedown",this.events.pointerdown),this.props.handle.addEventListener("touchstart",this.events.pointerdown),this.props.viewport.addEventListener("wheel",this.events.wheel),this.props.viewport.addEventListener("scroll",this.events.scroll),window.addEventListener("resize",this.events.resize)}},{key:"destroy",value:function(){this.props.handle.removeEventListener("mousedown",this.events.pointerdown),this.props.handle.removeEventListener("touchstart",this.events.pointerdown),this.props.viewport.removeEventListener("wheel",this.events.wheel),this.props.viewport.removeEventListener("scroll",this.events.scroll),window.removeEventListener("resize",this.events.resize)}}]),t}();i.default=p,t.exports=i.default}])});
+!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("ScrollBooster",[],i):"object"==typeof exports?exports.ScrollBooster=i():t.ScrollBooster=i()}("undefined"!=typeof self?self:this,function(){return function(t){function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}var e={};return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},i.p="/dist/",i(i.s=0)}([function(t,i,e){"use strict";function o(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function n(t){return Math.max(t.offsetWidth,t.scrollWidth)}function s(t){return Math.max(t.offsetHeight,t.scrollHeight)}Object.defineProperty(i,"__esModule",{value:!0});var r=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var e=arguments[i];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},h=function(){function t(t,i){for(var e=0;e<i.length;e++){var o=i[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(i,e,o){return e&&t(i.prototype,e),o&&t(i,o),i}}(),p=function(){function t(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(o(this,t),!(i.viewport&&i.viewport instanceof Element))return void console.error('"viewport" config property must be present and must be Element');var e={handle:i.viewport,content:i.viewport.children[0],bounce:!0,onUpdate:function(){}};if(this.props=r({},e,i),!this.props.content)return void console.error("Viewport does not have any content");this.viewport={width:this.props.viewport.clientWidth,height:this.props.viewport.clientHeight},this.content={width:n(this.props.content),height:s(this.props.content)},this.position={x:0,y:0},this.velocity={x:0,y:0},this.friction=.95,this.isDragging=!1,this.dragStartPosition={x:0,y:0},this.dragPosition=r({},this.position),this.isScrollEnabled=!!this.props.emulateScroll,this.isScrolling=!1,this.scrollOffset={x:0,y:0},this.bounce=this.props.bounce,this.boundX={from:Math.min(-this.content.width+this.viewport.width,0),to:0},this.boundY={from:Math.min(-this.content.height+this.viewport.height,0),to:0},this.mode={x:"x"==this.props.mode,y:"y"==this.props.mode,xy:"x"!==this.props.mode&&"y"!==this.props.mode},this.isRunning=!1,this.rafID=null,this.events={},this.animate(),this.handleEvents()}return h(t,[{key:"run",value:function(){var t=this;this.isRunning=!0,cancelAnimationFrame(this.rafID),this.rafID=requestAnimationFrame(function(){return t.animate()})}},{key:"animate",value:function(){var t=this;this.isRunning&&(this.update(),this.notify(),this.rafID=requestAnimationFrame(function(){return t.animate()}))}},{key:"update",value:function(){this.applyBoundForce(),this.applyDragForce(),this.applyScrollForce(),this.velocity.x*=this.friction,this.velocity.y*=this.friction,this.mode.y||(this.position.x+=this.velocity.x),this.mode.x||(this.position.y+=this.velocity.y),this.bounce&&!this.isScrolling||(this.position.x=Math.max(Math.min(this.position.x,this.boundX.to),this.boundX.from),this.position.y=Math.max(Math.min(this.position.y,this.boundY.to),this.boundY.from)),!this.isDragging&&!this.isScrolling&&Math.abs(this.velocity.x)<.005&&Math.abs(this.velocity.y)<.005&&(this.isRunning=!1)}},{key:"applyForce",value:function(t){this.velocity.x+=t.x,this.velocity.y+=t.y}},{key:"applyBoundForce",value:function(){if(this.bounce&&!this.isDragging){var t=this.position.x<this.boundX.from,i=this.position.x>this.boundX.to,e=this.position.y<this.boundY.from,o=this.position.y>this.boundY.to,n={x:0,y:0};if(t||i){var s=t?this.boundX.from:this.boundX.to,r=s-this.position.x,h=.1*r,p=this.position.x+(this.velocity.x+h)/(1-this.friction);t&&p<this.boundX.from||i&&p>this.boundX.to||(h=.1*r-this.velocity.x),n.x=h}if(e||o){var l=e?this.boundY.from:this.boundY.to,c=l-this.position.y,a=.1*c,u=this.position.y+(this.velocity.y+a)/(1-this.friction);e&&u<this.boundY.from||o&&u>this.boundY.to||(a=.1*c-this.velocity.y),n.y=a}this.applyForce(n)}}},{key:"applyDragForce",value:function(){if(this.isDragging){var t={x:this.dragPosition.x-this.position.x,y:this.dragPosition.y-this.position.y},i={x:t.x-this.velocity.x,y:t.y-this.velocity.y};this.applyForce(i)}}},{key:"applyScrollForce",value:function(){if(this.isScrolling){var t={x:this.scrollOffset.x-this.velocity.x,y:this.scrollOffset.y-this.velocity.y};this.scrollOffset.x=0,this.scrollOffset.y=0,this.applyForce(t)}}},{key:"setPosition",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.velocity.x=0,this.velocity.y=0,this.position.x=-t.x||0,this.position.y=-t.y||0,this.run()}},{key:"getUpdate",value:function(){return{position:{x:-this.position.x,y:-this.position.y},viewport:r({},this.viewport),content:r({},this.content)}}},{key:"notify",value:function(){this.props.onUpdate(this.getUpdate())}},{key:"updateMetrics",value:function(){this.viewport.width=this.props.viewport.clientWidth,this.viewport.height=this.props.viewport.clientHeight,this.content.width=n(this.props.content),this.content.height=s(this.props.content),this.boundX.from=Math.min(-this.content.width+this.viewport.width,0),this.boundY.from=Math.min(-this.content.height+this.viewport.height,0),this.run()}},{key:"handleEvents",value:function(){var t=this,i=this.props.viewport,e={x:0,y:0},o={x:0,y:0},n=!1,s=function(i){var e=void 0,s=void 0;n?(e=i.touches[0].pageX,s=i.touches[0].pageY):(e=i.pageX,s=i.pageY);var r=e-o.x,h=s-o.y;t.dragPosition.x=t.dragStartPosition.x+r,t.dragPosition.y=t.dragStartPosition.y+h,n||i.preventDefault()};this.events.pointerdown=function(r){var h=void 0,p=void 0,l=void 0,c=void 0;n=!(!r.touches||!r.touches[0]),n?(h=r.touches[0].pageX,p=r.touches[0].pageY,l=r.touches[0].clientX,c=r.touches[0].clientY):(h=r.pageX,p=r.pageY,l=r.clientX,c=r.clientY),console.log(h-i.offsetLeft,i.clientLeft+i.clientWidth);var a=i.getBoundingClientRect();if(l-a.left>=i.clientLeft+i.clientWidth)return void console.log("lol x");if(c-a.top>=i.clientTop+i.clientHeight)return void console.log("lol y");t.isDragging=!0,(e.x||e.y)&&(t.position.x=e.x,t.position.y=e.y,e.x=0,e.y=0),o.x=h,o.y=p,t.dragStartPosition.x=t.position.x,t.dragStartPosition.y=t.position.y,s(r),t.run();var u=void 0,v=void 0;v=function(i){t.isDragging=!1,n?(window.removeEventListener("touchmove",s),window.removeEventListener("touchend",u)):(window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",u))},n?(u=window.addEventListener("touchend",v),window.addEventListener("touchmove",s)):(u=window.addEventListener("mouseup",v),window.addEventListener("mousemove",s))};var r=null;this.events.wheel=function(i){t.velocity.x=0,t.isScrollEnabled&&(t.isScrolling=!0,t.scrollOffset.x=-i.deltaX,t.scrollOffset.y=-i.deltaY,t.run(),clearTimeout(r),r=setTimeout(function(){return t.isScrolling=!1},80),i.preventDefault())},this.events.scroll=function(i){var o=t.props.viewport.scrollLeft,n=t.props.viewport.scrollTop;Math.abs(t.position.x+o)>3&&(t.position.x=-o,t.velocity.x=0),Math.abs(t.position.y+n)>3&&(t.position.y=-n,t.velocity.y=0),e.x=-t.props.viewport.scrollLeft,e.y=-t.props.viewport.scrollTop},this.events.resize=this.updateMetrics.bind(this),this.props.handle.addEventListener("mousedown",this.events.pointerdown),this.props.handle.addEventListener("touchstart",this.events.pointerdown),this.props.viewport.addEventListener("wheel",this.events.wheel),this.props.viewport.addEventListener("scroll",this.events.scroll),window.addEventListener("resize",this.events.resize)}},{key:"destroy",value:function(){this.props.handle.removeEventListener("mousedown",this.events.pointerdown),this.props.handle.removeEventListener("touchstart",this.events.pointerdown),this.props.viewport.removeEventListener("wheel",this.events.wheel),this.props.viewport.removeEventListener("scroll",this.events.scroll),window.removeEventListener("resize",this.events.resize)}}]),t}();i.default=p,t.exports=i.default}])});

package.json

 {
   "name": "scrollbooster",
   "description": "Enjoyable content dragging library",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Ilya Shubin <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

src/index.js

@@ -257,3 +257,3 @@ export default class ScrollBooster {
     this.events.pointerdown = (event) => {
-      let pageX, pageY
+      let pageX, pageY, clientX, clientY
 
@@ -265,9 +265,15 @@ isTouch =  !!(event.touches && event.touches[0])
         pageY = event.touches[0].pageY
+        clientX = event.touches[0].clientX
+        clientY = event.touches[0].clientY
       } else {
         pageX = event.pageX
         pageY = event.pageY
+        clientX = event.clientX
+        clientY = event.clientY
       }
 
+      let rect = vp.getBoundingClientRect()
+
       // click on vertical scrollbar
-      if (pageX - vp.offsetLeft >= vp.clientLeft + vp.clientWidth) {
+      if (clientX - rect.left >= vp.clientLeft + vp.clientWidth) {
         return
@@ -277,3 +283,3 @@ }
       // click on horizontal scrollbar
-      if (pageY - vp.offsetTop >= vp.clientTop + vp.clientHeight) {
+      if (clientY - rect.top >= vp.clientTop + vp.clientHeight) {
         return
@@ -280,0 +286,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

88403

increased by3.04%

Lines of code

903

increased by2.73%

No dependency changes