@any-scroll/bar - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

dist/index.es.js

@@ -1,2 +0,1 @@
-import { __spreadArray, __read } from 'tslib';
 import { runTwice, AxisList, setStyle, changeDOMVisible, changeOpacity, createDOMDiv } from '@any-scroll/shared';
@@ -6,33 +5,58 @@ import { insertCss } from 'insert-css';
 
-var TRACK_WIDTH = "8px";
-var TRACK_COLOR = 'rgba(177,177,177,0.6)';
-var THUMB_COLOR = 'rgba(55,55,55,0.6)';
-var TRACK_CLASS_NAME = 'scroll-bar-track';
-var THUMB_CLASS_NAME = 'scroll-bar-thumb';
-var BAR_CSS = "\n.".concat(TRACK_CLASS_NAME, "{\n    opacity:0;\n    right:0;\n    bottom:0;\n    background: ").concat(TRACK_COLOR, ";\n    transition:opacity .5s ease-out;\n}\n\n.").concat(TRACK_CLASS_NAME, " > .").concat(THUMB_CLASS_NAME, "{\n    width: ").concat(TRACK_WIDTH, ";\n    height: ").concat(TRACK_WIDTH, ";\n    background: ").concat(THUMB_COLOR, ";\n    border-radius:4px;\n}\n\n.").concat(TRACK_CLASS_NAME, "-x{\n    left:0;\n    height:").concat(TRACK_WIDTH, ";\n}\n\n.").concat(TRACK_CLASS_NAME, "-y{\n    top:0;\n    width:").concat(TRACK_WIDTH, ";\n}\n");
+const TRACK_WIDTH = `8px`;
+const TRACK_COLOR = 'rgba(177,177,177,0.6)';
+const THUMB_COLOR = 'rgba(55,55,55,0.6)';
+const TRACK_CLASS_NAME = 'scroll-bar-track';
+const THUMB_CLASS_NAME = 'scroll-bar-thumb';
+const BAR_CSS = `
+.${TRACK_CLASS_NAME}{
+    opacity:0;
+    right:0;
+    bottom:0;
+    background: ${TRACK_COLOR};
+    transition:opacity .5s ease-out;
+}
 
-var TYPE_UPDATED = 'updated';
-var TYPE_SCROLL = 'scroll';
+.${TRACK_CLASS_NAME} > .${THUMB_CLASS_NAME}{
+    width: ${TRACK_WIDTH};
+    height: ${TRACK_WIDTH};
+    background: ${THUMB_COLOR};
+    border-radius:4px;
+}
 
-var setTimeout = window.setTimeout;
+.${TRACK_CLASS_NAME}-x{
+    left:0;
+    height:${TRACK_WIDTH};
+}
+
+.${TRACK_CLASS_NAME}-y{
+    top:0;
+    width:${TRACK_WIDTH};
+}
+`;
+
+const TYPE_UPDATED = 'updated';
+const TYPE_SCROLL = 'scroll';
+
+const { setTimeout } = window;
 function index (wrapRef) {
-    var allow = wrapRef.options.allow;
-    var timeoutIds = [-1, -1];
-    var __isFoucsInBar = false;
-    var __isScrolled = false;
+    const { allow } = wrapRef.options;
+    let timeoutIds = [-1, -1];
+    let __isFoucsInBar = false;
+    let __isScrolled = false;
     insertCss(BAR_CSS);
-    var barRefs = runTwice(createBar);
-    wrapRef.on([TYPE_SCROLL], function () {
+    const barRefs = runTwice(createBar);
+    wrapRef.on([TYPE_SCROLL], () => {
         __isScrolled = true;
         updateBar(wrapRef, barRefs, allow);
     });
-    wrapRef.on([TYPE_UPDATED], function () {
+    wrapRef.on([TYPE_UPDATED], () => {
         updateBar(wrapRef, barRefs, allow);
     });
-    wrapRef.at.on('at:start', function () {
+    wrapRef.at.on('at:start', () => {
         __isFoucsInBar = false;
         updateBar(wrapRef, barRefs, allow);
     });
-    wrapRef.on('beforeDestroy', function () {
-        barRefs.forEach(function (barRef) {
+    wrapRef.on('beforeDestroy', () => {
+        barRefs.forEach((barRef) => {
             var _a;
@@ -44,20 +68,20 @@ barRef.destroy();
     function createBar(axisIndex) {
-        var currentAxis = AxisList[axisIndex];
-        var trackEl = createDOM(wrapRef.el, currentAxis);
-        var barRef = new Wrap(trackEl, { allow: ["x" === currentAxis, "y" === currentAxis], overflowDistance: 0 });
+        const currentAxis = AxisList[axisIndex];
+        const trackEl = createDOM(wrapRef.el, currentAxis);
+        const barRef = new Wrap(trackEl, { allow: ["x" === currentAxis, "y" === currentAxis], overflowDistance: 0 });
         setStyle(barRef.el, { position: 'absolute' });
-        barRef.on('panstart', function () {
+        barRef.on('panstart', () => {
             __isFoucsInBar = true;
         });
-        barRef.on('at:start', function () {
+        barRef.on('at:start', () => {
             updateBar(wrapRef, barRefs, allow);
         });
-        barRef.on('scroll', function () {
+        barRef.on('scroll', () => {
             if (!__isFoucsInBar)
                 return;
-            var thumbRef = barRef.getContentRef();
-            var contentRef = wrapRef.getContentRef();
+            const thumbRef = barRef.getContentRef();
+            const contentRef = wrapRef.getContentRef();
             if (null !== contentRef) {
-                var xy = contentRef.xy;
-                var nextXY = __spreadArray([], __read(xy), false);
+                const { xy } = contentRef;
+                const nextXY = [...xy];
                 nextXY[axisIndex] =
@@ -68,9 +92,9 @@ (-thumbRef.xy[axisIndex] * contentRef.contentSize[axisIndex]) / barRef.size[axisIndex];
         });
-        barRef.at.on('tap', function (e) {
-            var thumbRef = barRef.getContentRef();
+        barRef.at.on('tap', (e) => {
+            const 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];
+                const { x, y } = barRef.el.getBoundingClientRect();
+                const { contentSize } = thumbRef;
+                const newXY = [0, 0];
                 newXY[axisIndex] = [x, y][axisIndex] - [e.x, e.y][axisIndex] + contentSize[axisIndex] / 2;
@@ -83,9 +107,8 @@ thumbRef.dampScroll(newXY);
     function updateBar(wrapRef, barRefs, allow) {
-        var contentRef = wrapRef.getContentRef();
-        var contentSize = contentRef.contentSize, minXY = contentRef.minXY, maxXY = contentRef.maxXY;
-        var wrapSize = wrapRef.size;
-        runTwice(function (i) {
-            var _a;
-            var barRef = barRefs[i];
-            var trackElement = barRef.el;
+        const contentRef = wrapRef.getContentRef();
+        const { contentSize, minXY, maxXY } = contentRef;
+        const wrapSize = wrapRef.size;
+        runTwice((i) => {
+            const barRef = barRefs[i];
+            const trackElement = barRef.el;
             if (allow[i]) {
@@ -101,15 +124,15 @@ changeDOMVisible(trackElement);
                 clearTimeout(timeoutIds[i]);
-                timeoutIds[i] = setTimeout(function () {
+                timeoutIds[i] = setTimeout(() => {
                     changeOpacity(trackElement, 0);
                 }, 1000);
-                var thumbRef = barRefs[i].getContentRef();
+                const thumbRef = barRefs[i].getContentRef();
                 if (null !== thumbRef) {
-                    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]] = "".concat(thumbSize, "px"), _a));
+                    const [thumbSize, thumbXorY] = calcBarXorY(contentRef.xy[i], wrapSize[i], contentSize[i], maxXY[i], minXY[i]);
+                    const thumbElement = barRef.getContentRef().el;
+                    setStyle(thumbElement, { [['width', 'height'][i]]: `${thumbSize}px` });
                     thumbRef.update();
                     thumbRef.maxXY[i] = 0;
                     thumbRef.minXY[i] = Math.min(0, thumbSize - barRef.size[i]);
-                    var xy = thumbRef.xy;
-                    var newXY = __spreadArray([], __read(xy), false);
+                    const { xy } = thumbRef;
+                    const newXY = [...xy];
                     newXY[i] = thumbXorY;
@@ -125,6 +148,5 @@ thumbRef.moveTo(newXY);
 }
-function createDOM(el, axis) {
-    if (axis === void 0) { axis = "x"; }
-    var trackEl = createDOMDiv([TRACK_CLASS_NAME, "".concat(TRACK_CLASS_NAME, "-").concat(axis)]);
-    var thumbEl = createDOMDiv([THUMB_CLASS_NAME, "".concat(THUMB_CLASS_NAME, "-").concat(axis)]);
+function createDOM(el, axis = "x") {
+    const trackEl = createDOMDiv([TRACK_CLASS_NAME, `${TRACK_CLASS_NAME}-${axis}`]);
+    const thumbEl = createDOMDiv([THUMB_CLASS_NAME, `${THUMB_CLASS_NAME}-${axis}`]);
     trackEl.appendChild(thumbEl);
@@ -135,6 +157,6 @@ el.appendChild(trackEl);
 function calcBarXorY(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY) {
-    var trackSize = wrapSize;
-    var scrollViewMaxDistance = maxXorY - minXorY;
-    var scale = 1;
-    var thumbLength = (wrapSize / contentSize) * trackSize;
+    const trackSize = wrapSize;
+    const scrollViewMaxDistance = maxXorY - minXorY;
+    let scale = 1;
+    let thumbLength = (wrapSize / contentSize) * trackSize;
     if (minXorY >= scrollViewXOrY) {
@@ -147,3 +169,3 @@ scale = 1 - (minXorY - scrollViewXOrY) / wrapSize;
     thumbLength *= scale;
-    var thumbXorY = -((scrollViewXOrY / scrollViewMaxDistance) * (trackSize - thumbLength));
+    const thumbXorY = -((scrollViewXOrY / scrollViewMaxDistance) * (trackSize - thumbLength));
     return [thumbLength, thumbXorY];
@@ -150,0 +172,0 @@ }

package.json

 {
     "name": "@any-scroll/bar",
-    "version": "0.6.1",
+    "version": "0.6.2",
     "description": "虚拟滚动",
@@ -22,3 +22,3 @@ "main": "dist/index.js",
     "dependencies": {
-        "@any-scroll/shared": "^0.6.1",
+        "@any-scroll/shared": "^0.6.2",
         "insert-css": "^2.0.0",
@@ -39,3 +39,3 @@ "lodash": "^4.17.15",
     "sideEffects": false,
-    "gitHead": "ab245ce8e948f8a977b767f632b5921bf101e2de"
+    "gitHead": "b972397294cbe4e1edb694c63bac4a74f5e3aaf3"
 }

No alert changes

Improved metrics

Lines of code

184

increased by10.84%

Worsened metrics

Total package byte prevSize

20719

decreased by-2.12%

Dependency changes

• Updated@any-scroll/shared@^0.6.2