88 lines
1.8 KiB
JavaScript
88 lines
1.8 KiB
JavaScript
import { LitElement, css, html, unsafeCSS } from 'lit'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
|
|
class ImageViewer extends LitElement {
|
|
static properties = {
|
|
src: { type: String },
|
|
imgEl: { state: true },
|
|
captionWidth: { state: true },
|
|
loading: { state: true }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.src = ''
|
|
this.imgEl = new Image()
|
|
this.captionWidth = 'min-content'
|
|
this.loading = true
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback()
|
|
this.imgEl.addEventListener('load', () => {
|
|
this.captionWidth = `${this.imgEl.offsetWidth}px`
|
|
this.loading = false
|
|
})
|
|
}
|
|
|
|
set src(val) {
|
|
if (val) {
|
|
this.imgEl.src = val
|
|
console.log(this.imgEl)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<figure class="${this.loading ? 'loading' : ''}">
|
|
<picture>
|
|
${this.imgEl}
|
|
</picture>
|
|
|
|
<figcaption style="--width: ${this.captionWidth}">
|
|
Image Description
|
|
</figcaption>
|
|
</figure>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
figure {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
grid-template-rows: 1fr 4em;
|
|
justify-content: center;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.loading {
|
|
opacity: 0;
|
|
}
|
|
|
|
picture {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
}
|
|
|
|
figcaption {
|
|
padding-block: 0.75em;
|
|
width: var(--width);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-imageviewer', ImageViewer)
|