@dxtmisha/constructor 0.23.0

package/src/constructors/Window/WindowPosition.ts

@@ -0,0 +1,358 @@
+import { getElement, isDomRuntime } from '@dxtmisha/functional'
+
+import { WindowClient } from './WindowClient'
+import { WindowElement } from './WindowElement'
+import { WindowCoordinates } from './WindowCoordinates'
+
+import type { WindowProps } from './props'
+
+/**
+ * A class for working with position.
+ *
+ * Класс для работы с позицией.
+ */
+export class WindowPosition {
+  protected x: number = 0
+  protected y: number = 0
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param client object for working with mouse pointer coordinates/ объект для работы с координатами указателя мыши
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   * @param coordinates object for working with coordinates/ объект для работы с координатами
+   */
+
+  constructor(
+    protected readonly props: WindowProps,
+    protected readonly client: WindowClient,
+    protected readonly element: WindowElement,
+    protected readonly coordinates: WindowCoordinates
+  ) {
+  }
+
+  /**
+   * Checks if the alignment type is above the element.
+   *
+   * Проверяет, является ли тип выравнивания над элементом.
+   */
+  isOver(): boolean {
+    return this.props.axis === 'on'
+  }
+
+  /**
+   * Returns the X position.
+   *
+   * Возвращает позицию X.
+   */
+  getX(): number {
+    return this.x
+  }
+
+  /**
+   * Returns the Y position.
+   *
+   * Возвращает позицию Y.
+   */
+  getY(): number {
+    return this.y
+  }
+
+  /**
+   * Returns the X position for styles.
+   *
+   * Возвращает позицию X для стилей.
+   */
+  getStyleX(): string {
+    return `${this.x}px`
+  }
+
+  /**
+   * Returns the Y position for styles.
+   *
+   * Возвращает позицию Y для стилей.
+   */
+  getStyleY(): string {
+    return `${this.y}px`
+  }
+
+  /**
+   * Update of the element's position coordinates.
+   *
+   * Обновление координаты положения элемента.
+   */
+  update(): boolean {
+    if (this.coordinates.update()) {
+      this.setX()
+      this.setY()
+
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Updates the scroll position if an element is selected.
+   *
+   * Обновляет место скрола, если выбран элемент.
+   */
+  updateScroll(): void {
+    const elementBodyContext = this.element.getBodyContext()
+
+    if (
+      this.isOver()
+      && this.props.overElement
+      && elementBodyContext
+      && elementBodyContext.scrollHeight > elementBodyContext.offsetHeight
+    ) {
+      const rect = getElement(this.props.overElement)?.getBoundingClientRect()
+      const rectBody = this.element.getBody()?.getBoundingClientRect()
+      const rectBodyContext = elementBodyContext?.getBoundingClientRect()
+      const rectControl = this.element.getControl()?.getBoundingClientRect()
+
+      if (
+        elementBodyContext
+        && rect
+        && rectBody
+        && rectBodyContext
+      ) {
+        const center = rect.height / 2
+        const shift = rect.top - rectBodyContext.top
+
+        if (
+          rectControl
+          && this.coordinates.getMaxHeight() === rectBody.height
+        ) {
+          if (rectControl.top + center < rectBody.top) {
+            elementBodyContext.scrollTop += shift
+            return
+          }
+
+          if (rectControl.bottom - center > rectBody.bottom) {
+            elementBodyContext.scrollTop += shift - rectBodyContext.height + rect.height
+            return
+          }
+
+          elementBodyContext.scrollTop += shift - (rectControl.top - rectBodyContext.top) - (rectControl.height / 2) + center
+          return
+        }
+
+        elementBodyContext.scrollTop += shift - (rectBodyContext.height / 2) + center
+      }
+    }
+  }
+
+  /**
+   * Updates the scroll display status of the element.
+   *
+   * Обновляет статус отображения скролла у элемента.
+   */
+  updateBody(): void {
+    if (isDomRuntime()) {
+      const body = document.body
+      const value = body.offsetHeight > window.innerHeight ? 'scroll' : 'none'
+
+      if (body.dataset.scroll !== value) {
+        body.dataset.scroll = value
+      }
+    }
+  }
+
+  /**
+   * Returns the axis alignment values.
+   *
+   * Возвращает значения оси выравнивания.
+   */
+  protected getAxis(): WindowProps['axis'] {
+    return this.isOver() ? 'y' : (this.props?.axis ?? 'y')
+  }
+
+  /**
+   * Returns the margins from the control element.
+   *
+   * Возвращает отступы от элемента управления.
+   * @param axis the axis of alignment of the element/ ось выравнивания элемента
+   */
+  protected getIndent(axis: string): number {
+    return this.getAxis() === axis ? (this.props.indent ?? 4) : 0
+  }
+
+  /**
+   * Calculation of the position for window alignment.
+   *
+   * Вычисление места положения для выравнивания окна.
+   * @param rectTop high control coordinates/ высокие координаты контрола
+   * @param rectBottom lower control coordinates/ нижние координаты контрола
+   */
+  protected getOverHeight(
+    rectTop: number,
+    rectBottom: number
+  ) {
+    const over = (rectBottom - rectTop) / 2
+
+    if (this.props.overElement) {
+      const rect = getElement(this.props.overElement)?.getBoundingClientRect()
+      const rectBody = this.element.getBody()?.getBoundingClientRect()
+
+      if (rect && rectBody) {
+        const top = rect.top - rectBody.top
+        const height = rect.height / 2
+
+        return rectBottom - top - height - over
+      }
+    }
+
+    const height = this.coordinates.getHeight() / 2
+
+    return rectBottom - over - height
+  }
+
+  /**
+   * Changes in position along the X coordinate.
+   *
+   * Изменения положения по координате X.
+   */
+  protected setX(): this {
+    const element = this.element.getMain()
+
+    if (element) {
+      const indent = this.getIndent('x')
+      const rectRight = this.props.contextmenu ? this.client.getX() : this.coordinates.getRight() + indent
+      const rectLeft = this.props.contextmenu ? this.client.getX() : this.coordinates.getLeft() - indent
+      const argumentValues: number[] = []
+
+      if (this.getAxis() === 'x') {
+        argumentValues.push(rectRight, rectLeft)
+      } else {
+        argumentValues.push(rectLeft, rectRight)
+      }
+
+      this.x = this.calculationInner(
+        argumentValues[0] as number,
+        argumentValues[1] as number,
+        element.offsetWidth,
+        window.innerWidth,
+        this.coordinates.getWidth()
+      )
+    }
+
+    return this
+  }
+
+  /**
+   * Changes in position along the Y coordinate.
+   *
+   * Изменения положения по координате Y.
+   */
+  protected setY(): this {
+    const element = this.element.getMain()
+
+    if (element) {
+      const indent = this.getIndent('y')
+      const rectTop = this.props.contextmenu ? this.client.getY() : this.coordinates.getTop() - indent
+      const rectBottom = this.props.contextmenu ? this.client.getY() : this.coordinates.getBottom() + indent
+      const argumentValues: number[] = []
+
+      if (this.isOver()) {
+        this.y = this.calculationOver(
+          this.getOverHeight(rectTop, rectBottom),
+          rectTop,
+          rectBottom,
+          element.offsetHeight,
+          window.innerHeight
+        )
+
+        return this
+      } else if (this.getAxis() !== 'x') {
+        argumentValues.push(rectBottom, rectTop)
+      } else {
+        argumentValues.push(rectTop, rectBottom)
+      }
+
+      this.y = this.calculationInner(
+        argumentValues[0] as number,
+        argumentValues[1] as number,
+        element.offsetHeight,
+        window.innerHeight,
+        this.coordinates.getHeight()
+      )
+    }
+
+    return this
+  }
+
+  /**
+   * Calculation of the element's position.
+   *
+   * Вычисление положения элемента.
+   * @param inValue initial values/ начальные значения
+   * @param outValue final values/ конечные значения
+   * @param length length of the object/ длина объекта
+   * @param innerLength length of the indentation/ длина отступа
+   * @param maxSize maximum length/ максимальная длина
+   */
+  protected calculationInner(
+    inValue: number,
+    outValue: number,
+    length: number,
+    innerLength: number,
+    maxSize: number
+  ): number {
+    const padding = this.coordinates.getPadding()
+
+    if (inValue + length <= innerLength - padding) {
+      return inValue
+    }
+
+    if (outValue - length > padding) {
+      return outValue - length
+    }
+
+    return (innerLength / 2) - (maxSize / 2)
+  }
+
+  /**
+   * Calculation of the element's position.
+   *
+   * Вычисление положения над элемента.
+   * @param value initial values/ начальные значения
+   * @param top high control coordinates/ высокие координаты контрола
+   * @param bottom lower control coordinates/ нижние координаты контрола
+   * @param length length of the object/ длина объекта
+   * @param innerLength length of the indentation/ длина отступа
+   */
+  protected calculationOver(
+    value: number,
+    top: number,
+    bottom: number,
+    length: number,
+    innerLength: number
+  ): number {
+    const padding = this.coordinates.getPadding()
+
+    if (bottom < padding) {
+      return bottom
+    }
+
+    if (top > innerLength - padding) {
+      const data = top - length - padding
+
+      if (data < padding) {
+        return padding
+      }
+
+      return data
+    }
+
+    if (value < padding) {
+      return padding
+    }
+
+    if (value + length <= innerLength - padding) {
+      return value
+    }
+
+    return innerLength - length - padding
+  }
+}

package/src/constructors/Window/WindowStatic.ts

@@ -0,0 +1,102 @@
+import { ref, type ToRefs, watch } from 'vue'
+import { EventItem, setRef } from '@dxtmisha/functional'
+
+import { WindowElement } from './WindowElement'
+
+import type { WindowProps } from './props'
+
+/**
+ * Class for working with a static window.
+ *
+ * Класс для работы со статичным окном.
+ */
+export class WindowStatic {
+  protected event?: EventItem<Window, Event>
+
+  readonly item = ref<boolean>(false)
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   */
+  constructor(
+    protected readonly props: WindowProps,
+    refs: ToRefs<WindowProps>,
+    protected readonly element: WindowElement
+  ) {
+    watch([refs.staticMode], this.make, { immediate: true })
+  }
+
+  /**
+   * Checks if the static mode is enabled.
+   *
+   * Проверяет, включен ли режим статичности.
+   */
+  isStaticMod(): boolean {
+    return Boolean(this.props.staticMode)
+  }
+
+  /**
+   * Starts the status tracking event.
+   *
+   * Стартует событие слежения за статусами.
+   */
+  start(): void {
+    if (!this.event) {
+      this.event = new EventItem(window, ['resize'], this.listener)
+    }
+
+    this.event.start()
+  }
+
+  /**
+   * Restores the data to its previous state.
+   *
+   * Восстанавливает данные в прежнее состояние.
+   */
+  stop(): void {
+    if (this.event) {
+      this.event.stop()
+      this.event = undefined
+    }
+  }
+
+  /**
+   * Checks if the static window is active.
+   *
+   * Проверяет, активно ли статичное окно.
+   */
+  protected isStatic(): boolean {
+    const element = this.element.getMain()
+
+    return Boolean(
+      element
+      && getComputedStyle(element).content === '"--STATIC--"'
+    )
+  }
+
+  /**
+   * The function called when an event is triggered.
+   *
+   * Вызываемая функция при срабатывании события.
+   */
+  protected readonly listener = (): void => {
+    setRef(this.item, this.isStatic())
+  }
+
+  /**
+   * Performs status check and activates events when turned on.
+   *
+   * Выполняет проверку статуса и активизирует события при включении.
+   */
+  protected readonly make = (): void => {
+    if (this.isStaticMod()) {
+      this.start()
+      requestAnimationFrame(this.listener)
+    } else {
+      this.stop()
+    }
+  }
+}

package/src/constructors/Window/WindowStatus.ts

@@ -0,0 +1,138 @@
+import { ref } from 'vue'
+
+import { WindowElement } from './WindowElement'
+
+import { WindowStatusItem } from './basicTypes'
+
+/**
+ * A class that changes the status of the current component. This is needed for
+ * working with animation and behavior of the element when opening/closing.
+ *
+ * Класс, отвечающий за изменение статуса текущего компонента. Это нужно для работы
+ * с анимацией и поведением элемента при открытии/закрытии.
+ */
+export class WindowStatus {
+  readonly item = ref<WindowStatusItem>(WindowStatusItem.close)
+
+  /**
+   * Constructor
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   */
+  constructor(
+    protected readonly element: WindowElement
+  ) {
+  }
+
+  /**
+   * Checks if the current status is closed (hide).
+   *
+   * Проверяет, является ли текущий статус закрытым (hide).
+   */
+  isHide(): boolean {
+    return this.item.value === WindowStatusItem.hide
+  }
+
+  /**
+   * Checks if the current status is open (open/flash).
+   *
+   * Проверяет, является ли текущий статус открытым (open/flash).
+   */
+  isOpen(): boolean {
+    return this.item.value === WindowStatusItem.open || this.item.value === WindowStatusItem.flash
+  }
+
+  /**
+   * Change the current status.
+   *
+   * Изменить текущий статус.
+   * @param value value/ значение
+   */
+  set(value: WindowStatusItem): this {
+    this.item.value = value
+    this.update()
+
+    return this
+  }
+
+  /**
+   * Translates status to display.
+   *
+   * Переводит статус в display.
+   */
+  toDisplay(): this {
+    this.set(WindowStatusItem.display)
+    return this
+  }
+
+  /**
+   * Translates status to preparation.
+   *
+   * Переводит статус в preparation.
+   */
+  toPreparation(): this {
+    this.set(WindowStatusItem.preparation)
+    return this
+  }
+
+  /**
+   * Translates status to flash.
+   *
+   * Переводит статус в flash.
+   */
+  toFlash(): this {
+    this.set(WindowStatusItem.flash)
+    return this
+  }
+
+  /**
+   * Translates status to open.
+   *
+   * Переводит статус в open.
+   */
+  toOpen(): this {
+    this.set(WindowStatusItem.open)
+    return this
+  }
+
+  /**
+   * Translates status to hide.
+   *
+   * Переводит статус в hide.
+   */
+  toHide(): this {
+    this.set(WindowStatusItem.hide)
+    return this
+  }
+
+  /**
+   * Translates status to close.
+   *
+   * Переводит статус в close.
+   */
+  toClose(): this {
+    this.set(WindowStatusItem.close)
+    return this
+  }
+
+  /**
+   * Updates the data-status attribute on the main element and teleport element.
+   *
+   * Обновляет атрибут data-status на основном элементе и элементе телепорта.
+   */
+  update(): void {
+    const element = this.element.getMain()
+
+    if (element) {
+      const teleportElement = element.parentElement
+
+      element.dataset.status = this.item.value
+
+      if (
+        teleportElement
+        && teleportElement.dataset.windowTeleport
+      ) {
+        teleportElement.dataset.status = this.item.value
+      }
+    }
+  }
+}

package/src/constructors/Window/WindowStyles.ts

@@ -0,0 +1,78 @@
+import { watch } from 'vue'
+
+import { WindowElement } from './WindowElement'
+import { WindowCoordinates } from './WindowCoordinates'
+import { WindowPosition } from './WindowPosition'
+import { WindowOrigin } from './WindowOrigin'
+
+/**
+ * Style management class.
+ *
+ * Класс управления стилями.
+ */
+export class WindowStyles {
+  /**
+   * Constructor
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   * @param coordinates object for working with coordinates/ объект для работы с координатами
+   * @param position object for working with the position of the element/ объект для работы с положением элемента
+   * @param origin the object for work is in the initial position upon opening/ объект для работы в начальной позиции при открытии
+   * @param className class name/ название класса
+   */
+  constructor(
+    protected readonly element: WindowElement,
+    protected readonly coordinates: WindowCoordinates,
+    protected readonly position: WindowPosition,
+    protected readonly origin: WindowOrigin,
+    protected readonly className: string
+  ) {
+    watch(this.element.element, () => this.update())
+  }
+
+  /**
+   * Data update.
+   *
+   * Обновление данных.
+   */
+  update(): void {
+    const element = this.element.getMain()
+
+    if (element) {
+      element.style.setProperty(`--${this.className}-sys-inset-x`, this.position.getStyleX())
+      element.style.setProperty(`--${this.className}-sys-inset-y`, this.position.getStyleY())
+      element.style.setProperty(`--${this.className}-origin-x`, this.origin.getStyleX())
+      element.style.setProperty(`--${this.className}-origin-y`, this.origin.getStyleY())
+      element.style.setProperty(`--${this.className}-sys-control-width`, `${this.coordinates.getControlWidth()}px`)
+      element.style.setProperty(`--${this.className}-sys-control-height`, `${this.coordinates.getControlHeight()}px`)
+      element.style.setProperty(`--${this.className}-sys-location`, this.coordinates.getLocation())
+    }
+  }
+
+  /**
+   * Updates the window type (menu or modal).
+   *
+   * Обновляет тип окна (меню или модальное).
+   * @param isMenu whether the window is a menu/ является ли окно меню
+   */
+  updateType(isMenu: boolean): void {
+    const element = this.element.getMain()
+
+    if (
+      element && (
+        (isMenu && (element.dataset.windowMenu !== 'menu'))
+        || (!isMenu && (element.dataset.windowMenu === 'menu'))
+      )
+    ) {
+      const teleportElement = element.parentElement
+
+      element.dataset.windowMenu = isMenu ? 'menu' : 'modal'
+
+      if (
+        teleportElement
+        && teleportElement.dataset.windowTeleport
+      ) {
+        teleportElement.dataset.windowMenu = element.dataset.windowMenu
+      }
+    }
+  }
+}