feat(dees-mobile-gallery): add mobile gallery component with fullscreen viewer, swipe navigation, action buttons (download/share/delete), PDF support and demo
This commit is contained in:
@@ -0,0 +1,213 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import { injectCssVariables } from '../../00variables.js';
|
||||
import type { DeesMobileGallery } from './dees-mobile-gallery.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
injectCssVariables();
|
||||
|
||||
// Sample images for demo
|
||||
const sampleImages = [
|
||||
{
|
||||
id: '1',
|
||||
url: 'https://picsum.photos/800/1200?random=1',
|
||||
thumbnailUrl: 'https://picsum.photos/100/100?random=1',
|
||||
filename: 'receipt_001.jpg',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
url: 'https://picsum.photos/1200/800?random=2',
|
||||
thumbnailUrl: 'https://picsum.photos/100/100?random=2',
|
||||
filename: 'shopping_photo.jpg',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
url: 'https://picsum.photos/800/800?random=3',
|
||||
thumbnailUrl: 'https://picsum.photos/100/100?random=3',
|
||||
filename: 'receipt_002.jpg',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
url: 'https://example.com/document.pdf',
|
||||
filename: 'invoice.pdf',
|
||||
mimeType: 'application/pdf',
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<style>
|
||||
.demo-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.demo-section h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--dees-muted-foreground);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.demo-note {
|
||||
font-size: 0.875rem;
|
||||
color: var(--dees-muted-foreground);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.demo-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Basic Gallery</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
@click=${() => {
|
||||
const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
|
||||
gallery.items = sampleImages.slice(0, 3);
|
||||
gallery.config = {
|
||||
showFilename: true,
|
||||
showActions: true,
|
||||
allowDownload: true,
|
||||
allowDelete: false,
|
||||
};
|
||||
gallery.addEventListener('close', () => gallery.remove());
|
||||
gallery.addEventListener('download', (e: CustomEvent) => {
|
||||
console.log('Download requested:', e.detail);
|
||||
});
|
||||
document.body.appendChild(gallery);
|
||||
}}
|
||||
>Open Gallery (3 images)</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">Fullscreen gallery with swipe navigation on mobile, arrow keys on desktop.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Single Image</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
variant="outline"
|
||||
@click=${() => {
|
||||
const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
|
||||
gallery.items = [sampleImages[0]];
|
||||
gallery.config = {
|
||||
showFilename: true,
|
||||
allowDownload: true,
|
||||
};
|
||||
gallery.addEventListener('close', () => gallery.remove());
|
||||
document.body.appendChild(gallery);
|
||||
}}
|
||||
>View Single Image</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">Single image view without navigation controls.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>With Delete Action</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
variant="outline"
|
||||
@click=${() => {
|
||||
const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
|
||||
gallery.items = sampleImages.slice(0, 3);
|
||||
gallery.config = {
|
||||
showFilename: true,
|
||||
allowDownload: true,
|
||||
allowDelete: true,
|
||||
};
|
||||
gallery.addEventListener('close', () => gallery.remove());
|
||||
gallery.addEventListener('delete', (e: CustomEvent) => {
|
||||
console.log('Delete requested:', e.detail);
|
||||
gallery.remove();
|
||||
});
|
||||
document.body.appendChild(gallery);
|
||||
}}
|
||||
>Gallery with Delete</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">Shows delete action button in red.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Start at Specific Index</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
variant="outline"
|
||||
@click=${() => {
|
||||
const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
|
||||
gallery.items = sampleImages.slice(0, 3);
|
||||
gallery.config = {
|
||||
startIndex: 2,
|
||||
showFilename: true,
|
||||
allowDownload: true,
|
||||
};
|
||||
gallery.addEventListener('close', () => gallery.remove());
|
||||
document.body.appendChild(gallery);
|
||||
}}
|
||||
>Open at Image 3</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">Opens gallery starting at the third image.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>With PDF</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
variant="outline"
|
||||
@click=${() => {
|
||||
const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
|
||||
gallery.items = sampleImages;
|
||||
gallery.config = {
|
||||
startIndex: 3,
|
||||
showFilename: true,
|
||||
allowDownload: true,
|
||||
};
|
||||
gallery.addEventListener('close', () => gallery.remove());
|
||||
document.body.appendChild(gallery);
|
||||
}}
|
||||
>Gallery with PDF</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">PDF files show a placeholder with filename.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Static Factory Method</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
variant="outline"
|
||||
@click=${async () => {
|
||||
const { DeesMobileGallery } = await import('./dees-mobile-gallery.js');
|
||||
const result = await DeesMobileGallery.show(
|
||||
sampleImages.slice(0, 3),
|
||||
{
|
||||
showFilename: true,
|
||||
allowDownload: true,
|
||||
allowDelete: true,
|
||||
}
|
||||
);
|
||||
console.log('Gallery result:', result);
|
||||
}}
|
||||
>Use Static show()</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">Uses the static factory method that returns a promise.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>Minimal Mode</h3>
|
||||
<div class="demo-buttons">
|
||||
<dees-mobile-button
|
||||
variant="outline"
|
||||
@click=${() => {
|
||||
const gallery = document.createElement('dees-mobile-gallery') as DeesMobileGallery;
|
||||
gallery.items = sampleImages.slice(0, 3);
|
||||
gallery.config = {
|
||||
showFilename: false,
|
||||
showActions: false,
|
||||
};
|
||||
gallery.addEventListener('close', () => gallery.remove());
|
||||
document.body.appendChild(gallery);
|
||||
}}
|
||||
>Minimal Gallery</dees-mobile-button>
|
||||
</div>
|
||||
<p class="demo-note">No filename or action buttons - just images.</p>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
Reference in New Issue
Block a user