RubyGems - katalyst-kpop - Versions diffs - 2.0.9 → 3.0.0.beta.1 - Mend

katalyst-kpop 2.0.9 → 3.0.0.beta.1

Files changed (62) hide show

checksums.yaml +4 -4
data/README.md +17 -43
data/app/assets/builds/katalyst/kpop.esm.js +599 -0
data/app/assets/builds/katalyst/kpop.js +479 -519
data/app/assets/builds/katalyst/kpop.min.js +2 -1
data/app/assets/builds/katalyst/kpop.min.js.map +1 -0
data/app/assets/builds/katalyst/kpop.umd.js +5890 -0
data/app/assets/config/kpop.js +1 -1
data/app/assets/stylesheets/katalyst/kpop/_frame.scss +104 -0
data/app/assets/stylesheets/katalyst/kpop/_modal.scss +95 -0
data/app/assets/stylesheets/katalyst/kpop/_scrim.scss +33 -3
data/app/assets/stylesheets/katalyst/kpop/_side_panel.scss +64 -0
data/app/assets/stylesheets/katalyst/kpop/_variables.scss +25 -0
data/app/assets/stylesheets/katalyst/kpop.scss +6 -1
data/app/components/concerns/kpop/has_html_attributes.rb +78 -0
data/app/components/kpop/frame_component.html.erb +14 -0
data/app/components/kpop/frame_component.rb +45 -0
data/app/components/kpop/modal/title_component.html.erb +6 -0
data/app/components/kpop/modal/title_component.rb +28 -0
data/app/components/kpop/modal_component.html.erb +8 -0
data/app/components/kpop/modal_component.rb +39 -0
data/app/components/scrim_component.rb +32 -0
data/app/helpers/kpop_helper.rb +12 -35
data/app/javascript/kpop/application.js +15 -0
data/app/javascript/kpop/controllers/close_controller.js +9 -0
data/app/javascript/kpop/controllers/frame_controller.js +189 -0
data/app/javascript/kpop/controllers/modal_controller.js +30 -0
data/app/javascript/kpop/controllers/redirect_controller.js +22 -0
data/app/{assets/javascripts → javascript/kpop}/controllers/scrim_controller.js +76 -72
data/app/javascript/kpop/debug.js +3 -0
data/app/javascript/kpop/modals/content_modal.js +46 -0
data/app/javascript/kpop/modals/frame_modal.js +41 -0
data/app/javascript/kpop/modals/modal.js +69 -0
data/app/javascript/kpop/modals/stream_modal.js +49 -0
data/app/javascript/kpop/modals/stream_renderer.js +15 -0
data/app/views/layouts/kpop.html.erb +1 -1
data/config/importmap.rb +1 -4
data/lib/katalyst/kpop/engine.rb +13 -12
data/lib/katalyst/kpop/matchers/base.rb +18 -0
data/lib/katalyst/kpop/matchers/capybara_matcher.rb +46 -0
data/lib/katalyst/kpop/matchers/capybara_parser.rb +17 -0
data/lib/katalyst/kpop/matchers/chained_matcher.rb +40 -0
data/lib/katalyst/kpop/matchers/frame_matcher.rb +16 -0
data/lib/katalyst/kpop/matchers/modal_matcher.rb +20 -0
data/lib/katalyst/kpop/matchers/redirect_finder.rb +16 -0
data/lib/katalyst/kpop/matchers/redirect_matcher.rb +28 -0
data/lib/katalyst/kpop/matchers/response_matcher.rb +33 -0
data/lib/katalyst/kpop/matchers/stream_matcher.rb +16 -0
data/lib/katalyst/kpop/matchers/title_finder.rb +16 -0
data/lib/katalyst/kpop/matchers/title_matcher.rb +28 -0
data/lib/katalyst/kpop/matchers.rb +79 -0
data/lib/katalyst/kpop/turbo.rb +56 -0
data/lib/katalyst/kpop/version.rb +1 -1
data/lib/katalyst/kpop.rb +4 -0
metadata +90 -15
data/app/assets/builds/katalyst/kpop.css +0 -117
data/app/assets/javascripts/controllers/kpop_controller.js +0 -72
data/app/assets/javascripts/katalyst/kpop.js +0 -9
data/app/assets/stylesheets/katalyst/kpop/_index.scss +0 -2
data/app/assets/stylesheets/katalyst/kpop/_kpop.scss +0 -133
data/app/helpers/kpop/modal.rb +0 -98
data/app/helpers/scrim_helper.rb +0 -13

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 219158f3706755e88a2275d8ebc3bc20d1b05b0a7d7006d528d0361ae7e987dd
-  data.tar.gz: ac4cb7baf980d41ecf134b42beae6e1c60ee1ff7266a25173d11bc463353eaaf
+  metadata.gz: 5d657aa583bbc374ac12276e50d9d11d85801d6ddf1518cacaeba453893fb0be
+  data.tar.gz: 19e213e9b618fb117e8e07ebeb1a5677daa8528f80de07d2f6ff611a208b5b8d
 SHA512:
-  metadata.gz: b94b85643fe6035a735c7827de03f38e03408ca40f184e708bcfd9694686060bac4191e4a5e88dd63b7b7bd6be7f4c5ccd9c7b80bd65ff636371e5e342d8ef47
-  data.tar.gz: 5afc11d9d560f408c94908d9a64ac504a15d9bbd540c690b31f7ceb3678a0455061b7cf1c973a7154b358a9c7d1d1489eb5fed9ed7e5dbdc68f87e1d22f26157
+  metadata.gz: 5bbacf659d0a520fa43115cf376bcf1f3c58aa64b619c183fcfcb4554a42868b3d2bcbf160a92d42061e9afd1d9339be6f9598d694e57a403840d78a5cb8699c
+  data.tar.gz: ba50a3724ddddb3b95c13918e93ae5dcf590f555da584f83276b218c8b747dc897a6f5d7bcf25015c6f16753f6a60c5b366cd843251f0668dd1c540ef0132ea6

data/README.md CHANGED Viewed

@@ -17,8 +17,16 @@ kpop supports installation of javascript dependencies with either import maps or
 ### Stimulus controllers
-If you are using asset pipeline and import maps then the stimulus controllers
-for modals and scrim will be automatically available without configuration.
+kpop assumes that you are using importmaps to manage javascript dependencies.
+Add the following to your Stimulus `controllers/index.js`:
+```js
+import kpop from "@katalyst/kpop";
+application.load(kpop);
+```
+This will ensure that kpop is loaded and registered with Stimulus.
 ### Stylesheets
@@ -30,43 +38,13 @@ Import stylesheets through using SASS using asset pipeline:
 @use "katalyst/kpop";
 ```
-You can also load a precompiled version from the gem directly:
-```erb
-<%# app/views/layouts/application.html.erb #>
-<%= stylesheet_link_tag "katalyst/kpop" %>
-```
-### Yarn
-If you are not using import maps, you can add the yarn package to your project:
-```bash
-$ yarn add "@katalyst-interactive/kpop"
-```
-### Import kpop styles
-```css
-/* application.scss */
-@import "~@katalyst-interactive/kpop";
-```
-### Import kpop stimulus controllers
-```js
-/* application.js */
-import kpop from "@katalyst-interactive/kpop"
-application.load(kpop)
-```
 ## Usage
 kpop provides helpers to add a basic scrim and modal target frame. These should be placed inside the body:
 ```html
  <body>
-    <%= scrim_tag %>
-    <%= kpop_frame_tag do %>
+    <%= render ScrimComponent.new %>
+    <%= render Kpop::FrameComponent.new do %>
         <%= yield :kpop %>
     <% end %>
  </body>
@@ -81,32 +59,28 @@ To show a modal you need to add content to the kpop turbo frame. You can do this
 You can generate a link that will cause a modal to show using the `kpop_link_to` helper.
 `kpop_link_to`'s are similar to a `link_to` in rails, but it will navigate to the given URL within the modal turbo
-frame. The targeted action will need to generate content in a `kpop_frame_tag`, e.g. using `layout "kpop"`.
+frame. The targeted action will need to generate content in a `Kpop::FrameComponent`, e.g. using `layout "kpop"`.
 ```html
 <!-- app/views/homepage/index.html.erb -->
-<%= modal_link_to "click to open modal", modal_path("example") %>
+<%= kpop_link_to "click to open modal", modal_path("example") %>
 ```
 ```html
 <!-- app/views/modals/show.html.erb -->
-<%= render_kpop(title: "Modal title") do %>
- Modal content
+<%= Kpop::Modal(title: "Modal title") do %>
+  Modal content
 <% end %>
 ```
-Note that, because kpop modals render in a turbo frame, if you want to navigate the parent frame you will need to use
-`target: "_top"` on your links and forms, or add `target: "_top"` to the `kpop_frame_tag` call in your body.
 ## Development
 Releases need to be distributed to rubygems.org and npmjs.org. To do this, you need to have accounts with both providers
 and be added as a collaborator to the kpop gem and npm packages.
-1. Update the version in `package.json` and `lib/katalyst/kpop/version.rb`
+1. Update the version in `lib/katalyst/kpop/version.rb`
 2. Ensure that `rake` passes (format and tests)
 3. Tag a release and push to rubygems.org by running `rake release`
-4. Push the new version to npmjs.org by running `yarn publish`
 ## License

data/app/assets/builds/katalyst/kpop.esm.js ADDED Viewed

@@ -0,0 +1,599 @@
+import { Controller } from '@hotwired/stimulus';
+import { Turbo } from '@hotwired/turbo-rails';
+class Kpop__CloseController extends Controller {
+  static outlets = ["kpop--frame"];
+  kpopFrameOutletConnected(frame) {
+    frame.dismiss();
+  }
+}
+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) {
+  }
+}
+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();
+  }
+}
+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 });
+  }
+}
+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;
+  }
+}
+class StreamRenderer {
+  constructor(frame, action) {
+    this.frame = frame;
+    this.action = action;
+  }
+  render() {
+    this.frame.src = "";
+    this.frame.innerHTML = "";
+    this.frame.append(this.action.templateContent);
+  }
+}
+Turbo.StreamActions.kpop_open = function () {
+  const frame = () => {
+    return this.targetElements[0];
+  };
+  const animate = !frame?.kpop?.openValue;
+  frame()
+    .kpop.dismiss({ animate, reason: "before-turbo-stream" })
+    .then(() => {
+      new StreamRenderer(frame(), this).render();
+      frame().kpop.open(new StreamModal(this.target, this), { animate });
+    });
+};
+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;
+    }
+    this.opening ||= this.#nextAnimationFrame(() => {
+      return this.#open(modal, { animate });
+    });
+    return this.opening;
+  }
+  async dismiss({ animate = true, reason = "" } = {}) {
+    if (!this.isOpen) {
+      this.debug("skip dismiss as already closed");
+      return false;
+    }
+    this.dismissing ||= this.#nextAnimationFrame(() => {
+      return new Promise((resolve) => {
+        this.#dismiss({ animate, reason }).then(() => {
+          return this.#nextAnimationFrame(resolve);
+        });
+      });
+    });
+    return this.dismissing;
+  }
+  // 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(() => {
+      event.detail.resume();
+    });
+  }
+  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;
+    modal.open({ animate });
+    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");
+    }
+    await this.scrimOutlet.hide({ animate });
+    await this.modal?.dismiss();
+    this.openValue = false;
+    this.modal = null;
+    delete this.dismissing;
+    this.debug("dismiss-end");
+  }
+  #nextAnimationFrame(callback) {
+    return new Promise((resolve) => {
+      window.requestAnimationFrame(() => {
+        resolve(callback());
+      });
+    });
+  }
+  debug(event, ...args) {
+  }
+}
+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) {
+  }
+}
+class Kpop__RedirectController extends Controller {
+  static outlets = ["kpop--frame"];
+  static values = {
+    path: String,
+    target: String,
+  };
+  kpopFrameOutletConnected(frame) {
+    if (this.targetValue === frame.element.id) {
+      frame.dismiss().then(() => {
+        document.getElementById(this.targetValue).src = this.pathValue;
+      });
+    } else {
+      Turbo.visit(this.pathValue, { action: "replace" });
+    }
+    this.element.remove();
+  }
+}
+/**
+ * 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".
+ */
+class ScrimController extends Controller {
+  static values = {
+    open: Boolean,
+    captive: Boolean,
+    zIndex: Number,
+  };
+  connect() {
+    this.defaultZIndexValue = this.zIndexValue;
+    this.defaultCaptiveValue = this.captiveValue;
+    this.element.scrim = this;
+  }
+  disconnect() {
+    delete this.element.scrim;
+  }
+  async show({
+    captive = this.defaultCaptiveValue,
+    zIndex = this.defaultZIndexValue,
+    top = window.scrollY,
+    animate = true,
+  } = {}) {
+    // 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 });
+    // 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;
+    }
+  }
+  async hide({ animate = true } = {}) {
+    if (!this.openValue || this.element.dataset.hideAnimating) return;
+    // notify listeners of pending request
+    this.dispatch("hide", { bubbles: true });
+    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;
+  }
+  dismiss(event) {
+    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.previousPosition = document.body.style.position;
+    this.previousTop = document.body.style.top;
+    this.element.style.zIndex = this.zIndexValue;
+    document.body.style.top = `-${top}px`;
+    document.body.style.position = "fixed";
+  }
+  /**
+   * Unclips body from viewport size and unsets the z-index
+   */
+  #hide() {
+    this.captiveValue = this.defaultCaptiveValue;
+    this.zIndexValue = this.defaultZIndexValue;
+    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;
+    delete this.previousPosition;
+    delete this.previousTop;
+  }
+}
+function resetStyle(element, property, previousValue) {
+  if (previousValue) {
+    element.style.setProperty(property, previousValue);
+  } else {
+    element.style.removeProperty(property);
+  }
+}
+const Definitions = [
+  { identifier: "kpop--close", controllerConstructor: Kpop__CloseController },
+  { identifier: "kpop--frame", controllerConstructor: Kpop__FrameController },
+  { identifier: "kpop--modal", controllerConstructor: Kpop__ModalController },
+  { identifier: "kpop--redirect", controllerConstructor: Kpop__RedirectController },
+  { identifier: "scrim", controllerConstructor: ScrimController },
+];
+export { Definitions as default };