131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
import {
|
|
DeesElement,
|
|
html,
|
|
property,
|
|
type TemplateResult,
|
|
type CSSResult,
|
|
} from '@design.estate/dees-element';
|
|
import { tileBaseStyles } from './styles.js';
|
|
import '../../00group-utility/dees-icon/dees-icon.js';
|
|
|
|
export abstract class DeesTileBase extends DeesElement {
|
|
public static styles: CSSResult[] = tileBaseStyles as any;
|
|
|
|
@property({ type: Boolean })
|
|
accessor clickable: boolean = true;
|
|
|
|
@property({ type: Boolean })
|
|
accessor loading: boolean = false;
|
|
|
|
@property({ type: Boolean })
|
|
accessor error: boolean = false;
|
|
|
|
@property({ type: String, reflect: true })
|
|
accessor size: 'small' | 'default' | 'large' = 'default';
|
|
|
|
@property({ type: String })
|
|
accessor label: string = '';
|
|
|
|
private observer: IntersectionObserver | undefined;
|
|
private _visible: boolean = false;
|
|
|
|
/** Whether this tile is currently visible in the viewport */
|
|
protected get isVisible(): boolean {
|
|
return this._visible;
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div
|
|
class="tile-container ${this.clickable ? 'clickable' : ''} ${this.loading ? 'loading' : ''} ${this.error ? 'error' : ''}"
|
|
@click=${this.handleTileClick}
|
|
@mouseenter=${this.onTileMouseEnter}
|
|
@mouseleave=${this.onTileMouseLeave}
|
|
@mousemove=${this.onTileMouseMove}
|
|
>
|
|
${this.loading ? html`
|
|
<div class="tile-loading">
|
|
<div class="tile-spinner"></div>
|
|
<div class="tile-loading-text">Loading...</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${this.error ? html`
|
|
<div class="tile-error">
|
|
<dees-icon icon="lucide:AlertTriangle"></dees-icon>
|
|
<div class="tile-error-text">Failed to load</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${!this.loading && !this.error ? this.renderTileContent() : ''}
|
|
|
|
${this.label ? html`
|
|
<div class="tile-label">${this.label}</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/** Subclasses implement this to render their specific content */
|
|
protected abstract renderTileContent(): TemplateResult;
|
|
|
|
public async connectedCallback(): Promise<void> {
|
|
await super.connectedCallback();
|
|
this.setupIntersectionObserver();
|
|
}
|
|
|
|
public async disconnectedCallback(): Promise<void> {
|
|
await super.disconnectedCallback();
|
|
if (this.observer) {
|
|
this.observer.disconnect();
|
|
this.observer = undefined;
|
|
}
|
|
}
|
|
|
|
private setupIntersectionObserver(): void {
|
|
this.observer = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
const wasVisible = this._visible;
|
|
this._visible = entry.isIntersecting;
|
|
if (this._visible && !wasVisible) {
|
|
this.onBecameVisible();
|
|
}
|
|
}
|
|
},
|
|
{ root: null, rootMargin: '200px', threshold: 0.01 }
|
|
);
|
|
this.observer.observe(this);
|
|
}
|
|
|
|
/** Called when the tile first enters the viewport. Override for lazy loading. */
|
|
protected onBecameVisible(): void {
|
|
// Subclasses can override
|
|
}
|
|
|
|
/** Called when mouse enters the tile container. Override in subclasses. */
|
|
protected onTileMouseEnter(): void {}
|
|
|
|
/** Called when mouse leaves the tile container. Override in subclasses. */
|
|
protected onTileMouseLeave(): void {}
|
|
|
|
/** Called when mouse moves over the tile container. Override in subclasses. */
|
|
protected onTileMouseMove(_e: MouseEvent): void {}
|
|
|
|
protected handleTileClick(): void {
|
|
if (!this.clickable) return;
|
|
this.dispatchEvent(
|
|
new CustomEvent('tile-click', {
|
|
detail: this.getTileClickDetail(),
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
}
|
|
|
|
/** Return the detail object for tile-click events. Override in subclasses. */
|
|
protected getTileClickDetail(): Record<string, unknown> {
|
|
return {};
|
|
}
|
|
}
|