social.io/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-07-14 17:44:52 +00:00
parent 193b1f5234
commit a4a3c6dc50
4 changed files with 240 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ts_web/elements/sio-combox.ts
View File

@@ -92,6 +92,19 @@ export class SioCombox extends DeesElement {
}] }]
}, },
{ id: '6', text: 'Thanks for your help with the login issue!', sender: 'user', time: '10:10 AM' }, { id: '6', text: 'Thanks for your help with the login issue!', sender: 'user', time: '10:10 AM' },
{
id: '7',
text: 'Here is the documentation you requested',
sender: 'support',
time: '10:15 AM',
attachments: [{
id: 'att2',
name: 'user-guide.pdf',
size: 2457600,
type: 'application/pdf',
url: 'data:application/pdf;base64,JVBERi0xLjMKJeLjz9MKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovT3V0bGluZXMgMiAwIFIKL1BhZ2VzIDMgMCBSCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9PdXRsaW5lcwovQ291bnQgMAo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvUGFnZXMKL0NvdW50IDEKL0tpZHMgWzQgMCBSXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDMgMCBSCi9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyA1IDAgUgovUmVzb3VyY2VzIDw8Ci9Gb250IDw8Ci9GMSA2IDAgUgo+Pgo+Pgo+PgplbmRvYmoKNSAwIG9iago8PAovTGVuZ3RoIDQ0Cj4+CnN0cmVhbQpCVApxCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8gV29ybGQpIFRqCkVUClEKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9UeXBlMQovQmFzZUZvbnQgL1RpbWVzLVJvbWFuCj4+CmVuZG9iagp4cmVmCjAgNwowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA3NCAwMDAwMCBuIAowMDAwMDAwMTIwIDAwMDAwIG4gCjAwMDAwMDAxNzkgMDAwMDAgbiAKMDAwMDAwMDM2NCAwMDAwMCBuIAowMDAwMDAwNDY2IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNwovUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNTY1CiUlRU9G'
}]
},
], ],
'2': [ '2': [
{ id: '1', text: 'I need help understanding my invoice', sender: 'user', time: '9:00 AM' }, { id: '1', text: 'I need help understanding my invoice', sender: 'user', time: '9:00 AM' },
@@ -125,7 +138,7 @@ export class SioCombox extends DeesElement {
border-radius: ${unsafeCSS(radius['2xl'])}; border-radius: ${unsafeCSS(radius['2xl'])};
border: 1px solid ${bdTheme('border')}; border: 1px solid ${bdTheme('border')};
box-shadow: ${unsafeCSS(shadows.xl)}; box-shadow: ${unsafeCSS(shadows.xl)};
overflow: visible; overflow: hidden;
font-family: ${unsafeCSS(fontFamilies.sans)}; font-family: ${unsafeCSS(fontFamilies.sans)};
position: relative; position: relative;
transform-origin: bottom right; transform-origin: bottom right;
@@ -257,6 +270,7 @@ export class SioCombox extends DeesElement {
@back=${this.handleBack} @back=${this.handleBack}
@send-message=${this.handleSendMessage} @send-message=${this.handleSendMessage}
@open-image=${this.handleOpenImage} @open-image=${this.handleOpenImage}
@open-file=${this.handleOpenImage}
></sio-conversation-view> ></sio-conversation-view>
</div> </div>
@@ -326,12 +340,13 @@ export class SioCombox extends DeesElement {
const lightbox = this.shadowRoot?.querySelector('sio-image-lightbox') as SioImageLightbox; const lightbox = this.shadowRoot?.querySelector('sio-image-lightbox') as SioImageLightbox;
if (lightbox && attachment) { if (lightbox && attachment) {
const lightboxImage: ILightboxImage = { const lightboxFile: ILightboxImage = {
url: attachment.url, url: attachment.url,
name: attachment.name, name: attachment.name,
size: attachment.size size: attachment.size,
type: attachment.type
}; };
lightbox.open(lightboxImage); lightbox.open(lightboxFile);
} }
} }
} }

17
ts_web/elements/sio-conversation-view.ts
View File

@@ -553,6 +553,14 @@ export class SioConversationView extends DeesElement {
<div class="attachment-image" @click=${() => this.openImage(attachment)}> <div class="attachment-image" @click=${() => this.openImage(attachment)}>
<img src="${attachment.url}" alt="${attachment.name}" /> <img src="${attachment.url}" alt="${attachment.name}" />
</div> </div>
` : attachment.type?.includes('pdf') || attachment.name?.toLowerCase().endsWith('.pdf') ? html`
<div class="attachment-file" @click=${() => this.openImage(attachment)}>
<sio-icon icon="file-text" size="16"></sio-icon>
<div>
<div class="attachment-name">${attachment.name}</div>
<div class="attachment-size">${this.formatFileSize(attachment.size)}</div>
</div>
</div>
` : html` ` : html`
<div class="attachment-file" @click=${() => this.downloadFile(attachment)}> <div class="attachment-file" @click=${() => this.downloadFile(attachment)}>
<sio-icon icon="file" size="16"></sio-icon> <sio-icon icon="file" size="16"></sio-icon>
@@ -810,12 +818,21 @@ export class SioConversationView extends DeesElement {
} }
private openImage(attachment: IAttachment) { private openImage(attachment: IAttachment) {
// Check if it's actually a PDF
if (attachment.type?.includes('pdf') || attachment.name?.toLowerCase().endsWith('.pdf')) {
this.dispatchEvent(new CustomEvent('open-file', {
detail: { attachment },
bubbles: true,
composed: true
}));
} else {
this.dispatchEvent(new CustomEvent('open-image', { this.dispatchEvent(new CustomEvent('open-image', {
detail: { attachment }, detail: { attachment },
bubbles: true, bubbles: true,
composed: true composed: true
})); }));
} }
}
private downloadFile(attachment: IAttachment) { private downloadFile(attachment: IAttachment) {
const a = document.createElement('a'); const a = document.createElement('a');

162
ts_web/elements/sio-fab.ts
View File

@@ -34,6 +34,9 @@ export class SioFab extends DeesElement {
@state() @state()
private hasShownOnce = false; private hasShownOnce = false;
@state()
private shouldPulse = false;
public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `; public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;
constructor() { constructor() {
@@ -53,6 +56,11 @@ export class SioFab extends DeesElement {
right: 20px; right: 20px;
z-index: 10000; z-index: 10000;
color: #fff; color: #fff;
--fab-gradient-start: #6366f1;
--fab-gradient-mid: #8b5cf6;
--fab-gradient-end: #a855f7;
--fab-gradient-hover-end: #c026d3;
--fab-shadow-color: rgba(139, 92, 246, 0.25);
} }
#mainbox { #mainbox {
@@ -60,101 +68,130 @@ export class SioFab extends DeesElement {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
height: 56px; height: 60px;
width: 56px; width: 60px;
box-shadow: ${cssManager.bdTheme(shadows.md, shadows.lg)}; box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
line-height: 56px; line-height: 60px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: ${bdTheme('primary')}; background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
color: ${bdTheme('primaryForeground')}; color: white;
border-radius: ${radius.full}; border-radius: ${radius.full};
user-select: none; user-select: none;
border: 1px solid ${bdTheme('border')}; border: none;
animation: fabEntrance 500ms cubic-bezier(0.34, 1.56, 0.64, 1); animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#mainbox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
opacity: 0;
transition: opacity 200ms ease;
}
#mainbox::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
border-radius: inherit;
z-index: -1;
opacity: 0;
filter: blur(12px);
transition: opacity 300ms ease;
}
#mainbox:hover::before {
opacity: 1;
}
#mainbox:hover::after {
opacity: 0.3;
} }
@keyframes fabEntrance { @keyframes fabEntrance {
from { from {
transform: scale(0) rotate(-180deg); transform: scale(0.8);
opacity: 0; opacity: 0;
} }
to { to {
transform: scale(1) rotate(0deg); transform: scale(1);
opacity: 1; opacity: 1;
} }
} }
#mainbox:hover { #mainbox:hover {
box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)}; transform: scale(1.02);
transform: translateY(-2px) scale(1.05); background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
}
#mainbox:hover {
box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
} }
#mainbox:active { #mainbox:active {
transform: translateY(0) scale(0.98); transform: scale(0.98);
box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)}; box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
}
#mainbox.pulse::after {
animation: fabPulse 0.6s ease-out forwards;
}
@keyframes fabPulse {
0% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
opacity: 1;
}
100% {
box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
opacity: 0;
}
} }
#mainbox .icon { #mainbox .icon {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
will-change: transform; will-change: transform, opacity;
transform: ${this.showCombox ? 'rotate(180deg)' : 'rotate(0deg)'}; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: contain; display: flex;
-webkit-user-drag: none; align-items: center;
-khtml-user-drag: none; justify-content: center;
-moz-user-drag: none;
-o-user-drag: none;
} }
#mainbox .icon img {
filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1)')};
position: absolute;
width: 100%;
top: 0px;
left: 0px;
will-change: transform;
transform: scale(0.2, 0.2) translateY(-5px);
}
#mainbox .icon.open:hover img {
filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1.2)')};
}
#mainbox .icon.open { #mainbox .icon.open {
opacity: ${this.showCombox ? '0' : '1'}; opacity: ${this.showCombox ? '0' : '1'};
pointer-events: ${this.showCombox ? 'none' : 'all'}; transform: ${this.showCombox ? 'rotate(45deg) scale(0.9)' : 'rotate(0deg) scale(1)'};
} }
#mainbox .icon.close { #mainbox .icon.close {
opacity: ${this.showCombox ? '1' : '0'}; opacity: ${this.showCombox ? '1' : '0'};
pointer-events: ${this.showCombox ? 'all' : 'none'}; transform: ${this.showCombox ? 'rotate(0deg) scale(1)' : 'rotate(-45deg) scale(0.9)'};
}
#mainbox .icon.close:hover sio-icon {
color: ${bdTheme('primaryForeground')};
} }
#mainbox .icon.open sio-icon { #mainbox .icon sio-icon {
position: absolute; color: white;
width: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${bdTheme('primaryForeground')};
} }
#mainbox .icon.close sio-icon { #mainbox .icon.close sio-icon {
position: absolute; transform: scale(1);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${bdTheme('primaryForeground')};
} }
#comboxContainer { #comboxContainer {
@@ -166,7 +203,7 @@ export class SioFab extends DeesElement {
#comboxContainer sio-combox { #comboxContainer sio-combox {
position: absolute; position: absolute;
bottom: calc(56px + ${spacing["4"]}); bottom: calc(60px + ${spacing["4"]});
right: 0; right: 0;
transition: ${transitions.all}; transition: ${transitions.all};
will-change: transform; will-change: transform;
@@ -185,10 +222,13 @@ export class SioFab extends DeesElement {
pointer-events: all; pointer-events: all;
} }
</style> </style>
<div id="mainbox" @click=${this.toggleCombox}> <div id="mainbox"
class="${this.shouldPulse ? 'pulse' : ''}"
@click=${this.toggleCombox}
@animationend=${() => { this.shouldPulse = false; }}
>
<div class="icon open"> <div class="icon open">
<sio-icon icon="message-square" size="28"></sio-icon> <sio-icon icon="message-square" size="28"></sio-icon>
<img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
</div> </div>
<div class="icon close"> <div class="icon close">
<sio-icon icon="x" size="22"></sio-icon> <sio-icon icon="x" size="22"></sio-icon>
@@ -207,13 +247,17 @@ export class SioFab extends DeesElement {
*/ */
public async toggleCombox() { public async toggleCombox() {
console.log('toggle combox'); console.log('toggle combox');
const wasOpen = this.showCombox;
this.showCombox = !this.showCombox; this.showCombox = !this.showCombox;
if (this.showCombox) { if (this.showCombox) {
this.hasShownOnce = true; this.hasShownOnce = true;
if (!wasOpen) {
this.shouldPulse = true;
}
} }
} }
public async firstUpdated(args) { public async firstUpdated(args: any) {
super.firstUpdated(args); super.firstUpdated(args);
const domtools = await this.domtoolsPromise; const domtools = await this.domtoolsPromise;
const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox'); const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
@@ -222,7 +266,7 @@ export class SioFab extends DeesElement {
domtools.keyboard domtools.keyboard
.on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S]) .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
.subscribe((event) => { .subscribe(() => {
this.toggleCombox(); this.toggleCombox();
}); });
} }

116
ts_web/elements/sio-image-lightbox.ts
View File

@@ -15,12 +15,16 @@ import { colors, bdTheme } from './00colors.js';
import { spacing, radius, shadows, transitions } from './00tokens.js'; import { spacing, radius, shadows, transitions } from './00tokens.js';
import { fontFamilies } from './00fonts.js'; import { fontFamilies } from './00fonts.js';
export interface ILightboxImage { export interface ILightboxFile {
url: string; url: string;
name: string; name: string;
size?: number; size?: number;
type?: string;
} }
// For backwards compatibility
export type ILightboxImage = ILightboxFile;
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'sio-image-lightbox': SioImageLightbox; 'sio-image-lightbox': SioImageLightbox;
@@ -30,9 +34,10 @@ declare global {
@customElement('sio-image-lightbox') @customElement('sio-image-lightbox')
export class SioImageLightbox extends DeesElement { export class SioImageLightbox extends DeesElement {
public static demo = () => html` public static demo = () => html`
<sio-image-lightbox .isOpen=${true} .image=${{ <sio-image-lightbox .isOpen=${true} .file=${{
url: 'https://picsum.photos/800/600', url: 'https://picsum.photos/800/600',
name: 'Demo Image' name: 'Demo Image',
type: 'image/jpeg'
}}></sio-image-lightbox> }}></sio-image-lightbox>
`; `;
@@ -40,10 +45,18 @@ export class SioImageLightbox extends DeesElement {
public isOpen: boolean = false; public isOpen: boolean = false;
@property({ type: Object }) @property({ type: Object })
public image: ILightboxImage | null = null; public file: ILightboxFile | null = null;
// For backwards compatibility
public get image(): ILightboxFile | null {
return this.file;
}
public set image(value: ILightboxFile | null) {
this.file = value;
}
@state() @state()
private imageLoaded: boolean = false; private fileLoaded: boolean = false;
@state() @state()
private scale: number = 1; private scale: number = 1;
@@ -108,7 +121,7 @@ export class SioImageLightbox extends DeesElement {
pointer-events: all; pointer-events: all;
} }
.image-wrapper { .content-wrapper {
position: relative; position: relative;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
@@ -118,11 +131,15 @@ export class SioImageLightbox extends DeesElement {
z-index: 1; z-index: 1;
} }
.image-wrapper.dragging { .content-wrapper.dragging {
cursor: grabbing; cursor: grabbing;
transition: none; transition: none;
} }
.content-wrapper.pdf {
cursor: default;
}
.image { .image {
display: block; display: block;
max-width: 100%; max-width: 100%;
@@ -137,6 +154,21 @@ export class SioImageLightbox extends DeesElement {
opacity: 1; opacity: 1;
} }
.pdf-viewer {
width: 90vw;
height: 90vh;
border-radius: ${unsafeCSS(radius.lg)};
box-shadow: ${unsafeCSS(shadows["2xl"])};
background: white;
opacity: 0;
transition: opacity 300ms ease;
border: none;
}
.pdf-viewer.loaded {
opacity: 1;
}
.loading { .loading {
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -277,18 +309,26 @@ export class SioImageLightbox extends DeesElement {
`, `,
]; ];
private isPDF(): boolean {
return this.file?.type?.includes('pdf') ||
this.file?.name?.toLowerCase().endsWith('.pdf') || false;
}
public render(): TemplateResult { public render(): TemplateResult {
const imageStyle = this.scale !== 1 || this.translateX !== 0 || this.translateY !== 0 const contentStyle = this.scale !== 1 || this.translateX !== 0 || this.translateY !== 0
? `transform: scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)` ? `transform: scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`
: ''; : '';
const isPDF = this.isPDF();
return html` return html`
<div class="overlay ${this.isOpen ? 'open' : ''}" @click=${(e: Event) => { <div class="overlay ${this.isOpen ? 'open' : ''}" @click=${(e: Event) => {
if (e.target === e.currentTarget) this.close(e); if (e.target === e.currentTarget) this.close(e);
}}></div> }}></div>
<div class="container ${this.isOpen ? 'open' : ''}"> <div class="container ${this.isOpen ? 'open' : ''}">
${this.image ? html` ${this.file ? html`
<div class="controls"> <div class="controls">
${!isPDF ? html`
<div class="control-button" @click=${this.zoomIn}> <div class="control-button" @click=${this.zoomIn}>
<sio-icon icon="zoom-in" size="18"></sio-icon> <sio-icon icon="zoom-in" size="18"></sio-icon>
</div> </div>
@@ -298,38 +338,50 @@ export class SioImageLightbox extends DeesElement {
<div class="control-button" @click=${this.resetZoom}> <div class="control-button" @click=${this.resetZoom}>
<sio-icon icon="maximize-2" size="18"></sio-icon> <sio-icon icon="maximize-2" size="18"></sio-icon>
</div> </div>
` : ''}
<div class="control-button" @click=${(e: Event) => this.close(e)}> <div class="control-button" @click=${(e: Event) => this.close(e)}>
<sio-icon icon="x" size="18"></sio-icon> <sio-icon icon="x" size="18"></sio-icon>
</div> </div>
</div> </div>
<div <div
class="image-wrapper ${this.isDragging ? 'dragging' : ''}" class="content-wrapper ${this.isDragging ? 'dragging' : ''} ${isPDF ? 'pdf' : ''}"
style="${imageStyle}" style="${contentStyle}"
@mousedown=${this.startDrag} @mousedown=${!isPDF ? this.startDrag : undefined}
@mousemove=${this.drag} @mousemove=${!isPDF ? this.drag : undefined}
@mouseup=${this.endDrag} @mouseup=${!isPDF ? this.endDrag : undefined}
@mouseleave=${this.endDrag} @mouseleave=${!isPDF ? this.endDrag : undefined}
@wheel=${this.handleWheel} @wheel=${this.handleWheel}
> >
${!this.imageLoaded ? html` ${!this.fileLoaded ? html`
<div class="loading"> <div class="loading">
<sio-icon class="spinner" icon="loader" size="24"></sio-icon> <sio-icon class="spinner" icon="loader" size="24"></sio-icon>
<span>Loading...</span> <span>Loading...</span>
</div> </div>
` : ''} ` : ''}
${isPDF ? html`
<iframe
class="pdf-viewer ${this.fileLoaded ? 'loaded' : ''}"
src="${this.file.url}"
title="${this.file.name}"
@load=${() => this.fileLoaded = true}
@error=${() => this.fileLoaded = false}
@click=${(e: Event) => e.stopPropagation()}
></iframe>
` : html`
<img <img
class="image ${this.imageLoaded ? 'loaded' : ''}" class="image ${this.fileLoaded ? 'loaded' : ''}"
src="${this.image.url}" src="${this.file.url}"
alt="${this.image.name}" alt="${this.file.name}"
@load=${() => this.imageLoaded = true} @load=${() => this.fileLoaded = true}
@error=${() => this.imageLoaded = false} @error=${() => this.fileLoaded = false}
@click=${(e: Event) => e.stopPropagation()} @click=${(e: Event) => e.stopPropagation()}
/> />
`}
</div> </div>
<div class="info"> <div class="info">
<div class="info-name">${this.image.name}</div> <div class="info-name">${this.file.name}</div>
<div class="info-actions"> <div class="info-actions">
<button class="info-button" @click=${this.download}> <button class="info-button" @click=${this.download}>
<sio-icon icon="download" size="16"></sio-icon> <sio-icon icon="download" size="16"></sio-icon>
@@ -346,9 +398,9 @@ export class SioImageLightbox extends DeesElement {
`; `;
} }
public async open(image: ILightboxImage) { public async open(file: ILightboxFile | ILightboxImage) {
this.image = image; this.file = file;
this.imageLoaded = false; this.fileLoaded = false;
this.resetZoom(); this.resetZoom();
this.isOpen = true; this.isOpen = true;
@@ -373,8 +425,8 @@ export class SioImageLightbox extends DeesElement {
// Clean up after animation // Clean up after animation
setTimeout(() => { setTimeout(() => {
this.image = null; this.file = null;
this.imageLoaded = false; this.fileLoaded = false;
this.resetZoom(); this.resetZoom();
}, 300); }, 300);
} }
@@ -438,19 +490,19 @@ export class SioImageLightbox extends DeesElement {
} }
private download() { private download() {
if (!this.image) return; if (!this.file) return;
const a = document.createElement('a'); const a = document.createElement('a');
a.href = this.image.url; a.href = this.file.url;
a.download = this.image.name; a.download = this.file.name;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
} }
private openInNewTab() { private openInNewTab() {
if (!this.image) return; if (!this.file) return;
window.open(this.image.url, '_blank'); window.open(this.file.url, '_blank');
} }
public async disconnectedCallback() { public async disconnectedCallback() {