460 lines
11 KiB
TypeScript
460 lines
11 KiB
TypeScript
import {
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
cssManager,
|
|
css,
|
|
unsafeCSS,
|
|
state,
|
|
} from '@design.estate/dees-element';
|
|
|
|
// Import design tokens
|
|
import { colors, bdTheme } from './00colors.js';
|
|
import { spacing, radius, shadows, transitions } from './00tokens.js';
|
|
import { fontFamilies } from './00fonts.js';
|
|
|
|
export interface ILightboxImage {
|
|
url: string;
|
|
name: string;
|
|
size?: number;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sio-image-lightbox': SioImageLightbox;
|
|
}
|
|
}
|
|
|
|
@customElement('sio-image-lightbox')
|
|
export class SioImageLightbox extends DeesElement {
|
|
public static demo = () => html`
|
|
<sio-image-lightbox .isOpen=${true} .image=${{
|
|
url: 'https://picsum.photos/800/600',
|
|
name: 'Demo Image'
|
|
}}></sio-image-lightbox>
|
|
`;
|
|
|
|
@property({ type: Boolean })
|
|
public isOpen: boolean = false;
|
|
|
|
@property({ type: Object })
|
|
public image: ILightboxImage | null = null;
|
|
|
|
@state()
|
|
private imageLoaded: boolean = false;
|
|
|
|
@state()
|
|
private scale: number = 1;
|
|
|
|
@state()
|
|
private translateX: number = 0;
|
|
|
|
@state()
|
|
private translateY: number = 0;
|
|
|
|
private isDragging: boolean = false;
|
|
private startX: number = 0;
|
|
private startY: number = 0;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
pointer-events: none;
|
|
font-family: ${unsafeCSS(fontFamilies.sans)};
|
|
isolation: isolate;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
backdrop-filter: blur(0px);
|
|
-webkit-backdrop-filter: blur(0px);
|
|
transition: all 300ms ease;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.overlay.open {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
pointer-events: all;
|
|
opacity: 1;
|
|
}
|
|
|
|
.container {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: ${unsafeCSS(spacing["8"])};
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.container.open {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.image-wrapper {
|
|
position: relative;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
cursor: grab;
|
|
user-select: none;
|
|
transition: transform 100ms ease-out;
|
|
z-index: 1;
|
|
}
|
|
|
|
.image-wrapper.dragging {
|
|
cursor: grabbing;
|
|
transition: none;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 90vh;
|
|
border-radius: ${unsafeCSS(radius.lg)};
|
|
box-shadow: ${unsafeCSS(shadows["2xl"])};
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
|
|
.image.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${unsafeCSS(spacing["2"])};
|
|
}
|
|
|
|
.spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: ${unsafeCSS(spacing["4"])};
|
|
right: ${unsafeCSS(spacing["4"])};
|
|
display: flex;
|
|
gap: ${unsafeCSS(spacing["2"])};
|
|
opacity: 0;
|
|
transition: opacity 200ms ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.container.open .controls {
|
|
opacity: 1;
|
|
}
|
|
|
|
.control-button {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: ${unsafeCSS(radius.full)};
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: ${unsafeCSS(transitions.all)};
|
|
}
|
|
|
|
.control-button:hover {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.control-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.info {
|
|
position: absolute;
|
|
bottom: ${unsafeCSS(spacing["4"])};
|
|
left: ${unsafeCSS(spacing["4"])};
|
|
right: ${unsafeCSS(spacing["4"])};
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: ${unsafeCSS(radius.lg)};
|
|
padding: ${unsafeCSS(spacing["3"])} ${unsafeCSS(spacing["4"])};
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition: all 200ms ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.container.open .info {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.info-name {
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.info-actions {
|
|
display: flex;
|
|
gap: ${unsafeCSS(spacing["3"])};
|
|
}
|
|
|
|
.info-button {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
opacity: 0.8;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${unsafeCSS(spacing["1"])};
|
|
font-size: 0.875rem;
|
|
padding: ${unsafeCSS(spacing["1"])} ${unsafeCSS(spacing["2"])};
|
|
border-radius: ${unsafeCSS(radius.md)};
|
|
transition: ${unsafeCSS(transitions.all)};
|
|
}
|
|
|
|
.info-button:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.container {
|
|
padding: ${unsafeCSS(spacing["4"])};
|
|
}
|
|
|
|
.controls {
|
|
top: ${unsafeCSS(spacing["2"])};
|
|
right: ${unsafeCSS(spacing["2"])};
|
|
}
|
|
|
|
.info {
|
|
bottom: ${unsafeCSS(spacing["2"])};
|
|
left: ${unsafeCSS(spacing["2"])};
|
|
right: ${unsafeCSS(spacing["2"])};
|
|
padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const imageStyle = this.scale !== 1 || this.translateX !== 0 || this.translateY !== 0
|
|
? `transform: scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`
|
|
: '';
|
|
|
|
return html`
|
|
<div class="overlay ${this.isOpen ? 'open' : ''}" @click=${(e: Event) => {
|
|
if (e.target === e.currentTarget) this.close(e);
|
|
}}></div>
|
|
<div class="container ${this.isOpen ? 'open' : ''}">
|
|
${this.image ? html`
|
|
<div class="controls">
|
|
<div class="control-button" @click=${this.zoomIn}>
|
|
<sio-icon icon="zoom-in" size="18"></sio-icon>
|
|
</div>
|
|
<div class="control-button" @click=${this.zoomOut}>
|
|
<sio-icon icon="zoom-out" size="18"></sio-icon>
|
|
</div>
|
|
<div class="control-button" @click=${this.resetZoom}>
|
|
<sio-icon icon="maximize-2" size="18"></sio-icon>
|
|
</div>
|
|
<div class="control-button" @click=${(e: Event) => this.close(e)}>
|
|
<sio-icon icon="x" size="18"></sio-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="image-wrapper ${this.isDragging ? 'dragging' : ''}"
|
|
style="${imageStyle}"
|
|
@mousedown=${this.startDrag}
|
|
@mousemove=${this.drag}
|
|
@mouseup=${this.endDrag}
|
|
@mouseleave=${this.endDrag}
|
|
@wheel=${this.handleWheel}
|
|
>
|
|
${!this.imageLoaded ? html`
|
|
<div class="loading">
|
|
<sio-icon class="spinner" icon="loader" size="24"></sio-icon>
|
|
<span>Loading...</span>
|
|
</div>
|
|
` : ''}
|
|
<img
|
|
class="image ${this.imageLoaded ? 'loaded' : ''}"
|
|
src="${this.image.url}"
|
|
alt="${this.image.name}"
|
|
@load=${() => this.imageLoaded = true}
|
|
@error=${() => this.imageLoaded = false}
|
|
@click=${(e: Event) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
|
|
<div class="info">
|
|
<div class="info-name">${this.image.name}</div>
|
|
<div class="info-actions">
|
|
<button class="info-button" @click=${this.download}>
|
|
<sio-icon icon="download" size="16"></sio-icon>
|
|
Download
|
|
</button>
|
|
<button class="info-button" @click=${this.openInNewTab}>
|
|
<sio-icon icon="external-link" size="16"></sio-icon>
|
|
Open
|
|
</button>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async open(image: ILightboxImage) {
|
|
this.image = image;
|
|
this.imageLoaded = false;
|
|
this.resetZoom();
|
|
this.isOpen = true;
|
|
|
|
// Add keyboard listener
|
|
document.addEventListener('keydown', this.handleKeyDown);
|
|
}
|
|
|
|
private close = (e?: Event) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
this.isOpen = false;
|
|
document.removeEventListener('keydown', this.handleKeyDown);
|
|
|
|
// Dispatch close event
|
|
this.dispatchEvent(new CustomEvent('lightbox-close', {
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
|
|
// Clean up after animation
|
|
setTimeout(() => {
|
|
this.image = null;
|
|
this.imageLoaded = false;
|
|
this.resetZoom();
|
|
}, 300);
|
|
}
|
|
|
|
private handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
this.close();
|
|
} else if (e.key === '+' || e.key === '=') {
|
|
this.zoomIn();
|
|
} else if (e.key === '-') {
|
|
this.zoomOut();
|
|
} else if (e.key === '0') {
|
|
this.resetZoom();
|
|
}
|
|
}
|
|
|
|
private zoomIn() {
|
|
this.scale = Math.min(this.scale * 1.2, 3);
|
|
}
|
|
|
|
private zoomOut() {
|
|
this.scale = Math.max(this.scale / 1.2, 0.5);
|
|
}
|
|
|
|
private resetZoom() {
|
|
this.scale = 1;
|
|
this.translateX = 0;
|
|
this.translateY = 0;
|
|
}
|
|
|
|
private handleWheel = (e: WheelEvent) => {
|
|
e.preventDefault();
|
|
if (e.ctrlKey || e.metaKey) {
|
|
// Zoom with ctrl/cmd + scroll
|
|
if (e.deltaY < 0) {
|
|
this.zoomIn();
|
|
} else {
|
|
this.zoomOut();
|
|
}
|
|
}
|
|
}
|
|
|
|
private startDrag = (e: MouseEvent) => {
|
|
if (this.scale > 1) {
|
|
this.isDragging = true;
|
|
this.startX = e.clientX - this.translateX;
|
|
this.startY = e.clientY - this.translateY;
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
private drag = (e: MouseEvent) => {
|
|
if (this.isDragging && this.scale > 1) {
|
|
this.translateX = e.clientX - this.startX;
|
|
this.translateY = e.clientY - this.startY;
|
|
}
|
|
}
|
|
|
|
private endDrag = () => {
|
|
this.isDragging = false;
|
|
}
|
|
|
|
private download() {
|
|
if (!this.image) return;
|
|
|
|
const a = document.createElement('a');
|
|
a.href = this.image.url;
|
|
a.download = this.image.name;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
}
|
|
|
|
private openInNewTab() {
|
|
if (!this.image) return;
|
|
window.open(this.image.url, '_blank');
|
|
}
|
|
|
|
public async disconnectedCallback() {
|
|
await super.disconnectedCallback();
|
|
document.removeEventListener('keydown', this.handleKeyDown);
|
|
}
|
|
} |