web-portals/src/Transform/proptey.ts

web-portals

'use strict'
import { Application } from '../Application'
import { Module } from '../module'
import { TransformOptions, TransformAnimateEvent } from '../types'

class TransformProptey {
  public id: string = ''
  public od: string = ''
  public ids: string[] = []
  public param: string = ''
  public app: Application
  public touches?: TouchEvent
  public module!: Module
  public modulu!: Module
  public moduli!: Array<Module>
  public options!: TransformOptions
  public animation: boolean | Array<(e: TransformAnimateEvent) => void> = false
  public switchover: boolean = false
  public readonly relativeViewport: HTMLElement = document.createElement('relative-windows')
  public readonly absoluteViewport: HTMLElement = document.createElement('absolute-windows')
  public readonly fixedViewport: HTMLElement = document.createElement('fixed-windows')
  public target: HTMLElement | ShadowRoot = this.relativeViewport

  constructor (app: Application) {
    this.app = app
    this.setupViewport()
  }

  setupViewport () {
    this.relativeViewport.id = 'relative-viewport'
    this.relativeViewport?.attachShadow({ mode: 'open' })
    this.absoluteViewport.id = 'absolute-viewport'
    this.absoluteViewport?.attachShadow({ mode: 'open' })
    this.resetViewport()
    this.fixedViewport.id = 'fixed-viewport'
    this.fixedViewport.style.position = 'fixed'
    this.fixedViewport.style.zIndex = '3'
    this.fixedViewport.style.width = '100%'
    this.fixedViewport.style.height = '0'
    this.fixedViewport.style.contain = 'strict'
    this.fixedViewport.style.overflow = 'visible'
    document.body.appendChild(this.relativeViewport)
    document.body.appendChild(this.absoluteViewport)
    document.body.appendChild(this.fixedViewport)
  }

  resetViewport () {
    this.relativeViewport.style.cssText = ''
    this.relativeViewport.style.position = 'absolute'
    this.relativeViewport.style.zIndex = '1'
    this.relativeViewport.style.width = this.relativeViewport.style.height = '100%'
    this.relativeViewport.style.overflow = 'hidden'
    this.relativeViewport.style.contain = 'strict'

    this.absoluteViewport.style.cssText = ''
    this.absoluteViewport.style.position = 'absolute'
    this.absoluteViewport.style.zIndex = '2'
    this.absoluteViewport.style.width = this.absoluteViewport.style.height = '100%'
    this.absoluteViewport.style.overflow = 'visible'
    this.absoluteViewport.style.contain = 'strict'
  }
}

export {
  TransformProptey
}