@umbra.ui/core 0.1.0

package/src/components/navigation/adaptive/useViewAnimation.ts

@@ -0,0 +1,721 @@
+import { nextTick, ref, type Ref } from "vue";
+import { Flip } from "gsap/Flip";
+import gsap from "gsap";
+import { InternalView } from "./types";
+
+gsap.registerPlugin(Flip);
+
+const animationInProgress = ref<boolean>(false);
+
+/*
+# FLIP Order of Operations 
+Step 1: Get State
+Step 3: Manipulate DOM
+Step 4: Animate
+Step 5: Update Data (vue reactive state)
+*/
+
+export const useViewAnimation = (
+  views: Ref<InternalView[]>,
+  instanceKey: string,
+  containerDimensions: Ref<{ width: number; height: number }>,
+  padding: string,
+  gap: string
+) => {
+  /*
+   * Basic animation function
+   */
+
+  const animate = async (
+    targets: HTMLElement[],
+    manipulateDOMFn: () => void,
+    updateDataFn: () => void
+  ) => {
+    if (animationInProgress.value) {
+      console.warn("Animation already in progress");
+      return;
+    }
+    animationInProgress.value = true;
+    // Step 1: Get State
+    const state = Flip.getState(targets);
+
+    // Step 2: Manipulate DOM
+    manipulateDOMFn();
+
+    // Step 3: Animate
+    return Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+      onComplete: () => {
+        animationInProgress.value = false;
+      },
+    }).then(() => {
+      // Step 5: Update Data
+      updateDataFn();
+    });
+  };
+
+  /*
+  Utility Functions
+  */
+
+  // Helper functions to get unique element IDs
+  const getOffscreenLeadingId = () => `${instanceKey}-offscreen-leading`;
+  const getOffscreenTrailingId = () => `${instanceKey}-offscreen-trailing`;
+  const getOnscreenId = () => `${instanceKey}-onscreen`;
+  const getViewId = (view: InternalView) => `${instanceKey}-view-${view.id}`;
+  const getDarkenId = () => `${instanceKey}-darken`;
+  const getOverlayId = () => `${instanceKey}-overlay`;
+
+  const getViewElements = (): HTMLElement[] => {
+    return views.value
+      .map((view) => document.getElementById(getViewId(view)))
+      .filter((element): element is HTMLElement => element !== null);
+  };
+
+  const getAllViewsBefore = (id: string): InternalView[] => {
+    const targetIndex = views.value.findIndex((view) => view.id === id);
+    return views.value.slice(0, targetIndex);
+  };
+
+  const getAllViewsBeforeIndex = (index: number): InternalView[] => {
+    return views.value.slice(0, index);
+  };
+
+  const getAllViewsAfterIndex = (index: number): InternalView[] => {
+    return views.value.slice(index + 1);
+  };
+
+  const getAllViewsAfter = (id: string): InternalView[] => {
+    const targetIndex = views.value.findIndex((view) => view.id === id);
+
+    if (targetIndex === -1) {
+      return []; // View not found
+    }
+
+    return views.value.slice(targetIndex + 1);
+  };
+
+  const getAllViewsAfterWithLocation = (
+    id: string,
+    location: string
+  ): InternalView[] => {
+    const viewsAfter = getAllViewsAfter(id);
+    return viewsAfter.filter((view) => view.location === location);
+  };
+
+  const getAllViewElementsAfterWithLocation = (
+    id: string,
+    location: string
+  ): HTMLElement[] => {
+    const viewsAfter = getAllViewsAfterWithLocation(id, location);
+
+    // Map to HTMLElements and filter out null values
+    return viewsAfter
+      .map((view) => document.getElementById(getViewId(view)))
+      .filter((element): element is HTMLElement => element !== null);
+  };
+
+  const getAllViewElementsBefore = (id: string): HTMLElement[] => {
+    const targetIndex = views.value.findIndex((view) => view.id === id);
+
+    if (targetIndex === -1) {
+      return []; // View not found
+    }
+
+    // Get all views before the target index
+    const precedingViews = views.value.slice(0, targetIndex);
+
+    // Map to HTMLElements and filter out null values
+    return precedingViews
+      .map((view) => document.getElementById(getViewId(view)))
+      .filter((element): element is HTMLElement => element !== null);
+  };
+
+  const getSingleViewBefore = (id: string): InternalView | null => {
+    const targetIndex = views.value.findIndex((view) => view.id === id);
+
+    if (targetIndex === -1 || targetIndex === 0) {
+      return null; // View not found or is first view
+    }
+
+    return views.value[targetIndex - 1];
+  };
+
+  const getSingleViewAfter = (id: string): InternalView | null => {
+    const targetIndex = views.value.findIndex((view) => view.id === id);
+    if (targetIndex === -1 || targetIndex === views.value.length - 1) {
+      return null; // View not found or is last view
+    }
+    return views.value[targetIndex + 1];
+  };
+
+  const getSingleViewElementBefore = (id: string): HTMLElement | null => {
+    const precedingView = getSingleViewBefore(id);
+
+    if (!precedingView) {
+      return null;
+    }
+
+    return document.getElementById(getViewId(precedingView));
+  };
+
+  const isOnscreen = (view: InternalView) => {
+    return view.location === "onscreen";
+  };
+
+  const hasPrecedingViews = (id: string, location: string) => {
+    const targetIndex = views.value.findIndex((view) => view.id === id);
+    if (targetIndex === -1) {
+      return false; // View not found
+    }
+    // Check if ANY preceding view has the specified location
+    return views.value
+      .slice(0, targetIndex)
+      .some((view) => view.location === location);
+  };
+
+  const calculateContentWidth = (
+    containerWidth: number,
+    paddingString: string
+  ): number => {
+    // Handle empty or invalid padding
+    if (!paddingString || paddingString === "0") {
+      return containerWidth;
+    }
+
+    // Split padding string by spaces and filter out empty strings
+    const values = paddingString
+      .trim()
+      .split(/\s+/)
+      .map((v) => parseFloat(v));
+
+    // Determine horizontal padding based on number of values
+    let horizontalPadding = 0;
+
+    switch (values.length) {
+      case 1:
+        // padding: 10px (all sides)
+        horizontalPadding = values[0] * 2;
+        break;
+      case 2:
+        // padding: 10px 20px (vertical horizontal)
+        horizontalPadding = values[1] * 2;
+        break;
+      case 3:
+        // padding: 10px 20px 15px (top horizontal bottom)
+        horizontalPadding = values[1] * 2;
+        break;
+      case 4:
+        // padding: 10px 20px 15px 25px (top right bottom left)
+        horizontalPadding = values[1] + values[3];
+        break;
+    }
+
+    return containerWidth - horizontalPadding;
+  };
+
+  const getFirstViewInOnscreen = () => {
+    return views.value.find((v) => v.location === "onscreen");
+  };
+
+  const getFirstViewInOverlay = () => {
+    return views.value.find((v) => v.location === "overlay");
+  };
+
+  /*
+   * Internal Functions: Splitview
+  For Splitview:
+  - show presents view(s) onscreen from the left. 
+  - hide dismisses view(s) to offscreenfrom the left.
+  - push presents a view from the left.
+  - pop dismisses a view to the left. 
+   */
+
+  type NavigationType = "push" | "pop" | "show" | "hide";
+
+  const splitViewShow = async (id: string) => {
+    const view = views.value.find((v) => v.id === id);
+    if (view?.location === "onscreen") return;
+    await splitViewNavigate(id, "show");
+  };
+
+  const splitViewHide = async (id: string) => {
+    // Prevent hiding the last view (would result in nothing being shown)
+    const viewIndex = views.value.findIndex((view) => view.id === id);
+    if (viewIndex === views.value.length - 1) {
+      return;
+    }
+
+    await splitViewNavigate(id, "hide");
+  };
+
+  const splitViewPush = async (id: string | null = null) => {
+    // if id is provided, push from that id
+    if (id) {
+      await splitViewNavigate(id, "push");
+      return;
+    } else {
+      const firstInOnscreen = getFirstViewInOnscreen()?.id;
+      if (!firstInOnscreen) {
+        console.error("No view to push from");
+        return;
+      }
+      await splitViewNavigate(firstInOnscreen, "push");
+      return;
+    }
+  };
+
+  const splitViewPop = async (id: string | null = null) => {
+    // if id is provided, pop from that id
+    if (id) {
+      await splitViewNavigate(id, "pop");
+      return;
+    }
+    // if id is not provided, pop from the view to the right of the first view in onscreen (yes, I know it's a little weird)
+    else {
+      const firstInOnscreen = getFirstViewInOnscreen()?.id;
+      if (!firstInOnscreen) return;
+      const nextInOnscreen = getSingleViewAfter(firstInOnscreen)?.id;
+      if (!nextInOnscreen) {
+        console.warn("nothing left to pop from");
+        return;
+      }
+      await splitViewNavigate(nextInOnscreen, "pop");
+      return;
+    }
+  };
+
+  const splitViewNavigate = async (id: string, type: NavigationType) => {
+    const elements = getViewElements();
+
+    // Get the appropriate view elements based on type
+    let viewElements: (HTMLElement | null | undefined)[] = [];
+
+    switch (type) {
+      case "push":
+        viewElements = [getSingleViewElementBefore(id)];
+        break;
+      case "pop":
+        viewElements = getAllViewElementsBefore(id);
+        break;
+      case "show":
+        // Get the view with the given id AND all views after it that have location "leading"
+        const currentView = document.getElementById(
+          getViewId(views.value.find((v) => v.id === id)!)
+        );
+        const viewsAfterWithLeading = getAllViewElementsAfterWithLocation(
+          id,
+          "leading"
+        );
+        viewElements = [currentView, ...viewsAfterWithLeading];
+        break;
+      case "hide":
+        // Get the current view AND all views before it
+        const hideCurrentView = document.getElementById(
+          getViewId(views.value.find((v) => v.id === id)!)
+        );
+        viewElements = [hideCurrentView, ...getAllViewElementsBefore(id)];
+        break;
+    }
+
+    // Early return for push if no element found
+    if (type === "push" && !viewElements[0]) return;
+
+    const manipulateDOM = () => {
+      switch (type) {
+        case "push": {
+          const onscreen = document.getElementById(getOnscreenId());
+          if (!onscreen) return;
+
+          const viewElement = viewElements[0];
+          if (viewElement) {
+            viewElement.parentNode?.removeChild(viewElement);
+            viewElement.style.order = "";
+            onscreen.insertBefore(viewElement, onscreen.children[0] || null);
+          }
+          break;
+        }
+
+        case "pop": {
+          const offscreenLeading = document.getElementById(
+            getOffscreenLeadingId()
+          );
+          if (!offscreenLeading) return;
+
+          viewElements.forEach((view) => {
+            if (view) {
+              view.parentNode?.removeChild(view);
+              offscreenLeading.appendChild(view);
+            }
+          });
+          break;
+        }
+
+        case "show": {
+          const onscreen = document.getElementById(getOnscreenId());
+          if (!onscreen) return;
+
+          // Show the view with the given id and all views after it that have location "leading"
+          // Add them at the beginning of onscreen in reverse order to maintain correct sequence
+          viewElements.reverse().forEach((view) => {
+            if (view) {
+              view.parentNode?.removeChild(view);
+              view.style.order = "";
+              onscreen.insertBefore(view, onscreen.children[0] || null);
+            }
+          });
+          break;
+        }
+
+        case "hide": {
+          const offscreenLeading = document.getElementById(
+            getOffscreenLeadingId()
+          );
+          if (!offscreenLeading) return;
+
+          // Hide the current view and all views before it
+          viewElements.forEach((view) => {
+            if (view) {
+              view.parentNode?.removeChild(view);
+              offscreenLeading.appendChild(view);
+            }
+          });
+          break;
+        }
+      }
+    };
+
+    const updateData = async () => {
+      switch (type) {
+        case "push": {
+          const prevIndex = views.value.findIndex(
+            (view) => view.id === getSingleViewBefore(id)?.id
+          );
+          views.value[prevIndex].location = "onscreen";
+          break;
+        }
+
+        case "pop": {
+          const beforeViews = getAllViewsBefore(id);
+          beforeViews.forEach((view) => {
+            view.location = "leading";
+          });
+          break;
+        }
+
+        case "show": {
+          // Update the view with the given id to be onscreen
+          const currentViewIndex = views.value.findIndex((v) => v.id === id);
+          if (currentViewIndex !== -1) {
+            views.value[currentViewIndex].location = "onscreen";
+          }
+
+          // Update all views after the given id that have location "leading" to be onscreen
+          const viewsAfterWithLeading = getAllViewsAfterWithLocation(
+            id,
+            "leading"
+          );
+          viewsAfterWithLeading.forEach((view) => {
+            view.location = "onscreen";
+          });
+          break;
+        }
+
+        case "hide": {
+          // Update the current view and all views before it to be leading/offscreen
+          const currentViewIndex = views.value.findIndex((v) => v.id === id);
+          if (currentViewIndex !== -1) {
+            views.value[currentViewIndex].location = "leading";
+          }
+
+          const beforeViews = getAllViewsBefore(id);
+          beforeViews.forEach((view) => {
+            view.location = "leading";
+          });
+          break;
+        }
+      }
+    };
+
+    await animate(elements, manipulateDOM, updateData);
+  };
+
+  /*
+   * Internal Functions: Slideover
+   For Slideover:
+  - show presents the overlay and the view(s) from the left.
+  - hide dismisses the overlay and its views. 
+  - push presents another view to the overlay from the left.
+  - pop dismisses a view from the overlay to the left. 
+   */
+
+  const slideoverShow = async (id: string) => {
+    // Get the view with the given id AND all views after it that have location "leading"
+    const currentView = views.value.find((v) => v.id === id);
+    if (currentView?.location === "onscreen") {
+      console.warn("This view is already onscreen.");
+      return;
+    }
+    const viewsAfterWithLeading = getAllViewsAfterWithLocation(id, "leading");
+    const viewsToShow = [currentView, ...viewsAfterWithLeading];
+
+    for (const view of viewsToShow) {
+      if (view) {
+        view.location = "overlay";
+      }
+    }
+
+    await nextTick();
+
+    const overlay = document.getElementById(getOverlayId());
+    if (!overlay) return;
+    isOverlayOpen.value = true;
+    overlay.style.pointerEvents = "auto";
+    overlay.style.transform = "translateX(0)";
+  };
+
+  const slideoverHide = async () => {
+    const overlay = document.getElementById(getOverlayId());
+    if (!overlay) return;
+    isOverlayOpen.value = false;
+    overlay.style.pointerEvents = "none";
+    overlay.style.transform = "translateX(calc((110% + 10px) * -1))";
+
+    setTimeout(() => {
+      for (const view of views.value) {
+        if (!view) return;
+        if (view.location === "overlay") {
+          view.location = "leading";
+        }
+      }
+    }, 330);
+  };
+
+  const slideoverPush = async (id: string | null = null) => {
+    let viewId = id;
+    if (!viewId) {
+      const firstInOnscreen = getFirstViewInOnscreen()?.id;
+      if (!firstInOnscreen) return;
+      const prevView = getSingleViewBefore(firstInOnscreen);
+      if (!prevView) {
+        console.warn("no more views to push to");
+        return;
+      }
+      viewId = prevView.id;
+    }
+    // exit and show the overlay if it's not open
+    if (!isOverlayOpen.value) {
+      slideoverShow(viewId);
+      return;
+    }
+
+    // get the elements
+    const overlay = document.getElementById(getOverlayId());
+    if (!overlay) return;
+    const leadingViews = views.value
+      .filter((view) => view.location === "leading")
+      .map((view) => document.getElementById(getViewId(view)))
+      .filter((el): el is HTMLElement => el !== null);
+    const overlayViews = views.value
+      .filter((view) => view.location === "overlay")
+      .map((view) => document.getElementById(getViewId(view)))
+      .filter((el): el is HTMLElement => el !== null);
+    const targets = [...leadingViews, ...overlayViews, overlay];
+
+    // manupulate the DOM
+    const manipulateDOM = () => {
+      const view = getSingleViewElementBefore(viewId);
+      if (!view) return;
+      view.parentNode?.removeChild(view);
+      view.style.order = "";
+      overlay.insertBefore(view, overlay.children[0] || null);
+    };
+
+    // update the data
+    const updateData = () => {
+      const data = getSingleViewBefore(viewId);
+      if (!data) return;
+      data.location = "overlay";
+    };
+
+    animate(targets, manipulateDOM, updateData);
+  };
+
+  const slideoverPop = async (id: string | null = null) => {
+    // exit if the overlay is not open
+    if (!isOverlayOpen.value) {
+      console.warn("No views to pop from");
+      return;
+    }
+    // if id is provided, pop from that id
+    let viewId = id;
+    // if id is not provided, pop from the view to the right of the first view in overlay
+    if (!viewId) {
+      const firstInOverlay = getFirstViewInOverlay()?.id;
+      if (!firstInOverlay) return;
+      const nextView = getSingleViewAfter(firstInOverlay);
+      if (!nextView) {
+        console.warn("nothing left to pop from");
+        return;
+      }
+      // if the next view is not in overlay, dismiss the overlay (since we are at the end)
+      if (nextView.location !== "overlay") {
+        console.warn("No more views in overlay... dismissing");
+        slideoverHide();
+        return;
+      }
+      viewId = nextView.id;
+    }
+    const leading = document.getElementById(getOffscreenLeadingId());
+    const overlay = document.getElementById(getOverlayId());
+    if (!leading || !overlay) {
+      console.error("Elements are null");
+      return;
+    }
+    const elements = getViewElements();
+    const before = getAllViewElementsBefore(viewId);
+
+    const targets = [...elements, overlay];
+
+    const manipulateDOM = () => {
+      const offscreenLeading = document.getElementById(getOffscreenLeadingId());
+      if (!offscreenLeading) return;
+      leading.style.zIndex = "10";
+      before.forEach((view) => {
+        view.parentNode?.removeChild(view);
+        offscreenLeading.appendChild(view);
+      });
+    };
+
+    const updateData = () => {
+      const beforeViews = getAllViewsBefore(viewId);
+      beforeViews.forEach((view) => {
+        view.location = "leading";
+      });
+      leading.style.zIndex = "";
+    };
+    await animate(targets, manipulateDOM, updateData);
+  };
+
+  /*
+   * Internal Functions: Navstack
+   For Navstack:
+  - show presents any view fullscreen from either the left or the right depending on location in the stack
+  - push presents next view fullscreen from the right, and dismisses current view to the left.
+  - pop dismisses current view to the right, and pushes preceeding view fullscreen from the left. 
+   */
+
+  const navstackShow = async (id: string) => {
+    const index = views.value.findIndex((view) => view.id === id);
+    navstackNavigateTo(index);
+  };
+
+  const navstackPush = async () => {
+    const currentIndex = views.value.findIndex(
+      (view) => view.location === "onscreen"
+    );
+    navstackNavigateTo(currentIndex + 1);
+  };
+
+  const navstackPop = async (id: string) => {
+    const currentIndex = views.value.findIndex(
+      (view) => view.location === "onscreen"
+    );
+    navstackNavigateTo(currentIndex - 1);
+  };
+
+  const navstackNavigateTo = async (index: number) => {
+    const onscreen = document.getElementById(getOnscreenId());
+    const offscreenLeading = document.getElementById(getOffscreenLeadingId());
+    const offscreenTrailing = document.getElementById(getOffscreenTrailingId());
+    if (!onscreen || !offscreenLeading || !offscreenTrailing) return;
+    const currentIndex = views.value.findIndex(
+      (view) => view.location === "onscreen"
+    );
+    if (currentIndex === -1) return;
+    const oldView = views.value[currentIndex];
+    const newView = views.value[index];
+
+    // Ensure index is within bounds
+    if (index < 0 || index >= views.value.length) {
+      console.warn(`Navigation index ${index} out of bounds`);
+      return;
+    }
+
+    const currentView = document.getElementById(getViewId(oldView));
+    if (!currentView) return;
+
+    const nextView = document.getElementById(getViewId(newView));
+    if (!nextView) return;
+
+    // determine which offscreen container to use
+    const offscreenContainerOutflow =
+      index > currentIndex ? offscreenLeading : offscreenTrailing;
+
+    const targets = [currentView, nextView];
+    const manipulateDOM = () => {
+      currentView.style.width = `${calculateContentWidth(
+        containerDimensions.value.width,
+        padding
+      )}px`;
+      nextView.style.width = `${calculateContentWidth(
+        containerDimensions.value.width,
+        padding
+      )}px`;
+      currentView.parentNode?.removeChild(currentView);
+      offscreenContainerOutflow.appendChild(currentView);
+      nextView.parentNode?.removeChild(nextView);
+      onscreen.appendChild(nextView);
+    };
+    const updateData = () => {
+      // set up all views before the new view to leading
+      const prevViews = getAllViewsBeforeIndex(index);
+      prevViews.forEach((view) => {
+        view.location = "leading";
+      });
+      // set up all views after the new view to trailing
+      const nextViews = getAllViewsAfterIndex(index);
+      nextViews.forEach((view) => {
+        view.location = "trailing";
+      });
+      // set up the new view to onscreen
+      newView.location = "onscreen";
+      currentView.style.width = "";
+      nextView.style.width = "";
+    };
+    await animate(targets, manipulateDOM, updateData);
+  };
+
+  /*
+  State
+  */
+  const isOverlayOpen = ref(false);
+
+  return {
+    splitViewShow,
+    splitViewHide,
+    splitViewPush,
+    splitViewPop,
+    slideoverShow,
+    slideoverHide,
+    slideoverPush,
+    slideoverPop,
+    navstackShow,
+    navstackPush,
+    navstackPop,
+    getOffscreenLeadingId,
+    getOffscreenTrailingId,
+    getOnscreenId,
+    getViewId,
+    getDarkenId,
+    getOverlayId,
+    getViewElements,
+    isOnscreen,
+    hasPrecedingViews,
+    isOverlayOpen,
+    getSingleViewBefore,
+    getSingleViewAfter,
+  };
+};