112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
import { LitElement, css, html, unsafeCSS } from 'lit'
|
|
import Router from './api/Router.js'
|
|
|
|
import MainCSS from './assets/styles/main.scss?inline'
|
|
|
|
import './components/Header.js'
|
|
import './components/Footer.js'
|
|
|
|
// global reset
|
|
import './assets/styles/main.scss'
|
|
|
|
export class App extends LitElement {
|
|
static properties = {
|
|
dialogEl: { state: true }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
firstUpdated() {
|
|
this.dialogEl = this.shadowRoot.querySelector('dialog')
|
|
|
|
Router.addEventListener('route-changed', () => {
|
|
if ('startViewTransition' in document) {
|
|
return document.startViewTransition(() => {
|
|
this.requestUpdate()
|
|
})
|
|
}
|
|
else {
|
|
this.requestUpdate()
|
|
}
|
|
})
|
|
|
|
this.addEventListener('single-fullscreen-image', ({ detail }) => {
|
|
const { src, details } = detail
|
|
|
|
const grid = document.createElement('div')
|
|
grid.classList.add('grid')
|
|
|
|
const img = new Image()
|
|
img.src = src
|
|
grid.appendChild(img)
|
|
|
|
if (detail.details) {
|
|
const div = document.createElement('div')
|
|
const p = document.createElement('p')
|
|
p.innerHTML = details
|
|
div.appendChild(p)
|
|
grid.appendChild(div)
|
|
}
|
|
|
|
this.dialogEl.appendChild(grid)
|
|
this.dialogEl.showModal()
|
|
|
|
this.dialogEl.addEventListener('click', () => {
|
|
this.dialogEl.close()
|
|
this.dialogEl.innerHTML = ''
|
|
}, { once: true })
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
${Router.route.path == '/' ? '' : html`<mm-header title=${Router.route.title}></mm-header>`}
|
|
${Router.render()}
|
|
${Router.route.path == '/' ? '' : html`<mm-footer path=${Router.route.path}></mm-footer>`}
|
|
<dialog class="popup"></dialog>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
dialog {
|
|
margin: auto;
|
|
border: none;
|
|
outline: none;
|
|
height: 80svh;
|
|
|
|
& .grid {
|
|
display: grid;
|
|
grid-template-rows: minmax(0em, 1fr) auto;
|
|
height: 100%;
|
|
}
|
|
|
|
& .grid > div {
|
|
padding-block-start: 1em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
& .grid > img {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: #00000090;
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-app', App)
|