katalyst-kpop 3.4.0 → 4.0.0.beta.2

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

@@ -1,159 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-import DEBUG from "../debug";
-
-/**
- * Scrim controller wraps an element that creates a whole page layer.
- * It is intended to be used behind a modal or nav drawer.
- *
- * If the Scrim element receives a click event, it automatically triggers "scrim:hide".
- *
- * 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".
- */
-export default class ScrimController extends Controller {
-  static values = {
-    open: Boolean,
-    captive: Boolean,
-    zIndex: Number,
-  };
-
-  connect() {
-    if (DEBUG) console.debug("scrim:connect");
-
-    this.defaultZIndexValue = this.zIndexValue;
-    this.defaultCaptiveValue = this.captiveValue;
-
-    this.element.scrim = this;
-  }
-
-  disconnect() {
-    if (DEBUG) console.debug("scrim:disconnect");
-
-    delete this.element.scrim;
-  }
-
-  async show({
-    captive = this.defaultCaptiveValue,
-    zIndex = this.defaultZIndexValue,
-    top = window.scrollY,
-    animate = true,
-  } = {}) {
-    if (DEBUG) console.debug("scrim:before-show");
-
-    // 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
-    this.dispatch("show", { bubbles: true });
-
-    if (DEBUG) console.debug("scrim:show-start");
-
-    // update state, perform style updates
-    this.#show(captive, zIndex, top);
-
-    if (animate) {
-      // animate opening
-      // this will trigger an animationEnd event via CSS that completes the open
-      this.element.dataset.showAnimating = "";
-
-      await new Promise((resolve) => {
-        this.element.addEventListener("animationend", () => resolve(), {
-          once: true,
-        });
-      });
-
-      delete this.element.dataset.showAnimating;
-    }
-
-    if (DEBUG) console.debug("scrim:show-end");
-  }
-
-  async hide({ animate = true } = {}) {
-    if (!this.openValue || this.element.dataset.hideAnimating) return;
-
-    if (DEBUG) console.debug("scrim:before-hide");
-
-    // notify listeners of pending request
-    this.dispatch("hide", { bubbles: true });
-
-    if (DEBUG) console.debug("scrim:hide-start");
-
-    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;
-    }
-
-    this.#hide();
-
-    this.openValue = false;
-
-    if (DEBUG) console.debug("scrim:hide-end");
-  }
-
-  dismiss(event) {
-    if (DEBUG) console.debug("scrim:dismiss");
-
-    if (!this.captiveValue) this.dispatch("dismiss", { bubbles: true });
-  }
-
-  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, zIndex, top) {
-    this.captiveValue = captive;
-    this.zIndexValue = zIndex;
-    this.scrollY = top;
-
-    this.element.style.zIndex = this.zIndexValue;
-    document.body.style.top = `-${top}px`;
-    document.body.style.position = "fixed";
-    document.body.style.paddingRight = `-${this.scrollPadding}px`;
-
-    if (document.body.scrollHeight > window.innerHeight) {
-      document.body.style.overflowY = "scroll";
-    }
-  }
-
-  /**
-   * Unclips body from viewport size and unsets the z-index
-   */
-  #hide() {
-    this.captiveValue = this.defaultCaptiveValue;
-    this.zIndexValue = this.defaultZIndexValue;
-
-    this.element.style.removeProperty("z-index");
-    document.body.style.removeProperty("position");
-    document.body.style.removeProperty("top");
-    document.body.style.removeProperty("overflow-y");
-
-    window.scrollTo({ left: 0, top: this.scrollY, behavior: "instant" });
-
-    delete this.scrollY;
-  }
-}

data/app/javascript/kpop/debug.js

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

data/app/javascript/kpop/turbo_actions.js

@@ -1,46 +0,0 @@
-import { Turbo } from "@hotwired/turbo-rails";
-
-import DEBUG from "./debug";
-
-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) {
-    if (DEBUG)
-      console.debug(
-        `kpop: redirecting ${this.target} to ${this.getAttribute("href")}`,
-      );
-    const a = document.createElement("A");
-    a.setAttribute("data-turbo-action", "replace");
-    this.targetElements[0].delegate.linkClickIntercepted(
-      a,
-      this.getAttribute("href"),
-    );
-  } else {
-    if (DEBUG)
-      console.debug(`kpop: redirecting to ${this.getAttribute("href")}`);
-    Turbo.visit(this.getAttribute("href"), {
-      action: this.dataset.turboAction,
-    });
-  }
-};

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

@@ -1,15 +0,0 @@
-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/lib/katalyst/kpop/turbo.rb

@@ -1,49 +0,0 @@
-# frozen_string_literal: true
-
-module Katalyst
-  module Kpop
-    module Turbo
-      class TagBuilder
-        delegate :action, :turbo_stream_action_tag, to: :@builder
-
-        def initialize(builder)
-          @builder = builder
-        end
-
-        # Open a modal in the kpop frame identified by <tt>id</tt> either the <tt>content</tt> passed in or a
-        # rendering result determined by the <tt>rendering</tt> keyword arguments, the content in the block,
-        # or the rendering of the content as a record. Examples:
-        #
-        #   <%= turbo_stream.kpop.open modal %>
-        #   <%= turbo_stream.kpop.open partial: "modals/modal", locals: { record: } %>
-        #   <%= turbo_stream.kpop.open do %>
-        #     <%= render Kpop::ModalComponent.new(title: "Example") do %>
-        #       ...
-        #     <% end %>
-        #   <% end %>
-        def open(content = nil, id: "kpop", **, &)
-          action(:kpop_open, id, content, **, &)
-        end
-
-        # Render a turbo stream action that will dismiss any open kpop modal.
-        def dismiss(id: "kpop")
-          turbo_stream_action_tag(:kpop_dismiss, target: id)
-        end
-
-        # Renders a kpop redirect controller response that will escape the frame and navigate to the given URL.
-        # Note: turbo does not currently snapshot page history accurately when using "advance" (Oct 23).
-        def redirect_to(href, id: "kpop", action: "replace", target: nil)
-          turbo_stream_action_tag(
-            :kpop_redirect_to,
-            target: id,
-            href:,
-            data:   {
-              turbo_action: action,
-              turbo_frame:  target,
-            },
-          )
-        end
-      end
-    end
-  end
-end