@any-scroll/bar - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/index.d.ts

@@ -0,1 +1,3 @@
+import { Wrap } from '@any-scroll/core';
+declare type WarpInstance = InstanceType<typeof Wrap>;
 /**
@@ -6,2 +8,3 @@ * 创建滚动条
  */
-export default function (el: HTMLElement): (position: [number, number], warpSize: [number, number], min: [number, number], contentSize: [number, number]) => void;
+export default function (wrapRef: WarpInstance): void;
+export {};

dist/index.es.js

@@ -1,7 +0,6 @@
-import { __read } from 'tslib';
-import { createDOMDiv, setStyle, setTranslate, hideDOM } from '@any-scroll/shared';
+import { __read, __spread } from 'tslib';
+import { setStyle, runTwice, changeDOMVisible, createDOMDiv } from '@any-scroll/shared';
 import { insertCss } from 'insert-css';
-import clamp from 'lodash/clamp';
+import { Wrap } from '@any-scroll/core';
 
-var __ANY_SCROLL = '.any-scroll';
 var TRACK_WIDTH = "8px";
@@ -12,3 +11,3 @@ var TRACK_COLOR = 'rgba(177,177,177,0.6)';
 var THUMB_CLASS_NAME = 'scroll-bar-thumb';
-var BAR_CSS = "\n" + __ANY_SCROLL + " {\n    display: block;\n    position: relative;\n}\n\n" + __ANY_SCROLL + " > ." + TRACK_CLASS_NAME + "{\n    position:absolute;\n    right:0;\n    bottom:0;\n    background: " + TRACK_COLOR + ";\n}\n\n" + __ANY_SCROLL + " >." + TRACK_CLASS_NAME + " > ." + THUMB_CLASS_NAME + "{\n    width: " + TRACK_WIDTH + ";\n    height: " + TRACK_WIDTH + ";\n    background: " + THUMB_COLOR + ";\n    border-radius:4px;\n}\n\n" + __ANY_SCROLL + " > ." + TRACK_CLASS_NAME + "-x{\n    left:0;\n    height:" + TRACK_WIDTH + ";\n}\n\n" + __ANY_SCROLL + " > ." + TRACK_CLASS_NAME + "-y{\n    top:0;\n    width:" + TRACK_WIDTH + ";\n}\n";
+var BAR_CSS = "\n." + TRACK_CLASS_NAME + "{\n    position:absolute;\n    right:0;\n    bottom:0;\n    background: " + TRACK_COLOR + ";\n}\n\n." + TRACK_CLASS_NAME + " > ." + THUMB_CLASS_NAME + "{\n    width: " + TRACK_WIDTH + ";\n    height: " + TRACK_WIDTH + ";\n    background: " + THUMB_COLOR + ";\n    border-radius:4px;\n}\n\n." + TRACK_CLASS_NAME + "-x{\n    left:0;\n    height:" + TRACK_WIDTH + ";\n}\n\n." + TRACK_CLASS_NAME + "-y{\n    top:0;\n    width:" + TRACK_WIDTH + ";\n}\n";
 var DIRECTION;
@@ -20,50 +19,91 @@ (function (DIRECTION) {
 
-var sizeProps = ['width', 'height'];
-function index (el) {
+function index (wrapRef) {
+    var __isDraggingBar = false;
     insertCss(BAR_CSS);
-    var barElementsXY = [DIRECTION.X, DIRECTION.Y].map(function (dir) {
-        return __createDOM(el, dir);
+    var barRefs = [];
+    var xyBarElements = [DIRECTION.X, DIRECTION.Y].map(function (dir, index) {
+        var _a = __read(createDOM(wrapRef.el, dir), 2), trackEl = _a[0], thumbEl = _a[1];
+        var barRef = new Wrap(trackEl, {
+            allow: [DIRECTION.X === dir, DIRECTION.Y === dir],
+            overflowDistance: 0,
+            watchResize: false,
+        });
+        barRefs.push(barRef);
+        setStyle(barRef.el, { position: 'absolute' });
+        barRef.on('pan', function (e) {
+            var thumbRef = barRef.getContentRef();
+            if (thumbRef) {
+                var contentRef = wrapRef.getContentRef();
+                if (null !== contentRef) {
+                    var xy = contentRef.xy;
+                    var nextXY = __spread(xy);
+                    nextXY[index] = (-thumbRef.xy[index] * contentRef.contentSize[index]) / thumbRef.wrapSize[index];
+                    contentRef.moveTo(nextXY);
+                    __isDraggingBar = true;
+                }
+            }
+        });
+        barRef.on('at:end', function () {
+            __isDraggingBar = false;
+        });
+        return [trackEl, thumbEl];
     });
-    function __createDOM(el, axis) {
-        if (axis === void 0) { axis = DIRECTION.X; }
-        var trackEl = createDOMDiv();
-        var thumbEl = createDOMDiv();
-        trackEl.className = TRACK_CLASS_NAME + " " + TRACK_CLASS_NAME + "-" + axis;
-        thumbEl.className = THUMB_CLASS_NAME + " " + THUMB_CLASS_NAME + "-" + axis;
-        trackEl.appendChild(thumbEl);
-        el.appendChild(trackEl);
-        return [trackEl, thumbEl];
-    }
-    function __calcBar(position, trackLength, minValue) {
-        var scale = 1;
-        var thumbLength = Math.abs(trackLength / (minValue - trackLength) * trackLength);
-        if (0 < position) {
-            scale = 1 - (position / trackLength);
-        }
-        else if (minValue > position) {
-            scale = 1 - (minValue - position) / trackLength;
-        }
-        thumbLength *= scale;
-        var newPosition = clamp(position / (minValue) * (trackLength - thumbLength), 0, trackLength - thumbLength);
-        return [thumbLength, newPosition];
-    }
-    function updateBar(position, warpSize, min, contentSize) {
-        var _a;
-        for (var i = 0; i < 2; i++) {
-            if (contentSize[i] > warpSize[i]) {
-                var _b = __read(__calcBar(position[i], warpSize[i], min[i]), 2), thumbLength = _b[0], newPosition = _b[1];
-                var __thumbEl = barElementsXY[i][1];
-                var positionMaybe = [newPosition, 0];
-                setStyle(__thumbEl, (_a = {}, _a[sizeProps[i]] = thumbLength + "px", _a));
-                setTranslate(__thumbEl, positionMaybe[i], positionMaybe[1 ^ i]);
+    updateBar(wrapRef, barRefs, xyBarElements);
+    wrapRef.on(['at:start', 'scroll', 'resize'], function () {
+        if (__isDraggingBar)
+            return;
+        updateBar(wrapRef, barRefs, xyBarElements);
+    });
+}
+function updateBar(wrapRef, barRefs, xyBarElements) {
+    var contentRef = wrapRef.getContentRef();
+    if (null !== contentRef) {
+        var contentSize_1 = contentRef.contentSize, wrapSize_1 = contentRef.wrapSize, minXY_1 = contentRef.minXY, maxXY_1 = contentRef.maxXY; contentRef.xy;
+        runTwice(function (i) {
+            var _a;
+            if (contentSize_1[i] > wrapSize_1[i]) {
+                changeDOMVisible(xyBarElements[i][0]);
+                var thumbRef = barRefs[i].getContentRef();
+                if (null !== thumbRef) {
+                    var _b = __read(getBarSizeAndPosition(contentRef.xy[i], wrapSize_1[i], contentSize_1[i], maxXY_1[i], minXY_1[i], thumbRef.minXY[i], thumbRef.maxXY[i]), 2), thumbSize = _b[0], thumbXorY = _b[1];
+                    var thumbElement = xyBarElements[i][1];
+                    setStyle(thumbElement, (_a = {}, _a[['width', 'height'][i]] = thumbSize + "px", _a));
+                    thumbRef.maxXY[i] = contentRef.wrapSize[i] - thumbSize;
+                    thumbRef.minXY[i] = 0;
+                    var xy_1 = thumbRef.xy;
+                    xy_1[i] = thumbXorY;
+                    thumbRef.moveTo(xy_1);
+                }
             }
             else {
-                hideDOM(barElementsXY[i][0]);
+                changeDOMVisible(xyBarElements[i][0], false);
             }
-        }
+        });
     }
-    return updateBar;
 }
+function createDOM(el, axis) {
+    if (axis === void 0) { axis = DIRECTION.X; }
+    var trackEl = createDOMDiv([TRACK_CLASS_NAME, TRACK_CLASS_NAME + "-" + axis]);
+    var thumbEl = createDOMDiv([THUMB_CLASS_NAME, THUMB_CLASS_NAME + "-" + axis]);
+    trackEl.appendChild(thumbEl);
+    el.appendChild(trackEl);
+    return [trackEl, thumbEl];
+}
+function getBarSizeAndPosition(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY, thumbMinXOrY, thumbMaxXOrY) {
+    var trackSize = wrapSize;
+    var scrollViewMaxDistance = maxXorY - minXorY;
+    var scale = 1;
+    var thumbLength = (wrapSize / contentSize) * trackSize;
+    if (minXorY >= scrollViewXOrY) {
+        scale = 1 - (minXorY - scrollViewXOrY) / wrapSize;
+    }
+    else if (maxXorY < scrollViewXOrY) {
+        scale = 1 - (scrollViewXOrY - maxXorY) / wrapSize;
+    }
+    thumbLength *= scale;
+    var thumbXorY = -((scrollViewXOrY / scrollViewMaxDistance) * (trackSize - thumbLength));
+    return [thumbLength, thumbXorY];
+}
 
-export default index;
+export { index as default };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),n=require("@any-scroll/shared"),a=require("insert-css");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var e,l=t(require("lodash/clamp"));!function(r){r.X="x",r.Y="y"}(e||(e={}));var o=["width","height"];exports.default=function(t){a.insertCss("\n.any-scroll {\n    display: block;\n    position: relative;\n}\n\n.any-scroll > .scroll-bar-track{\n    position:absolute;\n    right:0;\n    bottom:0;\n    background: rgba(177,177,177,0.6);\n}\n\n.any-scroll >.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.any-scroll > .scroll-bar-track-x{\n    left:0;\n    height:8px;\n}\n\n.any-scroll > .scroll-bar-track-y{\n    top:0;\n    width:8px;\n}\n");var s=[e.X,e.Y].map((function(r){return function(r,a){void 0===a&&(a=e.X);var t=n.createDOMDiv(),l=n.createDOMDiv();return t.className="scroll-bar-track scroll-bar-track-"+a,l.className="scroll-bar-thumb scroll-bar-thumb-"+a,t.appendChild(l),r.appendChild(t),[t,l]}(t,r)}));function c(r,n,a){var t=1,e=Math.abs(n/(a-n)*n);return 0<r?t=1-r/n:a>r&&(t=1-(a-r)/n),[e*=t,l.default(r/a*(n-e),0,n-e)]}return function(a,t,e,l){for(var i,u=0;u<2;u++)if(l[u]>t[u]){var b=r.__read(c(a[u],t[u],e[u]),2),d=b[0],p=b[1],h=s[u][1],f=[p,0];n.setStyle(h,((i={})[o[u]]=d+"px",i)),n.setTranslate(h,f[u],f[1^u])}else n.hideDOM(s[u][0])}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,r=require("tslib"),e=require("@any-scroll/shared"),t=require("insert-css"),a=require("@any-scroll/core");function i(n,t,a){var i=n.getContentRef();if(null!==i){var o=i.contentSize,l=i.wrapSize,c=i.minXY,s=i.maxXY;i.xy,e.runTwice((function(n){var u;if(o[n]>l[n]){e.changeDOMVisible(a[n][0]);var b=t[n].getContentRef();if(null!==b){var p=r.__read(function(n,r,e,t,a,i,o){var l=1,c=r/e*r;a>=n?l=1-(a-n)/r:t<n&&(l=1-(n-t)/r);return[c*=l,-n/(t-a)*(r-c)]}(i.xy[n],l[n],o[n],s[n],c[n],b.minXY[n],b.maxXY[n]),2),f=p[0],v=p[1],d=a[n][1];e.setStyle(d,((u={})[["width","height"][n]]=f+"px",u)),b.maxXY[n]=i.wrapSize[n]-f,b.minXY[n]=0;var h=b.xy;h[n]=v,b.moveTo(h)}}else e.changeDOMVisible(a[n][0],!1)}))}}!function(n){n.X="x",n.Y="y"}(n||(n={})),exports.default=function(o){var l=!1;t.insertCss("\n.scroll-bar-track{\n    position:absolute;\n    right:0;\n    bottom:0;\n    background: rgba(177,177,177,0.6);\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=[],s=[n.X,n.Y].map((function(t,i){var s=r.__read(function(r,t){void 0===t&&(t=n.X);var a=e.createDOMDiv(["scroll-bar-track","scroll-bar-track-"+t]),i=e.createDOMDiv(["scroll-bar-thumb","scroll-bar-thumb-"+t]);return a.appendChild(i),r.appendChild(a),[a,i]}(o.el,t),2),u=s[0],b=s[1],p=new a.Wrap(u,{allow:[n.X===t,n.Y===t],overflowDistance:0,watchResize:!1});return c.push(p),e.setStyle(p.el,{position:"absolute"}),p.on("pan",(function(n){var e=p.getContentRef();if(e){var t=o.getContentRef();if(null!==t){var a=t.xy,c=r.__spread(a);c[i]=-e.xy[i]*t.contentSize[i]/e.wrapSize[i],t.moveTo(c),l=!0}}})),p.on("at:end",(function(){l=!1})),[u,b]}));i(o,c,s),o.on(["at:start","scroll","resize"],(function(){l||i(o,c,s)}))};
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "@any-scroll/bar",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "虚拟滚动",
@@ -24,5 +24,6 @@ "unpkg": "dist/any-scroll.js",
     "dependencies": {
-        "@any-scroll/shared": "^0.2.1",
+        "@any-scroll/shared": "^0.2.2",
         "insert-css": "^2.0.0",
         "lodash": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.1",
         "tslib": "^2.3.0"
@@ -41,3 +42,3 @@ },
     "sideEffects": false,
-    "gitHead": "a94319db48174b858d42434450dcca5c3253eec4"
+    "gitHead": "ef0e34106b6bf93a79c7437b52c5a1001ad1a5e5"
 }

No alert changes

Improved metrics

Total package byte prevSize

30411

increased by47.73%

Lines of code

130

increased by51.16%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedresize-observer-polyfill@^1.5.1

• + Addedresize-observer-polyfill@1.5.1(transitive)

• Updated@any-scroll/shared@^0.2.2