refactor: (WIP) create classes to handle different animation types

Author: igorMSoares

js-css-animations/AnimationHandler.js

@@ -0,0 +1,30 @@
+export default class AnimationHandler {
+  constructor(element, action, animationId) {
+    this.element = element;
+    this.action = action;
+    this.animationId = animationId;
+  }
+
+  static modules = {};
+
+  static async getModule(modulePath) {
+    if (!(modulePath in this.modules)) {
+      const module = await import(modulePath);
+      this.modules[modulePath] = module;
+    }
+
+    return this.modules[modulePath];
+  }
+
+  begin() {
+    throw new TypeError("Method 'begin' is not implemented.");
+  }
+
+  middle() {
+    throw new TypeError("Method 'middle' is not implemented.");
+  }
+
+  end() {
+    throw new Error("Method 'end' is not implemented.");
+  }
+}

js-css-animations/MotionAnimationHandler.js

@@ -0,0 +1,56 @@
+import { MOTION_ANIMS_ID, PROPERTY_NAMES, CLASS_NAMES } from './globals.js';
+import AnimationHandler from './AnimationHandler.js';
+
+export default class MotionAnimationHandler extends AnimationHandler {
+  constructor(element, action, animationId) {
+    super(element, action, animationId);
+    this.currentTransition = null;
+  }
+
+  static #transitionsModule = null;
+
+  static #removeMotionCssClass(element) {
+    const className = [...element.classList].find(cl =>
+      cl.match(/js\-anim\-\-(rotate|scale)/)
+    );
+
+    if (className) element.classList.remove(className);
+    if (className === CLASS_NAMES.move[MOTION_ANIMS_ID.rotate]) {
+      element.style.removeProperty(PROPERTY_NAMES.angle);
+    }
+  }
+
+  static async #initTransitionsModule() {
+    if (!this.#transitionsModule) {
+      this.#transitionsModule = await AnimationHandler.getModule(
+        './transitions.js'
+      );
+    }
+  }
+
+  async begin() {
+    await MotionAnimationHandler.#initTransitionsModule();
+    this.currentTransition =
+      MotionAnimationHandler.#transitionsModule.getCurrentTransition(
+        this.element
+      );
+    MotionAnimationHandler.#removeMotionCssClass(this.element);
+  }
+
+  async middle() {
+    await MotionAnimationHandler.#initTransitionsModule();
+    if (this.currentTransition) {
+      MotionAnimationHandler.#transitionsModule.appendTransition(
+        this.element,
+        CLASS_NAMES[this.action][this.animationId],
+        this.currentTransition
+      );
+    }
+    if (this.action === 'move') this.element.classList.add(CLASS_NAMES.moved);
+  }
+
+  end() {
+    if (this.action === 'moveBack')
+      this.element.classList.remove(CLASS_NAMES.moved);
+  }
+}

js-css-animations/VisibilityAnimationHandler.js

@@ -0,0 +1,71 @@
+import { CLASS_NAMES, PROPERTY_NAMES } from './globals.js';
+import AnimationHandler from './AnimationHandler.js';
+
+export default class VisibilityAnimationHandler extends AnimationHandler {
+  constructor(element, action, animationId) {
+    super(element, action, animationId);
+    this.overflowHidden = null;
+    this.maintainSpace = null;
+  }
+
+  setOverflowHidden(overflowHidden) {
+    this.overflowHidden = overflowHidden;
+  }
+
+  setMaintainSpace(maintainSpace) {
+    this.maintainSpace = maintainSpace;
+  }
+
+  static #applyOverflowHidden(element) {
+    element.classList.add(CLASS_NAMES.overflowHidden);
+  }
+
+  static #removeOverflowHidden(element) {
+    element.classList.remove(CLASS_NAMES.overflowHidden);
+  }
+
+  static #hasIterationProp(element) {
+    const iterationProperty = element.style.getPropertyValue(
+      PROPERTY_NAMES.iteration
+    );
+
+    return (
+      iterationProperty != '1' &&
+      iterationProperty.match(/^(infinite|\d+)$/) !== null
+    );
+  }
+
+  begin() {
+    if (this.overflowHidden && this.element.parentElement)
+      VisibilityAnimationHandler.#applyOverflowHidden(
+        this.element.parentElement
+      );
+  }
+
+  middle() {
+    setTimeout(() => {
+      if (this.action === 'show') {
+        this.element.classList.remove(
+          CLASS_NAMES.hidden,
+          CLASS_NAMES.collapsed
+        );
+      }
+    }, 0);
+  }
+
+  end() {
+    if (this.action === 'hide') {
+      this.maintainSpace
+        ? this.element.classList.add(CLASS_NAMES.hidden)
+        : this.element.classList.add(CLASS_NAMES.collapsed);
+    }
+
+    if (this.overflowHidden && this.element.parentElement)
+      VisibilityAnimationHandler.#removeOverflowHidden(
+        this.element.parentElement
+      );
+
+    if (!VisibilityAnimationHandler.#hasIterationProp(this.element))
+      this.element.classList.remove(CLASS_NAMES[this.action][this.animationId]);
+  }
+}

js-css-animations/VisibilityAnimationWithParentResizeHandler.js

@@ -0,0 +1,84 @@
+import VisibilityAnimationHandler from './VisibilityAnimationHandler.js';
+
+export default class VisibilityAnimationWithParentResizeHandler extends VisibilityAnimationHandler {
+  constructor(element, action, animationId) {
+    super(element, action, animationId);
+    this.heightTransition = null;
+    this.widthTransition = null;
+    this.dimension = null;
+    this.parentMeasures = null;
+  }
+
+  setDimensionsTransition(heightTransition, widthTransition) {
+    this.heightTransition = heightTransition;
+    this.widthTransition = widthTransition;
+  }
+
+  static #resizeParentModule = null;
+  static #measurementsModule = null;
+
+  static async #initResizeParentModule() {
+    if (!VisibilityAnimationWithParentResizeHandler.#resizeParentModule) {
+      VisibilityAnimationWithParentResizeHandler.#resizeParentModule =
+        await this.getModule('./resize-parent.js');
+    }
+  }
+
+  static async #initMeasurementsModule() {
+    if (!VisibilityAnimationWithParentResizeHandler.#measurementsModule) {
+      VisibilityAnimationWithParentResizeHandler.#measurementsModule =
+        await this.getModule('./measurements.js');
+    }
+  }
+
+  async begin() {
+    await VisibilityAnimationWithParentResizeHandler.#initResizeParentModule();
+    super.begin();
+
+    if (this.widthTransition || this.heightTransition) {
+      const parentData =
+        VisibilityAnimationWithParentResizeHandler.#resizeParentModule.initParentResize(
+          {
+            element: this.element,
+            action: this.action,
+            widthTransition: this.widthTransition,
+            heightTransition: this.heightTransition,
+          }
+        );
+
+      this.parentMeasures = parentData.parentMeasures;
+      this.dimension = parentData.dimension;
+    }
+  }
+
+  async middle() {
+    await VisibilityAnimationWithParentResizeHandler.#initMeasurementsModule();
+    super.middle();
+
+    setTimeout(() => {
+      if (this.dimension)
+        VisibilityAnimationWithParentResizeHandler.#measurementsModule.setParentMaxMeasures(
+          {
+            parentState: 'final',
+            element: this.element,
+            parentMeasures: this.parentMeasures,
+            action: this.action,
+            dimension: this.dimension,
+          }
+        );
+    }, 0);
+  }
+
+  async end() {
+    await VisibilityAnimationWithParentResizeHandler.#initResizeParentModule();
+    super.end();
+
+    const { widthTransition, heightTransition } = this;
+    if (widthTransition || heightTransition) {
+      VisibilityAnimationWithParentResizeHandler.#resizeParentModule.endParentResize(
+        this.element,
+        { widthTransition, heightTransition }
+      );
+    }
+  }
+}