93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import {
|
|
css,
|
|
html,
|
|
LitElement,
|
|
type CSSResultGroup,
|
|
type PropertyValues,
|
|
type TemplateResult,
|
|
} from 'lit';
|
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
|
|
import type { PartialZoomSettings } from '../components-lib/zoom/types.js';
|
|
import { ZoomController } from '../components-lib/zoom/zoom-controller.js';
|
|
|
|
@customElement('advanced-camera-card-zoomer')
|
|
export class AdvancedCameraCardZoomer extends LitElement {
|
|
@property({ attribute: false })
|
|
public defaultSettings?: PartialZoomSettings;
|
|
|
|
@property({ attribute: false })
|
|
public settings?: PartialZoomSettings | null;
|
|
|
|
@property({ attribute: false })
|
|
public zoom = true;
|
|
|
|
@state()
|
|
private _zoomed = false;
|
|
|
|
private _zoomController = new ZoomController(this);
|
|
|
|
private _zoomHandler = () => (this._zoomed = true);
|
|
private _unzoomHandler = () => (this._zoomed = false);
|
|
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
this.addEventListener('advanced-camera-card:zoom:zoomed', this._zoomHandler);
|
|
this.addEventListener('advanced-camera-card:zoom:unzoomed', this._unzoomHandler);
|
|
|
|
// Call for an update to activate.
|
|
this.requestUpdate();
|
|
}
|
|
|
|
disconnectedCallback(): void {
|
|
this._zoomController.deactivate();
|
|
this.removeEventListener('advanced-camera-card:zoom:zoomed', this._zoomHandler);
|
|
this.removeEventListener('advanced-camera-card:zoom:unzoomed', this._unzoomHandler);
|
|
super.disconnectedCallback();
|
|
}
|
|
|
|
protected willUpdate(changedProps: PropertyValues): void {
|
|
if (changedProps.has('_zoomed')) {
|
|
this.toggleAttribute('zoomed', this._zoomed);
|
|
}
|
|
|
|
if (changedProps.has('zoom')) {
|
|
this._zoomController.setZoom(this.zoom);
|
|
}
|
|
if (changedProps.has('defaultSettings')) {
|
|
this._zoomController.setDefaultSettings(this.defaultSettings ?? null);
|
|
}
|
|
// If config is null, make no change to the zoom.
|
|
if (changedProps.has('settings') && this.settings) {
|
|
this._zoomController.setSettings(this.settings);
|
|
}
|
|
|
|
if (!this._zoomController.isActivated()) {
|
|
this._zoomController.activate();
|
|
}
|
|
}
|
|
|
|
protected render(): TemplateResult | void {
|
|
return html` <slot></slot> `;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return css`
|
|
:host {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
:host([zoomed]) {
|
|
cursor: move;
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'advanced-camera-card-zoomer': AdvancedCameraCardZoomer;
|
|
}
|
|
}
|