@dxtmisha/constructor 0.23.0

package/src/constructors/MotionTransform/MotionTransformElement.ts

@@ -0,0 +1,220 @@
+import { computed, type Ref } from 'vue'
+import { getElementId } from '@dxtmisha/functional'
+
+import type { MotionTransformClassList, MotionTransformStyle } from './basicTypes'
+import type { MotionTransformProps } from './props'
+
+/**
+ * Class for working with elements and classes.
+ *
+ * Класс для работы с элементами и классами.
+ */
+export class MotionTransformElement {
+  readonly classes: MotionTransformClassList
+  readonly style: MotionTransformStyle
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param element window element/ элемент окна
+   * @param elementContext substrate element/ элемент подложка
+   * @param className class name/ название класса
+   */
+  constructor(
+    protected readonly props: MotionTransformProps,
+    readonly element: Ref<HTMLDivElement | undefined>,
+    protected readonly elementContext: Ref<HTMLDivElement | undefined>,
+    protected readonly className: string
+  ) {
+    this.classes = MotionTransformElement.getClassesList(className)
+
+    this.style = {
+      top: `--${this.className}-sys-top`,
+      left: `--${this.className}-sys-left`,
+      height: `--${this.className}-sys-height`,
+      scale: `--${this.className}-sys-scale`,
+
+      contextWidth: `--${this.className}-sys-context-width`,
+      contextHeight: `--${this.className}-sys-context-height`,
+
+      headWidth: `--${this.className}-sys-head-width`,
+      headHeight: `--${this.className}-sys-head-height`,
+      headScale: `--${this.className}-sys-head-scale`,
+
+      bodyHeight: `--${this.className}-sys-body-height`
+    }
+  }
+
+  /** Checks if the element exists/ Проверяет, есть ли элемент */
+  readonly is = computed<boolean>(() => Boolean(this.element.value))
+
+  /**
+   * Checks if the click event is prohibited.
+   *
+   * Проверяет, запрещено ли событие клика.
+   * @param target selected element/ выбранный элемент
+   */
+  isClick(target: HTMLElement): boolean {
+    return Boolean(
+      target.closest<HTMLElement>(`.${this.classes.click}`)
+      || !target.closest<HTMLElement>(`.${this.classes.none}`)
+    )
+  }
+
+  /**
+   * Checks if the click event is prohibited in the global area.
+   *
+   * Проверяет, запрещено ли событие клика в глобальной области.
+   * @param target selected element/ выбранный элемент
+   */
+  isClickGlobal(target: HTMLElement): boolean {
+    return !target.closest<HTMLElement>(`.${this.classes.noneGlobal}`)
+  }
+
+  /**
+   * Checks if the window needs to be closed on click.
+   *
+   * Проверяет, нужно ли закрыть окно при клике.
+   * @param target selected element/ выбранный элемент
+   */
+  isClose(target: HTMLElement): boolean {
+    return Boolean(target.closest<HTMLElement>(`${this.getId()} .${this.classes.close}`))
+  }
+
+  /**
+   * Checks if the element is outside the body.
+   *
+   * Проверяет, является ли элемент за предел тела.
+   * @param target selected element/ выбранный элемент
+   */
+  isOutside(target: HTMLElement): boolean {
+    return !target.closest(this.getId())
+  }
+
+  /**
+   * Checks if the element needs to be ignored.
+   *
+   * Проверяет, нужно ли игнорировать элемент.
+   * @param target selected element/ выбранный элемент
+   */
+  isIgnore(target: HTMLElement): boolean {
+    return !(this.props.ignore && target.closest(getElementId(this.props.ignore, '')))
+      && !(this.props.ignoreSelector && target.closest(this.props.ignoreSelector))
+  }
+
+  /**
+   * Is the animation for slide changes enabled.
+   *
+   * Включено ли анимация на изменения слайда.
+   */
+  isAnimation(): boolean {
+    return Boolean(
+      this.elementContext.value
+      && this.props.animationShow
+    )
+  }
+
+  /**
+   * Is window mode enabled.
+   *
+   * Включен ли режим окна.
+   */
+  isWindow(): boolean {
+    return Boolean(
+      this.element.value
+      && getComputedStyle(this.element.value).content === '"--WINDOW--"'
+    )
+  }
+
+  /**
+   * Checks whether the title needs to be left.
+   *
+   * Проверяет, надо ли оставить заголовок.
+   */
+  isSection(): boolean {
+    return Boolean(this.props.section)
+  }
+
+  /**
+   * Returns the main element.
+   *
+   * Возвращает главного элемента.
+   */
+  getElement(): HTMLDivElement | undefined {
+    return this.element.value
+  }
+
+  /**
+   * Returns the context element.
+   *
+   * Возвращает элемент контекста.
+   */
+  getElementContext(): HTMLDivElement | undefined {
+    return this.elementContext.value
+  }
+
+  /**
+   * Returns the title element.
+   *
+   * Возвращает элемент заголовка.
+   */
+  getElementHead(): HTMLDivElement | undefined {
+    return this.getElement()?.querySelector<HTMLDivElement>(`.${this.className}__head`) || undefined
+  }
+
+  /**
+   * Returns the body element.
+   *
+   * Возвращает элемент тела.
+   */
+  getElementBody(): HTMLDivElement | undefined {
+    return this.getElement()?.querySelector<HTMLDivElement>(`.${this.className}__body`) || undefined
+  }
+
+  /**
+   * Returns the identifier.
+   *
+   * Возвращает идентификатор.
+   */
+  getId(): string {
+    return `#${getElementId(this.element.value)}`
+  }
+
+  /**
+   * Returns the sizes of elements.
+   *
+   * Возвращает размеры элементов.
+   */
+  getRect(): DOMRect | undefined {
+    return this.getElementContext()?.getBoundingClientRect()
+  }
+
+  /**
+   * Returns the list of available classes.
+   *
+   * Возвращает список доступных классов.
+   * @param className class name/ название класса
+   */
+  static getClassesList(className: string): MotionTransformClassList {
+    return {
+      show: `${className}--show`,
+      open: `${className}--open`,
+      window: `${className}--window`,
+
+      click: `${className}--click`,
+      close: `${className}--close`,
+      none: `${className}--none`,
+      noneGlobal: `${className}--noneGlobal`
+    }
+  }
+
+  /**
+   * Returns a list of available classes by design name.
+   *
+   * Возвращает список доступных классов по названию дизайна.
+   * @param design design name/ названия дизайна
+   */
+  static getClassesListByDesign(design: string) {
+    return this.getClassesList(`${design}-motionTransform`)
+  }
+}

package/src/constructors/MotionTransform/MotionTransformEvent.ts

@@ -0,0 +1,118 @@
+import { watch } from 'vue'
+import { type ConstrEmit, EventItem } from '@dxtmisha/functional'
+
+import { MotionTransformElement } from './MotionTransformElement'
+import { MotionTransformState } from './MotionTransformState'
+
+import type { MotionTransformEmitOptions } from './basicTypes'
+import type { MotionTransformEmits } from './types'
+import type { MotionTransformProps } from './props'
+
+/**
+ * Class for event management.
+ *
+ * Класс для управления событиями.
+ */
+export class MotionTransformEvent {
+  protected readonly item: EventItem<HTMLElement, PointerEvent>
+
+  /**
+   * Constructor.
+   *
+   * Конструктор.
+   * @param props input data/ входные данные
+   * @param element class object for managing an element/ объект класса для управления элементом
+   * @param state class object for status management/ объект класса для управления статусом
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: MotionTransformProps,
+    protected readonly element: MotionTransformElement,
+    protected readonly state: MotionTransformState,
+    protected readonly emits?: ConstrEmit<MotionTransformEmits>
+  ) {
+    this.item = new EventItem(document.body, 'click', this.listener)
+
+    watch(this.state.open, () => this.item.toggle(this.state.open.value))
+  }
+
+  /**
+   * Stopping event listening.
+   *
+   * Остановка прослушивания события.
+   */
+  stop(): this {
+    this.item.stop()
+    return this
+  }
+
+  /**
+   * Click event on the title.
+   *
+   * Событие клика на заголовок.
+   * @param event event object/ объект события
+   */
+  readonly onClick = (event: Event) => {
+    if (
+      this.props.clickOpen
+      && this.element.isClick(event.target as HTMLElement)
+    ) {
+      this.emit(event, 'head')
+      this.state.toggle()
+    }
+  }
+
+  /**
+   * End of animation event.
+   *
+   * Событие окончания анимации.
+   * @param event event object/ объект события
+   */
+  readonly onTransitionend = (event: TransitionEvent) => {
+    if (
+      this.element.getElement() === event.target
+      && event.propertyName === 'height'
+    ) {
+      this.state.reset()
+    }
+  }
+
+  /**
+   * Event call.
+   *
+   * Вызов события.
+   * @param event event object/ объект события
+   * @param type event type/ тип события
+   */
+  emit(
+    event: Event | undefined,
+    type: MotionTransformEmitOptions['type']
+  ): void {
+    const options: MotionTransformEmitOptions = {
+      type,
+      open: !this.state.open.value
+    }
+
+    this.emits?.('transform', event, options)
+    this.emits?.('transformLite', options)
+  }
+
+  protected listener = (event: PointerEvent) => {
+    const target = event.target as HTMLDivElement
+
+    if (
+      this.state.open.value
+      && this.element.isClickGlobal(target) && (
+        this.element.isClose(target)
+        || (
+          this.props.autoClose
+          && this.element.isOutside(target)
+          && this.element.isIgnore(target)
+        )
+      )
+    ) {
+      this.emit(event, 'body')
+      this.state.set(false)
+    }
+  }
+}

package/src/constructors/MotionTransform/MotionTransformGo.ts

@@ -0,0 +1,47 @@
+import { MotionTransformState } from './MotionTransformState'
+
+/**
+ * Class for managing control actions.
+ *
+ * Класс для управления действиями управления.
+ */
+export class MotionTransformGo {
+  /**
+   * Constructor.
+   *
+   * Конструктор.
+   * @param state class object for status management/ объект класса для управления статусом
+   */
+  constructor(
+    protected readonly state: MotionTransformState
+  ) {}
+
+  /**
+   * Opens.
+   *
+   * Открывает.
+   */
+  readonly open = () => this.state.set(true)
+
+  /**
+   * Closes.
+   *
+   * Закрывает.
+   */
+  readonly close = () => this.state.set(false)
+
+  /**
+   * Switching.
+   *
+   * Переключение.
+   */
+  readonly toggle = () => this.state.toggle()
+
+  /**
+   * State changes.
+   *
+   * Изменение состояния.
+   * @param open opening status/ статус открытия
+   */
+  readonly to = (open: boolean) => this.state.set(open)
+}

package/src/constructors/MotionTransform/MotionTransformInclude.ts

@@ -0,0 +1,123 @@
+import { computed, ref, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  type RefOrNormal,
+  toBind,
+  type ConstrEmit
+} from '@dxtmisha/functional'
+
+import type { MotionTransformProps } from './props'
+import type { MotionTransformEmits, MotionTransformExpose, MotionTransformSlots } from './types'
+import type {
+  MotionTransformComponentInclude,
+  MotionTransformEmitOptions, MotionTransformExposeInclude,
+  MotionTransformPropsInclude
+} from './basicTypes'
+
+/**
+ * The class returns data for working with the MotionTransform component
+ *
+ * Класс возвращает данные для работы с компонентом MotionTransform
+ */
+export class MotionTransformInclude<
+  Props extends MotionTransformPropsInclude = MotionTransformPropsInclude,
+  PropsExtra extends ConstrBind<MotionTransformProps> = ConstrBind<MotionTransformProps>
+> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param emits the function is called when an event is triggered/ функция вызывается при срабатывании события
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<MotionTransformComponentInclude, Props>,
+    protected readonly emits?: ConstrEmit<MotionTransformEmits>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /** Reference to MotionTransform element expose/ Ссылка на expose элемента MotionTransform */
+  readonly element = ref<ConstrBind<MotionTransformExpose> | undefined>()
+
+  /** Computed bindings for MotionTransform/ Вычисляемые привязки для MotionTransform */
+  readonly binds = computed<PropsExtra>(() => {
+    const props = toBind<PropsExtra>(
+      getRef(this.extra) ?? {},
+      this.props.motionTransformAttrs ?? {}
+    )
+
+    return {
+      ...props,
+
+      open: this.props.open,
+      clickOpen: this.props.clickOpen,
+      autoClose: this.props.autoClose
+    }
+  })
+
+  /**
+   * Expose helpers for MotionTransform state and actions/
+   * Вспомогательные методы expose для состояния и действий MotionTransform
+   */
+  readonly expose: MotionTransformExposeInclude = {
+    open: computed(() => Boolean(this.element.value?.open)),
+    isShow: computed(() => Boolean(this.element.value?.isShow)),
+    setOpen: async (open: boolean) => this.element.value?.setOpen(open),
+    toOpen: async () => this.element.value?.toOpen(),
+    toClose: async () => this.element.value?.toClose(),
+    toggle: async () => this.element.value?.toggle(),
+
+    motionTransformElement: this.element
+  }
+
+  /**
+   * Emits 'transform' event upward/
+   * Поднимает событие 'transform' наверх
+   * @param event native event/ нативное событие
+   * @param options payload/ параметры события
+   */
+  readonly onTransform = (
+    event: Event | undefined,
+    options: MotionTransformEmitOptions
+  ) => {
+    this.emits?.('transform', event, options)
+    this.emits?.('transformLite', options)
+  }
+
+  /**
+   * Render the MotionTransform component with slots/
+   * Рендер компонента MotionTransform со слотами
+   * @param slotsChildren slots passed to the component/ слоты, передаваемые компоненту
+   * @param attrs additional attributes/ дополнительные атрибуты
+   */
+  readonly render = (
+    slotsChildren: MotionTransformSlots,
+    attrs?: ConstrBind<MotionTransformProps>
+  ): VNode[] => {
+    if (this.components) {
+      return this.components.render(
+        'motionTransform',
+        {
+          onTransform: this.onTransform,
+          ...toBind(
+            attrs ?? {},
+            this.binds.value
+          ),
+          ref: this.element
+        },
+        slotsChildren as unknown as Record<string, any>,
+        this.index
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/MotionTransform/MotionTransformSize.ts

@@ -0,0 +1,97 @@
+import { MotionTransformElement } from './MotionTransformElement'
+
+/**
+ * Class for managing size calculation.
+ *
+ * Класс для управления вычислением размера.
+ */
+export class MotionTransformSize {
+  /** Top offset for transform/ Верхнее смещение для трансформации */
+  top: string | null = null
+  /** Left offset for transform/ Левое смещение для трансформации */
+  left: string | null = null
+  /** Head width value/ Ширина шапки */
+  headWidth: string | null = null
+  /** Total height value/ Общая высота */
+  height: string | null = null
+  /** Scale factor/ Коэффициент масштаба */
+  scale: string | null = null
+
+  /** Context width/ Ширина контекста */
+  contextWidth: string | null = null
+  /** Context height/ Высота контекста */
+  contextHeight: string | null = null
+
+  /** Head height value/ Высота шапки */
+  headHeight: string | null = null
+  /** Head scale factor/ Коэффициент масштаба шапки */
+  headScale: string | null = null
+
+  /** Body height value/ Высота тела */
+  bodyHeight: string | null = null
+
+  /**
+   * Constructor
+   * @param element class object for managing an element/ объект класса для управления элементом
+   */
+  constructor(
+    protected element: MotionTransformElement
+  ) {
+  }
+
+  /**
+   * Update all sizes.
+   *
+   * Обновить все размеры.
+   */
+  update(): void {
+    const rect = this.element.getRect()
+
+    if (rect) {
+      const elementHead = this.element.getElementHead()
+      const elementBody = this.element.getElementBody()
+
+      const scale = 1 / window.innerWidth * rect.width
+      const headScale = 1 / rect.width * window.innerWidth
+
+      this.top = `${rect.top - (scale * rect.top / (scale - 1))}px`
+      this.left = `${rect.left - (scale * rect.left / (scale - 1))}px`
+      this.height = `${100 / window.innerHeight * rect.height * headScale}%`
+      this.scale = scale.toString()
+
+      this.contextWidth = `${rect.width}px`
+      this.contextHeight = `${rect.height}px`
+
+      if (elementHead) {
+        this.headWidth = `${rect.width}px`
+        this.headHeight = `${elementHead.offsetHeight ?? '0'}px`
+        this.headScale = headScale.toString()
+
+        if (elementBody) {
+          this.bodyHeight = `${elementBody.offsetHeight + (this.element.isSection() ? elementHead.offsetHeight : 0)}px`
+        }
+      }
+    }
+  }
+
+  /**
+   * Restores all data to original.
+   *
+   * Восстанавливает все данные на изначальные.
+   */
+  reset(): void {
+    this.top = null
+    this.left = null
+    this.height = null
+    this.scale = null
+
+    this.contextWidth = null
+    this.contextHeight = null
+
+    this.headWidth = null
+    this.headHeight = null
+    this.headScale = null
+
+    this.bodyHeight = null
+  }
+}