93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import {
|
|
css,
|
|
CSSResultGroup,
|
|
html,
|
|
LitElement,
|
|
PropertyValues,
|
|
TemplateResult,
|
|
} from 'lit';
|
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
import { ZoomController } from '../components-lib/zoom/zoom-controller.js';
|
|
import { setOrRemoveAttribute } from '../utils/basic.js';
|
|
import { PartialZoomSettings } from '../components-lib/zoom/types.js';
|
|
|
|
@customElement('frigate-card-zoomer')
|
|
export class FrigateCardZoomer extends LitElement {
|
|
protected _zoom: ZoomController | null = null;
|
|
|
|
@property({ attribute: false })
|
|
public defaultSettings?: PartialZoomSettings;
|
|
|
|
@property({ attribute: false })
|
|
public settings?: PartialZoomSettings | null;
|
|
|
|
@state()
|
|
protected _zoomed = false;
|
|
|
|
protected _zoomHandler = () => (this._zoomed = true);
|
|
protected _unzoomHandler = () => (this._zoomed = false);
|
|
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
this.addEventListener('frigate-card:zoom:zoomed', this._zoomHandler);
|
|
this.addEventListener('frigate-card:zoom:unzoomed', this._unzoomHandler);
|
|
|
|
// Call for an update to activate.
|
|
this.requestUpdate();
|
|
}
|
|
|
|
disconnectedCallback(): void {
|
|
this._zoom?.deactivate();
|
|
this.removeEventListener('frigate-card:zoom:zoomed', this._zoomHandler);
|
|
this.removeEventListener('frigate-card:zoom:unzoomed', this._unzoomHandler);
|
|
}
|
|
|
|
protected willUpdate(changedProps: PropertyValues): void {
|
|
if (changedProps.has('_zoomed')) {
|
|
setOrRemoveAttribute(this, this._zoomed, 'zoomed');
|
|
}
|
|
|
|
if (this._zoom) {
|
|
if (changedProps.has('defaultSettings')) {
|
|
this._zoom.setDefaultSettings(this.defaultSettings ?? null);
|
|
}
|
|
// If config is null, make no change to the zoom.
|
|
if (changedProps.has('settings') && this.settings) {
|
|
this._zoom.setSettings(this.settings);
|
|
}
|
|
} else {
|
|
// Ensure that the configuration will be set before activation (vs
|
|
// activating in `connectedCallback`).
|
|
this._zoom = new ZoomController(this, {
|
|
config: this.settings,
|
|
defaultConfig: this.defaultSettings,
|
|
});
|
|
this._zoom.activate();
|
|
}
|
|
}
|
|
|
|
protected render(): TemplateResult | void {
|
|
return html` <slot></slot> `;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return css`
|
|
:host {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
cursor: auto;
|
|
}
|
|
:host([zoomed]) {
|
|
cursor: move;
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'frigate-card-zoomer': FrigateCardZoomer;
|
|
}
|
|
}
|