OneAuth/oaer/lib/components/slide.ts

/*
 * slide.ts
 * Copyright (C) 2024 veypi <i@veypi.com>
 * 2024-10-22 17:57
 * Distributed under terms of the GPL license.
 */
import v from './v2dom'
import bus from '../bus'
import account from './account'
import app from './app'

/*
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',
      innerHtml: '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' })
      ]
    })
    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()
        }
      }
    })
    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')
  }
}