katalyst-kpop 3.4.0 → 4.0.0.beta.1

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

@@ -1,12 +1,11 @@
 import { Controller } from "@hotwired/stimulus";
 
-import DEBUG from "../debug";
 import { ContentModal } from "../modals/content_modal";
 import { FrameModal } from "../modals/frame_modal";
 
+import debug from "../utils/debug";
+
 export default class Kpop__FrameController extends Controller {
-  static outlets = ["scrim"];
-  static targets = ["modal"];
   static values = {
     open: Boolean,
   };
@@ -19,12 +18,14 @@ export default class Kpop__FrameController extends Controller {
     // allow our code to intercept frame navigation requests before dom changes
     installNavigationInterception(this);
 
-    if (this.element.src && this.element.complete) {
+    const dialog = this.element.querySelector("dialog");
+
+    if (this.element.src && dialog) {
       this.debug("new frame modal", this.element.src);
-      FrameModal.connect(this, this.element);
-    } else if (this.modalElements.length > 0) {
-      this.debug("new content modal", window.location.pathname);
-      ContentModal.connect(this, this.element);
+      FrameModal.connect(this, dialog, this.element.src).then(() => {});
+    } else if (dialog) {
+      this.debug("new content modal", dialog);
+      ContentModal.connect(this, dialog);
     } else {
       this.debug("no modal");
       this.clear();
@@ -38,24 +39,18 @@ export default class Kpop__FrameController extends Controller {
     delete this.modal;
   }
 
-  scrimOutletConnected(scrim) {
-    this.debug("scrim-connected");
-
-    this.scrimConnected = true;
-
-    if (this.openValue) {
-      scrim.show({ animate: false });
-    } else {
-      scrim.hide({ animate: false });
-    }
-  }
-
   openValueChanged(open) {
     this.debug("open-changed", open);
-
-    this.element.parentElement.style.display = open ? "flex" : "none";
   }
 
+  /**
+   * Animate an attached modal into the foreground. Returns a promise that
+   * resolves when the animation is complete.
+   *
+   * @param modal
+   * @param animate
+   * @returns {Promise<Boolean>}
+   */
   async open(modal, { animate = true } = {}) {
     if (this.isOpen) {
       this.debug("skip open as already open");
@@ -65,12 +60,25 @@ export default class Kpop__FrameController extends Controller {
 
     await this.dismissing;
 
-    return (this.opening ||= this.#nextFrame(() =>
-      this.#open(modal, { animate }),
-    ));
+    return (this.opening ||= Promise.resolve().then(() => {
+      modal.connect();
+      return this.#open(modal, { animate });
+    }));
   }
 
+  /**
+   * Cause a modal to hide. Returns a promise that will resolve when the
+   * animation (if requested) is finished.
+   *
+   * If the modal is already animating out, returns the existing promise instead.
+   *
+   * @param {Boolean} animate
+   * @param {String} reason
+   * @returns {Promise}
+   */
   async dismiss({ animate = true, reason = "" } = {}) {
+    this.debug("event:dismiss", reason);
+
     if (!this.isOpen) {
       this.debug("skip dismiss as already closed");
       return false;
@@ -78,36 +86,30 @@ export default class Kpop__FrameController extends Controller {
 
     await this.opening;
 
-    return (this.dismissing ||= this.#nextFrame(() =>
-      this.#dismiss({ animate, reason }),
-    ));
+    return (this.dismissing ||= this.#dismiss({ animate, reason }));
   }
 
-  async clear() {
+  /**
+   * Clean up after a modal is finished dismissing.
+   */
+  clear({ reason = "" } = {}) {
+    this.debug("event:clear", reason);
+
     // clear the src from the frame (if any)
     this.element.src = "";
+    this.element.innerHTML = "";
 
-    // remove any open modal(s)
-    this.modalElements.forEach((element) => element.remove());
-
-    // mark the modal as hidden (will hide scrim on connect)
+    // mark the modal as hidden
     this.openValue = false;
 
-    // close the scrim, if connected
-    if (this.scrimConnected) {
-      return this.scrimOutlet.hide({ animate: false });
-    }
-
     // unset modal
-    this.modal = null;
+    if (this.modal) this.modal.disconnect();
+    delete this.modal;
+    delete this.dismissing;
   }
 
   // EVENTS
 
-  popstate(event) {
-    this.modal?.popstate(this, event);
-  }
-
   /**
    * Incoming frame render, dismiss the current modal (if any) first.
    *
@@ -151,53 +153,72 @@ export default class Kpop__FrameController extends Controller {
     // ignore visits to the current frame, these fire when the frame navigates
     if (e.detail.url === this.element.src) return;
 
+    const url = new URL(e.detail.url.toString(), document.baseURI);
+    if (url.pathname === "/resume_historical_location") {
+      e.preventDefault();
+      return this.dismiss();
+    }
+
     // ignore unless we're open
     if (!this.isOpen) return;
 
     this.modal.beforeVisit(this, e);
   }
 
-  frameLoad(event) {
+  frameLoad(e) {
     this.debug("frame-load");
 
-    const modal = new FrameModal(this.element.id, this.element.src);
-
-    window.addEventListener(
-      "turbo:visit",
-      (e) => {
-        this.open(modal, { animate: true });
-      },
-      { once: true },
+    FrameModal.load(this, e.target.firstElementChild, e.target.src).then(
+      () => {},
     );
   }
 
-  get isOpen() {
-    return this.openValue && !this.dismissing;
+  /**
+   * Outgoing fetch request. Capture the initiator so we can return focus if it causes a modal to show.
+   */
+  beforeFetchRequest() {
+    const focusElement = document.activeElement;
+
+    if (focusElement === document.body) {
+      delete this.lastFetchFocusRef;
+    } else {
+      this.lastFetchFocusRef = new WeakRef(focusElement);
+    }
   }
 
-  get modalElements() {
-    return this.element.querySelectorAll("[data-controller*='kpop--modal']");
+  get isOpen() {
+    return this.openValue && !this.dismissing;
   }
 
   async #open(modal, { animate = true } = {}) {
     this.debug("open-start", { animate });
 
-    const scrim = this.scrimConnected && this.scrimOutlet;
+    this.previousFocusRef =
+      document.activeElement === document.body
+        ? this.lastFetchFocusRef
+        : new WeakRef(document.activeElement);
+    this.debug("capture focus", this.previousFocusRef?.deref());
 
     this.modal = modal;
     this.openValue = true;
 
+    // Set turbo-frame[src] without causing a load event
+    this.element.delegate.sourceURL = this.modal.src;
+
     await modal.open({ animate });
-    await scrim?.show({ animate });
 
     delete this.opening;
 
     this.debug("open-end");
 
+    autofocus(this.modal?.element)?.focus();
+
     // Detect https://github.com/hotwired/turbo-rails/issues/580
     if (Turbo.session.view.forceReloaded) {
       console.error("Turbo-Frame response is incompatible with current page");
     }
+
+    return true;
   }
 
   async #dismiss({ animate = true, reason = "" } = {}) {
@@ -211,15 +232,15 @@ export default class Kpop__FrameController extends Controller {
 
     if (!this.modal) {
       console.warn("modal missing on dismiss");
-      if (DEBUG) debugger;
     }
 
-    await this.scrimOutlet.hide({ animate });
-    await this.modal?.dismiss();
+    await this.modal?.dismiss({ animate });
 
-    this.openValue = false;
-    this.modal = null;
-    delete this.dismissing;
+    this.clear();
+
+    this.previousFocusRef?.deref()?.focus();
+    this.debug("restore focus", this.previousFocusRef?.deref());
+    delete this.previousFocusRef;
 
     this.debug("dismiss-end");
   }
@@ -228,8 +249,8 @@ export default class Kpop__FrameController extends Controller {
     return new Promise(window.requestAnimationFrame).then(callback);
   }
 
-  debug(event, ...args) {
-    if (DEBUG) console.debug(`FrameController:${event}`, ...args);
+  get debug() {
+    return debug("FrameController");
   }
 }
 
@@ -276,3 +297,12 @@ function installNavigationInterception(controller) {
     }
   };
 }
+
+function autofocus(container) {
+  if (!container) return null;
+
+  return (
+    container.querySelector("[autofocus]") ??
+    container.querySelector("button:not([disabled])")
+  );
+}

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

@@ -1,63 +1,7 @@
-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) {
-      this.debug("skipping dismiss, visit started");
-      return;
-    }
-    if (!this.isCurrentLocation) {
-      this.debug("skipping dismiss, not current location");
-      return;
-    }
-
-    this.frameElement.innerHTML = "";
-
-    if (fallbackLocation) {
-      window.history.replaceState(window.history.state, "", fallbackLocation);
-    }
-  }
-
-  beforeVisit(frame, e) {
-    super.beforeVisit(frame, e);
-
-    this.visitStarted = true;
-
-    frame.scrimOutlet.hide({ animate: false });
-  }
-
-  get src() {
-    return new URL(
-      this.currentLocationValue.toString(),
-      document.baseURI,
-    ).toString();
+  static connect(frame, dialog) {
+    frame.open(new ContentModal(frame, dialog), { animate: false });
   }
 }

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

@@ -1,5 +1,3 @@
-import { Turbo } from "@hotwired/turbo-rails";
-
 import { Modal } from "./modal";
 
 export class FrameModal extends Modal {
@@ -7,25 +5,27 @@ export class FrameModal extends Modal {
    * When the FrameController detects a frame element on connect, it runs this
    * method to sanity check the frame src and restore the modal state.
    *
-   * @param frame FrameController
-   * @param element TurboFrame element
+   * @param {Kpop__FrameController} frame
+   * @param {HTMLDialogElement} dialog
+   * @param {String} src
    */
-  static connect(frame, element) {
-    const modal = new FrameModal(element.id, element.src);
+  static connect(frame, dialog, src) {
+    // restoration visit
+    this.debug("restore", src);
+    return frame.open(new FrameModal(frame, dialog, src), { animate: false });
+  }
 
-    // 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 the FrameController detects a frame load event, it runs this
+   * method to open the modal.
+   *
+   * @param {Kpop__FrameController} frame
+   * @param {HTMLDialogElement} dialog
+   * @param {String} src
+   */
+  static load(frame, dialog, src) {
+    this.debug("load", src);
+    return frame.open(new FrameModal(frame, dialog, src), { animate: true });
   }
 
   /**
@@ -48,64 +48,7 @@ export class FrameModal extends Modal {
       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();
-
-    if (!this.isCurrentLocation) {
-      this.debug("skipping dismiss, not current location");
-    } else {
-      await this.pop("turbo:load", () => window.history.back());
-    }
-
-    // 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);
-
-    e.preventDefault();
-
-    frame.dismiss({ animate: false }).then(() => {
-      Turbo.visit(e.detail.url);
-
-      this.debug("before-visit-end");
-    });
-  }
 }

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

@@ -1,77 +1,124 @@
-import { Turbo } from "@hotwired/turbo-rails";
-
-import DEBUG from "../debug";
+import debug from "../utils/debug";
 
 export class Modal {
-  constructor(id) {
-    this.id = id;
+  constructor(frame, dialog, src = null) {
+    this.frame = frame;
+    this.element = dialog;
+    this.uri = new URL(src || dialog.dataset.src, window.location.origin);
   }
 
-  async open() {
-    this.debug("open");
+  connect() {
+    this.element.addEventListener("cancel", this.cancel);
+    this.element.addEventListener("close", this.close);
+    this.element.addEventListener("mousedown", this.scrim);
   }
 
-  async dismiss() {
-    this.debug(`dismiss`);
+  disconnect() {
+    this.element.removeEventListener("cancel", this.cancel);
+    this.element.removeEventListener("close", this.close);
+    this.element.removeEventListener("mousedown", this.scrim);
   }
 
-  beforeVisit(frame, e) {
-    this.debug(`before-visit`, e.detail.url);
+  get src() {
+    return this.uri.pathname + this.uri.search + this.uri.hash;
   }
 
-  popstate(frame, e) {
-    this.debug(`popstate`, e.state);
-  }
+  cancel = (e) => {
+    this.debug("event:cancel", e);
 
-  async pop(event, callback) {
-    this.debug(`pop`);
+    e.preventDefault();
 
-    const promise = new Promise((resolve) => {
-      window.addEventListener(
-        event,
-        () => {
-          resolve();
-        },
-        { once: true },
-      );
-    });
+    this.frame.dismiss({ animate: true, reason: "dialog:cancel" });
+  };
 
-    callback();
+  close = (e) => {
+    this.debug("event:close", e);
 
-    return promise;
-  }
+    this.frame.clear({ reason: "dialog:close" });
+  };
 
-  get frameElement() {
-    return document.getElementById(this.id);
-  }
+  scrim = (e) => {
+    if (e.target.tagName === "DIALOG") {
+      this.debug("event:scrim", e);
 
-  get controller() {
-    return this.frameElement?.kpop;
-  }
+      this.frame.dismiss({ animate: true, reason: "dialog:scrim" });
+    }
+  };
 
-  get modalElement() {
-    return this.frameElement?.querySelector("[data-controller*='kpop--modal']");
-  }
+  async open({ animate = true } = {}) {
+    this.debug("open-start", animate);
 
-  get currentLocationValue() {
-    return this.modalElement?.dataset["kpop-ModalCurrentLocationValue"] || "/";
-  }
+    await animation(this.element, animate, () => this.element.showModal());
 
-  get fallbackLocationValue() {
-    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"];
+    this.debug("open-end");
   }
 
-  get isCurrentLocation() {
-    return (
-      window.history.state?.turbo && Turbo.session.location.href === this.src
+  /**
+   * Modals are closed by animating out the modal then removing the modal
+   * element from the wrapping frame.
+   *
+   * @returns {Promise<void>}
+   */
+  async dismiss({ animate = true } = {}) {
+    this.debug("dismiss-start", animate);
+
+    await animation(this.element, animate, () =>
+      this.element.removeAttribute("open"),
     );
+
+    this.debug("dismiss-end");
+
+    this.element.close();
+  }
+
+  /**
+   * When user navigates from inside a 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) {
+    this.debug(`before-visit`, e.detail.url);
+
+    this.frame.clear();
   }
 
-  static debug(event, ...args) {
-    if (DEBUG) console.debug(`${this.name}:${event}`, ...args);
+  static get debug() {
+    return debug(this.name);
   }
 
-  debug(event, ...args) {
-    if (DEBUG) console.debug(`${this.constructor.name}:${event}`, ...args);
+  get debug() {
+    return debug(this.constructor.name);
   }
 }
+
+function animation(el, animate, trigger) {
+  if (!animate) return trigger();
+
+  const duration = animationDuration(el);
+
+  return new Promise((resolve) => {
+    const resolver = () => {
+      el.removeEventListener("animationend", resolver, { once: true });
+      clearTimeout(timeout);
+      el.toggleAttribute("animate", false);
+      resolve();
+    };
+
+    el.addEventListener("animationend", resolver, { once: true });
+    const timeout = setTimeout(resolver, duration);
+
+    el.toggleAttribute("animate", animate);
+    trigger();
+  });
+}
+
+function animationDuration(el, defaultValue = "0.2s") {
+  const value =
+    getComputedStyle(el).getPropertyValue("--animation-duration") ||
+    defaultValue;
+  const num = parseFloat(value);
+  if (value.endsWith("ms")) return num;
+  return num * 1000;
+}