@any-scroll/bar - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/const.d.ts

 export declare const TRACK_CLASS_NAME = "scroll-bar-track";
 export declare const THUMB_CLASS_NAME = "scroll-bar-thumb";
 export declare const BAR_CSS: string;
-export declare const enum DIRECTION {
-    X = "x",
-    Y = "y"
-}

dist/index.d.ts

@@ -8,3 +8,3 @@ import { Wrap } from '@any-scroll/core';
  */
-export default function (wrapRef: WarpInstance): void;
+export default function (context: WarpInstance): void;
 export {};

dist/index.es.js

 import { __read, __spread } from 'tslib';
-import { setStyle, runTwice, changeDOMVisible, createDOMDiv } from '@any-scroll/shared';
+import { DIRECTION, setStyle, runTwice, changeDOMVisible, createDOMDiv } from '@any-scroll/shared';
 import { insertCss } from 'insert-css';
@@ -12,29 +12,21 @@ import { Wrap } from '@any-scroll/core';
 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;
-(function (DIRECTION) {
-    DIRECTION["X"] = "x";
-    DIRECTION["Y"] = "y";
-})(DIRECTION || (DIRECTION = {}));
 
-function index (wrapRef) {
+var widthAndHeight = ['width', 'height'];
+function index (context) {
     var __isDraggingBar = false;
     insertCss(BAR_CSS);
-    var barRefs = [];
+    var bars = [];
     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();
+        var _a = __read(createDOM(context.el, dir), 2), trackEl = _a[0], thumbEl = _a[1];
+        var bar = new Wrap(trackEl, { allow: [DIRECTION.X === dir, DIRECTION.Y === dir], overflowDistance: 0 });
+        bars.push(bar);
+        setStyle(bar.el, { position: 'absolute' });
+        bar.on('pan', function () {
+            var thumb = bar.getContentRef();
+            if (thumb) {
+                var contentRef = context.getContentRef();
                 if (null !== contentRef) {
                     var xy = contentRef.xy;
                     var nextXY = __spread(xy);
-                    nextXY[index] = (-thumbRef.xy[index] * contentRef.contentSize[index]) / thumbRef.wrapSize[index];
+                    nextXY[index] = -thumb.xy[index] * contentRef.contentSize[index] / thumb.wrapSize[index];
                     contentRef.moveTo(nextXY);
@@ -45,3 +37,3 @@ __isDraggingBar = true;
         });
-        barRef.on('at:end', function () {
+        bar.on('at:end', function () {
             __isDraggingBar = false;
@@ -51,13 +43,13 @@ });
     });
-    updateBar(wrapRef, barRefs, xyBarElements);
-    wrapRef.on(['at:start', 'scroll', 'resize'], function () {
+    updateBar(context, bars, xyBarElements);
+    context.on(['at:start', 'scroll'], function () {
         if (__isDraggingBar)
             return;
-        updateBar(wrapRef, barRefs, xyBarElements);
+        updateBar(context, bars, xyBarElements);
     });
 }
-function updateBar(wrapRef, barRefs, xyBarElements) {
-    var contentRef = wrapRef.getContentRef();
+function updateBar(context, bars, xyBarElements) {
+    var contentRef = context.getContentRef();
     if (null !== contentRef) {
-        var contentSize_1 = contentRef.contentSize, wrapSize_1 = contentRef.wrapSize, minXY_1 = contentRef.minXY, maxXY_1 = contentRef.maxXY; contentRef.xy;
+        var contentSize_1 = contentRef.contentSize, wrapSize_1 = contentRef.wrapSize, minXY_1 = contentRef.minXY, maxXY_1 = contentRef.maxXY;
         runTwice(function (i) {
@@ -67,12 +59,12 @@ var _a;
                 changeDOMVisible(xyBarElements[i][0]);
-                var thumbRef = barRefs[i].getContentRef();
+                var thumbRef = bars[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 _b = __read(calcBarXorY(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;
+                    setStyle(thumbElement, (_a = {}, _a[widthAndHeight[i]] = thumbSize + "px", _a));
+                    thumbRef.maxXY[i] = thumbRef.wrapSize[i] - thumbSize;
                     thumbRef.minXY[i] = 0;
-                    var xy_1 = thumbRef.xy;
-                    xy_1[i] = thumbXorY;
-                    thumbRef.moveTo(xy_1);
+                    var xy = thumbRef.xy;
+                    xy[i] = thumbXorY;
+                    thumbRef.moveTo(xy);
                 }
@@ -94,3 +86,3 @@ }
 }
-function getBarSizeAndPosition(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY, thumbMinXOrY, thumbMaxXOrY) {
+function calcBarXorY(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY, thumbMinXOrY, thumbMaxXOrY) {
     var trackSize = wrapSize;
@@ -97,0 +89,0 @@ var scrollViewMaxDistance = maxXorY - minXorY;

dist/index.js

@@ -1,2 +0,2 @@
-"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)}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),n=require("@any-scroll/shared"),e=require("insert-css"),t=require("@any-scroll/core"),a=["width","height"];function o(e,t,o){var i=e.getContentRef();if(null!==i){var l=i.contentSize,c=i.wrapSize,s=i.minXY,u=i.maxXY;n.runTwice((function(e){var b;if(l[e]>c[e]){n.changeDOMVisible(o[e][0]);var p=t[e].getContentRef();if(null!==p){var f=r.__read(function(r,n,e,t,a,o,i){var l=1,c=n/e*n;a>=r?l=1-(a-r)/n:t<r&&(l=1-(r-t)/n);return[c*=l,-r/(t-a)*(n-c)]}(i.xy[e],c[e],l[e],u[e],s[e],p.minXY[e],p.maxXY[e]),2),v=f[0],d=f[1],h=o[e][1];n.setStyle(h,((b={})[a[e]]=v+"px",b)),p.maxXY[e]=p.wrapSize[e]-v,p.minXY[e]=0;var x=p.xy;x[e]=d,p.moveTo(x)}}else n.changeDOMVisible(o[e][0],!1)}))}}exports.default=function(a){var i=!1;e.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 l=[],c=[n.DIRECTION.X,n.DIRECTION.Y].map((function(e,o){var c=r.__read(function(r,e){void 0===e&&(e=n.DIRECTION.X);var t=n.createDOMDiv(["scroll-bar-track","scroll-bar-track-"+e]),a=n.createDOMDiv(["scroll-bar-thumb","scroll-bar-thumb-"+e]);return t.appendChild(a),r.appendChild(t),[t,a]}(a.el,e),2),s=c[0],u=c[1],b=new t.Wrap(s,{allow:[n.DIRECTION.X===e,n.DIRECTION.Y===e],overflowDistance:0});return l.push(b),n.setStyle(b.el,{position:"absolute"}),b.on("pan",(function(){var n=b.getContentRef();if(n){var e=a.getContentRef();if(null!==e){var t=e.xy,l=r.__spread(t);l[o]=-n.xy[o]*e.contentSize[o]/n.wrapSize[o],e.moveTo(l),i=!0}}})),b.on("at:end",(function(){i=!1})),[s,u]}));o(a,l,c),a.on(["at:start","scroll"],(function(){i||o(a,l,c)}))};
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "@any-scroll/bar",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "虚拟滚动",
@@ -24,3 +24,3 @@ "unpkg": "dist/any-scroll.js",
     "dependencies": {
-        "@any-scroll/shared": "^0.2.2",
+        "@any-scroll/shared": "^0.2.3",
         "insert-css": "^2.0.0",
@@ -42,3 +42,3 @@ "lodash": "^4.17.15",
     "sideEffects": false,
-    "gitHead": "ef0e34106b6bf93a79c7437b52c5a1001ad1a5e5"
+    "gitHead": "9b354b5b897d74ceb98b9b75a77bb7446510f3d6"
 }

No alert changes

Worsened metrics

Total package byte prevSize

29358

decreased by-3.46%

Lines of code

118

decreased by-9.23%

Dependency changes

• Updated@any-scroll/shared@^0.2.3