katalyst-kpop 2.0.9 → 3.0.0.beta.2

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

@@ -0,0 +1,178 @@
+import { Controller } from "@hotwired/stimulus";
+
+import DEBUG from "../debug";
+import { ContentModal } from "../modals/content_modal";
+import { FrameModal } from "../modals/frame_modal";
+
+export default class Kpop__FrameController extends Controller {
+  static outlets = ["scrim"];
+  static targets = ["modal"];
+  static values = {
+    open: Boolean,
+  };
+
+  connect() {
+    this.debug("connect", this.element.src);
+
+    this.element.kpop = this;
+
+    // restoration visit
+    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,
+      });
+    } 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 });
+      }
+    }
+  }
+
+  disconnect() {
+    this.debug("disconnect");
+
+    delete this.element.kpop;
+    delete this.modal;
+  }
+
+  scrimOutletConnected(scrim) {
+    this.debug("scrim-connected");
+
+    this.scrimConnected = true;
+
+    if (this.openValue) scrim.show({ animate: false });
+  }
+
+  openValueChanged(open) {
+    this.debug("open-changed", open);
+
+    this.element.parentElement.style.display = open ? "flex" : "none";
+  }
+
+  async open(modal, { animate = true } = {}) {
+    if (this.isOpen) {
+      this.debug("skip open as already open");
+      return false;
+    }
+
+    return (this.opening ||= this.#nextFrame(() =>
+      this.#open(modal, { animate })
+    ));
+  }
+
+  async dismiss({ animate = true, reason = "" } = {}) {
+    if (!this.isOpen) {
+      this.debug("skip dismiss as already closed");
+      return false;
+    }
+
+    return (this.dismissing ||= this.#nextFrame(() =>
+      this.#dismiss({ animate, reason })
+    ));
+  }
+
+  // EVENTS
+
+  popstate(event) {
+    this.modal?.popstate(this, event);
+  }
+
+  beforeFrameRender(event) {
+    this.debug("before-frame-render", event.detail.newFrame.baseURI);
+
+    event.preventDefault();
+
+    this.dismiss({ animate: true, reason: "before-frame-render" }).then(() => {
+      this.debug("resume-frame-render", event.detail.newFrame.baseURI);
+      event.detail.resume();
+    });
+  }
+
+  beforeStreamRender(event) {
+    this.debug("before-stream-render", event.detail);
+
+    const resume = event.detail.render;
+
+    // Defer rendering until dismiss is complete.
+    // Dismiss may change history so we need to wait for it to complete to avoid
+    // losing DOM changes on restoration visits.
+    event.detail.render = (stream) => {
+      (this.dismissing || Promise.resolve()).then(() => {
+        this.debug("stream-render", stream);
+        resume(stream);
+      });
+    };
+  }
+
+  beforeVisit(e) {
+    this.debug("before-visit", e.detail.url);
+
+    // ignore visits to the current frame, these fire when the frame navigates
+    if (e.detail.url === this.element.src) return;
+
+    // ignore unless we're open
+    if (!this.isOpen) return;
+
+    this.modal.beforeVisit(this, e);
+  }
+
+  frameLoad(event) {
+    this.debug("frame-load");
+
+    return this.open(new FrameModal(this.element.id, this.element.src), {
+      animate: true,
+    });
+  }
+
+  get isOpen() {
+    return this.openValue && !this.dismissing;
+  }
+
+  async #open(modal, { animate = true } = {}) {
+    this.debug("open-start", { animate });
+
+    const scrim = this.scrimConnected && this.scrimOutlet;
+
+    this.modal = modal;
+    this.openValue = true;
+
+    await modal.open({ animate });
+    await scrim?.show({ animate });
+
+    delete this.opening;
+
+    this.debug("open-end");
+  }
+
+  async #dismiss({ animate = true, reason = "" } = {}) {
+    this.debug("dismiss-start", { animate, reason });
+
+    if (!this.modal) {
+      console.warn("modal missing on dismiss");
+      if (DEBUG) debugger;
+    }
+
+    await this.scrimOutlet.hide({ animate });
+    await this.modal?.dismiss();
+
+    this.openValue = false;
+    this.modal = null;
+    delete this.dismissing;
+
+    this.debug("dismiss-end");
+  }
+
+  async #nextFrame(callback) {
+    // return Promise.resolve().then(callback);
+    return new Promise(window.requestAnimationFrame).then(callback);
+  }
+
+  debug(event, ...args) {
+    if (DEBUG) console.debug(`FrameController:${event}`, ...args);
+  }
+}

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

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus";
+
+import DEBUG from "../debug";
+
+export default class Kpop__ModalController extends Controller {
+  static values = {
+    fallback_location: String,
+    layout: String,
+  };
+
+  connect() {
+    this.debug("connect");
+
+    if (this.layoutValue) {
+      document.querySelector("#kpop").classList.toggle(this.layoutValue, true);
+    }
+  }
+
+  disconnect() {
+    this.debug("disconnect");
+
+    if (this.layoutValue) {
+      document.querySelector("#kpop").classList.toggle(this.layoutValue, false);
+    }
+  }
+
+  debug(event, ...args) {
+    if (DEBUG) console.debug(`ModalController:${event}`, ...args);
+  }
+}

data/app/{assets/javascripts → javascript/kpop}/controllers/scrim_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 
-const DEBUG = false;
+import DEBUG from "../debug";
 
 /**
  * Scrim controller wraps an element that creates a whole page layer.
@@ -8,8 +8,7 @@ const DEBUG = false;
  *
  * If the Scrim element receives a click event, it automatically triggers "scrim:hide".
  *
- * You can show and hide the scrim programmatically by sending "scrim:request:show" and "scrim:request:hide" events to
- * the window or by calling the provided methods.
+ * You can show and hide the scrim programmatically by calling show/hide on the controller, e.g. using an outlet.
  *
  * If you need to respond to the scrim showing or hiding you should subscribe to "scrim:show" and "scrim:hide".
  */
@@ -20,109 +19,113 @@ export default class ScrimController extends Controller {
     zIndex: Number,
   };
 
-  /**
-   * Show the scrim element. Returns true if successful.
-   */
-  static showScrim({
-    dismiss = true,
-    zIndex = undefined,
-    top = undefined,
-  } = {}) {
-    return window.dispatchEvent(
-      new CustomEvent("scrim:request:show", {
-        cancelable: true,
-        detail: { captive: !dismiss, zIndex: zIndex, top: top },
-      })
-    );
-  }
-
-  /**
-   * Hide the scrim element. Returns true if successful.
-   */
-  static hideScrim() {
-    return window.dispatchEvent(
-      new CustomEvent("scrim:request:hide", { cancelable: true })
-    );
-  }
-
   connect() {
+    if (DEBUG) console.debug("scrim:connect");
+
     this.defaultZIndexValue = this.zIndexValue;
     this.defaultCaptiveValue = this.captiveValue;
+
+    this.element.scrim = this;
   }
 
-  show(request) {
-    if (DEBUG) console.debug("request show scrim");
+  disconnect() {
+    if (DEBUG) console.debug("scrim:disconnect");
 
-    // hide the scrim before opening the new one if it's already open
-    if (this.openValue) this.hide(request);
+    delete this.element.scrim;
+  }
 
-    // if the scrim is still open, abort
-    if (this.openValue) return;
+  async show({
+    captive = this.defaultCaptiveValue,
+    zIndex = this.defaultZIndexValue,
+    top = window.scrollY,
+    animate = true,
+  } = {}) {
+    if (DEBUG) console.debug("scrim:before-show");
 
-    // update internal state to break event cycles
+    // hide the scrim before opening the new one if it's already open
+    if (this.openValue) {
+      await this.hide({ animate });
+    }
+
+    // update internal state
     this.openValue = true;
 
     // notify listeners of pending request
-    const event = this.dispatch("show", { bubbles: true, cancelable: true });
+    this.dispatch("show", { bubbles: true });
 
-    // if notification was cancelled, update request and abort
-    if (event.defaultPrevented) {
-      this.openValue = false;
-      request.preventDefault();
-      return;
-    }
+    if (DEBUG) console.debug("scrim:show-start");
+
+    // update state, perform style updates
+    this.#show(captive, zIndex, top);
 
-    if (DEBUG) console.debug("show scrim");
+    if (animate) {
+      // animate opening
+      // this will trigger an animationEnd event via CSS that completes the open
+      this.element.dataset.showAnimating = "";
 
-    // perform show updates
-    this.#show(request.detail);
-  }
+      await new Promise((resolve) => {
+        this.element.addEventListener("animationend", () => resolve(), {
+          once: true,
+        });
+      });
+
+      delete this.element.dataset.showAnimating;
+    }
 
-  hide(request) {
-    if (!this.openValue) return;
+    if (DEBUG) console.debug("scrim:show-end");
+  }
 
-    if (DEBUG) console.debug("request hide scrim");
+  async hide({ animate = true } = {}) {
+    if (!this.openValue || this.element.dataset.hideAnimating) return;
 
-    // update internal state to break event cycles
-    this.openValue = false;
+    if (DEBUG) console.debug("scrim:before-hide");
 
     // notify listeners of pending request
-    const event = this.dispatch("hide", { bubbles: true, cancelable: true });
+    this.dispatch("hide", { bubbles: true });
 
-    // if notification was cancelled, update request and abort
-    if (event.defaultPrevented) {
-      this.openValue = true;
-      request.preventDefault();
-      return;
-    }
+    if (DEBUG) console.debug("scrim:hide-start");
 
-    if (DEBUG) console.debug("hide scrim");
+    if (animate) {
+      // set animation state
+      // this will trigger an animationEnd event via CSS that completes the hide
+      this.element.dataset.hideAnimating = "";
+
+      await new Promise((resolve) => {
+        this.element.addEventListener("animationend", () => resolve(), {
+          once: true,
+        });
+      });
+
+      delete this.element.dataset.hideAnimating;
+    }
 
-    // update state, perform style updates
     this.#hide();
+
+    this.openValue = false;
+
+    if (DEBUG) console.debug("scrim:hide-end");
   }
 
   dismiss(event) {
-    if (!this.captiveValue) this.hide(event);
-  }
+    if (DEBUG) console.debug("scrim:dismiss");
 
-  escape(event) {
-    if (event.key === "Escape" && !this.captiveValue && !event.defaultPrevented)
-      this.hide(event);
+    if (!this.captiveValue) this.dispatch("dismiss", { bubbles: true });
   }
 
-  disconnect() {
-    super.disconnect();
+  escape(event) {
+    if (
+      event.key === "Escape" &&
+      !this.captiveValue &&
+      !event.defaultPrevented
+    ) {
+      this.dispatch("dismiss", { bubbles: true });
+    }
   }
 
   /**
    * Clips body to viewport size and sets the z-index
    */
-  #show({
-    captive = this.defaultCaptiveValue,
-    zIndex = this.defaultZIndexValue,
-    top = window.scrollY,
-  }) {
+  #show(captive, zIndex, top) {
     this.captiveValue = captive;
     this.zIndexValue = zIndex;
     this.scrollY = top;
@@ -145,6 +148,7 @@ export default class ScrimController extends Controller {
     resetStyle(this.element, "z-index", null);
     resetStyle(document.body, "position", null);
     resetStyle(document.body, "top", null);
+
     window.scrollTo({ left: 0, top: this.scrollY, behavior: "instant" });
 
     delete this.scrollY;

data/app/javascript/kpop/debug.js

@@ -0,0 +1,3 @@
+const DEBUG = false;
+
+export default DEBUG;

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

@@ -0,0 +1,46 @@
+import { Turbo } from "@hotwired/turbo-rails";
+
+import { Modal } from "./modal";
+
+export class ContentModal extends Modal {
+  constructor(id, src = null) {
+    super(id);
+
+    if (src) this.src = src;
+  }
+
+  async dismiss() {
+    await super.dismiss();
+
+    if (this.visitStarted) {
+      this.debug("skipping dismiss, visit started");
+      return;
+    }
+    if (!this.isCurrentLocation) {
+      this.debug("skipping dismiss, not current location");
+      return;
+    }
+
+    return this.pop("turbo:load", () => {
+      this.debug("turbo-visit", this.fallbackLocationValue);
+      Turbo.visit(this.fallbackLocationValue, { action: "replace" });
+    });
+
+    // no specific close action required, this is turbo's responsibility
+  }
+
+  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();
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Turbo } from "@hotwired/turbo-rails";
+
+import { Modal } from "./modal";
+
+export class FrameModal extends Modal {
+  constructor(id, src) {
+    super(id);
+    this.src = src;
+  }
+
+  async dismiss() {
+    await super.dismiss();
+
+    if (!this.isCurrentLocation) {
+      this.debug("skipping dismiss, not current location");
+    }
+
+    await this.pop("turbo:load", () => window.history.back());
+
+    // no specific close action required, this is turbo's responsibility
+  }
+
+  beforeVisit(frame, e) {
+    super.beforeVisit(frame, e);
+
+    e.preventDefault();
+
+    frame.dismiss({ animate: false }).then(() => {
+      Turbo.visit(e.detail.url);
+
+      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

@@ -0,0 +1,69 @@
+import { Turbo } from "@hotwired/turbo-rails";
+
+import DEBUG from "../debug";
+
+export class Modal {
+  constructor(id) {
+    this.id = id;
+  }
+
+  async open() {
+    this.debug("open");
+  }
+
+  async dismiss() {
+    this.debug(`dismiss`);
+  }
+
+  beforeVisit(frame, e) {
+    this.debug(`before-visit`, e.detail.url);
+  }
+
+  popstate(frame, e) {
+    this.debug(`popstate`, e.state);
+  }
+
+  async pop(event, callback) {
+    this.debug(`pop`);
+
+    const promise = new Promise((resolve) => {
+      window.addEventListener(
+        event,
+        () => {
+          resolve();
+        },
+        { once: true }
+      );
+    });
+
+    callback();
+
+    return promise;
+  }
+
+  get frameElement() {
+    return document.getElementById(this.id);
+  }
+
+  get modalElement() {
+    return this.frameElement?.querySelector("[data-controller*='kpop--modal']");
+  }
+
+  get currentLocationValue() {
+    return this.modalElement?.dataset["kpop-ModalCurrentLocationValue"] || "/";
+  }
+
+  get fallbackLocationValue() {
+    return this.modalElement?.dataset["kpop-ModalFallbackLocationValue"] || "/";
+  }
+
+  get isCurrentLocation() {
+    return (
+      window.history.state?.turbo && Turbo.session.location.href === this.src
+    );
+  }
+
+  debug(event, ...args) {
+    if (DEBUG) console.debug(`${this.constructor.name}:${event}`, ...args);
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Turbo } from "@hotwired/turbo-rails";
+
+import { Modal } from "./modal";
+
+export class StreamModal extends Modal {
+  constructor(id, action) {
+    super(id);
+
+    this.action = action;
+  }
+
+  async open() {
+    await super.open();
+
+    window.history.pushState({ kpop: true, id: this.id }, "", window.location);
+  }
+
+  async dismiss() {
+    await super.dismiss();
+
+    if (this.isCurrentLocation) {
+      await this.pop("popstate", () => window.history.back());
+    }
+
+    this.frameElement.innerHTML = "";
+  }
+
+  beforeVisit(frame, e) {
+    super.beforeVisit(frame, e);
+
+    e.preventDefault();
+
+    frame.dismiss({ animate: false }).then(() => {
+      Turbo.visit(e.detail.url);
+
+      this.debug("before-visit-end");
+    });
+  }
+
+  popstate(frame, e) {
+    super.popstate(frame, e);
+
+    frame.dismiss({ animate: true, reason: "popstate" });
+  }
+
+  get isCurrentLocation() {
+    return window.history.state?.kpop && window.history.state?.id === this.id;
+  }
+}

data/app/javascript/kpop/turbo_actions.js

@@ -0,0 +1,33 @@
+import { Turbo } from "@hotwired/turbo-rails";
+
+import { StreamModal } from "./modals/stream_modal";
+import { StreamRenderer } from "./utils/stream_renderer";
+
+function kpop(action) {
+  return action.targetElements[0]?.kpop;
+}
+
+Turbo.StreamActions.kpop_open = function () {
+  const animate = !kpop(this).openValue;
+
+  kpop(this)
+    ?.dismiss({ animate, reason: "before-turbo-stream" })
+    .then(() => {
+      new StreamRenderer(this.targetElements[0], this).render();
+      kpop(this)?.open(new StreamModal(this.target, this), { animate });
+    });
+};
+
+Turbo.StreamActions.kpop_dismiss = function () {
+  kpop(this)?.dismiss({ reason: "turbo_stream.kpop.dismiss" });
+};
+
+Turbo.StreamActions.kpop_redirect_to = function () {
+  if (this.dataset.turboFrame === this.target) {
+    this.targetElements[0].src = this.getAttribute("href");
+  } else {
+    Turbo.visit(this.getAttribute("href"), {
+      action: this.dataset.turboAction,
+    });
+  }
+};

data/app/javascript/kpop/utils/stream_renderer.js

@@ -0,0 +1,15 @@
+import DEBUG from "../debug";
+
+export class StreamRenderer {
+  constructor(frame, action) {
+    this.frame = frame;
+    this.action = action;
+  }
+
+  render() {
+    if (DEBUG) console.debug("stream-renderer:render");
+    this.frame.src = "";
+    this.frame.innerHTML = "";
+    this.frame.append(this.action.templateContent);
+  }
+}

data/app/views/layouts/kpop.html.erb

@@ -1,4 +1,4 @@
 <%# controller layout, for use with turbo responses %>
-<%= kpop_frame_tag do %>
+<%= render Kpop::FrameComponent.new do %>
   <%= yield %>
 <% end %>

data/config/importmap.rb

@@ -1,6 +1,3 @@
 # frozen_string_literal: true
 
-pin_all_from Katalyst::Kpop::Engine.root.join("app/assets/javascripts/controllers"),
-             under: "controllers",
-             # preload in tests so that we don't start clicking before controllers load
-             preload: Rails.env.test?
+pin "@katalyst/kpop", to: "katalyst/kpop.js", preload: true