katalyst-kpop 3.0.0.beta.7 → 3.0.0.beta.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 703872786c0b5e4229301d5b3af0bbf25c114d71cded5d82a000ceaa5b1ce171
-  data.tar.gz: a05c973a7e0485e5d01b7e1f9043a4ea18fe72863997310dfe2ab3db1bf17e18
+  metadata.gz: c29776e86c6d5f591b5f5398987da2487a6d8eba09f44da2988852c4b594502b
+  data.tar.gz: '004809bbf80602c942b5d4074062d5793c3f210f07f1d1a97a844e544ef60038'
 SHA512:
-  metadata.gz: 4afa23866748222ae7d1dd092700dfee01a8885e1afb8c847043f1c117e7f2e72ea1949c325e37c33e4d90b959a019d3ab81a0b282b1ca91da78f58e5f2d4dce
-  data.tar.gz: 2f85201edeaf47ac7890a1e3824285ab34e1418d41134d5bd623046c5aabc8ad4ec082c3f27435eb034c8779f8fdc3df5369dc5931b4ef4f21bb2c888f7a3fee
+  metadata.gz: c4d2466c600eb9c88e68556d08aac862b102052675fa8cdad68aac0033356a52669b0e02f2238b6affff871d98d3410efe22c39bc0bcaeb09a9ae619d728026d
+  data.tar.gz: 613392880bd2d59e6610213cec65b4746766c5c8fa6409ec2dca8e9add724a0423f0abdc5c607fe492465409ab79451558d50a44534ce131345e28d39c5811c5

data/app/assets/builds/katalyst/kpop.esm.js

@@ -44,6 +44,10 @@ class Modal {
     return document.getElementById(this.id);
   }
 
+  get controller() {
+    return this.frameElement?.kpop;
+  }
+
   get modalElement() {
     return this.frameElement?.querySelector("[data-controller*='kpop--modal']");
   }
@@ -53,7 +57,7 @@ class Modal {
   }
 
   get fallbackLocationValue() {
-    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"] || "/";
+    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"];
   }
 
   get isCurrentLocation() {
@@ -62,18 +66,39 @@ class Modal {
     );
   }
 
+  static debug(event, ...args) {
+  }
+
   debug(event, ...args) {
   }
 }
 
 class ContentModal extends Modal {
+  static connect(frame, element) {
+    frame.open(new ContentModal(element.id), { animate: false });
+  }
+
   constructor(id, src = null) {
     super(id);
 
     if (src) this.src = src;
   }
 
+  /**
+   * When the modal is dismissed we can't rely on a back navigation to close the
+   * modal as the user may have navigated to a different location. Instead we
+   * remove the content from the dom and replace the current history state with
+   * the fallback location, if set.
+   *
+   * If there is no fallback location, we may be showing a stream modal that was
+   * injected and cached by turbo. In this case, we clear the frame element and
+   * do not change history.
+   *
+   * @returns {Promise<void>}
+   */
   async dismiss() {
+    const fallbackLocation = this.fallbackLocationValue;
+
     await super.dismiss();
 
     if (this.visitStarted) {
@@ -85,12 +110,11 @@ class ContentModal extends Modal {
       return;
     }
 
-    return this.pop("turbo:load", () => {
-      this.debug("turbo-visit", this.fallbackLocationValue);
-      Turbo.visit(this.fallbackLocationValue);
-    });
+    this.frameElement.innerHTML = "";
 
-    // no specific close action required, this is turbo's responsibility
+    if (fallbackLocation) {
+      window.history.replaceState(window.history.state, "", fallbackLocation);
+    }
   }
 
   beforeVisit(frame, e) {
@@ -110,11 +134,81 @@ class ContentModal extends Modal {
 }
 
 class FrameModal extends Modal {
+  /**
+   * When the FrameController detects a frame element on connect, it runs this
+   * method to santity check the frame src and restore the modal state.
+   *
+   * @param frame FrameController
+   * @param element TurboFrame element
+   */
+  static connect(frame, element) {
+    const modal = new FrameModal(element.id, element.src);
+
+    // state reconciliation for turbo restore of invalid frames
+    if (modal.isCurrentLocation) {
+      // restoration visit
+      this.debug("restore", element.src);
+      return frame.open(modal, { animate: false });
+    } else {
+      console.warn(
+        "kpop: restored frame src doesn't match window href",
+        modal.src,
+        window.location.href
+      );
+      return frame.clear();
+    }
+  }
+
+  /**
+   * When a user clicks a kpop link, turbo intercepts the click and calls
+   * navigateFrame on the turbo frame controller before setting the TurboFrame
+   * element's src attribute. KPOP intercepts this call and calls this method
+   * first so we cancel problematic navigations that might cache invalid states.
+   *
+   * @param location URL requested by turbo
+   * @param frame FrameController
+   * @param element TurboFrame element
+   * @param resolve continuation chain
+   */
+  static visit(location, frame, element, resolve) {
+    // Ensure that turbo doesn't cache the frame in a loading state by cancelling
+    // the current request (if any) by clearing the src.
+    // Known issue: this won't work if the frame was previously rendering a useful src.
+    if (element.hasAttribute("busy")) {
+      this.debug("clearing src to cancel turbo request");
+      element.src = "";
+    }
+
+    if (element.src === location) {
+      this.debug("skipping navigate as already on location");
+      return;
+    }
+
+    if (element.src && element.src !== window.location.href) {
+      console.warn(
+        "kpop: frame src doesn't match window",
+        element.src,
+        window.location.href,
+        location
+      );
+      frame.clear();
+    }
+
+    this.debug("navigate to", location);
+    resolve();
+  }
+
   constructor(id, src) {
     super(id);
     this.src = src;
   }
 
+  /**
+   * FrameModals are closed by running pop state and awaiting the turbo:load
+   * event that follows on history restoration.
+   *
+   * @returns {Promise<void>}
+   */
   async dismiss() {
     await super.dismiss();
 
@@ -127,6 +221,13 @@ class FrameModal extends Modal {
     // no specific close action required, this is turbo's responsibility
   }
 
+  /**
+   * When user navigates from inside a Frame modal, dismiss the modal first so
+   * that the modal does not appear in the history stack.
+   *
+   * @param frame FrameController
+   * @param e Turbo navigation event
+   */
   beforeVisit(frame, e) {
     super.beforeVisit(frame, e);
 
@@ -138,13 +239,6 @@ class FrameModal extends Modal {
       this.debug("before-visit-end");
     });
   }
-
-  popstate(frame, e) {
-    super.popstate(frame, e);
-
-    // Turbo will restore modal state, but we need to reset the scrim
-    frame.scrimOutlet.hide({ animate: false });
-  }
 }
 
 class Kpop__FrameController extends Controller {
@@ -158,22 +252,19 @@ class Kpop__FrameController extends Controller {
     this.debug("connect", this.element.src);
 
     this.element.kpop = this;
-    installNavigationInterception(this.element, this.element.delegate);
 
-    // restoration visit
+    // allow our code to intercept frame navigation requests before dom changes
+    installNavigationInterception(this);
+
     if (this.element.src && this.element.complete) {
       this.debug("new frame modal", this.element.src);
-      this.open(new FrameModal(this.element.id, this.element.src), {
-        animate: false,
-      });
+      FrameModal.connect(this, this.element);
+    } else if (this.modalElements.length > 0) {
+      this.debug("new content modal", window.location.pathname);
+      ContentModal.connect(this, this.element);
     } else {
-      const element = this.element.querySelector(
-        "[data-controller*='kpop--modal']"
-      );
-      if (element) {
-        this.debug("new content modal", window.location.pathname);
-        this.open(new ContentModal(this.element.id), { animate: false });
-      }
+      this.debug("no modal");
+      this.clear();
     }
   }
 
@@ -209,6 +300,8 @@ class Kpop__FrameController extends Controller {
       return false;
     }
 
+    await this.dismissing;
+
     return (this.opening ||= this.#nextFrame(() =>
       this.#open(modal, { animate })
     ));
@@ -220,46 +313,45 @@ class Kpop__FrameController extends Controller {
       return false;
     }
 
+    await this.opening;
+
     return (this.dismissing ||= this.#nextFrame(() =>
       this.#dismiss({ animate, reason })
     ));
   }
 
-  // EVENTS
+  async clear() {
+    // clear the src from the frame (if any)
+    this.element.src = "";
 
-  popstate(event) {
-    this.modal?.popstate(this, event);
-  }
+    // remove any open modal(s)
+    this.modalElements.forEach((element) => element.remove());
 
-  navigateFrame(element, location) {
-    this.debug("navigate-frame", this.element.src, location);
+    // mark the modal as hidden (will hide scrim on connect)
+    this.openValue = false;
 
-    // Ensure that turbo doesn't cache the frame in a loading state by cancelling
-    // the current request (if any) by clearing the src.
-    // Known issue: this won't work if the frame was previously rendering a useful src.
-    if (this.element.hasAttribute("busy")) {
-      this.debug("clearing src to cancel turbo request");
-      this.element.src = "";
+    // close the scrim, if connected
+    if (this.scrimConnected) {
+      return this.scrimOutlet.hide({ animate: false });
     }
 
-    if (this.element.src === location) {
-      this.debug("skipping navigate as already on location");
-      return false;
-    }
+    // unset modal
+    this.modal = null;
+  }
 
-    if (this.element.src !== window.location.href) {
-      console.warn("kpop: frame src doesn't match window", this.element.src, window.location.href, location);
-      // clear src so that turbo doesn't cache the frame in a loading state
-      this.element.delegate.ignoringChangesToAttribute("src", (() => {
-        this.element.src = "";
-        this.element.delegate.complete = false;
-      }));
-    }
+  // EVENTS
 
-    // Delay turbo's navigateFrame until next tick to let the src change settle.
-    return Promise.resolve(true);
+  popstate(event) {
+    this.modal?.popstate(this, event);
   }
 
+  /**
+   * Incoming frame render, dismiss the current modal (if any) first.
+   *
+   * We're starting the actual visit
+   *
+   * @param event turbo:before-render
+   */
   beforeFrameRender(event) {
     this.debug("before-frame-render", event.detail.newFrame.baseURI);
 
@@ -302,15 +394,25 @@ class Kpop__FrameController extends Controller {
   frameLoad(event) {
     this.debug("frame-load");
 
-    return this.open(new FrameModal(this.element.id, this.element.src), {
-      animate: true,
-    });
+    const modal = new FrameModal(this.element.id, this.element.src);
+
+    window.addEventListener(
+      "turbo:visit",
+      (e) => {
+        this.open(modal, { animate: true });
+      },
+      { once: true }
+    );
   }
 
   get isOpen() {
     return this.openValue && !this.dismissing;
   }
 
+  get modalElements() {
+    return this.element.querySelectorAll("[data-controller*='kpop--modal']");
+  }
+
   async #open(modal, { animate = true } = {}) {
     this.debug("open-start", { animate });
 
@@ -367,16 +469,26 @@ class Kpop__FrameController extends Controller {
  *
  * See Turbo issue: https://github.com/hotwired/turbo/issues/1055
  *
- * @param frameElement turbo-frame element
+ * @param controller FrameController
  */
-function installNavigationInterception(frameElement, controller) {
-  if (controller._navigateFrame === undefined) {
-    controller._navigateFrame = controller.navigateFrame;
-    controller.navigateFrame = async (element, location) => {
-      const navigate = await frameElement.kpop?.navigateFrame(element, location);
-      return navigate && controller._navigateFrame(element, location);
-    };
-  }
+function installNavigationInterception(controller) {
+  const TurboFrameController =
+    controller.element.delegate.constructor.prototype;
+
+  if (TurboFrameController._navigateFrame) return;
+
+  TurboFrameController._navigateFrame = TurboFrameController.navigateFrame;
+  TurboFrameController.navigateFrame = function (element, url, submitter) {
+    const frame = this.findFrameElement(element, submitter);
+
+    if (frame.kpop) {
+      FrameModal.visit(url, frame.kpop, frame, () => {
+        TurboFrameController._navigateFrame.call(this, element, url, submitter);
+      });
+    } else {
+      TurboFrameController._navigateFrame.call(this, element, url, submitter);
+    }
+  };
 }
 
 class Kpop__ModalController extends Controller {
@@ -561,12 +673,24 @@ class StreamModal extends Modal {
     this.action = action;
   }
 
+  /**
+   * When the modal opens, push a state event for the current location so that
+   * the user can dismiss the modal by navigating back.
+   *
+   * @returns {Promise<void>}
+   */
   async open() {
     await super.open();
 
     window.history.pushState({ kpop: true, id: this.id }, "", window.location);
   }
 
+  /**
+   * On dismiss, pop the state event that was pushed when the modal opened,
+   * then clear any modals from the turbo frame element.
+   *
+   * @returns {Promise<void>}
+   */
   async dismiss() {
     await super.dismiss();
 
@@ -577,6 +701,13 @@ class StreamModal extends Modal {
     this.frameElement.innerHTML = "";
   }
 
+  /**
+   * On navigation from inside the modal, dismiss the modal first so that the
+   * modal does not appear in the history stack.
+   *
+   * @param frame TurboFrame element
+   * @param e Turbo navigation event
+   */
   beforeVisit(frame, e) {
     super.beforeVisit(frame, e);
 
@@ -589,6 +720,12 @@ class StreamModal extends Modal {
     });
   }
 
+  /**
+   * If the user pops state, dismiss the modal.
+   *
+   * @param frame FrameController
+   * @param e history event
+   */
   popstate(frame, e) {
     super.popstate(frame, e);