33 lines
996 B
TypeScript
33 lines
996 B
TypeScript
import type { UnsubscribeCallback } from '../../types';
|
|
|
|
// Watches a single CSS media query via `window.matchMedia`. The shared change
|
|
// source for the `screen` condition and trigger, whose match state lives
|
|
// outside the card's `ConditionState`.
|
|
export class MediaQueryWatcher {
|
|
private _query: string;
|
|
private _mediaQuery: MediaQueryList | null = null;
|
|
private _callback: (() => void) | null = null;
|
|
|
|
constructor(query: string) {
|
|
this._query = query;
|
|
}
|
|
|
|
public matches(): boolean {
|
|
return window.matchMedia(this._query).matches;
|
|
}
|
|
|
|
public subscribe(callback: () => void): UnsubscribeCallback {
|
|
this._callback = callback;
|
|
this._mediaQuery = window.matchMedia(this._query);
|
|
this._mediaQuery.addEventListener('change', this._handler);
|
|
|
|
return (): void => {
|
|
this._mediaQuery?.removeEventListener('change', this._handler);
|
|
this._mediaQuery = null;
|
|
this._callback = null;
|
|
};
|
|
}
|
|
|
|
private _handler = (): void => this._callback?.();
|
|
}
|