ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
46 lines • 6.25 kB
JavaScript
import { Directive, HostListener } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { SyncScrollModel } from '../_models/sync-scroll.model';
import * as i0 from "@angular/core";
import * as i1 from "../_services/sync-scroll.service";
export class SyncScrollDirective {
constructor(el, syncScrollService) {
this.el = el;
this.syncScrollService = syncScrollService;
this.curSync = new SyncScrollModel();
this.onDestroy$ = new Subject();
this.syncScrollService.onNewScrollX()
.pipe(takeUntil(this.onDestroy$))
// .pipe(debounceTime(40)) // TODO: evaluate whether to debounce or not
.subscribe((x) => {
this.curSync = x;
this.el.nativeElement.scrollLeft = x.absX;
});
}
onScroll(e) {
// only broadcast event if different scroll (to prevent slave components from also firing an update)
if (e.target.scrollLeft !== this.curSync?.absX) {
this.syncScrollService.newScrollX({
absX: e.target.scrollLeft,
relX: e.target.scrollLeft / e.target.scrollWidth,
ratioVisible: e.target.clientWidth / e.target.scrollWidth,
});
}
}
ngOnDestroy() {
this.onDestroy$.next();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SyncScrollDirective, deps: [{ token: i0.ElementRef }, { token: i1.SyncScrollService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SyncScrollDirective, selector: "[spaasSyncScroll]", host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SyncScrollDirective, decorators: [{
type: Directive,
args: [{
selector: '[spaasSyncScroll]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SyncScrollService }], propDecorators: { onScroll: [{
type: HostListener,
args: ['scroll', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3luYy1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvX2RpcmVjdGl2ZXMvc3luYy1zY3JvbGwuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWMsWUFBWSxFQUFZLE1BQU0sZUFBZSxDQUFDO0FBQzdFLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDN0IsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBRXpDLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQzs7O0FBSzdELE1BQU0sT0FBTyxtQkFBbUI7SUFNOUIsWUFDVSxFQUFjLEVBQ2QsaUJBQW9DO1FBRHBDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBTnRDLFlBQU8sR0FBRyxJQUFJLGVBQWUsRUFBRSxDQUFDO1FBRWhDLGVBQVUsR0FBa0IsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQU10RCxJQUFJLENBQUMsaUJBQWlCLENBQUMsWUFBWSxFQUFFO2FBQ2xDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBQ2pDLHVFQUF1RTthQUN0RSxTQUFTLENBQ1IsQ0FBQyxDQUFDLEVBQUUsRUFBRTtZQUNKLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDO1lBQ2pCLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQzVDLENBQUMsQ0FDRixDQUFDO0lBQ04sQ0FBQztJQUVtQyxRQUFRLENBQUMsQ0FBTTtRQUNqRCxvR0FBb0c7UUFDcEcsSUFBSSxDQUFDLENBQUMsTUFBTSxDQUFDLFVBQVUsS0FBSyxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO1lBQy9DLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxVQUFVLENBQUM7Z0JBQ2hDLElBQUksRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLFVBQVU7Z0JBQ3pCLElBQUksRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLFdBQVc7Z0JBQ2hELFlBQVksRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLFdBQVc7YUFDMUQsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QixDQUFDOytHQWxDVSxtQkFBbUI7bUdBQW5CLG1CQUFtQjs7NEZBQW5CLG1CQUFtQjtrQkFIL0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO2lCQUM5QjsrR0FzQnFDLFFBQVE7c0JBQTNDLFlBQVk7dUJBQUMsUUFBUSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgT25EZXN0cm95fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtTdWJqZWN0fSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHt0YWtlVW50aWx9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHtTeW5jU2Nyb2xsU2VydmljZX0gZnJvbSAnLi4vX3NlcnZpY2VzL3N5bmMtc2Nyb2xsLnNlcnZpY2UnO1xyXG5pbXBvcnQge1N5bmNTY3JvbGxNb2RlbH0gZnJvbSAnLi4vX21vZGVscy9zeW5jLXNjcm9sbC5tb2RlbCc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tzcGFhc1N5bmNTY3JvbGxdJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU3luY1Njcm9sbERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XHJcblxyXG4gIHByaXZhdGUgY3VyU3luYyA9IG5ldyBTeW5jU2Nyb2xsTW9kZWwoKTtcclxuXHJcbiAgcHJpdmF0ZSBvbkRlc3Ryb3kkOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmLFxyXG4gICAgcHJpdmF0ZSBzeW5jU2Nyb2xsU2VydmljZTogU3luY1Njcm9sbFNlcnZpY2UsXHJcbiAgKSB7XHJcbiAgICB0aGlzLnN5bmNTY3JvbGxTZXJ2aWNlLm9uTmV3U2Nyb2xsWCgpXHJcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLm9uRGVzdHJveSQpKVxyXG4gICAgICAvLyAucGlwZShkZWJvdW5jZVRpbWUoNDApKSAvLyBUT0RPOiBldmFsdWF0ZSB3aGV0aGVyIHRvIGRlYm91bmNlIG9yIG5vdFxyXG4gICAgICAuc3Vic2NyaWJlKFxyXG4gICAgICAgICh4KSA9PiB7XHJcbiAgICAgICAgICB0aGlzLmN1clN5bmMgPSB4O1xyXG4gICAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnNjcm9sbExlZnQgPSB4LmFic1g7XHJcbiAgICAgICAgfVxyXG4gICAgICApO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignc2Nyb2xsJywgWyckZXZlbnQnXSkgb25TY3JvbGwoZTogYW55KSB7XHJcbiAgICAvLyBvbmx5IGJyb2FkY2FzdCBldmVudCBpZiBkaWZmZXJlbnQgc2Nyb2xsICh0byBwcmV2ZW50IHNsYXZlIGNvbXBvbmVudHMgZnJvbSBhbHNvIGZpcmluZyBhbiB1cGRhdGUpXHJcbiAgICBpZiAoZS50YXJnZXQuc2Nyb2xsTGVmdCAhPT0gdGhpcy5jdXJTeW5jPy5hYnNYKSB7XHJcbiAgICAgIHRoaXMuc3luY1Njcm9sbFNlcnZpY2UubmV3U2Nyb2xsWCh7XHJcbiAgICAgICAgYWJzWDogZS50YXJnZXQuc2Nyb2xsTGVmdCxcclxuICAgICAgICByZWxYOiBlLnRhcmdldC5zY3JvbGxMZWZ0IC8gZS50YXJnZXQuc2Nyb2xsV2lkdGgsXHJcbiAgICAgICAgcmF0aW9WaXNpYmxlOiBlLnRhcmdldC5jbGllbnRXaWR0aCAvIGUudGFyZ2V0LnNjcm9sbFdpZHRoLFxyXG4gICAgICB9KTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgdGhpcy5vbkRlc3Ryb3kkLm5leHQoKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==