Socket
Socket
Sign inDemoInstall

@any-scroll/bar

Package Overview
Dependencies
20
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.2.3 to 0.2.4

2

dist/index.d.ts

@@ -8,3 +8,3 @@ import { Wrap } from '@any-scroll/core';

*/
export default function (context: WarpInstance): void;
export default function (wrapRef: WarpInstance): void;
export {};

@@ -1,3 +0,3 @@

import { __read, __spread } from 'tslib';
import { DIRECTION, setStyle, runTwice, changeDOMVisible, createDOMDiv } from '@any-scroll/shared';
import { __spread, __read } from 'tslib';
import { runTwice, DIRECTION, setStyle, changeDOMVisible, changeOpacity, createDOMDiv } from '@any-scroll/shared';
import { insertCss } from 'insert-css';

@@ -11,52 +11,66 @@ import { Wrap } from '@any-scroll/core';

var THUMB_CLASS_NAME = 'scroll-bar-thumb';
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 BAR_CSS = "\n." + TRACK_CLASS_NAME + "{\n right:0;\n bottom:0;\n background: " + TRACK_COLOR + ";\n transition:opacity .5s ease-out;\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 widthAndHeight = ['width', 'height'];
function index (context) {
var __isDraggingBar = false;
var setTimeout = window.setTimeout;
function index (wrapRef) {
var allow = wrapRef.options.allow;
var timeoutIds = [-1, -1];
insertCss(BAR_CSS);
var bars = [];
var xyBarElements = [DIRECTION.X, DIRECTION.Y].map(function (dir, index) {
var _a = __read(createDOM(context.el, dir), 2), trackEl = _a[0], thumbEl = _a[1];
var barRefs = runTwice(createBar);
wrapRef.on(['at:start', 'scroll', 'resize'], function () {
updateBar(wrapRef, barRefs, allow);
});
wrapRef.on('change-content', function (ref) {
updateBar(wrapRef, barRefs, allow);
});
wrapRef.on('beforeDestroy', function () {
barRefs.forEach(function (barRef) {
var _a;
barRef.destroy();
(_a = barRef.el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(barRef.el);
});
});
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 });
bars.push(bar);
setStyle(bar.el, { position: 'absolute' });
bar.on('pan', function () {
setStyle(bar.el, { position: 'absolute', display: 'none' });
bar.at.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] = -thumb.xy[index] * contentRef.contentSize[index] / thumb.wrapSize[index];
contentRef.moveTo(nextXY);
__isDraggingBar = true;
}
var contentRef = wrapRef.getContentRef();
if (null !== contentRef) {
var xy = contentRef.xy;
var nextXY = __spread(xy);
nextXY[index] = (-thumb.xy[index] * contentRef.contentSize[index]) / thumb.wrapSize[index];
contentRef.moveTo(nextXY);
}
});
bar.on('at:end', function () {
__isDraggingBar = false;
bar.at.on('at:end', function () {
});
return [trackEl, thumbEl];
});
updateBar(context, bars, xyBarElements);
context.on(['at:start', 'scroll'], function () {
if (__isDraggingBar)
return;
updateBar(context, bars, xyBarElements);
});
}
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;
return bar;
}
function updateBar(wrapRef, barRefs, allow) {
var contentRef = wrapRef.getContentRef();
var contentSize = contentRef.contentSize, wrapSize = contentRef.wrapSize, minXY = contentRef.minXY, maxXY = contentRef.maxXY;
runTwice(function (i) {
var _a;
if (contentSize_1[i] > wrapSize_1[i]) {
changeDOMVisible(xyBarElements[i][0]);
var thumbRef = bars[i].getContentRef();
var barRef = barRefs[i];
var trackElement = barRef.el;
if (allow[i]) {
changeDOMVisible(trackElement);
}
else {
return;
}
if (contentSize[i] > wrapSize[i]) {
changeOpacity(trackElement, 1);
clearTimeout(timeoutIds[i]);
timeoutIds[i] = setTimeout(function () {
changeOpacity(trackElement, 0);
}, 1000);
var thumbRef = barRefs[i].getContentRef();
if (null !== thumbRef) {
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[widthAndHeight[i]] = thumbSize + "px", _a));
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 thumbElement = barRef.getContentRef().el;
setStyle(thumbElement, (_a = {}, _a[['width', 'height'][i]] = thumbSize + "px", _a));
thumbRef.maxXY[i] = thumbRef.wrapSize[i] - thumbSize;

@@ -70,3 +84,3 @@ thumbRef.minXY[i] = 0;

else {
changeDOMVisible(xyBarElements[i][0], false);
changeDOMVisible(trackElement, false);
}

@@ -82,3 +96,3 @@ });

el.appendChild(trackEl);
return [trackEl, thumbEl];
return trackEl;
}

@@ -85,0 +99,0 @@ function calcBarXorY(scrollViewXOrY, wrapSize, contentSize, maxXorY, minXorY, thumbMinXOrY, thumbMaxXOrY) {

@@ -1,2 +0,2 @@

"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)}))};
"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)}))}))};
//# sourceMappingURL=index.js.map
{
"name": "@any-scroll/bar",
"version": "0.2.3",
"version": "0.2.4",
"description": "虚拟滚动",

@@ -24,3 +24,4 @@ "unpkg": "dist/any-scroll.js",

"dependencies": {
"@any-scroll/shared": "^0.2.3",
"@any-scroll/shared": "^0.2.4",
"any-touch": "2.0.0-alpha.4",
"insert-css": "^2.0.0",

@@ -42,3 +43,3 @@ "lodash": "^4.17.15",

"sideEffects": false,
"gitHead": "9b354b5b897d74ceb98b9b75a77bb7446510f3d6"
"gitHead": "b8784f0c4e24d97995624bf3d387cc116d306891"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc