design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(media): rename media tile components to thumbnail components and add shared thumbnail base exports

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 08:13:56 +00:00
parent 10cd1e2755
commit 42b40da67c
27 changed files with 151 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@@ -1,5 +1,13 @@
# Changelog # Changelog
## 2026-04-04 - 3.54.0 - feat(media)
rename media tile components to thumbnail components and add shared thumbnail base exports
- Replaces dees-tile-* media component exports and implementations with dees-thumbnail-* counterparts for audio, image, video, note, folder, and pdf previews.
- Introduces a shared DeesThumbnailBase and shared thumbnail styles for consistent sizing, hover overlays, loading states, error states, and lazy-loading behavior.
- Updates the media index to export the new thumbnail component modules.
- Includes a small layout cleanup in dees-dataview-codebox by removing forced full-height and absolute grid positioning.
## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer) ## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
add configurable sidebar position support add configurable sidebar position support

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '3.53.0', version: '3.54.0',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

4
ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
View File

@@ -53,11 +53,9 @@ export class DeesDataviewCodebox extends DeesElement {
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
font-family: ${cssGeistFontFamily}; font-family: ${cssGeistFontFamily};
height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
dees-tile { dees-tile {
height: 100%;
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
@@ -114,8 +112,6 @@ export class DeesDataviewCodebox extends DeesElement {
} }
.codegrid { .codegrid {
position: absolute;
inset: 0;
display: grid; display: grid;
grid-template-columns: 50px auto; grid-template-columns: 50px auto;
overflow: auto; overflow: auto;

12
ts_web/elements/00group-media/dees-tile-audio/component.ts → ts_web/elements/00group-media/dees-thumbnail-audio/component.ts
View File

@@ -8,22 +8,22 @@ import {
type TemplateResult, type TemplateResult,
type CSSResult, type CSSResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js'; import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
import { tileBaseStyles } from '../dees-tile-shared/styles.js'; import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
import { demo } from './demo.js'; import { demo } from './demo.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dees-tile-audio': DeesTileAudio; 'dees-thumbnail-audio': DeesThumbnailAudio;
} }
} }
@customElement('dees-tile-audio') @customElement('dees-thumbnail-audio')
export class DeesTileAudio extends DeesTileBase { export class DeesThumbnailAudio extends DeesThumbnailBase {
public static demo = demo; public static demo = demo;
public static demoGroups = ['Media']; public static demoGroups = ['Media'];
public static styles = [ public static styles = [
...tileBaseStyles, ...thumbnailBaseStyles,
css` css`
.audio-content { .audio-content {
position: relative; position: relative;

24
ts_web/elements/00group-media/dees-tile-audio/demo.ts → ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts
View File

@@ -26,51 +26,51 @@ export const demo = () => html`
<div class="demo-section"> <div class="demo-section">
<h3>Audio Tiles</h3> <h3>Audio Tiles</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-audio <dees-thumbnail-audio
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
title="SoundHelix Song 1" title="SoundHelix Song 1"
artist="T. Schuerger" artist="T. Schuerger"
label="soundhelix-1.mp3" label="soundhelix-1.mp3"
@tile-click=${(e: CustomEvent) => console.log('Audio clicked:', e.detail)} @tile-click=${(e: CustomEvent) => console.log('Audio clicked:', e.detail)}
></dees-tile-audio> ></dees-thumbnail-audio>
<dees-tile-audio <dees-thumbnail-audio
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
title="SoundHelix Song 2" title="SoundHelix Song 2"
artist="T. Schuerger" artist="T. Schuerger"
label="soundhelix-2.mp3" label="soundhelix-2.mp3"
></dees-tile-audio> ></dees-thumbnail-audio>
<dees-tile-audio <dees-thumbnail-audio
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
title="SoundHelix Song 3" title="SoundHelix Song 3"
label="soundhelix-3.mp3" label="soundhelix-3.mp3"
></dees-tile-audio> ></dees-thumbnail-audio>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Size Variants</h3> <h3>Size Variants</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-audio <dees-thumbnail-audio
size="small" size="small"
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
title="Small" title="Small"
label="small.mp3" label="small.mp3"
></dees-tile-audio> ></dees-thumbnail-audio>
<dees-tile-audio <dees-thumbnail-audio
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
title="Default" title="Default"
label="default.mp3" label="default.mp3"
></dees-tile-audio> ></dees-thumbnail-audio>
<dees-tile-audio <dees-thumbnail-audio
size="large" size="large"
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
title="Large" title="Large"
label="large.mp3" label="large.mp3"
></dees-tile-audio> ></dees-thumbnail-audio>
</div> </div>
</div> </div>
</div> </div>

0
ts_web/elements/00group-media/dees-tile-audio/index.ts → ts_web/elements/00group-media/dees-thumbnail-audio/index.ts
View File

16
ts_web/elements/00group-media/dees-tile-folder/component.ts → ts_web/elements/00group-media/dees-thumbnail-folder/component.ts
View File

@@ -7,11 +7,11 @@ import {
type TemplateResult, type TemplateResult,
type CSSResult, type CSSResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js'; import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
import { tileBaseStyles } from '../dees-tile-shared/styles.js'; import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
import { demo } from './demo.js'; import { demo } from './demo.js';
export interface ITileFolderItem { export interface IThumbnailFolderItem {
type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown'; type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
thumbnailSrc?: string; thumbnailSrc?: string;
name: string; name: string;
@@ -29,16 +29,16 @@ const TYPE_ICON_MAP: Record<string, string> = {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dees-tile-folder': DeesTileFolder; 'dees-thumbnail-folder': DeesThumbnailFolder;
} }
} }
@customElement('dees-tile-folder') @customElement('dees-thumbnail-folder')
export class DeesTileFolder extends DeesTileBase { export class DeesThumbnailFolder extends DeesThumbnailBase {
public static demo = demo; public static demo = demo;
public static demoGroups = ['Media']; public static demoGroups = ['Media'];
public static styles = [ public static styles = [
...tileBaseStyles, ...thumbnailBaseStyles,
css` css`
.folder-content { .folder-content {
position: relative; position: relative;
@@ -116,7 +116,7 @@ export class DeesTileFolder extends DeesTileBase {
accessor name: string = ''; accessor name: string = '';
@property({ attribute: false }) @property({ attribute: false })
accessor items: ITileFolderItem[] = []; accessor items: IThumbnailFolderItem[] = [];
protected renderTileContent(): TemplateResult { protected renderTileContent(): TemplateResult {
const previewItems = this.items.slice(0, 4); const previewItems = this.items.slice(0, 4);

44
ts_web/elements/00group-media/dees-tile-folder/demo.ts → ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts
View File

@@ -1,8 +1,8 @@
import { html } from '@design.estate/dees-element'; import { html } from '@design.estate/dees-element';
import type { ITileFolderItem } from './component.js'; import type { IThumbnailFolderItem } from './component.js';
export const demo = () => { export const demo = () => {
const photosFolder: ITileFolderItem[] = [ const photosFolder: IThumbnailFolderItem[] = [
{ type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' }, { type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' },
{ type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' }, { type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' },
{ type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' }, { type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' },
@@ -11,7 +11,7 @@ export const demo = () => {
{ type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' }, { type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' },
]; ];
const projectFolder: ITileFolderItem[] = [ const projectFolder: IThumbnailFolderItem[] = [
{ type: 'note', name: 'README.md' }, { type: 'note', name: 'README.md' },
{ type: 'note', name: 'package.json' }, { type: 'note', name: 'package.json' },
{ type: 'folder', name: 'src' }, { type: 'folder', name: 'src' },
@@ -21,16 +21,16 @@ export const demo = () => {
{ type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' }, { type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' },
]; ];
const mediaFolder: ITileFolderItem[] = [ const mediaFolder: IThumbnailFolderItem[] = [
{ type: 'video', name: 'intro.mp4' }, { type: 'video', name: 'intro.mp4' },
{ type: 'audio', name: 'background.mp3' }, { type: 'audio', name: 'background.mp3' },
{ type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' }, { type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' },
{ type: 'pdf', name: 'storyboard.pdf' }, { type: 'pdf', name: 'storyboard.pdf' },
]; ];
const emptyFolder: ITileFolderItem[] = []; const emptyFolder: IThumbnailFolderItem[] = [];
const singleItemFolder: ITileFolderItem[] = [ const singleItemFolder: IThumbnailFolderItem[] = [
{ type: 'pdf', name: 'report.pdf' }, { type: 'pdf', name: 'report.pdf' },
]; ];
@@ -60,61 +60,61 @@ export const demo = () => {
<div class="demo-section"> <div class="demo-section">
<h3>Folder Tiles</h3> <h3>Folder Tiles</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-folder <dees-thumbnail-folder
name="Photos" name="Photos"
.items=${photosFolder} .items=${photosFolder}
label="6 photos" label="6 photos"
@tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)} @tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)}
></dees-tile-folder> ></dees-thumbnail-folder>
<dees-tile-folder <dees-thumbnail-folder
name="my-project" name="my-project"
.items=${projectFolder} .items=${projectFolder}
label="Project files" label="Project files"
></dees-tile-folder> ></dees-thumbnail-folder>
<dees-tile-folder <dees-thumbnail-folder
name="Media Assets" name="Media Assets"
.items=${mediaFolder} .items=${mediaFolder}
label="Mixed media" label="Mixed media"
></dees-tile-folder> ></dees-thumbnail-folder>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Edge Cases</h3> <h3>Edge Cases</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-folder <dees-thumbnail-folder
name="Empty Folder" name="Empty Folder"
.items=${emptyFolder} .items=${emptyFolder}
></dees-tile-folder> ></dees-thumbnail-folder>
<dees-tile-folder <dees-thumbnail-folder
name="Single Item" name="Single Item"
.items=${singleItemFolder} .items=${singleItemFolder}
></dees-tile-folder> ></dees-thumbnail-folder>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Size Variants</h3> <h3>Size Variants</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-folder <dees-thumbnail-folder
size="small" size="small"
name="Small" name="Small"
.items=${photosFolder} .items=${photosFolder}
></dees-tile-folder> ></dees-thumbnail-folder>
<dees-tile-folder <dees-thumbnail-folder
name="Default" name="Default"
.items=${photosFolder} .items=${photosFolder}
></dees-tile-folder> ></dees-thumbnail-folder>
<dees-tile-folder <dees-thumbnail-folder
size="large" size="large"
name="Large" name="Large"
.items=${photosFolder} .items=${photosFolder}
></dees-tile-folder> ></dees-thumbnail-folder>
</div> </div>
</div> </div>
</div> </div>

0
ts_web/elements/00group-media/dees-tile-folder/index.ts → ts_web/elements/00group-media/dees-thumbnail-folder/index.ts
View File

12
ts_web/elements/00group-media/dees-tile-image/component.ts → ts_web/elements/00group-media/dees-thumbnail-image/component.ts
View File

@@ -8,22 +8,22 @@ import {
type TemplateResult, type TemplateResult,
type CSSResult, type CSSResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js'; import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
import { tileBaseStyles } from '../dees-tile-shared/styles.js'; import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
import { demo } from './demo.js'; import { demo } from './demo.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dees-tile-image': DeesTileImage; 'dees-thumbnail-image': DeesThumbnailImage;
} }
} }
@customElement('dees-tile-image') @customElement('dees-thumbnail-image')
export class DeesTileImage extends DeesTileBase { export class DeesThumbnailImage extends DeesThumbnailBase {
public static demo = demo; public static demo = demo;
public static demoGroups = ['Media']; public static demoGroups = ['Media'];
public static styles = [ public static styles = [
...tileBaseStyles, ...thumbnailBaseStyles,
css` css`
.image-wrapper { .image-wrapper {
position: relative; position: relative;

28
ts_web/elements/00group-media/dees-tile-image/demo.ts → ts_web/elements/00group-media/dees-thumbnail-image/demo.ts
View File

@@ -26,59 +26,59 @@ export const demo = () => html`
<div class="demo-section"> <div class="demo-section">
<h3>Image Tiles</h3> <h3>Image Tiles</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-image <dees-thumbnail-image
src="https://picsum.photos/800/600" src="https://picsum.photos/800/600"
alt="Landscape photo" alt="Landscape photo"
label="landscape.jpg" label="landscape.jpg"
@tile-click=${(e: CustomEvent) => console.log('Image clicked:', e.detail)} @tile-click=${(e: CustomEvent) => console.log('Image clicked:', e.detail)}
></dees-tile-image> ></dees-thumbnail-image>
<dees-tile-image <dees-thumbnail-image
src="https://picsum.photos/400/400" src="https://picsum.photos/400/400"
alt="Square photo" alt="Square photo"
label="square.png" label="square.png"
></dees-tile-image> ></dees-thumbnail-image>
<dees-tile-image <dees-thumbnail-image
src="https://picsum.photos/300/900" src="https://picsum.photos/300/900"
alt="Portrait photo" alt="Portrait photo"
label="portrait.webp" label="portrait.webp"
></dees-tile-image> ></dees-thumbnail-image>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Size Variants</h3> <h3>Size Variants</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-image <dees-thumbnail-image
size="small" size="small"
src="https://picsum.photos/200/200" src="https://picsum.photos/200/200"
alt="Small" alt="Small"
label="small.jpg" label="small.jpg"
></dees-tile-image> ></dees-thumbnail-image>
<dees-tile-image <dees-thumbnail-image
src="https://picsum.photos/600/400" src="https://picsum.photos/600/400"
alt="Default" alt="Default"
label="default.jpg" label="default.jpg"
></dees-tile-image> ></dees-thumbnail-image>
<dees-tile-image <dees-thumbnail-image
size="large" size="large"
src="https://picsum.photos/1200/800" src="https://picsum.photos/1200/800"
alt="Large" alt="Large"
label="large.jpg" label="large.jpg"
></dees-tile-image> ></dees-thumbnail-image>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Error State (broken URL)</h3> <h3>Error State (broken URL)</h3>
<dees-tile-image <dees-thumbnail-image
src="https://invalid-url-that-does-not-exist.example/image.png" src="https://invalid-url-that-does-not-exist.example/image.png"
alt="Broken" alt="Broken"
label="broken.png" label="broken.png"
></dees-tile-image> ></dees-thumbnail-image>
</div> </div>
</div> </div>
`; `;

0
ts_web/elements/00group-media/dees-tile-image/index.ts → ts_web/elements/00group-media/dees-thumbnail-image/index.ts
View File

12
ts_web/elements/00group-media/dees-tile-note/component.ts → ts_web/elements/00group-media/dees-thumbnail-note/component.ts
View File

@@ -8,22 +8,22 @@ import {
type TemplateResult, type TemplateResult,
type CSSResult, type CSSResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js'; import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
import { tileBaseStyles } from '../dees-tile-shared/styles.js'; import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
import { demo } from './demo.js'; import { demo } from './demo.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dees-tile-note': DeesTileNote; 'dees-thumbnail-note': DeesThumbnailNote;
} }
} }
@customElement('dees-tile-note') @customElement('dees-thumbnail-note')
export class DeesTileNote extends DeesTileBase { export class DeesThumbnailNote extends DeesThumbnailBase {
public static demo = demo; public static demo = demo;
public static demoGroups = ['Media']; public static demoGroups = ['Media'];
public static styles = [ public static styles = [
...tileBaseStyles, ...thumbnailBaseStyles,
css` css`
.note-content { .note-content {
position: relative; position: relative;

28
ts_web/elements/00group-media/dees-tile-note/demo.ts → ts_web/elements/00group-media/dees-thumbnail-note/demo.ts
View File

@@ -72,63 +72,63 @@ Action Items:
<div class="demo-section"> <div class="demo-section">
<h3>Note Tiles</h3> <h3>Note Tiles</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-note <dees-thumbnail-note
title="component.ts" title="component.ts"
.content=${sampleCode} .content=${sampleCode}
language="typescript" language="typescript"
label="component.ts" label="component.ts"
@tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)} @tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)}
></dees-tile-note> ></dees-thumbnail-note>
<dees-tile-note <dees-thumbnail-note
title="Meeting Notes" title="Meeting Notes"
.content=${sampleText} .content=${sampleText}
label="meeting-notes.txt" label="meeting-notes.txt"
></dees-tile-note> ></dees-thumbnail-note>
<dees-tile-note <dees-thumbnail-note
title="package.json" title="package.json"
.content=${sampleJson} .content=${sampleJson}
language="json" language="json"
label="package.json" label="package.json"
></dees-tile-note> ></dees-thumbnail-note>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Size Variants</h3> <h3>Size Variants</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-note <dees-thumbnail-note
size="small" size="small"
title="small.ts" title="small.ts"
.content=${sampleCode} .content=${sampleCode}
language="ts" language="ts"
label="small.ts" label="small.ts"
></dees-tile-note> ></dees-thumbnail-note>
<dees-tile-note <dees-thumbnail-note
title="default.ts" title="default.ts"
.content=${sampleCode} .content=${sampleCode}
language="ts" language="ts"
label="default.ts" label="default.ts"
></dees-tile-note> ></dees-thumbnail-note>
<dees-tile-note <dees-thumbnail-note
size="large" size="large"
title="large.ts" title="large.ts"
.content=${sampleCode} .content=${sampleCode}
language="ts" language="ts"
label="large.ts" label="large.ts"
></dees-tile-note> ></dees-thumbnail-note>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Without Title</h3> <h3>Without Title</h3>
<dees-tile-note <dees-thumbnail-note
.content=${sampleText} .content=${sampleText}
label="untitled.txt" label="untitled.txt"
></dees-tile-note> ></dees-thumbnail-note>
</div> </div>
</div> </div>
`; `;

0
ts_web/elements/00group-media/dees-tile-note/index.ts → ts_web/elements/00group-media/dees-thumbnail-note/index.ts
View File

12
ts_web/elements/00group-media/dees-tile-pdf/component.ts → ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts
View File

@@ -1,6 +1,6 @@
import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element'; import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js'; import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
import { tileBaseStyles } from '../dees-tile-shared/styles.js'; import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
import { PdfManager } from '../dees-pdf-shared/PdfManager.js'; import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js'; import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js'; import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
@@ -9,15 +9,15 @@ import { demo as demoFunc } from './demo.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dees-tile-pdf': DeesTilePdf; 'dees-thumbnail-pdf': DeesThumbnailPdf;
} }
} }
@customElement('dees-tile-pdf') @customElement('dees-thumbnail-pdf')
export class DeesTilePdf extends DeesTileBase { export class DeesThumbnailPdf extends DeesThumbnailBase {
public static demo = demoFunc; public static demo = demoFunc;
public static demoGroups = ['Media', 'PDF']; public static demoGroups = ['Media', 'PDF'];
public static styles = [...tileBaseStyles, tilePdfStyles] as any; public static styles = [...thumbnailBaseStyles, tilePdfStyles] as any;
@property({ type: String }) @property({ type: String })
accessor pdfUrl: string = ''; accessor pdfUrl: string = '';

28
ts_web/elements/00group-media/dees-tile-pdf/demo.ts → ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts
View File

@@ -11,7 +11,7 @@ export const demo = () => {
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
const pdfUrl = samplePdfs[i % samplePdfs.length]; const pdfUrl = samplePdfs[i % samplePdfs.length];
items.push(html` items.push(html`
<dees-tile-pdf <dees-thumbnail-pdf
pdfUrl="${pdfUrl}" pdfUrl="${pdfUrl}"
clickable="true" clickable="true"
grid-mode grid-mode
@@ -19,7 +19,7 @@ export const demo = () => {
console.log('PDF Tile clicked:', e.detail); console.log('PDF Tile clicked:', e.detail);
alert(`PDF clicked: ${e.detail.pageCount} pages`); alert(`PDF clicked: ${e.detail.pageCount} pages`);
}} }}
></dees-tile-pdf> ></dees-thumbnail-pdf>
`); `);
} }
return items; return items;
@@ -67,56 +67,56 @@ export const demo = () => {
<div class="demo-container"> <div class="demo-container">
<div class="demo-section"> <div class="demo-section">
<h3>Single PDF Tile</h3> <h3>Single PDF Tile</h3>
<dees-tile-pdf <dees-thumbnail-pdf
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
clickable="true" clickable="true"
></dees-tile-pdf> ></dees-thumbnail-pdf>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Different Sizes</h3> <h3>Different Sizes</h3>
<div class="preview-row"> <div class="preview-row">
<div class="preview-label">Small:</div> <div class="preview-label">Small:</div>
<dees-tile-pdf <dees-thumbnail-pdf
size="small" size="small"
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf" pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
clickable="true" clickable="true"
></dees-tile-pdf> ></dees-thumbnail-pdf>
</div> </div>
<div class="preview-row"> <div class="preview-row">
<div class="preview-label">Default:</div> <div class="preview-label">Default:</div>
<dees-tile-pdf <dees-thumbnail-pdf
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf" pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
clickable="true" clickable="true"
></dees-tile-pdf> ></dees-thumbnail-pdf>
</div> </div>
<div class="preview-row"> <div class="preview-row">
<div class="preview-label">Large:</div> <div class="preview-label">Large:</div>
<dees-tile-pdf <dees-thumbnail-pdf
size="large" size="large"
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf" pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
clickable="true" clickable="true"
></dees-tile-pdf> ></dees-thumbnail-pdf>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>With Label</h3> <h3>With Label</h3>
<dees-tile-pdf <dees-thumbnail-pdf
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
clickable="true" clickable="true"
label="Research Paper.pdf" label="Research Paper.pdf"
></dees-tile-pdf> ></dees-thumbnail-pdf>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Non-Clickable</h3> <h3>Non-Clickable</h3>
<dees-tile-pdf <dees-thumbnail-pdf
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf" pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
clickable="false" clickable="false"
></dees-tile-pdf> ></dees-thumbnail-pdf>
</div> </div>
<div class="demo-section"> <div class="demo-section">

0
ts_web/elements/00group-media/dees-tile-pdf/index.ts → ts_web/elements/00group-media/dees-thumbnail-pdf/index.ts
View File

0
ts_web/elements/00group-media/dees-tile-pdf/styles.ts → ts_web/elements/00group-media/dees-thumbnail-pdf/styles.ts
View File

6
ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts → ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts
View File

@@ -5,11 +5,11 @@ import {
type TemplateResult, type TemplateResult,
type CSSResult, type CSSResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { tileBaseStyles } from './styles.js'; import { thumbnailBaseStyles } from './styles.js';
import '../../00group-utility/dees-icon/dees-icon.js'; import '../../00group-utility/dees-icon/dees-icon.js';
export abstract class DeesTileBase extends DeesElement { export abstract class DeesThumbnailBase extends DeesElement {
public static styles: CSSResult[] = tileBaseStyles as any; public static styles: CSSResult[] = thumbnailBaseStyles as any;
@property({ type: Boolean }) @property({ type: Boolean })
accessor clickable: boolean = true; accessor clickable: boolean = true;

2
ts_web/elements/00group-media/dees-thumbnail-shared/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { DeesThumbnailBase } from './DeesThumbnailBase.js';
export { thumbnailBaseStyles } from './styles.js';

2
ts_web/elements/00group-media/dees-tile-shared/styles.ts → ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts
View File

@@ -1,6 +1,6 @@
import { css, cssManager } from '@design.estate/dees-element'; import { css, cssManager } from '@design.estate/dees-element';
export const tileBaseStyles = [ export const thumbnailBaseStyles = [
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
:host { :host {

12
ts_web/elements/00group-media/dees-tile-video/component.ts → ts_web/elements/00group-media/dees-thumbnail-video/component.ts
View File

@@ -8,22 +8,22 @@ import {
type TemplateResult, type TemplateResult,
type CSSResult, type CSSResult,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js'; import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
import { tileBaseStyles } from '../dees-tile-shared/styles.js'; import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
import { demo } from './demo.js'; import { demo } from './demo.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dees-tile-video': DeesTileVideo; 'dees-thumbnail-video': DeesThumbnailVideo;
} }
} }
@customElement('dees-tile-video') @customElement('dees-thumbnail-video')
export class DeesTileVideo extends DeesTileBase { export class DeesThumbnailVideo extends DeesThumbnailBase {
public static demo = demo; public static demo = demo;
public static demoGroups = ['Media']; public static demoGroups = ['Media'];
public static styles = [ public static styles = [
...tileBaseStyles, ...thumbnailBaseStyles,
css` css`
.video-wrapper { .video-wrapper {
position: relative; position: relative;

28
ts_web/elements/00group-media/dees-tile-video/demo.ts → ts_web/elements/00group-media/dees-thumbnail-video/demo.ts
View File

@@ -26,54 +26,54 @@ export const demo = () => html`
<div class="demo-section"> <div class="demo-section">
<h3>Video Tiles</h3> <h3>Video Tiles</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-video <dees-thumbnail-video
src="https://www.w3schools.com/html/mov_bbb.mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"
label="bunny.mp4" label="bunny.mp4"
@tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)} @tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)}
></dees-tile-video> ></dees-thumbnail-video>
<dees-tile-video <dees-thumbnail-video
src="https://www.w3schools.com/html/movie.mp4" src="https://www.w3schools.com/html/movie.mp4"
poster="https://picsum.photos/400/300" poster="https://picsum.photos/400/300"
label="movie.mp4" label="movie.mp4"
></dees-tile-video> ></dees-thumbnail-video>
<dees-tile-video <dees-thumbnail-video
src="https://www.w3schools.com/html/mov_bbb.mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"
label="another-video.mp4" label="another-video.mp4"
></dees-tile-video> ></dees-thumbnail-video>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>Size Variants</h3> <h3>Size Variants</h3>
<div class="tile-row"> <div class="tile-row">
<dees-tile-video <dees-thumbnail-video
size="small" size="small"
src="https://www.w3schools.com/html/mov_bbb.mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"
label="small.mp4" label="small.mp4"
></dees-tile-video> ></dees-thumbnail-video>
<dees-tile-video <dees-thumbnail-video
src="https://www.w3schools.com/html/mov_bbb.mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"
label="default.mp4" label="default.mp4"
></dees-tile-video> ></dees-thumbnail-video>
<dees-tile-video <dees-thumbnail-video
size="large" size="large"
src="https://www.w3schools.com/html/mov_bbb.mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"
label="large.mp4" label="large.mp4"
></dees-tile-video> ></dees-thumbnail-video>
</div> </div>
</div> </div>
<div class="demo-section"> <div class="demo-section">
<h3>With Poster Image</h3> <h3>With Poster Image</h3>
<dees-tile-video <dees-thumbnail-video
src="https://www.w3schools.com/html/movie.mp4" src="https://www.w3schools.com/html/movie.mp4"
poster="https://picsum.photos/600/400" poster="https://picsum.photos/600/400"
label="poster-video.mp4" label="poster-video.mp4"
></dees-tile-video> ></dees-thumbnail-video>
</div> </div>
</div> </div>
`; `;

0
ts_web/elements/00group-media/dees-tile-video/index.ts → ts_web/elements/00group-media/dees-thumbnail-video/index.ts
View File

2
ts_web/elements/00group-media/dees-tile-shared/index.ts
View File

@@ -1,2 +0,0 @@
export { DeesTileBase } from './DeesTileBase.js';
export { tileBaseStyles } from './styles.js';

16
ts_web/elements/00group-media/index.ts
View File

@@ -8,11 +8,11 @@ export * from './dees-preview/index.js';
export * from './dees-pdf-shared/index.js'; export * from './dees-pdf-shared/index.js';
export * from './dees-pdf-viewer/index.js'; export * from './dees-pdf-viewer/index.js';
// Tile Components // Thumbnail Components
export * from './dees-tile-shared/index.js'; export * from './dees-thumbnail-shared/index.js';
export * from './dees-tile-pdf/index.js'; export * from './dees-thumbnail-pdf/index.js';
export * from './dees-tile-image/index.js'; export * from './dees-thumbnail-image/index.js';
export * from './dees-tile-audio/index.js'; export * from './dees-thumbnail-audio/index.js';
export * from './dees-tile-video/index.js'; export * from './dees-thumbnail-video/index.js';
export * from './dees-tile-note/index.js'; export * from './dees-thumbnail-note/index.js';
export * from './dees-tile-folder/index.js'; export * from './dees-thumbnail-folder/index.js';