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

data/app/javascript/kpop/controllers/frame_controller.js

@@ -15,22 +15,19 @@ export default 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();
     }
   }
 
@@ -66,6 +63,8 @@ export default class Kpop__FrameController extends Controller {
       return false;
     }
 
+    await this.dismissing;
+
     return (this.opening ||= this.#nextFrame(() =>
       this.#open(modal, { animate })
     ));
@@ -77,46 +76,45 @@ export default 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);
 
@@ -159,15 +157,25 @@ export default 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 });
 
@@ -226,14 +234,24 @@ export default 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);
+    }
+  };
 }

data/app/javascript/kpop/modals/content_modal.js

@@ -3,13 +3,31 @@ import { Turbo } from "@hotwired/turbo-rails";
 import { Modal } from "./modal";
 
 export 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) {
@@ -21,12 +39,11 @@ export 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) {

data/app/javascript/kpop/modals/frame_modal.js

@@ -3,11 +3,81 @@ import { Turbo } from "@hotwired/turbo-rails";
 import { Modal } from "./modal";
 
 export 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();
 
@@ -20,6 +90,13 @@ export 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);
 
@@ -31,11 +108,4 @@ export 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 });
-  }
 }

data/app/javascript/kpop/modals/modal.js

@@ -45,6 +45,10 @@ export class Modal {
     return document.getElementById(this.id);
   }
 
+  get controller() {
+    return this.frameElement?.kpop;
+  }
+
   get modalElement() {
     return this.frameElement?.querySelector("[data-controller*='kpop--modal']");
   }
@@ -54,7 +58,7 @@ export class Modal {
   }
 
   get fallbackLocationValue() {
-    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"] || "/";
+    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"];
   }
 
   get isCurrentLocation() {
@@ -63,6 +67,10 @@ export class Modal {
     );
   }
 
+  static debug(event, ...args) {
+    if (DEBUG) console.debug(`${this.name}:${event}`, ...args);
+  }
+
   debug(event, ...args) {
     if (DEBUG) console.debug(`${this.constructor.name}:${event}`, ...args);
   }

data/app/javascript/kpop/modals/stream_modal.js

@@ -9,12 +9,24 @@ export 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();
 
@@ -25,6 +37,13 @@ export 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);
 
@@ -37,6 +56,12 @@ export 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);
 

data/lib/katalyst/kpop/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Kpop
-    VERSION = "3.0.0.beta.7"
+    VERSION = "3.0.0.beta.8"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-kpop
 version: !ruby/object:Gem::Version
-  version: 3.0.0.beta.7
+  version: 3.0.0.beta.8
 platform: ruby
 authors:
 - Katalyst Interactive