@rp3e11/ngx-slider
Version:
Self-contained, mobile friendly slider component for Angular 13 based on angularjs-slider
70 lines • 11.3 kB
JavaScript
import { Subject } from 'rxjs';
import { throttleTime, tap } from 'rxjs/operators';
import detectPassiveEvents from 'detect-passive-events';
import { EventListener } from './event-listener';
import { ValueHelper } from './value-helper';
/**
* Helper class to attach event listeners to DOM elements with debounce support using rxjs
*/
export class EventListenerHelper {
constructor(renderer) {
this.renderer = renderer;
}
attachPassiveEventListener(nativeElement, eventName, callback, throttleInterval) {
// Only use passive event listeners if the browser supports it
if (detectPassiveEvents.hasSupport !== true) {
return this.attachEventListener(nativeElement, eventName, callback, throttleInterval);
}
// Angular doesn't support passive event handlers (yet), so we need to roll our own code using native functions
const listener = new EventListener();
listener.eventName = eventName;
listener.events = new Subject();
const observerCallback = (event) => {
listener.events.next(event);
};
nativeElement.addEventListener(eventName, observerCallback, { passive: true, capture: false });
listener.teardownCallback = () => {
nativeElement.removeEventListener(eventName, observerCallback, { passive: true, capture: false });
};
listener.eventsSubscription = listener.events
.pipe((!ValueHelper.isNullOrUndefined(throttleInterval))
? throttleTime(throttleInterval, undefined, { leading: true, trailing: true })
: tap(() => { }) // no-op
)
.subscribe((event) => {
callback(event);
});
return listener;
}
detachEventListener(eventListener) {
if (!ValueHelper.isNullOrUndefined(eventListener.eventsSubscription)) {
eventListener.eventsSubscription.unsubscribe();
eventListener.eventsSubscription = null;
}
if (!ValueHelper.isNullOrUndefined(eventListener.events)) {
eventListener.events.complete();
eventListener.events = null;
}
if (!ValueHelper.isNullOrUndefined(eventListener.teardownCallback)) {
eventListener.teardownCallback();
eventListener.teardownCallback = null;
}
}
attachEventListener(nativeElement, eventName, callback, throttleInterval) {
const listener = new EventListener();
listener.eventName = eventName;
listener.events = new Subject();
const observerCallback = (event) => {
listener.events.next(event);
};
listener.teardownCallback = this.renderer.listen(nativeElement, eventName, observerCallback);
listener.eventsSubscription = listener.events
.pipe((!ValueHelper.isNullOrUndefined(throttleInterval))
? throttleTime(throttleInterval, undefined, { leading: true, trailing: true })
: tap(() => { }) // no-op
)
.subscribe((event) => { callback(event); });
return listener;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXZlbnQtbGlzdGVuZXItaGVscGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL25neC1zbGlkZXIvbGliL2V2ZW50LWxpc3RlbmVyLWhlbHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxZQUFZLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxtQkFBbUIsTUFBTSx1QkFBdUIsQ0FBQztBQUV4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDakQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDOztHQUVHO0FBQ0gsTUFBTSxPQUFPLG1CQUFtQjtJQUM5QixZQUFvQixRQUFtQjtRQUFuQixhQUFRLEdBQVIsUUFBUSxDQUFXO0lBQ3ZDLENBQUM7SUFFTSwwQkFBMEIsQ0FBQyxhQUFrQixFQUFFLFNBQWlCLEVBQUUsUUFBOEIsRUFDbkcsZ0JBQXlCO1FBQzNCLDhEQUE4RDtRQUM5RCxJQUFJLG1CQUFtQixDQUFDLFVBQVUsS0FBSyxJQUFJLEVBQUU7WUFDM0MsT0FBTyxJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztTQUN2RjtRQUVELCtHQUErRztRQUMvRyxNQUFNLFFBQVEsR0FBa0IsSUFBSSxhQUFhLEVBQUUsQ0FBQztRQUNwRCxRQUFRLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztRQUMvQixRQUFRLENBQUMsTUFBTSxHQUFHLElBQUksT0FBTyxFQUFTLENBQUM7UUFFdkMsTUFBTSxnQkFBZ0IsR0FBMkIsQ0FBQyxLQUFZLEVBQVEsRUFBRTtZQUN0RSxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QixDQUFDLENB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QyxDQUFDLEtBQVksRUFBRSxFQUFFLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFckQsT0FBTyxRQUFRLENBQUM7SUFDbEIsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0aHJvdHRsZVRpbWUsIHRhcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCBkZXRlY3RQYXNzaXZlRXZlbnRzIGZyb20gJ2RldGVjdC1wYXNzaXZlLWV2ZW50cyc7XG5cbmltcG9ydCB7IEV2ZW50TGlzdGVuZXIgfSBmcm9tICcuL2V2ZW50LWxpc3RlbmVyJztcbmltcG9ydCB7IFZhbHVlSGVscGVyIH0gZnJvbSAnLi92YWx1ZS1oZWxwZXInO1xuXG4vKipcbiAqIEhlbHBlciBjbGFzcyB0byBhdHRhY2ggZXZlbnQgbGlzdGVuZXJzIHRvIERPTSBlbGVtZW50cyB3aXRoIGRlYm91bmNlIHN1cHBvcnQgdXNpbmcgcnhqc1xuICovXG5leHBvcnQgY2xhc3MgRXZlbnRMaXN0ZW5lckhlbHBlciB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xuICB9XG5cbiAgcHVibGljIGF0dGFjaFBhc3NpdmVFdmVudExpc3RlbmVyKG5hdGl2ZUVsZW1lbnQ6IGFueSwgZXZlbnROYW1lOiBzdHJpbmcsIGNhbGxiYWNrOiAoZXZlbnQ6IGFueSkgPT4gdm9pZCxcbiAgICAgIHRocm90dGxlSW50ZXJ2YWw/OiBudW1iZXIpOiBFdmVudExpc3RlbmVyIHtcbiAgICAvLyBPbmx5IHVzZSBwYXNzaXZlIGV2ZW50IGxpc3RlbmVycyBpZiB0aGUgYnJvd3NlciBzdXBwb3J0cyBpdFxuICAgIGlmIChkZXRlY3RQYXNzaXZlRXZlbnRzLmhhc1N1cHBvcnQgIT09IHRydWUpIHtcbiAgICAgIHJldHVybiB0aGlzLmF0dGFjaEV2ZW50TGlzdGVuZXIobmF0aXZlRWxlbWVudCwgZXZlbnROYW1lLCBjYWxsYmFjaywgdGhyb3R0bGVJbnRlcnZhbCk7XG4gICAgfVxuXG4gICAgLy8gQW5ndWxhciBkb2Vzbid0IHN1cHBvcnQgcGFzc2l2ZSBldmVudCBoYW5kbGVycyAoeWV0KSwgc28gd2UgbmVlZCB0byByb2xsIG91ciBvd24gY29kZSB1c2luZyBuYXRpdmUgZnVuY3Rpb25zXG4gICAgY29uc3QgbGlzdGVuZXI6IEV2ZW50TGlzdGVuZXIgPSBuZXcgRXZlbnRMaXN0ZW5lcigpO1xuICAgIGxpc3RlbmVyLmV2ZW50TmFtZSA9IGV2ZW50TmFtZTtcbiAgICBsaXN0ZW5lci5ldmVudHMgPSBuZXcgU3ViamVjdDxFdmVudD4oKTtcblxuICAgIGNvbnN0IG9ic2VydmVyQ2FsbGJhY2s6IChldmVudDogRXZlbnQpID0+IHZvaWQgPSAoZXZlbnQ6IEV2ZW50KTogdm9pZCA9PiB7XG4gICAgICBsaXN0ZW5lci5ldmVudHMubmV4dChldmVudCk7XG4gICAgfTtcbiAgICBuYXRpdmVFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoZXZlbnROYW1lLCBvYnNlcnZlckNhbGxiYWNrLCB7cGFzc2l2ZTogdHJ1ZSwgY2FwdHVyZTogZmFsc2V9KTtcblxuICAgIGxpc3RlbmVyLnRlYXJkb3duQ2FsbGJhY2sgPSAoKTogdm9pZCA9PiB7XG4gICAgICBuYXRpdmVFbGVtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoZXZlbnROYW1lLCBvYnNlcnZlckNhbGxiYWNrLCB7cGFzc2l2ZTogdHJ1ZSwgY2FwdHVyZTogZmFsc2V9KTtcbiAgICB9O1xuXG4gICAgbGlzdGVuZXIuZXZlbnRzU3Vic2NyaXB0aW9uID0gbGlzdGVuZXIuZXZlbnRzXG4gICAgICAucGlwZSgoIVZhbHVlSGVscGVyLmlzTnVsbE9yVW5kZWZpbmVkKHRocm90dGxlSW50ZXJ2YWwpKVxuICAgICAgICA/IHRocm90dGxlVGltZSh0aHJvdHRsZUludGVydmFsLCB1bmRlZmluZWQsIHsgbGVhZGluZzogdHJ1ZSwgdHJhaWxpbmc6IHRydWV9KVxuICAgICAgICA6IHRhcCgoKSA9PiB7fSkgLy8gbm8tb3BcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKGV2ZW50OiBFdmVudCkgPT4ge1xuICAgICAgICBjYWxsYmFjayhldmVudCk7XG4gICAgICB9KTtcblxuICAgIHJldHVybiBsaXN0ZW5lcjtcbiAgfVxuXG4gIHB1YmxpYyBkZXRhY2hFdmVudExpc3RlbmVyKGV2ZW50TGlzdGVuZXI6IEV2ZW50TGlzdGVuZXIpOiB2b2lkIHtcbiAgICBpZiAoIVZhbHVlSGVscGVyLmlzTnVsbE9yVW5kZWZpbmVkKGV2ZW50TGlzdGVuZXIuZXZlbnRzU3Vic2NyaXB0aW9uKSkge1xuICAgICAgZXZlbnRMaXN0ZW5lci5ldmVudHNTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICAgIGV2ZW50TGlzdGVuZXIuZXZlbnRzU3Vic2NyaXB0aW9uID0gbnVsbDtcbiAgICB9XG5cbiAgICBpZiAoIVZhbHVlSGVscGVyLmlzTnVsbE9yVW5kZWZpbmVkKGV2ZW50TGlzdGVuZXIuZXZlbnRzKSkge1xuICAgICAgZXZlbnRMaXN0ZW5lci5ldmVudHMuY29tcGxldGUoKTtcbiAgICAgIGV2ZW50TGlzdGVuZXIuZXZlbnRzID0gbnVsbDtcbiAgICB9XG5cbiAgICBpZiAoIVZhbHVlSGVscGVyLmlzTnVsbE9yVW5kZWZpbmVkKGV2ZW50TGlzdGVuZXIudGVhcmRvd25DYWxsYmFjaykpIHtcbiAgICAgIGV2ZW50TGlzdGVuZXIudGVhcmRvd25DYWxsYmFjaygpO1xuICAgICAgZXZlbnRMaXN0ZW5lci50ZWFyZG93bkNhbGxiYWNrID0gbnVsbDtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgYXR0YWNoRXZlbnRMaXN0ZW5lcihuYXRpdmVFbGVtZW50OiBhbnksIGV2ZW50TmFtZTogc3RyaW5nLCBjYWxsYmFjazogKGV2ZW50OiBhbnkpID0+IHZvaWQsXG4gICAgICB0aHJvdHRsZUludGVydmFsPzogbnVtYmVyKTogRXZlbnRMaXN0ZW5lciB7XG4gICAgY29uc3QgbGlzdGVuZXI6IEV2ZW50TGlzdGVuZXIgPSBuZXcgRXZlbnRMaXN0ZW5lcigpO1xuICAgIGxpc3RlbmVyLmV2ZW50TmFtZSA9IGV2ZW50TmFtZTtcbiAgICBsaXN0ZW5lci5ldmVudHMgPSBuZXcgU3ViamVjdDxFdmVudD4oKTtcblxuICAgIGNvbnN0IG9ic2VydmVyQ2FsbGJhY2s6IChldmVudDogRXZlbnQpID0+IHZvaWQgPSAoZXZlbnQ6IEV2ZW50KTogdm9pZCA9PiB7XG4gICAgICBsaXN0ZW5lci5ldmVudHMubmV4dChldmVudCk7XG4gICAgfTtcblxuICAgIGxpc3RlbmVyLnRlYXJkb3duQ2FsbGJhY2sgPSB0aGlzLnJlbmRlcmVyLmxpc3RlbihuYXRpdmVFbGVtZW50LCBldmVudE5hbWUsIG9ic2VydmVyQ2FsbGJhY2spO1xuXG4gICAgbGlzdGVuZXIuZXZlbnRzU3Vic2NyaXB0aW9uID0gbGlzdGVuZXIuZXZlbnRzXG4gICAgICAucGlwZSgoIVZhbHVlSGVscGVyLmlzTnVsbE9yVW5kZWZpbmVkKHRocm90dGxlSW50ZXJ2YWwpKVxuICAgICAgICAgID8gdGhyb3R0bGVUaW1lKHRocm90dGxlSW50ZXJ2YWwsIHVuZGVmaW5lZCwgeyBsZWFkaW5nOiB0cnVlLCB0cmFpbGluZzogdHJ1ZX0pXG4gICAgICAgICAgOiB0YXAoKCkgPT4ge30pIC8vIG5vLW9wXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKChldmVudDogRXZlbnQpID0+IHsgY2FsbGJhY2soZXZlbnQpOyB9KTtcblxuICAgIHJldHVybiBsaXN0ZW5lcjtcbiAgfVxufVxuIl19