katalyst-navigation 1.8.4 → 2.0.0

data/app/components/katalyst/navigation/editor/item_component.html.erb

@@ -1,24 +1,34 @@
 <%= tag.div(**html_attributes) do %>
-  <div class="tree" data-invisible="<%= !item.visible? %>">
-    <div role="toolbar" data-tree-accordion-controls>
-      <span role="button" value="collapse" data-action="click-><%= MENU_CONTROLLER %>#collapse" title="Collapse tree"></span>
-      <span role="button" value="expand" data-action="click-><%= MENU_CONTROLLER %>#expand" title="Expand tree"></span>
-    </div>
+  <div class="tree">
+    <icon class="icon" data-icon="<%= item.model_name.param_key %>" aria-hidden="true">&nbsp;</icon>
 
-    <span role="img" value="<%= item.model_name.param_key %>" title="Type"></span>
-    <h4 class="heading" title="<%= item.title %>"><%= item.title %></h4>
-    <span role="img" value="invisible" title="Hidden"></span>
-  </div>
+    <%= link_to_if(item.url.presence, item.title, item.url, target: "_blank", rel: "noopener") %>
 
-  <div class="url">
-    <%= link_to item.url || "", item.url || "", data: { turbo: false } %>
+    <% unless item.visible? %>
+      <icon class="icon" data-icon="hidden" title="Hidden" role="img">&nbsp;</icon>
+    <% end %>
   </div>
 
-  <div role="toolbar" data-tree-controls>
-    <span role="button" value="de-nest" data-action="click-><%= MENU_CONTROLLER %>#deNest" title="Outdent"></span>
-    <span role="button" value="nest" data-action="click-><%= MENU_CONTROLLER %>#nest" title="Indent"></span>
-    <%= kpop_link_to("", edit_item_link, role: "button", title: "Edit", value: "edit") %>
-    <span role="button" value="remove" data-action="click-><%= MENU_CONTROLLER %>#remove" title="Remove"></span>
+  <div role="toolbar" class="actions-group">
+    <button class="button" data-button-padding="tight" data-text-button data-action="navigation--editor--menu#collapse" title="Collapse tree">
+      <icon class="icon" data-icon="collapse" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="navigation--editor--menu#expand" title="Expand tree">
+      <icon class="icon" data-icon="expand" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="navigation--editor--menu#deNest" title="Outdent">
+      <icon class="icon" data-icon="outdent" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="navigation--editor--menu#nest" title="Indent">
+      <icon class="icon" data-icon="indent" role="img">&nbsp;</icon>
+    </button>
+    <%= link_to(edit_item_link, class: "button", title: "Edit", value: "edit",
+                data: { text_button: "", button_padding: "tight", turbo_frame: "navigation--editor--item-editor" }) do %>
+      <icon class="icon" data-icon="edit" role="img">&nbsp;</icon>
+    <% end %>
+    <button class="button" data-button-padding="tight" data-text-button data-action="navigation--editor--menu#remove" title="Remove">
+      <icon class="icon" data-icon="remove" role="img">&nbsp;</icon>
+    </button>
   </div>
 
   <input autocomplete="off" type="hidden" name="<%= attributes_scope %>[id]" value="<%= item.id %>">

data/app/components/katalyst/navigation/editor/item_component.rb

@@ -4,8 +4,6 @@ module Katalyst
   module Navigation
     module Editor
       class ItemComponent < BaseComponent
-        include KpopHelper
-
         def edit_item_link
           if item.persisted?
             helpers.katalyst_navigation.edit_menu_item_path(menu, item)
@@ -20,7 +18,8 @@ module Katalyst
           {
             id:   dom_id(item),
             data: {
-              controller: ITEM_CONTROLLER,
+              controller: "navigation--editor--item",
+              invisible:  ("" unless item.visible?),
             },
           }
         end

data/app/components/katalyst/navigation/editor/item_editor_component.rb

@@ -3,24 +3,28 @@
 module Katalyst
   module Navigation
     module Editor
-      class ItemEditorComponent < BaseComponent
-        include ::Turbo::FramesHelper
+      class ItemEditorComponent < ViewComponent::Base
+        attr_reader :menu, :item
 
-        module Helpers
-          def prefix_partial_path_with_controller_namespace
-            false
-          end
+        alias_method :model, :item
+
+        def initialize(menu:, item:)
+          super()
+
+          @menu = menu
+          @item = item
         end
 
         def call
-          tag.div(**html_attributes) do
-            helpers.extend(Helpers)
-            helpers.render(item.model_name.param_key, item:, path:)
-          end
+          render("form", model:, scope:, url:, id:)
         end
 
         def id
-          "item-editor-#{item.id}"
+          dom_id(item, :form)
+        end
+
+        def scope
+          :item
         end
 
         def title
@@ -31,20 +35,13 @@ module Katalyst
           end
         end
 
-        def path
+        def url
           if item.persisted?
             view_context.katalyst_navigation.menu_item_path(menu, item)
           else
             view_context.katalyst_navigation.menu_items_path(menu)
           end
         end
-
-        def default_html_attributes
-          {
-            id:,
-            class: "navigation--item-editor",
-          }
-        end
       end
     end
   end

data/app/components/katalyst/navigation/editor/new_item_component.html.erb

@@ -1,14 +1,15 @@
-<%= tag.div(**html_attributes) do %>
-  <label><%= label %></label>
-  <%#
-    # Template is stored inside the new item dom, and copied into drag
-    # events when the user initiates drag so that it can be copied into the
-    # editor list on drop.
-    #
-  %>
-  <template data-<%= NEW_ITEM_CONTROLLER %>-target="template">
-    <%= render row_component do %>
-      <%= render item_component %>
-    <% end %>
-  </template>
-<% end %>
+<li>
+  <%= tag.button(**html_attributes) do %>
+    <icon class="icon" data-icon="<%= icon_name %>" role="img">&nbsp;</icon>
+    <%= label %>
+    <%#
+    # Template is stored inside the new item dom, and copied into the dom when
+    # the user selects the item.
+    %>
+    <template>
+      <%= render row_component do %>
+        <%= render item_component %>
+      <% end %>
+    </template>
+  <% end %>
+</li>

data/app/components/katalyst/navigation/editor/new_item_component.rb

@@ -4,10 +4,6 @@ module Katalyst
   module Navigation
     module Editor
       class NewItemComponent < BaseComponent
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          dragstart->#{NEW_ITEM_CONTROLLER}#dragstart
-        ACTIONS
-
         with_collection_parameter :item
 
         def initialize(item:, menu: item.menu)
@@ -30,16 +26,17 @@ module Katalyst
           item.model_name.param_key
         end
 
+        alias icon_name item_type
+
         private
 
         def default_html_attributes
           {
-            draggable: "true",
-            role:      "listitem",
-            data:      {
-              item_type:,
-              controller: NEW_ITEM_CONTROLLER,
-              action:     ACTIONS,
+            class: "button",
+            role:  "listitem",
+            data:  {
+              ghost_button: "",
+              action:       "navigation--editor--new-items#add",
             },
           }
         end

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

@@ -1,3 +1,42 @@
-<div class="navigation--editor--new-items" role="listbox">
-  <%= render Katalyst::Navigation::Editor::NewItemComponent.with_collection(items) %>
+<div class="navigation--editor--new-items"
+     data-controller="navigation--editor--new-items"
+     data-action="turbo:before-morph-element->navigation--editor--new-items#morph">
+  <button aria-controls="navigation--editor--new-items-dialog"
+          class="button"
+          data-action="click->navigation--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="navigation--editor--inline-add" data-navigation--editor--new-items-target="inline" hidden>
+    <button aria-controls="navigation--editor--new-items-dialog"
+            class="button"
+            data-action="navigation--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="navigation--editor--new-items-dialog" class="modal" data-action="click->navigation--editor--new-items#close">
+    <article class="flow" data-action="click->navigation--editor--new-items#noop:stop">
+      <header class="repel" data-nowrap>
+        <h2>Add item</h2>
+        <button class="button"
+                data-action="click->navigation--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->navigation--editor--new-items#noop:stop" }) do %>
+          <ul role="list" class="items-list">
+            <%= render Katalyst::Navigation::Editor::NewItemComponent.with_collection(items) %>
+          </ul>
+        <% end %>
+      </main>
+    </article>
+  </dialog>
 </div>

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

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

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

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

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

@@ -4,11 +4,6 @@ module Katalyst
   module Navigation
     module Editor
       class StatusBarComponent < BaseComponent
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          navigation:change@document->#{STATUS_BAR_CONTROLLER}#change
-          turbo:morph-element->#{STATUS_BAR_CONTROLLER}#morph
-        ACTIONS
-
         attr_reader :container
 
         def call
@@ -28,10 +23,10 @@ module Katalyst
 
         def actions
           tag.menu do
-            concat action(:discard, class: "button button--text")
-            concat action(:revert, class: "button button--text") if menu.state == :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: "" }) if menu.state == :draft
+            concat action(:save, class: "button", data: { ghost_button: "" })
+            concat action(:publish, class: "button")
           end
         end
 
@@ -50,8 +45,11 @@ module Katalyst
         def default_html_attributes
           {
             data: {
-              controller: STATUS_BAR_CONTROLLER,
-              action:     ACTIONS,
+              controller: "navigation--editor--status-bar",
+              action:     %w[
+                navigation:change@document->navigation--editor--status-bar#change
+                turbo:morph-element->navigation--editor--status-bar#morph
+              ],
               state:      menu.state,
             },
           }

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

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

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

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

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

@@ -6,4 +6,11 @@
   <%= render Katalyst::Navigation::Editor::TableComponent.new(menu:) do |list| %>
     <%= menu.draft_items.each { |item| list.with_item(item) } %>
   <% end %>
+
+  <%= render Katalyst::Navigation::Editor::NewItemsComponent.new(menu:) %>
 <% end %>
+
+<%= turbo_frame_tag(
+      "navigation--editor--item-editor",
+      data: { controller: "navigation--editor--item-editor" },
+    ) %>

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

@@ -3,22 +3,12 @@
 module Katalyst
   module Navigation
     class EditorComponent < Editor::BaseComponent
-      ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-        submit->#{MENU_CONTROLLER}#reindex
-        navigation:drop->#{MENU_CONTROLLER}#drop
-        navigation:reindex->#{MENU_CONTROLLER}#reindex
-        navigation:reset->#{MENU_CONTROLLER}#reset
-        turbo:render@document->#{MENU_CONTROLLER}#connect
-      ACTIONS
+      include ::Turbo::FramesHelper
 
       def status_bar
         @status_bar ||= Editor::StatusBarComponent.new(menu:)
       end
 
-      def new_items
-        @new_items ||= Editor::NewItemsComponent.new(menu:)
-      end
-
       def item_editor(item:)
         Editor::ItemEditorComponent.new(menu:, item:)
       end
@@ -35,11 +25,18 @@ module Katalyst
 
       def default_html_attributes
         {
-          id:   menu_form_id,
-          data: {
-            controller:                           MENU_CONTROLLER,
-            action:                               ACTIONS,
-            "#{MENU_CONTROLLER}-max-depth-value": menu.depth,
+          id:    menu_form_id,
+          class: "navigation--editor",
+          data:  {
+            controller:                                 "navigation--editor--menu",
+            action:                                     %w[
+              submit->navigation--editor--menu#reindex
+              navigation:drop->navigation--editor--menu#drop
+              navigation:reindex->navigation--editor--menu#reindex
+              navigation:reset->navigation--editor--menu#reset
+              turbo:render@document->navigation--editor--menu#connect
+            ],
+            "navigation--editor--menu-max-depth-value": menu.depth,
           },
         }
       end

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

@@ -59,7 +59,7 @@ module Katalyst
       end
 
       def item_params
-        params.require(:item).permit(item_params_type.permitted_params)
+        params.expect(item: item_params_type.permitted_params)
       end
 
       def set_menu

data/app/controllers/katalyst/navigation/menus_controller.rb

@@ -83,7 +83,7 @@ module Katalyst
       def menu_params
         return {} if params[:menu].blank?
 
-        params.require(:menu).permit(:title, :slug, :depth, items_attributes: %i[id index depth])
+        params.expect(menu: [:title, :slug, :depth, { items_attributes: [%i[id index depth]] }])
       end
     end
   end

data/app/javascript/navigation/application.js

@@ -1,7 +1,8 @@
 import MenuController from "./editor/menu_controller";
 import ItemController from "./editor/item_controller";
+import ItemEditorController from "./editor/item_editor_controller";
 import ListController from "./editor/list_controller";
-import NewItemController from "./editor/new_item_controller";
+import NewItemsController from "./editor/new_items_controller";
 import StatusBarController from "./editor/status_bar_controller";
 
 const Definitions = [
@@ -13,13 +14,17 @@ const Definitions = [
     identifier: "navigation--editor--item",
     controllerConstructor: ItemController,
   },
+  {
+    identifier: "navigation--editor--item-editor",
+    controllerConstructor: ItemEditorController,
+  },
   {
     identifier: "navigation--editor--list",
     controllerConstructor: ListController,
   },
   {
-    identifier: "navigation--editor--new-item",
-    controllerConstructor: NewItemController,
+    identifier: "navigation--editor--new-items",
+    controllerConstructor: NewItemsController,
   },
   {
     identifier: "navigation--editor--status-bar",

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

@@ -262,7 +262,7 @@ export default class Item {
  */
 function createChildrenList(node) {
   const childrenList = document.createElement("ol");
-  childrenList.setAttribute("class", "hidden");
+  childrenList.toggleAttribute("hidden", true);
 
   childrenList.dataset[`navigationChildren`] = "";
 

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

@@ -0,0 +1,54 @@
+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) {
+      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-navigation-item]"));
+    const list = item.node.parentElement;
+
+    item.node.remove();
+
+    this.dispatch("reindex", {
+      target: list,
+      bubbles: true,
+      prefix: "navigation",
+    });
+  }
+}