feat(media): rename media tile components to thumbnail components and add shared thumbnail base exports
This commit is contained in:
@@ -0,0 +1,133 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
property,
|
||||
type TemplateResult,
|
||||
type CSSResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import { thumbnailBaseStyles } from './styles.js';
|
||||
import '../../00group-utility/dees-icon/dees-icon.js';
|
||||
|
||||
export abstract class DeesThumbnailBase extends DeesElement {
|
||||
public static styles: CSSResult[] = thumbnailBaseStyles 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.renderBottomBar()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/** Subclasses implement this to render their specific content */
|
||||
protected abstract renderTileContent(): TemplateResult;
|
||||
|
||||
/** Subclasses override this to render a bottom info bar with metadata */
|
||||
protected renderBottomBar(): TemplateResult | string {
|
||||
return '';
|
||||
}
|
||||
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { DeesThumbnailBase } from './DeesThumbnailBase.js';
|
||||
export { thumbnailBaseStyles } from './styles.js';
|
||||
174
ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
Normal file
174
ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
import { css, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
export const thumbnailBaseStyles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tile-container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 260px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
|
||||
|
||||
}
|
||||
|
||||
.tile-container.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tile-container.clickable:hover {
|
||||
box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
|
||||
}
|
||||
|
||||
.tile-container.clickable:hover .tile-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tile-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tile-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.tile-overlay dees-icon {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tile-overlay span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tile-info-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 4px 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.95)', 'hsl(215 20% 12% / 0.95)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 25;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.info-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-detail {
|
||||
white-space: nowrap;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tile-loading,
|
||||
.tile-error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
|
||||
}
|
||||
|
||||
.tile-loading {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 14%)')};
|
||||
}
|
||||
|
||||
.tile-error {
|
||||
background: ${cssManager.bdTheme('hsl(0 72% 98%)', 'hsl(0 62% 20%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
|
||||
}
|
||||
|
||||
.tile-error dees-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.tile-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
|
||||
border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.tile-loading-text,
|
||||
.tile-error-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Size variants */
|
||||
:host([size="small"]) .tile-container {
|
||||
width: 150px;
|
||||
height: 195px;
|
||||
}
|
||||
|
||||
:host([size="large"]) .tile-container {
|
||||
width: 250px;
|
||||
height: 325px;
|
||||
}
|
||||
|
||||
/* Grid optimizations */
|
||||
:host([grid-mode]) .tile-container {
|
||||
will-change: auto;
|
||||
}
|
||||
`,
|
||||
];
|
||||
Reference in New Issue
Block a user