mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.0 KiB
TypeScript
90 lines
2.0 KiB
TypeScript
/*
|
|
* slide.ts
|
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
|
* 2024-10-22 17:57
|
|
* Distributed under terms of the GPL license.
|
|
*/
|
|
import { v, proxy } from '../v2dom'
|
|
import account from './account'
|
|
import app from './app'
|
|
import logic from '../logic'
|
|
import bus from '../bus'
|
|
import fsdom from './fsdom'
|
|
|
|
/*
|
|
mask
|
|
slide
|
|
header
|
|
body
|
|
main
|
|
footer
|
|
*
|
|
* */
|
|
export default class {
|
|
mask: HTMLElement
|
|
slide: HTMLElement
|
|
header: HTMLElement
|
|
body: HTMLElement
|
|
main: HTMLElement
|
|
footer: HTMLElement
|
|
constructor() {
|
|
this.header = v({
|
|
class: 'voa-slide-header voa-animate-slow',
|
|
})
|
|
this.footer = v({
|
|
class: 'voa-slide-footer',
|
|
children: ['logout'],
|
|
onclick: () => {
|
|
bus.emit('logout')
|
|
}
|
|
})
|
|
this.main = v({
|
|
class: 'voa-slide-main',
|
|
children: [
|
|
account,
|
|
v({ class: 'voa-sm-separate' }),
|
|
app(),
|
|
v({ class: 'voa-sm-separate' }),
|
|
fsdom(),
|
|
v({ class: 'voa-sm-separate' }),
|
|
]
|
|
})
|
|
this.body = v({
|
|
class: 'voa-slide-body voa-animate-slow',
|
|
style: 'animation-delay: 300ms',
|
|
children: [this.main, this.footer]
|
|
})
|
|
this.slide = v({
|
|
id: 'voa-slide',
|
|
class: 'voa-slide',
|
|
children: [this.header, this.body]
|
|
})
|
|
this.mask = v({
|
|
class: 'voa-slide-mask',
|
|
style: 'visibility: hidden',
|
|
children: [this.slide],
|
|
onclick: (e: MouseEvent) => {
|
|
if (e.target === e.currentTarget) {
|
|
this.hide()
|
|
}
|
|
}
|
|
})
|
|
proxy.DomListen(this.mask, () => {
|
|
if (!logic.ready) {
|
|
this.hide()
|
|
}
|
|
})
|
|
document.body.appendChild(this.mask)
|
|
}
|
|
show() {
|
|
this.mask.style.visibility = 'visible'
|
|
this.header.classList.add('voa-slidein-right')
|
|
this.body.classList.add('voa-slidein-up')
|
|
}
|
|
hide() {
|
|
this.mask.style.visibility = 'hidden'
|
|
this.header.classList.remove('voa-slidein-right')
|
|
this.body.classList.remove('voa-slidein-up')
|
|
}
|
|
}
|