screen-size.service.mjs 5.5 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { DestroyRef, Injectable, inject } from '@angular/core';
  2. import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  3. import { BehaviorSubject, fromEvent } from 'rxjs';
  4. import { debounceTime, distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
  5. import * as i0 from "@angular/core";
  6. export class ScreenSizeService {
  7. constructor() {
  8. this.destroyRef = inject(DestroyRef);
  9. this.screenSizeSubject = new BehaviorSubject(this.getScreenSize());
  10. this.screenSize$ = this.screenSizeSubject.asObservable();
  11. fromEvent(window, 'resize')
  12. .pipe(distinctUntilChanged(), debounceTime(200), map(() => this.getScreenSize()), startWith(this.getScreenSize()), tap(() => console.log('test updated')), takeUntilDestroyed(this.destroyRef))
  13. .subscribe(this.screenSizeSubject);
  14. }
  15. getScreenSize() {
  16. const width = window.innerWidth;
  17. if (width < 640)
  18. return 'xs';
  19. if (width >= 640 && width < 768)
  20. return 'sm';
  21. if (width >= 768 && width < 1024)
  22. return 'md';
  23. if (width >= 1024 && width < 1280)
  24. return 'lg';
  25. if (width >= 1280 && width < 1536)
  26. return 'xl';
  27. return '2xl';
  28. }
  29. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScreenSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
  30. static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScreenSizeService, providedIn: 'root' }); }
  31. }
  32. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScreenSizeService, decorators: [{
  33. type: Injectable,
  34. args: [{
  35. providedIn: 'root',
  36. }]
  37. }], ctorParameters: () => [] });
  38. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2NyZWVuLXNpemUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9zZXJ2aWNlcy9zY3JlZW4tc2l6ZS5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsZUFBZSxFQUFFLFNBQVMsRUFBYyxNQUFNLE1BQU0sQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLG9CQUFvQixFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBS3pGLE1BQU0sT0FBTyxpQkFBaUI7SUFLNUI7UUFKUSxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2hDLHNCQUFpQixHQUFHLElBQUksZUFBZSxDQUFTLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQyxDQUFDO1FBQzlFLGdCQUFXLEdBQXVCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUd0RSxTQUFTLENBQUMsTUFBTSxFQUFFLFFBQVEsQ0FBQzthQUN4QixJQUFJLENBQ0gsb0JBQW9CLEVBQUUsRUFDdEIsWUFBWSxDQUFDLEdBQUcsQ0FBQyxFQUNqQixHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDLEVBQy9CLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsRUFDL0IsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsY0FBYyxDQUFDLENBQUMsRUFDdEMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUNwQzthQUNBLFNBQVMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRU8sYUFBYTtRQUNuQixNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDO1FBQ2hDLElBQUksS0FBSyxHQUFHLEdBQUc7WUFBRSxPQUFPLElBQUksQ0FBQztRQUM3QixJQUFJLEtBQUssSUFBSSxHQUFHLElBQUksS0FBSyxHQUFHLEdBQUc7WUFBRSxPQUFPLElBQUksQ0FBQztRQUM3QyxJQUFJLEtBQUssSUFBSSxHQUFHLElBQUksS0FBSyxHQUFHLElBQUk7WUFBRSxPQUFPLElBQUksQ0FBQztRQUM5QyxJQUFJLEtBQUssSUFBSSxJQUFJLElBQUksS0FBSyxHQUFHLElBQUk7WUFBRSxPQUFPLElBQUksQ0FBQztRQUMvQyxJQUFJLEtBQUssSUFBSSxJQUFJLElBQUksS0FBSyxHQUFHLElBQUk7WUFBRSxPQUFPLElBQUksQ0FBQztRQUMvQyxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7OEdBMUJVLGlCQUFpQjtrSEFBakIsaUJBQWlCLGNBRmhCLE1BQU07OzJGQUVQLGlCQUFpQjtrQkFIN0IsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEZXN0cm95UmVmLCBJbmplY3RhYmxlLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgZnJvbUV2ZW50LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBkZWJvdW5jZVRpbWUsIGRpc3RpbmN0VW50aWxDaGFuZ2VkLCBtYXAsIHN0YXJ0V2l0aCwgdGFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290Jyxcbn0pXG5leHBvcnQgY2xhc3MgU2NyZWVuU2l6ZVNlcnZpY2Uge1xuICBwcml2YXRlIGRlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XG4gIHByaXZhdGUgc2NyZWVuU2l6ZVN1YmplY3QgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4odGhpcy5nZXRTY3JlZW5TaXplKCkpO1xuICBzY3JlZW5TaXplJDogT2JzZXJ2YWJsZTxzdHJpbmc+ID0gdGhpcy5zY3JlZW5TaXplU3ViamVjdC5hc09ic2VydmFibGUoKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBmcm9tRXZlbnQod2luZG93LCAncmVzaXplJylcbiAgICAgIC5waXBlKFxuICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICAgICBkZWJvdW5jZVRpbWUoMjAwKSxcbiAgICAgICAgbWFwKCgpID0+IHRoaXMuZ2V0U2NyZWVuU2l6ZSgpKSxcbiAgICAgICAgc3RhcnRXaXRoKHRoaXMuZ2V0U2NyZWVuU2l6ZSgpKSxcbiAgICAgICAgdGFwKCgpID0+IGNvbnNvbGUubG9nKCd0ZXN0IHVwZGF0ZWQnKSksXG4gICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKHRoaXMuc2NyZWVuU2l6ZVN1YmplY3QpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRTY3JlZW5TaXplKCk6IHN0cmluZyB7XG4gICAgY29uc3Qgd2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aDtcbiAgICBpZiAod2lkdGggPCA2NDApIHJldHVybiAneHMnO1xuICAgIGlmICh3aWR0aCA+PSA2NDAgJiYgd2lkdGggPCA3NjgpIHJldHVybiAnc20nO1xuICAgIGlmICh3aWR0aCA+PSA3NjggJiYgd2lkdGggPCAxMDI0KSByZXR1cm4gJ21kJztcbiAgICBpZiAod2lkdGggPj0gMTAyNCAmJiB3aWR0aCA8IDEyODApIHJldHVybiAnbGcnO1xuICAgIGlmICh3aWR0aCA+PSAxMjgwICYmIHdpZHRoIDwgMTUzNikgcmV0dXJuICd4bCc7XG4gICAgcmV0dXJuICcyeGwnO1xuICB9XG59XG4iXX0=