@dxtmisha/constructor 0.23.0

package/src/constructors/Window/WindowVerification.ts

@@ -0,0 +1,287 @@
+import { isDomRuntime, isFilled } from '@dxtmisha/functional'
+
+import { WindowPersistent } from './WindowPersistent'
+import { WindowClasses } from './WindowClasses'
+import { WindowElement } from './WindowElement'
+import { WindowStatic } from './WindowStatic'
+import { WindowOpen } from './WindowOpen'
+
+import type { WindowProps } from './props'
+
+/**
+ * Class for managing the opening and closing of the window.
+ *
+ * Класс для управления открытием и закрытием окна.
+ */
+export class WindowVerification {
+  protected target?: HTMLElement
+  protected focus?: HTMLElement
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param persistent object for working with the animation before turning off the window/ объект для работы с анимацией перед выключением окна
+   * @param classes an object for working with classes and searching for elements/ объект для работы с классами и поиском элементов
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   * @param staticMode class object for working with static status/ объект класса для работы со статическим статусом
+   * @param open the class object for working with the status of closing or opening the window/ объект класса для работы со статусом закрытия или открытия окна
+   */
+
+  constructor(
+    protected readonly props: WindowProps,
+    protected readonly persistent: WindowPersistent,
+    protected readonly classes: WindowClasses,
+    protected readonly element: WindowElement,
+    protected readonly staticMode: WindowStatic,
+    protected readonly open: WindowOpen
+  ) {
+  }
+
+  /**
+   * Updates the window opening status.
+   *
+   * Обновления статус открытия окно.
+   * @param target the selected window/ выбранное окно
+   */
+  async update(target: HTMLElement): Promise<void> {
+    if (this.open.isClicks()) {
+      return
+    }
+
+    this.target = target
+    this.focus = this.getFocus()
+
+    if (!isDomRuntime()) {
+      return
+    }
+
+    this.open.pressed()
+
+    if (!this.isTargetInBody()) {
+      return
+    }
+
+    if (this.staticMode.item.value) {
+      return
+    }
+
+    if (this.open.item.value) {
+      if (
+        this.isOpenOnly()
+        || this.isBlockOther()
+      ) {
+        return
+      } else if (this.isContextmenu()) {
+        await this.open
+          .reset()
+          .watchPosition()
+      } else if (!isFilled(this.focus)) {
+        await this.open.toggle()
+      } else if (!this.isFocus()) {
+        if (this.isNotBlock()) {
+          if (this.isChildren()) {
+            setTimeout(() => {
+              requestAnimationFrame(async () => {
+                if (
+                  ['open', 'flash'].indexOf(this.focus?.dataset.status || '') === -1
+                  && this.isMenu()
+                ) {
+                  await this.open.toggle()
+                }
+              })
+            }, 40)
+          } else {
+            await this.open.toggle()
+          }
+        }
+      } else if (this.isTarget()) {
+        if (this.isNotBlockChildren()) {
+          if (!this.persistent.on()) {
+            await this.open.toggle()
+          }
+        }
+      } else if (
+        this.isClose()
+        || this.isAutoClose()
+        || !this.isChildren()
+      ) {
+        await this.open.toggle()
+      }
+    } else if (this.isEnabled()) {
+      await this.open.toggle()
+    }
+  }
+
+  /**
+   * Returns the element in focus.
+   *
+   * Возвращает элемент в фокусе.
+   */
+  getFocus() {
+    return this.classes.findMain(this.getTarget())
+  }
+
+  protected getTarget<R extends HTMLElement>(): R {
+    return (this.target ?? this.element.getMain() ?? document.body) as R
+  }
+
+  /**
+   * Checks if the selected element is in focus.
+   *
+   * Проверяет, находится ли выбранный элемент в фокусе.
+   */
+  protected isFocus(): boolean {
+    return this.element.getMain() === this.focus
+  }
+
+  /**
+   * Checks if the target element is the window itself.
+   *
+   * Проверяет, является ли элемент-цель самим окном.
+   */
+  protected isTarget(): boolean {
+    return this.element.getMain() === this.target
+  }
+
+  protected isTargetInBody(): boolean {
+    return Boolean(this.target?.closest('body'))
+  }
+
+  /**
+   * Checks if the selected window is under other windows.
+   *
+   * Проверяет, находится ли выбранное окно под другими окнами.
+   * @param target the selected window/ выбранное окно
+   */
+  protected isChildren(
+    target: HTMLElement = this.getTarget()
+  ): boolean {
+    const focus = this.classes.findMain(target)
+
+    if (focus) {
+      if (focus.dataset.window === this.classes.getId()) {
+        return true
+      }
+
+      const control = this.classes.findControlByElement(focus)
+
+      if (control) {
+        return this.isChildren(control)
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * Checks if the window is enabled or if the conditions for opening the window are met.
+   *
+   * Проверяет, включено ли окно или подходят ли условия для открытия окна.
+   */
+  protected isEnabled(): boolean {
+    return !this.props.disabled
+      && !this.getTarget().closest(`.${this.classes.list.controlStatic}`)
+  }
+
+  /**
+   * Checks if the window needs to be closed automatically.
+   *
+   * Проверяет, нужно ли автоматически закрывать окно.
+   */
+  protected isAutoClose(): boolean {
+    return Boolean(this.props.autoClose)
+      && !this.getTarget()
+        .closest(`.${this.classes.list.static}, .${this.classes.getId()} .${this.classes.list.control}`)
+  }
+
+  /**
+   * Checks if the change of the opening status of the window is blocked.
+   *
+   * Проверяет, заблокировано ли изменение статуса открытия окна.
+   */
+  protected isNotBlock(): boolean {
+    return this.isNotBlockItem(this.focus)
+  }
+
+  /**
+   * Checks if the change of the opening status of the window is blocked.
+   *
+   * Проверяет, заблокировано ли изменение статуса открытия окна.
+   * @param item element for testing/ элемент для проверки
+   */
+  protected isNotBlockItem(item?: HTMLElement): boolean {
+    const target = this.getTarget()
+
+    return (!this.isMenu(target) || !this.classes.isWindow(target))
+      && !this.classes.findControlByElement(item)?.closest(`.${this.classes.list.block}`)
+  }
+
+  /**
+   * Checks if there is an element with a close lock.
+   *
+   * Проверяет, есть ли элемент с блокировкой закрытия.
+   */
+  protected isNotBlockChildren(): boolean {
+    return !this.classes.findBody()?.querySelector(`.${this.classes.list.blockChildren}`)
+      && !this.classes.findBody()?.querySelector('[data-window-open="open"]')
+  }
+
+  /**
+   * Checks if there is a blocking element from other windows.
+   *
+   * Проверяет, есть ли блокирующий элемент от других окон.
+   */
+  protected isBlockOther(): boolean {
+    return Boolean(this.classes.findBodyOther(`.${this.classes.list.blockOther}`))
+  }
+
+  /**
+   * Checks if it needs to be opened when the right button is pressed.
+   *
+   * Проверяет, нужно ли открывать при нажатии правой кнопки.
+   */
+  protected isContextmenu(): boolean {
+    return Boolean(
+      this.props.contextmenu
+      && this.getTarget().closest(this.classes.getSelectorControl())
+    )
+  }
+
+  /**
+   * Checks if the window can be closed.
+   *
+   * Проверяет, можно ли закрыть окно.
+   */
+  protected isClose(): boolean {
+    return Boolean(
+      this.getTarget()
+        .closest(`.${this.classes.list.close}:not(.${this.classes.list.static})`)
+    )
+  }
+
+  /**
+   * Checks if the element is a menu.
+   *
+   * Проверяет, является ли элемент меню.
+   */
+  protected isMenu(element: HTMLElement | undefined = this.element.getMain()): boolean {
+    if (element) {
+      const style = getComputedStyle(element)
+      return style.content === '"--MENU--"' || style.content === '"--MENU-WINDOW--"'
+    }
+
+    return false
+  }
+
+  /**
+   * Checks if the element should only open.
+   *
+   * Проверяет, должен ли элемент только открываться.
+   */
+  protected isOpenOnly() {
+    return Boolean(
+      this.getTarget()
+        .closest(`.${this.classes.list.controlOpenOnly}`)
+    )
+  }
+}

package/src/constructors/Window/basicTypes.ts

@@ -0,0 +1,186 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { WindowExpose } from './types'
+import type { WindowPropsBasic } from './props'
+
+/**
+ * Window status items for different states of window lifecycle/
+ * Элементы статуса окна для различных состояний жизненного цикла окна
+ */
+export enum WindowStatusItem {
+  /** Display state/ Состояние отображения */
+  display = 'display',
+  /** Preparation state/ Состояние подготовки */
+  preparation = 'preparation',
+  /** Flash state/ Состояние вспышки */
+  flash = 'flash',
+  /** Open state/ Состояние открытия */
+  open = 'open',
+  /** Hide state/ Состояние скрытия */
+  hide = 'hide',
+  /** Close state/ Состояние закрытия */
+  close = 'close'
+}
+
+/**
+ * Window status control items for managing window behavior and appearance/
+ * Элементы управления статусом окна для управления поведением и внешним видом окна
+ */
+export enum WindowStatusControlItem {
+  /** Block interaction/ Блокировка взаимодействия */
+  block = 'block',
+  /**
+   * Block window closing, class added to elements inside window/
+   * Блокировка закрытия окна, класс добавляется к элементам внутри окна
+   */
+  blockChildren = 'blockChildren',
+  /** Block other windows/ Блокировка других окон */
+  blockOther = 'blockOther',
+  /** Close window/ Закрыть окно */
+  close = 'close',
+  /** Static positioning/ Статическое позиционирование */
+  static = 'static',
+  /** Static control/ Статическое управление */
+  controlStatic = 'controlStatic',
+  /** Control only when open/ Управление только когда открыто */
+  controlOpenOnly = 'controlOpenOnly',
+  /** Active control/ Активное управление */
+  controlActive = 'controlActive',
+  /** Persistent window/ Постоянное окно */
+  persistent = 'persistent'
+}
+
+/**
+ * Options for window events/
+ * Опции для событий окна
+ */
+export type WindowEmitOptions = {
+  /** Unique window identifier/ Уникальный идентификатор окна */
+  id: string
+  /** Window DOM element/ DOM элемент окна */
+  element: HTMLDivElement
+  /** Control DOM element/ DOM элемент управления */
+  control: HTMLElement
+  /** Window open state/ Состояние открытия окна */
+  open: boolean
+}
+
+/**
+ * List of CSS classes for window styling/
+ * Список CSS классов для стилизации окна
+ */
+export type WindowClassesList = {
+  /** Main block class/ Основной класс блока */
+  block: string
+  /** Block children class/ Класс дочерних элементов блока */
+  blockChildren: string
+  /** Block other windows class/ Класс блокировки других окон */
+  blockOther: string
+  /** Close button class/ Класс кнопки закрытия */
+  close: string
+  /** Static positioning class/ Класс статического позиционирования */
+  static: string
+
+  /** Control element class/ Класс элемента управления */
+  control: string
+  /** Control ID class/ Класс ID управления */
+  controlId: string
+  /** Static control class/ Класс статического управления */
+  controlStatic: string
+  /** Open-only control class/ Класс управления только для открытого состояния */
+  controlOpenOnly: string
+  /** Active control class/ Класс активного управления */
+  controlActive: string
+
+  /** Persistent window class/ Класс постоянного окна */
+  persistent: string
+}
+
+/**
+ * Window event click handler/
+ * Обработчик события клика окна
+ */
+export type WindowEventClick = (event: MouseEvent & TouchEvent) => Promise<void>
+
+/**
+ * Interface for window classes inclusion/
+ * Интерфейс для включения классов окна
+ */
+export type WindowControlBasic = {
+  /** Window CSS classes list/ Список CSS классов окна */
+  classesWindow: WindowClassesList
+}
+
+/**
+ * Control item data for window management/
+ * Данные элемента управления для управления окном
+ */
+export type WindowControlItem = WindowControlBasic
+  & {
+    /** CSS class string/ Строка CSS класса */
+    class: string
+    /** Reactive open state/ Реактивное состояние открытия */
+    open: Ref<boolean>
+    /** Click event handler/ Обработчик события клика */
+    onclick: WindowEventClick
+    /** Context menu event handler/ Обработчик события контекстного меню */
+    oncontextmenu: WindowEventClick
+    /** Binding properties/ Свойства привязки */
+    binds: {
+      /** Binding class/ Класс привязки */
+      class: string
+      /** Click event handler for binding/ Обработчик события клика для привязки */
+      onclick: WindowEventClick
+      /** Context menu event handler for binding/ Обработчик события контекстного меню для привязки */
+      oncontextmenu: WindowEventClick
+    }
+  }
+
+/**
+ * Component map for including the Window component/
+ * Карта компонентов для подключения компонента Window
+ */
+export type WindowComponentInclude = {
+  window?: object
+}
+
+/**
+ * Event map for Window include/
+ * Карта событий для подключения Window
+ */
+export type WindowEmitsInclude = {
+  window: [options: WindowEmitOptions]
+}
+
+/**
+ * Interface for window expose inclusion/
+ * Интерфейс для включения expose окна
+ */
+export interface WindowExposeInclude {
+  id: ComputedRef<string | undefined>
+  open: ComputedRef<boolean>
+  control: ComputedRef<WindowControlItem | undefined>
+
+  setOpen: WindowExpose['setOpen']
+  toOpen: WindowExpose['toOpen']
+  toClose: WindowExpose['toClose']
+  toggle: WindowExpose['toggle']
+
+  windowElement: Ref<ConstrBind<WindowExpose> | undefined>
+}
+
+/**
+ * Props used to include and configure the Window component/
+ * Свойства для подключения и настройки компонента Window
+ */
+export interface WindowPropsInclude<
+  Window extends WindowPropsBasic = WindowPropsBasic
+> {
+  /** Disabled state/ Отключённое состояние */
+  disabled?: boolean
+  /** Enable auto close on outside click/ Включить авто-закрытие при клике вне */
+  autoClose?: boolean
+  /** Additional attributes for Window component/ Дополнительные атрибуты для компонента Window */
+  windowAttrs?: ConstrBind<Window>
+}

package/src/constructors/Window/index.ts

@@ -0,0 +1,7 @@
+export * from './Window'
+export * from './WindowDesign'
+export * from './WindowInclude'
+export * from './WindowClassesInclude'
+export * from './props'
+export type * from './types'
+export type * from './basicTypes'