katalyst-content 2.8.1 → 3.0.0.alpha.1

data/app/components/katalyst/content/editor/new_items_component.html.erb

@@ -1,20 +1,42 @@
 <div class="content--editor--new-items"
-     data-controller="<%= NEW_ITEMS_CONTROLLER %>"
-     data-action="turbo:before-morph-element-><%= NEW_ITEMS_CONTROLLER %>#morph">
-  <%= tag.button(aria:  { controls: "#{NEW_ITEMS_CONTROLLER}-dialog" },
-                 class: "content--editor--add-button",
-                 data:  { action: "#{NEW_ITEMS_CONTROLLER}#open" }) do %>
-    Add content
-  <% end %>
-  <%= tag.div(class:  "content--editor--inline-add",
-              data:   { "#{NEW_ITEMS_CONTROLLER}_target" => "inline" },
-              hidden: "") do %>
-    <%= tag.button(aria: { controls: "#{NEW_ITEMS_CONTROLLER}-dialog", label: "Add content here" },
-                   data: { action: "#{NEW_ITEMS_CONTROLLER}#open" }) %>
-  <% end %>
-  <%= tag.dialog(id: "#{NEW_ITEMS_CONTROLLER}-dialog", data: { action: "click->#{NEW_ITEMS_CONTROLLER}#close" }) do %>
-    <%= tag.div(role: "list", data: { action: "click->#{NEW_ITEMS_CONTROLLER}#noop:stop" }) do %>
-      <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
-    <% end %>
-  <% end %>
+     data-controller="content--editor--new-items"
+     data-action="turbo:before-morph-element->content--editor--new-items#morph">
+  <button aria-controls="content--editor--new-items-dialog"
+          class="button"
+          data-action="click->content--editor--new-items#open"
+          data-button-padding="tight"
+          data-text-button>
+    <icon aria-hidden="true" class="icon" data-icon="add">&nbsp;</icon>
+    Add item
+  </button>
+  <div class="content--editor--inline-add" data-content--editor--new-items-target="inline" hidden>
+    <button aria-controls="content--editor--new-items-dialog"
+            class="button"
+            data-action="content--editor--new-items#open"
+            data-button-padding="tight">
+      <icon aria-hidden="true" class="icon" data-icon="add">&nbsp;</icon>
+      <span class="visually-hidden">Add item here</span>
+    </button>
+  </div>
+  <dialog id="content--editor--new-items-dialog" class="modal" data-action="click->content--editor--new-items#close">
+    <article class="flow" data-action="click->content--editor--new-items#noop:stop">
+      <header class="repel" data-nowrap>
+        <h2>Add item</h2>
+        <button class="button"
+                data-action="click->content--editor--new-items#close"
+                data-button-padding="tight"
+                data-text-button>
+          <icon aria-hidden="true" class="icon" data-icon="close">&nbsp;</icon>
+          <span class="visually-hidden">Close</span>
+        </button>
+      </header>
+      <main>
+        <%= tag.div(role: "list", data: { action: "click->content--editor--new-items#noop:stop" }) do %>
+          <ul role="list" class="items-list">
+            <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
+          </ul>
+        <% end %>
+      </main>
+    </article>
+  </dialog>
 </div>

data/app/components/katalyst/content/editor/new_items_component.rb

@@ -4,8 +4,6 @@ module Katalyst
   module Content
     module Editor
       class NewItemsComponent < BaseComponent
-        include ::Turbo::FramesHelper
-
         renders_many :items, Editor::NewItemComponent
 
         def items

data/app/components/katalyst/content/editor/row_component.html.erb

@@ -1,4 +1,5 @@
-<li draggable="true"
+<li class="content--editor--item"
+    draggable="true"
     data-content-item
     data-content-item-id="<%= item.id %>"
     data-content-index="<%= item.index %>"

data/app/components/katalyst/content/editor/status_bar_component.rb

@@ -4,11 +4,6 @@ module Katalyst
   module Content
     module Editor
       class StatusBarComponent < BaseComponent
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          content:change@document->#{STATUS_BAR_CONTROLLER}#change
-          turbo:morph-element->#{STATUS_BAR_CONTROLLER}#morph
-        ACTIONS
-
         attr_reader :container
 
         def call
@@ -37,10 +32,10 @@ module Katalyst
 
         def actions
           tag.menu do
-            concat action(:discard, class: "button button--text")
-            concat action(:revert, class: "button button--text") if container.draft?
-            concat action(:save, class: "button button--secondary")
-            concat action(:publish, class: "button button--primary")
+            concat action(:discard, class: "button", data: { text_button: "" })
+            concat action(:revert, class: "button", data: { text_button: "" })
+            concat action(:save, class: "button", data: { ghost_button: "" })
+            concat action(:publish, class: "button")
           end
         end
 
@@ -59,8 +54,11 @@ module Katalyst
         def default_html_attributes
           {
             data: {
-              controller: STATUS_BAR_CONTROLLER,
-              action:     ACTIONS,
+              controller: "content--editor--status-bar",
+              action:     %w[
+                content:change@document->content--editor--status-bar#change
+                turbo:morph-element->content--editor--status-bar#morph
+              ],
               state:      container.state,
             },
           }

data/app/components/katalyst/content/editor/table_component.html.erb

@@ -1,9 +1,3 @@
-<div role="rowheader">
-  <h4>Heading</h4>
-  <h4></h4>
-  <h4>Actions</h4>
-</div>
-
 <%= tag.ol(id: container_form_id, **html_attributes) do %>
   <% items.each do |item| %>
     <%= item %>

data/app/components/katalyst/content/editor/table_component.rb

@@ -4,14 +4,6 @@ module Katalyst
   module Content
     module Editor
       class TableComponent < BaseComponent
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          dragstart->#{LIST_CONTROLLER}#dragstart
-          dragover->#{LIST_CONTROLLER}#dragover
-          drop->#{LIST_CONTROLLER}#drop
-          dragend->#{LIST_CONTROLLER}#dragend
-          keyup.esc@document->#{LIST_CONTROLLER}#dragend
-        ACTIONS
-
         renders_many :items, ->(item) do
           row = RowComponent.new(item:, container:)
           row.with_content(render(ItemComponent.new(item:, container:)))
@@ -22,11 +14,19 @@ module Katalyst
 
         def default_html_attributes
           {
-            data: {
-              controller:                       LIST_CONTROLLER,
-              action:                           ACTIONS,
-              "#{CONTAINER_CONTROLLER}_target": "container",
+            class: "katalyst--content--editor",
+            data:  {
+              controller:                        "content--editor--list",
+              action:                            %w[
+                dragstart->content--editor--list#dragstart
+                dragover->content--editor--list#dragover
+                drop->content--editor--list#drop
+                dragend->content--editor--list#dragend
+                keyup.esc@document->content--editor--list#dragend
+              ],
+              content__editor__container_target: "container",
             },
+            role:  "list",
           }
         end
       end

data/app/components/katalyst/content/editor_component.html.erb

@@ -9,3 +9,8 @@
 
   <%= render Katalyst::Content::Editor::NewItemsComponent.new(container:) %>
 <% end %>
+
+<%= turbo_frame_tag(
+      "content--editor--item-editor",
+      data: { controller: "content--editor--item-editor" },
+    ) %>

data/app/components/katalyst/content/editor_component.rb

@@ -3,13 +3,7 @@
 module Katalyst
   module Content
     class EditorComponent < Editor::BaseComponent
-      ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-        submit->#{CONTAINER_CONTROLLER}#reindex
-        content:drop->#{CONTAINER_CONTROLLER}#drop
-        content:reindex->#{CONTAINER_CONTROLLER}#reindex
-        turbo:render@document->#{CONTAINER_CONTROLLER}#connect
-        content:reset->#{CONTAINER_CONTROLLER}#reset
-      ACTIONS
+      include ::Turbo::FramesHelper
 
       attr_reader :url, :scope
 
@@ -44,10 +38,17 @@ module Katalyst
 
       def default_html_attributes
         {
-          id:   container_form_id,
-          data: {
-            controller: CONTAINER_CONTROLLER,
-            action:     ACTIONS,
+          id:    container_form_id,
+          class: "content--editor",
+          data:  {
+            controller: "content--editor--container",
+            action:     %w[
+              submit->content--editor--container#reindex
+              content:drop->content--editor--container#drop
+              content:reindex->content--editor--container#reindex
+              turbo:render@document->content--editor--container#connect
+              content:reset->content--editor--container#reset
+            ],
           },
         }
       end

data/app/controllers/katalyst/content/items_controller.rb

@@ -6,7 +6,6 @@ module Katalyst
       before_action :set_container, only: %i[new create]
       before_action :set_item, except: %i[new create]
       before_action :set_editor_variant
-      before_action :require_kpop, only: %i[new edit]
 
       attr_reader :container, :item, :editor
 

data/app/javascript/content/application.js

@@ -1,5 +1,6 @@
 import ContainerController from "./editor/container_controller";
 import ItemController from "./editor/item_controller";
+import ItemEditorController from "./editor/item_editor_controller";
 import ListController from "./editor/list_controller";
 import NewItemsController from "./editor/new_items_controller";
 import StatusBarController from "./editor/status_bar_controller";
@@ -15,6 +16,10 @@ const Definitions = [
     identifier: "content--editor--item",
     controllerConstructor: ItemController,
   },
+  {
+    identifier: "content--editor--item-editor",
+    controllerConstructor: ItemEditorController,
+  },
   {
     identifier: "content--editor--list",
     controllerConstructor: ListController,

data/app/javascript/content/editor/item.js

@@ -272,7 +272,7 @@ export default class Item {
  */
 function createChildrenList(node) {
   const childrenList = document.createElement("ol");
-  childrenList.setAttribute("class", "hidden");
+  childrenList.toggleAttribute("hidden", true);
 
   // if objectType is "rich-content" set richContentChildren as a data attribute
   childrenList.dataset[`contentChildren`] = "";

data/app/javascript/content/editor/item_editor_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus";
+import Item from "./item";
+
+export default class ItemEditorController extends Controller {
+  static targets = ["dialog"];
+
+  connect() {
+    this.element.addEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  dismiss() {
+    if (!this.dialogTarget) return;
+    if (!this.dialogTarget.open) this.dialogTarget.close();
+
+    if (!("itemPersisted" in this.dialogTarget.dataset)) {
+      this.#removeTargetItem();
+    }
+
+    this.element.removeAttribute("src");
+    this.dialogTarget.remove();
+  }
+
+  dialogTargetConnected(dialog) {
+    dialog.showModal();
+  }
+
+  onSubmit = (event) => {
+    if (
+      event.detail.success &&
+      "closeDialog" in event.detail.formSubmission?.submitter?.dataset
+    ) {
+      this.dialogTarget.close();
+      this.element.removeAttribute("src");
+      this.dialogTarget.remove();
+    }
+  };
+
+  noop() {}
+
+  #removeTargetItem() {
+    const el = document.getElementById(this.dialogTarget.dataset.itemId);
+    const item = new Item(el.closest("[data-content-item]"));
+    const list = item.node.parentElement;
+
+    item.node.remove();
+
+    this.dispatch("reindex", {
+      target: list,
+      bubbles: true,
+      prefix: "content",
+    });
+  }
+}

data/app/javascript/content/editor/new_items_controller.js

@@ -1,7 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
 
-import Item from "./item";
-
 const EDGE_AREA = 24;
 
 export default class NewItemsController extends Controller {
@@ -34,13 +32,12 @@ export default class NewItemsController extends Controller {
   add(e) {
     e.preventDefault();
 
-    const template = e.target.querySelector("template");
+    const template = e.target.closest("li").querySelector("template");
     const item = template.content.querySelector("li").cloneNode(true);
     const target = this.currentItem;
 
     if (target) {
       target.insertAdjacentElement("beforebegin", item);
-      new Item(item).depth = new Item(target).depth;
     } else {
       this.list.insertAdjacentElement("beforeend", item);
     }

data/app/views/katalyst/content/asides/_aside.html+form.erb

@@ -1,32 +1,28 @@
-<%= form_with model: aside, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, aside:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :background %>
+  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+</div>
 
-  <div class="field">
-    <%= form.label :reverse %>
-    <%= form.check_box :reverse %>
-  </div>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :reverse %>
+  <%= form.check_box :reverse %>
+</div>

data/app/views/katalyst/content/columns/_column.html+form.erb

@@ -1,27 +1,23 @@
-<%= form_with model: column, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, column:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :background %>
+  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>

data/app/views/katalyst/content/contents/_content.html+form.erb

@@ -1,32 +1,28 @@
-<%= form_with model: content, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, content:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :background %>
+  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+</div>
 
-  <div class="field">
-    <%= form.label :content %>
-    <%= form.rich_text_area :content, content_editor_rich_text_attributes %>
-  </div>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :content %>
+  <%= form.rich_text_area :content, content_editor_rich_text_attributes %>
+</div>

data/app/views/katalyst/content/figures/_figure.html+form.erb

@@ -1,37 +1,33 @@
-<%= form_with model: figure, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, figure:) %>
 
-  <div class="field">
-    <%= form.label :image %>
-    <% if (image = form.object.image).attached? %>
-      <%= image.filename %>
-      <br>
-      <%= form.hidden_field :image, value: form.object.image.signed_id %>
-    <% end %>
-    <%= form.file_field :image %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<div class="field">
+  <%= form.label :image %>
+  <% if (image = form.object.image).attached? %>
+    <%= image.filename %>
+    <br>
+    <%= form.hidden_field :image, value: form.object.image.signed_id %>
+  <% end %>
+  <%= form.file_field :image %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :background %>
+  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+</div>
 
-  <div class="field">
-    <%= form.label :caption %>
-    <%= form.text_field :caption %>
-  </div>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :caption %>
+  <%= form.text_field :caption %>
+</div>

data/app/views/katalyst/content/groups/_group.html+form.erb

@@ -1,27 +1,23 @@
-<%= form_with model: group, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, group:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :background %>
+  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>

data/app/views/katalyst/content/items/_form.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (model:, scope:, url:, id:) %>
+
+<%= form_with(model:, scope:, url:, id:) do |form| %>
+  <%= render "hidden_fields", form: %>
+  <%= render(model, form:) %>
+<% end %>