katalyst-kpop 2.0.9 → 3.0.0.beta.1

data/app/assets/builds/katalyst/kpop.css

@@ -1,117 +0,0 @@
-.kpop-container {
-  display: none;
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  pointer-events: none;
-}
-.kpop-container > * {
-  pointer-events: auto;
-}
-
-.kpop-modal {
-  position: relative;
-  overflow: hidden;
-  display: grid;
-  grid-template-areas: "title-bar" "header" "content" "footer";
-  grid-template-rows: auto auto 1fr auto;
-  border: 1px solid black;
-  border-radius: 0.5rem;
-  background-color: white;
-  min-width: 35rem;
-  max-width: 52rem;
-  min-height: 0;
-  max-height: 80vh;
-}
-.kpop-modal .kpop-title-bar {
-  grid-area: title-bar;
-  display: flex;
-  background: #344055;
-  color: white;
-}
-.kpop-modal .kpop-title-bar .kpop-title {
-  padding: 1rem 1.5rem;
-  flex-grow: 1;
-}
-.kpop-modal .kpop-title-bar .kpop-close {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  display: block;
-  font-size: 2rem;
-  font-weight: bold;
-  padding: 0 0.75rem;
-  text-decoration: none;
-}
-.kpop-modal .kpop-header {
-  grid-area: header;
-}
-.kpop-modal .kpop-content {
-  grid-area: content;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
-.kpop-modal .kpop-footer {
-  grid-area: footer;
-  background: white;
-  border-top: 1px solid black;
-  padding: 1rem 1.5rem;
-}
-.kpop-modal .kpop-buttons {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: space-between;
-}
-
-.kpop-modal.iframe .kpop-content {
-  overflow: unset;
-}
-.kpop-modal.iframe iframe {
-  height: 80vh;
-  width: 52rem;
-  flex-grow: 1;
-  overflow: scroll;
-}
-
-@media (max-width: 600px), (max-height: 600px) {
-  .kpop-modal {
-    max-width: unset;
-    min-width: unset;
-    width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: 0;
-    border: none;
-  }
-  .kpop-modal.iframe iframe {
-    width: 100%;
-    height: 100%;
-  }
-  .kpop-buttons {
-    flex-direction: column-reverse;
-    text-align: center;
-  }
-}
-.scrim {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: -1;
-  transition: opacity 0.2s ease-in-out, z-index 0.2s step-end;
-  opacity: 0;
-}
-
-.scrim[data-scrim-open-value=true] {
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out, z-index 0.2s step-start;
-}

data/app/assets/javascripts/controllers/kpop_controller.js

@@ -1,72 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-import ScrimController from "controllers/scrim_controller";
-
-export default class KpopController extends Controller {
-  static targets = ["content", "closeButton"];
-  static values = {
-    open: Boolean,
-  };
-
-  contentTargetConnected(target) {
-    // Set the modal content to temporary to ensure its omitted when caching the page
-    target.setAttribute("data-turbo-temporary", "");
-
-    // When switching modals a target may connect while scrim is already open
-    if (this.openValue) return;
-
-    if (ScrimController.showScrim({ dismiss: this.hasCloseButtonTarget })) {
-      this.openValue = true;
-    } else {
-      this.#clear();
-    }
-  }
-
-  contentTargetDisconnected() {
-    // When switching modals there may still be content to show
-    if (this.hasContentTarget) return;
-
-    this.openValue = false;
-    ScrimController.hideScrim();
-  }
-
-  openValueChanged(open) {
-    this.element.style.display = open ? "flex" : "none";
-  }
-
-  dismiss() {
-    if (!this.hasContentTarget || !this.openValue) return;
-
-    const dismissUrl = this.contentTarget.dataset.dismissUrl;
-    const dismissAction = this.contentTarget.dataset.dismissAction;
-
-    if (dismissUrl) {
-      if (dismissAction === "replace") {
-        if (isSameUrl(document.referrer, dismissUrl)) {
-          // if we came from the same page, send the user back
-          history.back();
-        } else {
-          // if we came from a different page, dismiss the modal and replace url
-          history.replaceState({}, "", dismissUrl);
-        }
-      } else {
-        // default, send the user on to the specified URL
-        window.location.href = dismissUrl;
-      }
-    }
-
-    this.#clear();
-  }
-
-  #clear() {
-    this.element.removeAttribute("src");
-    this.element.innerHTML = "";
-  }
-}
-
-function isSameUrl(previous, next) {
-  try {
-    return `${new URL(previous)}` === `${new URL(next, location.href)}`;
-  } catch {
-    return false;
-  }
-}

data/app/assets/javascripts/katalyst/kpop.js

@@ -1,9 +0,0 @@
-import KpopController from "../controllers/kpop_controller";
-import ScrimController from "../controllers/scrim_controller";
-
-const Definitions = [
-  { identifier: "kpop", controllerConstructor: KpopController },
-  { identifier: "scrim", controllerConstructor: ScrimController },
-];
-
-export { Definitions as default, KpopController, ScrimController };

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

@@ -1,2 +0,0 @@
-@use "kpop";
-@use "scrim";

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

@@ -1,133 +0,0 @@
-$title-background-color: #344055 !default;
-$title-text-color: white !default;
-$min-width: 35rem !default;
-$max-width: 52rem !default;
-$min-height: 0 !default;
-$max-height: 80vh !default;
-$default-padding: 1rem 1.5rem !default;
-
-.kpop-container {
-  display: none;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  pointer-events: none;
-
-  > * {
-    pointer-events: auto;
-  }
-}
-
-.kpop-modal {
-  position: relative;
-  overflow: hidden;
-
-  display: grid;
-  grid-template-areas:
-    "title-bar"
-    "header"
-    "content"
-    "footer";
-  grid-template-rows: auto auto 1fr auto;
-
-  border: 1px solid black;
-  border-radius: 0.5rem;
-  background-color: white;
-
-  min-width: $min-width;
-  max-width: $max-width;
-  min-height: $min-height;
-  max-height: $max-height;
-
-  .kpop-title-bar {
-    grid-area: title-bar;
-    display: flex;
-    background: $title-background-color;
-    color: $title-text-color;
-
-    .kpop-title {
-      padding: $default-padding;
-      flex-grow: 1;
-    }
-
-    .kpop-close {
-      background: none;
-      border: none;
-      color: $title-text-color;
-      cursor: pointer;
-      display: block;
-      font-size: 2rem;
-      font-weight: bold;
-      padding: 0 0.75rem;
-      text-decoration: none;
-    }
-  }
-
-  .kpop-header {
-    grid-area: header;
-  }
-
-  .kpop-content {
-    grid-area: content;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-
-  .kpop-footer {
-    grid-area: footer;
-    background: white;
-    border-top: 1px solid black;
-    padding: $default-padding;
-  }
-
-  .kpop-buttons {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: space-between;
-  }
-}
-
-.kpop-modal.iframe {
-  .kpop-content {
-    overflow: unset;
-  }
-
-  iframe {
-    height: $max-height;
-    width: $max-width;
-    flex-grow: 1;
-    overflow: scroll;
-  }
-}
-
-@media (max-width: 600px), (max-height: 600px) {
-  .kpop-modal {
-    max-width: unset;
-    min-width: unset;
-    width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: 0;
-    border: none;
-  }
-
-  .kpop-modal.iframe {
-    iframe {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .kpop-buttons {
-    flex-direction: column-reverse;
-    text-align: center;
-  }
-}

data/app/helpers/kpop/modal.rb

@@ -1,98 +0,0 @@
-# frozen_string_literal: true
-
-# rubocop:disable Rails/HelperInstanceVariable
-module Kpop
-  class Modal
-    delegate_missing_to :@context
-
-    def initialize(context)
-      @context = context
-    end
-
-    def render(options = {})
-      dom_class = options.delete(:class)
-
-      # Generate a title bar. This can be overridden by calling title_bar again.
-      title_bar(options) unless options.fetch(:title, "").nil?
-
-      # Render block. This may have side-effect writes to header/content/footer
-      # etc. If @content is set then this value will be ignored.
-      content = capture do
-        yield self
-      end
-
-      tag.div(class: class_names("kpop-modal", dom_class),
-              data:  kpop_data_options(options),
-              **options) do
-        concat @title_bar
-        concat @header if @header.present?
-        concat @content.presence || tag.div(content, class: "kpop-content")
-        concat @footer if @footer.present?
-      end
-    end
-
-    # Generates a sticky title bar for the modal. Content should not be too long
-    # as the bar does not provide wrapping.
-    def title_bar(options = {}, &block)
-      title      = options.delete(:title)
-      captive    = options.delete(:captive)
-      @title_bar = tag.div(class: "kpop-title-bar", **options) do
-        concat(tag.span(class: "kpop-title") do
-          concat(block ? (yield self) : title)
-        end)
-        concat(close_icon) unless captive
-      end
-      nil
-    end
-
-    # Generates sticky header content for the top of the modal. Content is not
-    # padded, if you want padding you should provide a padding class.
-    def header(**options, &block)
-      modal_content(:header, **options, &block)
-    end
-
-    # Generates content for the modal. Content is not padded, if you want
-    # padding you should provide a padding class.
-    def content(**options, &block)
-      modal_content(:content, **options, &block)
-    end
-
-    # Generates a sticky footer element at the bottom of the modal.
-    # Footer is padded and contents are assumed to be buttons.
-    def footer(**options, &block)
-      modal_content(:footer, **options, &block)
-    end
-
-    def close_icon
-      tag.button(
-        "×",
-        class: "kpop-close",
-        data:  {
-          kpop_target: "closeButton",
-          action:      "click->kpop#dismiss:prevent",
-        },
-      )
-    end
-
-    private
-
-    def kpop_data_options(options)
-      data = options.delete(:data) || {}
-      data.reverse_merge(
-        kpop_target:    "content",
-        dismiss_action: options.delete(:dismiss_action),
-        dismiss_url:    options.delete(:dismiss_url),
-      )
-    end
-
-    def class_for(name, options)
-      class_names("kpop-#{name}", options.delete(:class))
-    end
-
-    def modal_content(name, **options, &block)
-      instance_variable_set("@#{name}", tag.div(class: class_for(name, options), **options, &block))
-      nil
-    end
-  end
-end
-# rubocop:enable Rails/HelperInstanceVariable

data/app/helpers/scrim_helper.rb

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module ScrimHelper
-  def scrim_tag(z_index: 40)
-    tag.div(class: "scrim", data: { controller: "scrim", scrim_z_index_value: z_index, action: <<~ACTIONS })
-      click->scrim#dismiss
-      keyup@window->scrim#escape
-      scrim:request:hide@window->scrim#hide
-      scrim:request:show@window->scrim#show
-      turbo:before-cache@document->scrim#hide
-    ACTIONS
-  end
-end