katalyst-kpop 3.4.0 → 4.0.0.beta.1

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

@@ -1,74 +1,23 @@
-import { Turbo } from "@hotwired/turbo-rails";
-
 import { Modal } from "./modal";
 
 export class StreamModal extends Modal {
-  constructor(id, action) {
-    super(id);
-
-    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();
-
-    if (this.isCurrentLocation) {
-      await this.pop("popstate", () => window.history.back());
-    }
-
-    this.frameElement.innerHTML = "";
-  }
-
   /**
-   * On navigation from inside the modal, dismiss the modal first so that the
-   * modal does not appear in the history stack.
+   * When a turbo-stream[action=kpop_open] element is rendered, it runs this
+   * method to load the modal template as a StreamModal.
    *
-   * @param frame TurboFrame element
-   * @param e Turbo navigation event
+   * @param {Kpop__FrameController} frame
+   * @param {Turbo.StreamElement} action
    */
-  beforeVisit(frame, e) {
-    super.beforeVisit(frame, e);
-
-    e.preventDefault();
+  static async open(frame, action) {
+    const animate = !frame.isOpen;
 
-    frame.dismiss({ animate: false }).then(() => {
-      Turbo.visit(e.detail.url);
+    await frame.dismiss({ animate, reason: "turbo-stream.kpop_open" });
 
-      this.debug("before-visit-end");
-    });
-  }
-
-  /**
-   * If the user pops state, dismiss the modal.
-   *
-   * @param frame FrameController
-   * @param e history event
-   */
-  popstate(frame, e) {
-    super.popstate(frame, e);
+    frame.element.append(action.templateContent);
 
-    frame.dismiss({ animate: true, reason: "popstate" });
-  }
+    const dialog = frame.element.querySelector("dialog");
+    const src = dialog.dataset.src;
 
-  get isCurrentLocation() {
-    return window.history.state?.kpop && window.history.state?.id === this.id;
+    await frame.open(new StreamModal(frame, dialog, src), { animate });
   }
 }

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

@@ -0,0 +1,22 @@
+let enabled = false;
+
+const debug = function (receiver) {
+  if (enabled) {
+    return console.debug.bind(console, "[%s] %s", receiver);
+  } else {
+    return noop;
+  }
+};
+
+const noop = () => {};
+
+Object.defineProperty(debug, "enabled", {
+  get: function () {
+    return enabled;
+  },
+  set: function (debug) {
+    enabled = debug;
+  },
+});
+
+export default debug;

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

@@ -0,0 +1,151 @@
+/**
+ * Based on Turbo's LinkObserver, checks links on mouse-over and focus to see
+ * whether they should open in modals. If they should, then sets the
+ * data-turbo-frame attribute so it will be prefetched and opened in the context
+ * of the kpop turbo frame.
+ */
+export default class LinkObserver {
+  started = false;
+
+  constructor(delegate, eventTarget) {
+    this.delegate = delegate;
+    this.eventTarget = eventTarget;
+  }
+
+  start() {
+    if (this.started) return;
+    if (this.eventTarget.readyState === "loading") {
+      this.eventTarget.addEventListener("DOMContentLoaded", this.#enable, {
+        once: true,
+      });
+    } else {
+      this.#enable();
+    }
+  }
+
+  stop() {
+    if (!this.started) return;
+    this.eventTarget.removeEventListener("mouseenter", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.removeEventListener(
+      "turbo:before-prefetch",
+      this.#addKpopLink,
+      {
+        capture: true,
+        passive: true,
+      },
+    );
+    this.eventTarget.removeEventListener("focusin", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.removeEventListener("mouseleave", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.removeEventListener("focusout", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.started = false;
+  }
+
+  #enable = () => {
+    if (this.started) return;
+    this.started = true;
+    this.eventTarget.addEventListener("mouseenter", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.addEventListener("focusin", this.#addKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.addEventListener(
+      "turbo:before-prefetch",
+      this.#addKpopLink,
+      {
+        capture: true,
+        passive: true,
+      },
+    );
+    this.eventTarget.addEventListener("mouseleave", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+    this.eventTarget.addEventListener("focusout", this.#removeKpopLink, {
+      capture: true,
+      passive: true,
+    });
+  };
+
+  #addKpopLink = (event) => {
+    const target = event.target;
+    const isLink =
+      target.matches &&
+      target.matches(
+        "a[href]:not([target^=_]):not([download]):not([data-turbo-frame]",
+      );
+    if (isLink && this.#isPrefetchable(target)) {
+      const link = target;
+      const location = getLocationForLink(link);
+      if (this.delegate.isModalLink(link, location)) {
+        link.dataset.turboFrame = "kpop";
+      }
+    }
+  };
+
+  #removeKpopLink = (event) => {
+    const target = event.target;
+    const isLink =
+      target.matches && target.matches("a[href][data-turbo-frame='kpop']");
+    if (isLink) {
+      delete target.dataset.turboFrame;
+    }
+  };
+
+  #isPrefetchable(link) {
+    const href = link.getAttribute("href");
+    if (!href) return false;
+    if (unfetchableLink(link)) return false;
+    if (linkToTheSamePage(link)) return false;
+    if (linkOptsOut(link)) return false;
+    if (nonSafeLink(link)) return false;
+    return true;
+  }
+}
+
+function getLocationForLink(link) {
+  return new URL(link.getAttribute("href").toString(), document.baseURI);
+}
+
+const unfetchableLink = (link) =>
+  link.origin !== document.location.origin ||
+  !["http:", "https:"].includes(link.protocol) ||
+  link.hasAttribute("target");
+
+const linkToTheSamePage = (link) =>
+  link.pathname + link.search ===
+    document.location.pathname + document.location.search ||
+  link.href.startsWith("#");
+
+const linkOptsOut = (link) => {
+  return link.getAttribute("data-turbo") === "false";
+};
+
+const nonSafeLink = (link) => {
+  const turboMethod = link.getAttribute("data-turbo-method");
+  if (turboMethod && turboMethod.toLowerCase() !== "get") return true;
+  if (isUJS(link)) return true;
+  if (link.hasAttribute("data-turbo-confirm")) return true;
+  if (link.hasAttribute("data-turbo-stream")) return true;
+  return false;
+};
+
+const isUJS = (link) =>
+  link.hasAttribute("data-remote") ||
+  link.hasAttribute("data-behavior") ||
+  link.hasAttribute("data-confirm") ||
+  link.hasAttribute("data-method");

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

@@ -0,0 +1,43 @@
+/**
+ * Similar to Hotwire's PathConfiguration.json, this class compiles a list of
+ * rules to check link hrefs against so that we can identify links that
+ * should open in a KPOP modal.
+ *
+ * Unlike Hotwire Native, we can't intercept 303s in the browser before they
+ * load. Browser sandbox prevents us from inspecting the location of redirect
+ * requests so we can only intercept links that match modals directly.
+ *
+ * For posts and redirects, we need server support (flash modals, streams).
+ */
+export default class Ruleset {
+  constructor(rules = []) {
+    this.rules = [];
+
+    rules.forEach((rule) => {
+      this.#compileRule(rule);
+    });
+  }
+
+  /**
+   * Returns properties for the given URL
+   *
+   * @param {URL} location
+   * @returns {} properties
+   */
+  properties(location) {
+    return this.rules.reduce((c, f) => f(location, c), {});
+  }
+
+  #compileRule({ patterns, properties }) {
+    patterns.forEach((pattern) => {
+      this.rules.push(locationMatcher(new RegExp(pattern), properties));
+    });
+  }
+}
+
+function locationMatcher(re, properties) {
+  return (location, accumulator) =>
+    re.test(location.pathname)
+      ? { ...accumulator, ...properties }
+      : accumulator;
+}

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

@@ -0,0 +1,21 @@
+import { Turbo } from "@hotwired/turbo-rails";
+
+import { StreamModal } from "../modals/stream_modal";
+
+export default class StreamActions {
+  start() {
+    Turbo.StreamActions.kpop_open = openStreamModal;
+  }
+
+  stop() {
+    delete Turbo.StreamActions.kpop_open;
+  }
+}
+
+function openStreamModal() {
+  const frame = this.targetElements[0]?.kpop;
+
+  if (frame) {
+    StreamModal.open(frame, this).then(() => {});
+  }
+}

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

@@ -11,7 +11,9 @@
 </head>
 <body>
 <%= render Kpop::FrameComponent.new do %>
-  <%= yield %>
+  <%= render(Kpop::ModalComponent.new(title: content_for(:title), modal_class: content_for(:modal_class))) do %>
+    <%= yield %>
+  <% end %>
 <% end %>
 </body>
 </html>

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

@@ -0,0 +1,3 @@
+<%= render(Kpop::ModalComponent.new(title: content_for(:title), modal_class: content_for(:modal_class))) do %>
+  <%= yield %>
+<% end %>

data/lib/katalyst/kpop/engine.rb

@@ -11,7 +11,6 @@ module Katalyst
       isolate_namespace Katalyst::Kpop
       config.eager_load_namespaces << Katalyst::Kpop
       config.autoload_once_paths = %W(
-        #{root}/app/helpers
         #{root}/app/controllers
         #{root}/app/controllers/concerns
       )
@@ -25,15 +24,9 @@ module Katalyst
         end
       end
 
-      initializer "kpop.helpers", before: :load_config_initializers do
-        ::Turbo::Streams::TagBuilder.define_method(:kpop) do
-          Katalyst::Kpop::Turbo::TagBuilder.new(self)
-        end
-
+      initializer "kpop.frame", before: :load_config_initializers do
         ActiveSupport.on_load(:action_controller_base) do
           include Katalyst::Kpop::FrameRequest
-
-          helper Katalyst::Kpop::Engine.helpers
         end
       end
 

data/lib/katalyst/kpop/matchers/modal_matcher.rb

@@ -6,7 +6,7 @@ module Katalyst
       # @api private
       class ModalMatcher < CapybaraMatcher
         def initialize
-          super("[data-controller*='kpop--modal']")
+          super("dialog")
         end
 
         def description

data/lib/katalyst/kpop/matchers/src_matcher.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Kpop
+    module Matchers
+      # @api private
+      class SrcMatcher < Base
+        def description
+          "contain a kpop frame with src #{expected.inspect}"
+        end
+
+        def match(expected, actual) # rubocop:disable Naming/PredicateMethod
+          case expected
+          when String
+            actual[:src].to_s.eql?(expected)
+          when Regexp
+            actual[:src].to_s.match?(expected)
+          else
+            raise ArgumentError, expected
+          end
+        end
+
+        def failure_message
+          "expected a kpop frame with src #{expected.inspect} but received #{actual.native.to_html.inspect} instead"
+        end
+
+        def failure_message_when_negated
+          "expected not to find a kpop frame with src #{expected}"
+        end
+      end
+    end
+  end
+end

data/lib/katalyst/kpop/matchers.rb

@@ -4,58 +4,29 @@ module Katalyst
   module Kpop
     module Matchers
       # @api public
-      # Passes if `response` contains a turbo response with a kpop dismiss action.
-      #
-      # @example
-      #   expect(response).to kpop_dismiss
-      def kpop_dismiss(id: "kpop")
-        ChainedMatcher.new(ResponseMatcher,
-                           CapybaraParser,
-                           StreamMatcher.new(id:, action: "kpop_dismiss"))
-      end
-
-      # @api public
-      # Passes if `response` contains a turbo response with a kpop redirect to
-      # the provided `target`.
-      #
-      # @example Matching a path against a turbo response containing a kpop redirect
-      #   expect(response).to kpop_redirect_to("/path/to/resource")
-      def kpop_redirect_to(target, id: "kpop")
-        raise ArgumentError, "Invalid target: nil" unless target
-
-        ChainedMatcher.new(ResponseMatcher,
-                           CapybaraParser,
-                           StreamMatcher.new(id:, action: "kpop_redirect_to"),
-                           RedirectMatcher.new(target))
-      end
-
-      # @api public
-      # Passes if `response` contains a turbo stream response with a kpop modal.
+      # Passes if `response` contains a turbo frame with a kpop modal.
       # Supports matching on:
-      #  * id – kpop frame id
+      #  * id – turbo frame id
       #  * title - modal title
       #
       # @example Matching turbo stream response with a Shopping Cart modal
-      #   expect(response).to render_kpop_stream(title: "Shopping Cart")
-      def render_kpop_stream(id: "kpop", title: nil)
-        matcher = ChainedMatcher.new(ResponseMatcher, CapybaraParser, StreamMatcher.new(id:, action: "kpop_open"),
-                                     ModalMatcher)
+      #   expect(response).to render_kpop_frame(title: "Shopping Cart")
+      def render_kpop_frame(id: "kpop", title: nil)
+        matcher = ChainedMatcher.new(ResponseMatcher, CapybaraParser, FrameMatcher.new(id:), ModalMatcher)
         matcher << TitleFinder << TitleMatcher.new(title) if title.present?
         matcher
       end
 
       # @api public
-      # Passes if `response` contains a turbo frame with a kpop modal.
+      # Passes if `response` contains a kpop turbo frame src set.
       # Supports matching on:
       #  * id – turbo frame id
-      #  * title - modal title
+      #  * location - modal location (path)
       #
-      # @example Matching turbo stream response with a Shopping Cart modal
-      #   expect(response).to render_kpop_frame(title: "Shopping Cart")
-      def render_kpop_frame(id: "kpop", title: nil)
-        matcher = ChainedMatcher.new(ResponseMatcher, CapybaraParser, FrameMatcher.new(id:), ModalMatcher)
-        matcher << TitleFinder << TitleMatcher.new(title) if title.present?
-        matcher
+      # @example Matching a response that will async load `/cart` as a modal
+      #   expect(response).to have_kpop_src("/cart")
+      def have_kpop_src(location, id: "kpop") # rubocop:disable Naming/PredicatePrefix
+        ChainedMatcher.new(ResponseMatcher, CapybaraParser, FrameMatcher.new(id:), SrcMatcher.new(location))
       end
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-kpop
 version: !ruby/object:Gem::Version
-  version: 3.4.0
+  version: 4.0.0.beta.1
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -63,35 +63,24 @@ files:
 - app/assets/builds/katalyst/kpop.min.js
 - app/assets/builds/katalyst/kpop.min.js.map
 - app/assets/config/katalyst-kpop.js
-- app/assets/stylesheets/katalyst/kpop.scss
-- app/assets/stylesheets/katalyst/kpop/_frame.scss
-- app/assets/stylesheets/katalyst/kpop/_modal.scss
-- app/assets/stylesheets/katalyst/kpop/_scrim.scss
-- app/assets/stylesheets/katalyst/kpop/_side_panel.scss
-- app/assets/stylesheets/katalyst/kpop/_variables.scss
+- app/assets/stylesheets/katalyst/kpop.css
 - app/components/kpop/frame_component.html.erb
 - app/components/kpop/frame_component.rb
-- app/components/kpop/modal/footer_component.rb
-- app/components/kpop/modal/header_component.rb
-- app/components/kpop/modal/title_component.html.erb
-- app/components/kpop/modal/title_component.rb
 - app/components/kpop/modal_component.html.erb
 - app/components/kpop/modal_component.rb
-- app/components/scrim_component.rb
 - app/controllers/concerns/katalyst/kpop/frame_request.rb
-- app/helpers/kpop_helper.rb
 - app/javascript/kpop/application.js
 - app/javascript/kpop/controllers/frame_controller.js
-- app/javascript/kpop/controllers/modal_controller.js
-- app/javascript/kpop/controllers/scrim_controller.js
-- app/javascript/kpop/debug.js
 - app/javascript/kpop/modals/content_modal.js
 - app/javascript/kpop/modals/frame_modal.js
 - app/javascript/kpop/modals/modal.js
 - app/javascript/kpop/modals/stream_modal.js
-- app/javascript/kpop/turbo_actions.js
-- app/javascript/kpop/utils/stream_renderer.js
+- app/javascript/kpop/utils/debug.js
+- app/javascript/kpop/utils/link_observer.js
+- app/javascript/kpop/utils/ruleset.js
+- app/javascript/kpop/utils/stream_actions.js
 - app/views/layouts/kpop/frame.html.erb
+- app/views/layouts/kpop/stream.html.erb
 - config/importmap.rb
 - lib/katalyst/kpop.rb
 - lib/katalyst/kpop/engine.rb
@@ -104,10 +93,10 @@ files:
 - lib/katalyst/kpop/matchers/modal_matcher.rb
 - lib/katalyst/kpop/matchers/redirect_matcher.rb
 - lib/katalyst/kpop/matchers/response_matcher.rb
+- lib/katalyst/kpop/matchers/src_matcher.rb
 - lib/katalyst/kpop/matchers/stream_matcher.rb
 - lib/katalyst/kpop/matchers/title_finder.rb
 - lib/katalyst/kpop/matchers/title_matcher.rb
-- lib/katalyst/kpop/turbo.rb
 homepage: https://github.com/katalyst/kpop
 licenses:
 - MIT

data/app/assets/stylesheets/katalyst/kpop/_frame.scss

@@ -1,90 +0,0 @@
-@use "variables" as *;
-
-.kpop--container {
-  display: none;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-
-  align-items: center;
-  z-index: 100;
-  pointer-events: none;
-
-  > * {
-    pointer-events: auto;
-  }
-}
-
-.kpop--frame {
-  --opening-animation: slide-in-up;
-  --closing-animation: slide-out-down;
-
-  position: relative;
-  display: grid;
-  margin: 0 auto;
-
-  --min-width: #{$min-width};
-  --max-width: #{$max-width};
-  --min-height: #{$min-height};
-  --max-height: #{$max-height};
-
-  min-width: var(--min-width);
-  max-width: var(--max-width);
-  min-height: var(--min-height);
-  max-height: var(--max-height);
-
-  grid-template-columns: min(var(--max-width), max(var(--min-width), 100%));
-  grid-template-rows: min(var(--max-height), max(var(--min-height), 100%));
-}
-
-@media (max-width: $mobile-width), (max-height: $mobile-height) {
-  .kpop--frame {
-    --min-width: 100dvw;
-    --max-width: 100dvw;
-    --min-height: 30dvh;
-    --max-height: calc(100dvh - 1.5rem);
-  }
-}
-
-.scrim[data-scrim-open-value="false"] + .kpop--container .kpop--frame {
-  display: none;
-}
-
-.scrim[data-hide-animating]
-  + .kpop--container
-  .kpop--frame[data-kpop--frame-open-value="true"] {
-  animation: var(--closing-animation);
-  animation-duration: $duration;
-  animation-fill-mode: forwards;
-}
-
-.scrim[data-show-animating] + .kpop--container .kpop--frame {
-  animation: var(--opening-animation);
-  animation-duration: $duration;
-  animation-fill-mode: forwards;
-}
-
-@keyframes slide-in-up {
-  0% {
-    transform: translateY(10%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-}
-
-@keyframes slide-out-down {
-  0% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(10%);
-    opacity: 0;
-  }
-}