@ng-web-apis/screen-orientation
Version:
A library for declarative use of screen orientation with Angular
78 lines (73 loc) • 3.87 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Injectable } from '@angular/core';
import { WA_WINDOW, WINDOW } from '@ng-web-apis/common';
import { Observable, fromEvent, startWith, map, shareReplay, merge, filter, EMPTY } from 'rxjs';
class ScreenOrientationService extends Observable {
win = inject(WA_WINDOW);
stream$ = (this.isModern
? fromEvent(this.win.screen.orientation, 'change').pipe(startWith(null), map(() =>
/**
* https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
* The type read-only property of the ScreenOrientation interface returns the document's current orientation type,
* one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary".
*
* Browser compatibility:
* Safari 16.4+, Chrome 38+, Firefox 43+
*/
this.win.screen.orientation.type))
: fromEvent(this.win, 'orientationchange').pipe(startWith(null), map(() => {
/**
* https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation
* Its only possible values are -90, 0, 90, and 180.
* Positive values are counterclockwise; negative values are clockwise.
*/
const angle = parseInt(this.win.orientation, 10);
switch (angle) {
case -90:
return 'landscape-secondary';
case 180:
return 'portrait-secondary';
case 90:
return 'landscape-primary';
case 0:
default:
return 'portrait-primary';
}
}))).pipe(shareReplay({ bufferSize: 1, refCount: true }));
constructor() {
super((subscriber) => this.stream$.subscribe(subscriber));
}
get isModern() {
return !!this.win?.screen?.orientation;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScreenOrientationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScreenOrientationService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScreenOrientationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
class ViewportService extends Observable {
visualViewport = inject(WINDOW).visualViewport;
stream$ = this.visualViewport
? merge(fromEvent(this.visualViewport, 'resize'), fromEvent(this.visualViewport, 'scroll'), fromEvent(this.visualViewport, 'scrollend')).pipe(startWith(null), map(() => this.visualViewport), filter(Boolean), shareReplay({ bufferSize: 1, refCount: true }))
: EMPTY;
constructor() {
super((subscriber) => this.stream$.subscribe(subscriber));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
/**
* Generated bundle index. Do not edit.
*/
export { ScreenOrientationService, ViewportService };
//# sourceMappingURL=ng-web-apis-screen-orientation.mjs.map