@any-scroll/bar - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

dist/index.es.js

 import { __spread, __read } from 'tslib';
-import { runTwice, DIRECTION, setStyle, changeDOMVisible, changeOpacity, createDOMDiv } from '@any-scroll/shared';
+import { runTwice, AxisList, Axis, setStyle, changeDOMVisible, changeOpacity, createDOMDiv } from '@any-scroll/shared';
 import { insertCss } from 'insert-css';
@@ -13,2 +13,4 @@ import { Wrap } from '@any-scroll/core';
 
+var TYPE_UPDATED = 'updated';
+
 var setTimeout = window.setTimeout;
@@ -18,10 +20,15 @@ function index (wrapRef) {
     var timeoutIds = [-1, -1];
+    var __isFoucsInBar = false;
     insertCss(BAR_CSS);
     var barRefs = runTwice(createBar);
-    wrapRef.on(['at:start', 'scroll', 'resize'], function () {
+    wrapRef.on(TYPE_UPDATED, function () {
         updateBar(wrapRef, barRefs, allow);
     });
-    wrapRef.on('change-content', function (ref) {
+    wrapRef.on(['scroll', 'resize'], function () {
         updateBar(wrapRef, barRefs, allow);
     });
+    wrapRef.at.on('at:start', function () {
+        __isFoucsInBar = false;
+        updateBar(wrapRef, barRefs, allow);
+    });
     wrapRef.on('beforeDestroy', function () {
@@ -34,9 +41,17 @@ barRefs.forEach(function (barRef) {
     });
-    function createBar(index) {
-        var dir = [DIRECTION.X, DIRECTION.Y][index];
-        var trackEl = createDOM(wrapRef.el, dir);
-        var bar = new Wrap(trackEl, { allow: [DIRECTION.X === dir, DIRECTION.Y === dir], overflowDistance: 0 });
-        setStyle(bar.el, { position: 'absolute', display: 'none' });
-        bar.at.on('pan', function () {
-            var thumb = bar.getContentRef();
+    function createBar(axisIndex) {
+        var currentAxis = AxisList[axisIndex];
+        var trackEl = createDOM(wrapRef.el, currentAxis);
+        var barRef = new Wrap(trackEl, { allow: [Axis.X === currentAxis, Axis.Y === currentAxis], overflowDistance: 0 });
+        setStyle(barRef.el, { position: 'absolute' });
+        barRef.on('panstart', function () {
+            __isFoucsInBar = true;
+        });
+        barRef.on('at:start', function () {
+            updateBar(wrapRef, barRefs, allow);
+        });
+        barRef.on('scroll', function () {
+            if (!__isFoucsInBar)
+                return;
+            var thumbRef = barRef.getContentRef();
             var contentRef = wrapRef.getContentRef();
@@ -46,13 +61,24 @@ if (null !== contentRef) {
                 var nextXY = __spread(xy);
-                nextXY[index] = (-thumb.xy[index] * contentRef.contentSize[index]) / thumb.wrapSize[index];
+                nextXY[axisIndex] =
+                    (-thumbRef.xy[axisIndex] * contentRef.contentSize[axisIndex]) / barRef.size[axisIndex];
                 contentRef.moveTo(nextXY);
             }
         });
-        bar.at.on('at:end', function () {
+        barRef.at.on('tap', function (e) {
+            var thumbRef = barRef.getContentRef();
+            if (null !== thumbRef && e.target === barRef.el) {
+                __isFoucsInBar = true;
+                var _a = barRef.el.getBoundingClientRect(), x = _a.x, y = _a.y;
+                var contentSize = thumbRef.contentSize;
+                var newXY = [0, 0];
+                newXY[axisIndex] = [x, y][axisIndex] - [e.x, e.y][axisIndex] + contentSize[axisIndex] / 2;
+                thumbRef.dampScroll(newXY);
+            }
         });
-        return bar;
+        return barRef;
     }
     function updateBar(wrapRef, barRefs, allow) {
         var contentRef = wrapRef.getContentRef();
-        var contentSize = contentRef.contentSize, wrapSize = contentRef.wrapSize, minXY = contentRef.minXY, maxXY = contentRef.maxXY;
+        var contentSize = contentRef.contentSize, minXY = contentRef.minXY, maxXY = contentRef.maxXY;
+        var wrapSize = wrapRef.size;
         runTwice(function (i) {
@@ -66,2 +92,3 @@ var _a;
             else {
+                changeDOMVisible(trackElement, false);
                 return;
@@ -77,10 +104,12 @@ }
                 if (null !== thumbRef) {
-                    var _b = __read(calcBarXorY(contentRef.xy[i], wrapSize[i], contentSize[i], maxXY[i], minXY[i], thumbRef.minXY[i], thumbRef.maxXY[i]), 2), thumbSize = _b[0], thumbXorY = _b[1];
+                    var _b = __read(calcBarXorY(contentRef.xy[i], wrapSize[i], contentSize[i], maxXY[i], minXY[i]), 2), thumbSize = _b[0], thumbXorY = _b[1];
                     var thumbElement = barRef.getContentRef().el;
                     setStyle(thumbElement, (_a = {}, _a[['width', 'height'][i]] = thumbSize + "px", _a));
-                    thumbRef.maxXY[i] = thumbRef.wrapSize[i] - thumbSize;
-                    thumbRef.minXY[i] = 0;
+                    thumbRef.update();
+                    thumbRef.maxXY[i] = 0;
+                    thumbRef.minXY[i] = Math.min(0, thumbSize - barRef.size[i]);
                     var xy = thumbRef.xy;
-                    xy[i] = thumbXorY;
-                    thumbRef.moveTo(xy);
+                    var newXY = __spread(xy);
+                    newXY[i] = thumbXorY;
+                    thumbRef.moveTo(newXY);
                 }
@@ -95,3 +124,3 @@ }
 function createDOM(el, axis) {
-    if (axis === void 0) { axis = DIRECTION.X; }
+    if (axis === void 0) { axis = Axis.X; }
     var trackEl = createDOMDiv([TRACK_CLASS_NAME, TRACK_CLASS_NAME + "-" + axis]);
@@ -103,3 +132,3 @@ var thumbEl = createDOMDiv([THUMB_CLASS_NAME, THUMB_CLASS_NAME + "-" + axis]);
 }
-function calcBarXorY(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY, thumbMinXOrY, thumbMaxXOrY) {
+function calcBarXorY(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY) {
     var trackSize = wrapSize;
@@ -106,0 +135,0 @@ var scrollViewMaxDistance = maxXorY - minXorY;

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("@any-scroll/shared"),t=require("insert-css"),r=require("@any-scroll/core"),a=window.setTimeout;exports.default=function(o){var i=o.options.allow,l=[-1,-1];t.insertCss("\n.scroll-bar-track{\n    right:0;\n    bottom:0;\n    background: rgba(177,177,177,0.6);\n    transition:opacity .5s ease-out;\n}\n\n.scroll-bar-track > .scroll-bar-thumb{\n    width: 8px;\n    height: 8px;\n    background: rgba(55,55,55,0.6);\n    border-radius:4px;\n}\n\n.scroll-bar-track-x{\n    left:0;\n    height:8px;\n}\n\n.scroll-bar-track-y{\n    top:0;\n    width:8px;\n}\n");var c=n.runTwice((function(t){var a=[n.DIRECTION.X,n.DIRECTION.Y][t],i=function(e,t){void 0===t&&(t=n.DIRECTION.X);var r=n.createDOMDiv(["scroll-bar-track","scroll-bar-track-"+t]),a=n.createDOMDiv(["scroll-bar-thumb","scroll-bar-thumb-"+t]);return r.appendChild(a),e.appendChild(r),r}(o.el,a),l=new r.Wrap(i,{allow:[n.DIRECTION.X===a,n.DIRECTION.Y===a],overflowDistance:0});return n.setStyle(l.el,{position:"absolute",display:"none"}),l.at.on("pan",(function(){var n=l.getContentRef(),r=o.getContentRef();if(null!==r){var a=r.xy,i=e.__spread(a);i[t]=-n.xy[t]*r.contentSize[t]/n.wrapSize[t],r.moveTo(i)}})),l.at.on("at:end",(function(){})),l}));function s(t,r,o){var i=t.getContentRef(),c=i.contentSize,s=i.wrapSize,u=i.minXY,f=i.maxXY;n.runTwice((function(t){var p,b=r[t],d=b.el;if(o[t])if(n.changeDOMVisible(d),c[t]>s[t]){n.changeOpacity(d,1),clearTimeout(l[t]),l[t]=a((function(){n.changeOpacity(d,0)}),1e3);var h=r[t].getContentRef();if(null!==h){var v=e.__read(function(e,n,t,r,a,o,i){var l=1,c=n/t*n;a>=e?l=1-(a-e)/n:r<e&&(l=1-(e-r)/n);return[c*=l,-e/(r-a)*(n-c)]}(i.xy[t],s[t],c[t],f[t],u[t],h.minXY[t],h.maxXY[t]),2),g=v[0],m=v[1],x=b.getContentRef().el;n.setStyle(x,((p={})[["width","height"][t]]=g+"px",p)),h.maxXY[t]=h.wrapSize[t]-g,h.minXY[t]=0;var y=h.xy;y[t]=m,h.moveTo(y)}}else n.changeDOMVisible(d,!1)}))}o.on(["at:start","scroll","resize"],(function(){s(o,c,i)})),o.on("change-content",(function(e){s(o,c,i)})),o.on("beforeDestroy",(function(){c.forEach((function(e){var n;e.destroy(),null===(n=e.el.parentElement)||void 0===n||n.removeChild(e.el)}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("@any-scroll/shared"),t=require("insert-css"),r=require("@any-scroll/core"),o=window.setTimeout;exports.default=function(i){var a=i.options.allow,l=[-1,-1],c=!1;t.insertCss("\n.scroll-bar-track{\n    right:0;\n    bottom:0;\n    background: rgba(177,177,177,0.6);\n    transition:opacity .5s ease-out;\n}\n\n.scroll-bar-track > .scroll-bar-thumb{\n    width: 8px;\n    height: 8px;\n    background: rgba(55,55,55,0.6);\n    border-radius:4px;\n}\n\n.scroll-bar-track-x{\n    left:0;\n    height:8px;\n}\n\n.scroll-bar-track-y{\n    top:0;\n    width:8px;\n}\n");var s=n.runTwice((function(t){var o=n.AxisList[t],l=function(e,t){void 0===t&&(t=n.Axis.X);var r=n.createDOMDiv(["scroll-bar-track","scroll-bar-track-"+t]),o=n.createDOMDiv(["scroll-bar-thumb","scroll-bar-thumb-"+t]);return r.appendChild(o),e.appendChild(r),r}(i.el,o),f=new r.Wrap(l,{allow:[n.Axis.X===o,n.Axis.Y===o],overflowDistance:0});return n.setStyle(f.el,{position:"absolute"}),f.on("panstart",(function(){c=!0})),f.on("at:start",(function(){u(i,s,a)})),f.on("scroll",(function(){if(c){var n=f.getContentRef(),r=i.getContentRef();if(null!==r){var o=r.xy,a=e.__spread(o);a[t]=-n.xy[t]*r.contentSize[t]/f.size[t],r.moveTo(a)}}})),f.at.on("tap",(function(e){var n=f.getContentRef();if(null!==n&&e.target===f.el){c=!0;var r=f.el.getBoundingClientRect(),o=r.x,i=r.y,a=n.contentSize,l=[0,0];l[t]=[o,i][t]-[e.x,e.y][t]+a[t]/2,n.dampScroll(l)}})),f}));function u(t,r,i){var a=t.getContentRef(),c=a.contentSize,s=a.minXY,u=a.maxXY,f=t.size;n.runTwice((function(t){var d,p=r[t],b=p.el;if(i[t])if(n.changeDOMVisible(b),c[t]>f[t]){n.changeOpacity(b,1),clearTimeout(l[t]),l[t]=o((function(){n.changeOpacity(b,0)}),1e3);var v=r[t].getContentRef();if(null!==v){var h=e.__read(function(e,n,t,r,o){var i=1,a=n/t*n;o>=e?i=1-(o-e)/n:r<e&&(i=1-(e-r)/n);return[a*=i,-e/(r-o)*(n-a)]}(a.xy[t],f[t],c[t],u[t],s[t]),2),g=h[0],x=h[1],y=p.getContentRef().el;n.setStyle(y,((d={})[["width","height"][t]]=g+"px",d)),v.update(),v.maxXY[t]=0,v.minXY[t]=Math.min(0,g-p.size[t]);var m=v.xy,w=e.__spread(m);w[t]=x,v.moveTo(w)}}else n.changeDOMVisible(b,!1);else n.changeDOMVisible(b,!1)}))}i.on("updated",(function(){u(i,s,a)})),i.on(["scroll","resize"],(function(){u(i,s,a)})),i.at.on("at:start",(function(){c=!1,u(i,s,a)})),i.on("beforeDestroy",(function(){s.forEach((function(e){var n;e.destroy(),null===(n=e.el.parentElement)||void 0===n||n.removeChild(e.el)}))}))};
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "@any-scroll/bar",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "description": "虚拟滚动",
@@ -24,3 +24,3 @@ "unpkg": "dist/any-scroll.js",
     "dependencies": {
-        "@any-scroll/shared": "^0.2.4",
+        "@any-scroll/shared": "^0.2.5",
         "any-touch": "2.0.0-alpha.4",
@@ -43,3 +43,3 @@ "insert-css": "^2.0.0",
     "sideEffects": false,
-    "gitHead": "b8784f0c4e24d97995624bf3d387cc116d306891"
+    "gitHead": "1564af5326921b7acbad01fedad3a047c6862adf"
 }

No alert changes

Improved metrics

Total package byte prevSize

41107

increased by23.48%

Lines of code

162

increased by21.8%

Dependency changes

• Updated@any-scroll/shared@^0.2.5