@bimeister/pupakit.kit
Version:
PupaKit is an open source collection of Angular components based on an atomic approach to building interfaces, which guarantees better performance and greater development flexibility.
55 lines • 10.5 kB
JavaScript
import { distinctUntilSerializedChanged, isEqual, shareReplayWithRefCount } from '@bimeister/utilities';
import { BehaviorSubject, combineLatest } from 'rxjs';
import { map, take } from 'rxjs/operators';
import '../interfaces/scroll-bar-sizes.interface';
export class Scrollbar {
constructor() {
this.lastSizes = null;
this.sizePx$ = new BehaviorSubject(0);
this.contentSizePx$ = new BehaviorSubject(0);
this.contentScrollSizePx$ = new BehaviorSubject(0);
this.contentScrollOffsetPx$ = new BehaviorSubject(0);
this.thumbSizePx$ = combineLatest([
this.contentSizePx$,
this.sizePx$,
this.contentScrollSizePx$,
]).pipe(distinctUntilSerializedChanged(), map(([contentSizePx, sizePx, contentScrollSizePx]) => {
const realThumbSizePx = (contentSizePx * sizePx) / contentScrollSizePx;
return realThumbSizePx < Scrollbar.maxSizePx ? Scrollbar.maxSizePx : realThumbSizePx;
}), shareReplayWithRefCount());
this.thumbOffsetPx$ = combineLatest([
this.contentScrollOffsetPx$,
this.contentScrollSizePx$,
this.contentSizePx$,
this.sizePx$,
this.thumbSizePx$,
]).pipe(distinctUntilSerializedChanged(), map(([contentScrollOffsetPx, contentScrollSizePx, contentSizePx, sizePx, thumbSizePx]) => {
const maxContentScrollOffsetPx = contentScrollSizePx - contentSizePx;
const contentScrollOffsetPercentage = (contentScrollOffsetPx / maxContentScrollOffsetPx) * 100;
const thumbMaxOffsetPx = sizePx - thumbSizePx;
return (contentScrollOffsetPercentage / 100) * thumbMaxOffsetPx;
}), shareReplayWithRefCount());
}
setSizes(sizes) {
if (isEqual(this.lastSizes, sizes)) {
return;
}
this.lastSizes = sizes;
this.sizePx$.next(sizes.scrollbarSizePx);
this.contentSizePx$.next(sizes.contentSizePx);
this.contentScrollSizePx$.next(sizes.contentScrollSizePx);
}
setContentScrollOffset(contentScrollOffsetPx) {
this.contentScrollOffsetPx$.next(contentScrollOffsetPx);
}
getContentScrollOffsetByScrollbarThumbDeltaOffset(deltaPx) {
return combineLatest([this.sizePx$, this.thumbSizePx$, this.contentScrollSizePx$, this.contentSizePx$]).pipe(take(1), map(([sizePx, thumbSizePx, contentScrollSizePx, contentSizePx]) => {
const thumbMaxOffsetPx = sizePx - thumbSizePx;
const deltaPercentage = (deltaPx / thumbMaxOffsetPx) * 100;
const maxContentScrollOffsetPx = contentScrollSizePx - contentSizePx;
return (deltaPercentage / 100) * maxContentScrollOffsetPx;
}));
}
}
Scrollbar.maxSizePx = 32;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsYmFyLmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2RlY2xhcmF0aW9ucy9jbGFzc2VzL3Njcm9sbGJhci5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsOEJBQThCLEVBQUUsT0FBTyxFQUFZLHVCQUF1QixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDbEgsT0FBTyxFQUFFLGVBQWUsRUFBRSxhQUFhLEVBQWMsTUFBTSxNQUFNLENBQUM7QUFDbEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUErQiwwQ0FBMEMsQ0FBQztBQUUxRSxNQUFNLE9BQU8sU0FBUztJQUF0QjtRQUNVLGNBQVMsR0FBNkIsSUFBSSxDQUFDO1FBRWxDLFlBQU8sR0FBNEIsSUFBSSxlQUFlLENBQVMsQ0FBQyxDQUFDLENBQUM7UUFDbEUsbUJBQWMsR0FBNEIsSUFBSSxlQUFlLENBQVMsQ0FBQyxDQUFDLENBQUM7UUFDekUseUJBQW9CLEdBQTRCLElBQUksZUFBZSxDQUFTLENBQUMsQ0FBQyxDQUFDO1FBRS9FLDJCQUFzQixHQUE0QixJQUFJLGVBQWUsQ0FBUyxDQUFDLENBQUMsQ0FBQztRQUVsRixpQkFBWSxHQUF1QixhQUFhLENBQUM7WUFDL0QsSUFBSSxDQUFDLGNBQWM7WUFDbkIsSUFBSSxDQUFDLE9BQU87WUFDWixJQUFJLENBQUMsb0JBQW9CO1NBQzFCLENBQUMsQ0FBQyxJQUFJLENBQ0wsOEJBQThCLEVBQUUsRUFDaEMsR0FBRyxDQUFDLENBQUMsQ0FBQyxhQUFhLEVBQUUsTUFBTSxFQUFFLG1CQUFtQixDQUEyQixFQUFFLEVBQUU7WUFDN0UsTUFBTSxlQUFlLEdBQVcsQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLEdBQUcsbUJBQW1CLENBQUM7WUFDL0UsT0FBTyxlQUFlLEdBQUcsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDO1FBQ3ZGLENBQUMsQ0FBQyxFQUNGLHVCQUF1QixFQUFFLENBQzFCLENBQUM7UUFFYyxtQkFBYyxHQUF1QixhQUFhLENBQUM7WUFDakUsSUFBSSxDQUFDLHNCQUFzQjtZQUMzQixJQUFJLENBQUMsb0JBQW9CO1lBQ3pCLElBQUksQ0FBQyxjQUFjO1lBQ25CLElBQUksQ0FBQyxPQUFPO1lBQ1osSUFBSSxDQUFDLFlBQVk7U0FDbEIsQ0FBQyxDQUFDLElBQUksQ0FDTCw4QkFBOEIsRUFBRSxFQUNoQyxHQUFHLENBQ0QsQ0FBQyxDQUFDLHFCQUFxQixFQUFFLG1CQUFtQixFQUFFLGFBQWEsRUFBRSxNQUFNLEVBQUUsV0FBVyxDQU0vRSxFQUFFLEVBQUU7WUFDSCxNQUFNLHdCQUF3QixHQUFXLG1CQUFtQixHQUFHLGFBQWEsQ0FBQztZQUM3RSxNQUFNLDZCQUE2QixHQUFXLENBQUMscUJBQXFCLEdBQUcsd0JBQXdCLENBQUMsR0FBRyxHQUFHLENBQUM7WUFFdkcsTUFBTSxnQkFBZ0IsR0FBVyxNQUFNLEdBQUcsV0FBVyxDQUFDO1lBQ3RELE9BQU8sQ0FBQyw2QkFBNkIsR0FBRyxHQUFHLENBQUMsR0FBRyxnQkFBZ0IsQ0FBQztRQUNsRSxDQUFDLENBQ0YsRUFDRCx1QkFBdUIsRUFBRSxDQUMxQixDQUFDO0lBNkJKLENBQUM7SUF6QlEsUUFBUSxDQUFDLEtBQXFCO1FBQ25DLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLEVBQUU7WUFDbEMsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLGVBQWUsQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM5QyxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFTSxzQkFBc0IsQ0FBQyxxQkFBNkI7UUFDekQsSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFTSxpREFBaUQsQ0FBQyxPQUFlO1FBQ3RFLE9BQU8sYUFBYSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQzFHLElBQUksQ0FBQyxDQUFDLENBQUMsRUFDUCxHQUFHLENBQUMsQ0FBQyxDQUFDLE1BQU0sRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUUsYUFBYSxDQUFtQyxFQUFFLEVBQUU7WUFDbEcsTUFBTSxnQkFBZ0IsR0FBVyxNQUFNLEdBQUcsV0FBVyxDQUFDO1lBQ3RELE1BQU0sZUFBZSxHQUFXLENBQUMsT0FBTyxHQUFHLGdCQUFnQixDQUFDLEdBQUcsR0FBRyxDQUFDO1lBQ25FLE1BQU0sd0JBQXdCLEdBQVcsbUJBQW1CLEdBQUcsYUFBYSxDQUFDO1lBQzdFLE9BQU8sQ0FBQyxlQUFlLEdBQUcsR0FBRyxDQUFDLEdBQUcsd0JBQXdCLENBQUM7UUFDNUQsQ0FBQyxDQUFDLENBQ0gsQ0FBQztJQUNKLENBQUM7O0FBMUJ1QixtQkFBUyxHQUFXLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGRpc3RpbmN0VW50aWxTZXJpYWxpemVkQ2hhbmdlZCwgaXNFcXVhbCwgTnVsbGFibGUsIHNoYXJlUmVwbGF5V2l0aFJlZkNvdW50IH0gZnJvbSAnQGJpbWVpc3Rlci91dGlsaXRpZXMnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBjb21iaW5lTGF0ZXN0LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAsIHRha2UgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBTY3JvbGxCYXJTaXplcyB9IGZyb20gJy4uL2ludGVyZmFjZXMvc2Nyb2xsLWJhci1zaXplcy5pbnRlcmZhY2UnO1xuXG5leHBvcnQgY2xhc3MgU2Nyb2xsYmFyIHtcbiAgcHJpdmF0ZSBsYXN0U2l6ZXM6IE51bGxhYmxlPFNjcm9sbEJhclNpemVzPiA9IG51bGw7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBzaXplUHgkOiBCZWhhdmlvclN1YmplY3Q8bnVtYmVyPiA9IG5ldyBCZWhhdmlvclN1YmplY3Q8bnVtYmVyPigwKTtcbiAgcHJpdmF0ZSByZWFkb25seSBjb250ZW50U2l6ZVB4JDogQmVoYXZpb3JTdWJqZWN0PG51bWJlcj4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0PG51bWJlcj4oMCk7XG4gIHByaXZhdGUgcmVhZG9ubHkgY29udGVudFNjcm9sbFNpemVQeCQ6IEJlaGF2aW9yU3ViamVjdDxudW1iZXI+ID0gbmV3IEJlaGF2aW9yU3ViamVjdDxudW1iZXI+KDApO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgY29udGVudFNjcm9sbE9mZnNldFB4JDogQmVoYXZpb3JTdWJqZWN0PG51bWJlcj4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0PG51bWJlcj4oMCk7XG5cbiAgcHVibGljIHJlYWRvbmx5IHRodW1iU2l6ZVB4JDogT2JzZXJ2YWJsZTxudW1iZXI+ID0gY29tYmluZUxhdGVzdChbXG4gICAgdGhpcy5jb250ZW50U2l6ZVB4JCxcbiAgICB0aGlzLnNpemVQeCQsXG4gICAgdGhpcy5jb250ZW50U2Nyb2xsU2l6ZVB4JCxcbiAgXSkucGlwZShcbiAgICBkaXN0aW5jdFVudGlsU2VyaWFsaXplZENoYW5nZWQoKSxcbiAgICBtYXAoKFtjb250ZW50U2l6ZVB4LCBzaXplUHgsIGNvbnRlbnRTY3JvbGxTaXplUHhdOiBbbnVtYmVyLCBudW1iZXIsIG51bWJlcl0pID0+IHtcbiAgICAgIGNvbnN0IHJlYWxUaHVtYlNpemVQeDogbnVtYmVyID0gKGNvbnRlbnRTaXplUHggKiBzaXplUHgpIC8gY29udGVudFNjcm9sbFNpemVQeDtcbiAgICAgIHJldHVybiByZWFsVGh1bWJTaXplUHggPCBTY3JvbGxiYXIubWF4U2l6ZVB4ID8gU2Nyb2xsYmFyLm1heFNpemVQeCA6IHJlYWxUaHVtYlNpemVQeDtcbiAgICB9KSxcbiAgICBzaGFyZVJlcGxheVdpdGhSZWZDb3VudCgpXG4gICk7XG5cbiAgcHVibGljIHJlYWRvbmx5IHRodW1iT2Zmc2V0UHgkOiBPYnNlcnZhYmxlPG51bWJlcj4gPSBjb21iaW5lTGF0ZXN0KFtcbiAgICB0aGlzLmNvbnRlbnRTY3JvbGxPZmZzZXRQeCQsXG4gICAgdGhpcy5jb250ZW50U2Nyb2xsU2l6ZVB4JCxcbiAgICB0aGlzLmNvbnRlbnRTaXplUHgkLFxuICAgIHRoaXMuc2l6ZVB4JCxcbiAgICB0aGlzLnRodW1iU2l6ZVB4JCxcbiAgXSkucGlwZShcbiAgICBkaXN0aW5jdFVudGlsU2VyaWFsaXplZENoYW5nZWQoKSxcbiAgICBtYXAoXG4gICAgICAoW2NvbnRlbnRTY3JvbGxPZmZzZXRQeCwgY29udGVudFNjcm9sbFNpemVQeCwgY29udGVudFNpemVQeCwgc2l6ZVB4LCB0aHVtYlNpemVQeF06IFtcbiAgICAgICAgbnVtYmVyLFxuICAgICAgICBudW1iZXIsXG4gICAgICAgIG51bWJlcixcbiAgICAgICAgbnVtYmVyLFxuICAgICAgICBudW1iZXJcbiAgICAgIF0pID0+IHtcbiAgICAgICAgY29uc3QgbWF4Q29udGVudFNjcm9sbE9mZnNldFB4OiBudW1iZXIgPSBjb250ZW50U2Nyb2xsU2l6ZVB4IC0gY29udGVudFNpemVQeDtcbiAgICAgICAgY29uc3QgY29udGVudFNjcm9sbE9mZnNldFBlcmNlbnRhZ2U6IG51bWJlciA9IChjb250ZW50U2Nyb2xsT2Zmc2V0UHggLyBtYXhDb250ZW50U2Nyb2xsT2Zmc2V0UHgpICogMTAwO1xuXG4gICAgICAgIGNvbnN0IHRodW1iTWF4T2Zmc2V0UHg6IG51bWJlciA9IHNpemVQeCAtIHRodW1iU2l6ZVB4O1xuICAgICAgICByZXR1cm4gKGNvbnRlbnRTY3JvbGxPZmZzZXRQZXJjZW50YWdlIC8gMTAwKSAqIHRodW1iTWF4T2Zmc2V0UHg7XG4gICAgICB9XG4gICAgKSxcbiAgICBzaGFyZVJlcGxheVdpdGhSZWZDb3VudCgpXG4gICk7XG5cbiAgcHJpdmF0ZSBzdGF0aWMgcmVhZG9ubHkgbWF4U2l6ZVB4OiBudW1iZXIgPSAzMjtcblxuICBwdWJsaWMgc2V0U2l6ZXMoc2l6ZXM6IFNjcm9sbEJhclNpemVzKTogdm9pZCB7XG4gICAgaWYgKGlzRXF1YWwodGhpcy5sYXN0U2l6ZXMsIHNpemVzKSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmxhc3RTaXplcyA9IHNpemVzO1xuICAgIHRoaXMuc2l6ZVB4JC5uZXh0KHNpemVzLnNjcm9sbGJhclNpemVQeCk7XG4gICAgdGhpcy5jb250ZW50U2l6ZVB4JC5uZXh0KHNpemVzLmNvbnRlbnRTaXplUHgpO1xuICAgIHRoaXMuY29udGVudFNjcm9sbFNpemVQeCQubmV4dChzaXplcy5jb250ZW50U2Nyb2xsU2l6ZVB4KTtcbiAgfVxuXG4gIHB1YmxpYyBzZXRDb250ZW50U2Nyb2xsT2Zmc2V0KGNvbnRlbnRTY3JvbGxPZmZzZXRQeDogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy5jb250ZW50U2Nyb2xsT2Zmc2V0UHgkLm5leHQoY29udGVudFNjcm9sbE9mZnNldFB4KTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRDb250ZW50U2Nyb2xsT2Zmc2V0QnlTY3JvbGxiYXJUaHVtYkRlbHRhT2Zmc2V0KGRlbHRhUHg6IG51bWJlcik6IE9ic2VydmFibGU8bnVtYmVyPiB7XG4gICAgcmV0dXJuIGNvbWJpbmVMYXRlc3QoW3RoaXMuc2l6ZVB4JCwgdGhpcy50aHVtYlNpemVQeCQsIHRoaXMuY29udGVudFNjcm9sbFNpemVQeCQsIHRoaXMuY29udGVudFNpemVQeCRdKS5waXBlKFxuICAgICAgdGFrZSgxKSxcbiAgICAgIG1hcCgoW3NpemVQeCwgdGh1bWJTaXplUHgsIGNvbnRlbnRTY3JvbGxTaXplUHgsIGNvbnRlbnRTaXplUHhdOiBbbnVtYmVyLCBudW1iZXIsIG51bWJlciwgbnVtYmVyXSkgPT4ge1xuICAgICAgICBjb25zdCB0aHVtYk1heE9mZnNldFB4OiBudW1iZXIgPSBzaXplUHggLSB0aHVtYlNpemVQeDtcbiAgICAgICAgY29uc3QgZGVsdGFQZXJjZW50YWdlOiBudW1iZXIgPSAoZGVsdGFQeCAvIHRodW1iTWF4T2Zmc2V0UHgpICogMTAwO1xuICAgICAgICBjb25zdCBtYXhDb250ZW50U2Nyb2xsT2Zmc2V0UHg6IG51bWJlciA9IGNvbnRlbnRTY3JvbGxTaXplUHggLSBjb250ZW50U2l6ZVB4O1xuICAgICAgICByZXR1cm4gKGRlbHRhUGVyY2VudGFnZSAvIDEwMCkgKiBtYXhDb250ZW50U2Nyb2xsT2Zmc2V0UHg7XG4gICAgICB9KVxuICAgICk7XG4gIH1cbn1cbiJdfQ==