katalyst-navigation 1.8.4 → 2.0.0

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

@@ -1,10 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class ListController extends Controller {
-  connect() {
-    this.enterCount = 0;
-  }
-
   /**
    * When the user starts a drag within the list, set the item's dataTransfer
    * properties to indicate that it's being dragged and update its style.
@@ -28,11 +24,6 @@ export default class ListController extends Controller {
    * When the user drags an item over another item in the last, swap the
    * dragging item with the item under the cursor.
    *
-   * As a special case, if the item is dragged over placeholder space at the end
-   * of the list, move the item to the bottom of the list instead. This allows
-   * users to hit the list element more easily when adding new items to an empty
-   * list.
-   *
    * @param event {DragEvent}
    */
   dragover(event) {
@@ -46,53 +37,7 @@ export default class ListController extends Controller {
   }
 
   /**
-   * When the user drags an item into the list, create a placeholder item to
-   * represent the new item. Note that we can't access the drag data
-   * until drop, so we assume that this is our template item for now.
-   *
-   * Users can cancel the drag by dragging the item out of the list or by
-   * pressing escape. Both are handled by `cancelDrag`.
-   *
-   * @param event {DragEvent}
-   */
-  dragenter(event) {
-    event.preventDefault();
-
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    this.enterCount++;
-
-    if (copyAllowed(event) && !this.dragItem) {
-      const item = document.createElement("li");
-      item.dataset.dragging = "";
-      item.dataset.newItem = "";
-      this.element.appendChild(item);
-    }
-  }
-
-  /**
-   * When the user drags the item out of the list, remove the placeholder.
-   * This allows users to cancel the drag by dragging the item out of the list.
-   *
-   * @param event {DragEvent}
-   */
-  dragleave(event) {
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    // https://bugs.webkit.org/show_bug.cgi?id=66547
-    this.enterCount--;
-
-    if (
-      this.enterCount <= 0 &&
-      this.dragItem.dataset.hasOwnProperty("newItem")
-    ) {
-      this.cancelDrag(event);
-    }
-  }
-
-  /**
-   * When the user drops an item into the list, end the drag and reindex the list.
-   *
-   * If the item is a new item, we replace the placeholder with the template
-   * item data from the dataTransfer API.
+   * When the user drops an item, end the drag and reindex the list.
    *
    * @param event {DragEvent}
    */
@@ -105,18 +50,6 @@ export default class ListController extends Controller {
     delete item.dataset.dragging;
     swap(dropTarget(event.target), item);
 
-    if (item.dataset.hasOwnProperty("newItem")) {
-      const placeholder = item;
-      const template = document.createElement("template");
-      template.innerHTML = event.dataTransfer.getData("text/html");
-      item = template.content.querySelector("li");
-
-      this.element.replaceChild(item, placeholder);
-      requestAnimationFrame(() =>
-        item.querySelector("[role='button'][value='edit']").click(),
-      );
-    }
-
     this.dispatch("drop", {
       target: item,
       bubbles: true,
@@ -125,16 +58,13 @@ export default class ListController extends Controller {
   }
 
   /**
-   * End an in-progress drag. If the item is a new item, remove it, otherwise
-   * reset the item's style and restore its original position in the list.
+   * End an in-progress drag by resetting the item's style and restoring its
+   * original position in the list.
    */
   dragend() {
     const item = this.dragItem;
 
-    if (!item) {
-    } else if (item.dataset.hasOwnProperty("newItem")) {
-      item.remove();
-    } else {
+    if (item) {
       delete item.dataset.dragging;
       this.reset();
     }
@@ -158,7 +88,7 @@ export default class ListController extends Controller {
 }
 
 /**
- * Swaps two list items. If target is a list, the item is appended.
+ * Swaps two list items.
  *
  * @param target the target element to swap with
  * @param item the item the user is dragging
@@ -167,39 +97,17 @@ function swap(target, item) {
   if (!target) return;
   if (target === item) return;
 
-  if (target.nodeName === "LI") {
-    const positionComparison = target.compareDocumentPosition(item);
-    if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
-      target.insertAdjacentElement("beforebegin", item);
-    } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
-      target.insertAdjacentElement("afterend", item);
-    }
-  }
-
-  if (target.nodeName === "OL") {
-    target.appendChild(item);
+  const positionComparison = target.compareDocumentPosition(item);
+  if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
+    target.insertAdjacentElement("beforebegin", item);
+  } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
+    target.insertAdjacentElement("afterend", item);
   }
 }
 
-/**
- * Returns true if the event supports copy or copy move.
- *
- * Chrome and Firefox use copy, but Safari only supports copyMove.
- */
-function copyAllowed(event) {
-  return (
-    event.dataTransfer.effectAllowed === "copy" ||
-    event.dataTransfer.effectAllowed === "copyMove"
-  );
-}
-
 /**
  * Given an event target, return the closest drop target, if any.
  */
 function dropTarget(e) {
-  return (
-    e &&
-    (e.closest("[data-controller='navigation--editor--list'] > *") ||
-      e.closest("[data-controller='navigation--editor--list']"))
-  );
+  return e && e.closest("[data-controller='navigation--editor--list'] > *");
 }

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

@@ -0,0 +1,145 @@
+import { Controller } from "@hotwired/stimulus";
+
+const EDGE_AREA = 24;
+
+export default class NewItemsController extends Controller {
+  static targets = ["inline"];
+
+  connect() {
+    this.form.addEventListener("mousemove", this.move);
+  }
+
+  disconnect() {
+    this.form?.removeEventListener("mousemove", this.move);
+    delete this.currentItem;
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.dialog.showModal();
+  }
+
+  close(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  noop(e) {}
+
+  /**
+   * Add the selected item to the DOM at the current position or the end of the list.
+   */
+  add(e) {
+    e.preventDefault();
+
+    const template = e.target.querySelector("template");
+    const item = template.content.querySelector("li").cloneNode(true);
+    const target = this.currentItem;
+
+    if (target) {
+      target.insertAdjacentElement("beforebegin", item);
+    } else {
+      this.list.insertAdjacentElement("beforeend", item);
+    }
+
+    this.toggleInline(false);
+    this.dialog.close();
+
+    requestAnimationFrame(() => {
+      item.querySelector(`[value="edit"]`).click();
+    });
+  }
+
+  morph(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  move = (e) => {
+    if (this.isOverInlineTarget(e)) return;
+    if (this.dialog.open) return;
+
+    const target = this.getCurrentItem(e);
+
+    // return if we're already showing this item
+    if (this.currentItem === target) return;
+
+    // hide the button if it's already visible
+    if (this.currentItem) this.toggleInline(false);
+
+    this.currentItem = target;
+
+    // clear any previously set timer
+    if (this.timer) clearTimeout(this.timer);
+
+    // show the button after a debounce pause
+    this.timer = setTimeout(() => {
+      delete this.timer;
+      this.toggleInline();
+    }, 100);
+  };
+
+  toggleInline(show = !!this.currentItem) {
+    if (show) {
+      this.inlineTarget.style.top = `${this.currentItem.offsetTop}px`;
+      this.inlineTarget.toggleAttribute("hidden", false);
+    } else {
+      this.inlineTarget.toggleAttribute("hidden", true);
+    }
+  }
+
+  get dialog() {
+    return this.element.querySelector("dialog");
+  }
+
+  /**
+   * @returns {HTMLFormElement}
+   */
+  get form() {
+    return this.element.closest("form");
+  }
+
+  /**
+   * @returns {HTMLUListElement,null}
+   */
+  get list() {
+    return this.form.querySelector(
+      `[data-controller="navigation--editor--list"]`,
+    );
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {HTMLLIElement,null}
+   */
+  getCurrentItem(e) {
+    const item = document.elementFromPoint(e.clientX, e.clientY).closest("li");
+    if (!item) return null;
+
+    const bounds = item.getBoundingClientRect();
+
+    // check X for center(ish) mouse position
+    if (e.clientX < bounds.left + bounds.width / 2 - 2 * EDGE_AREA) return null;
+    if (e.clientX > bounds.left + bounds.width / 2 + 2 * EDGE_AREA) return null;
+
+    // check Y for hits on this item or it's next sibling
+    if (e.clientY - bounds.y <= EDGE_AREA) {
+      return item;
+    } else if (bounds.y + bounds.height - e.clientY <= EDGE_AREA) {
+      return item.nextElementSibling;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {Boolean} true when the target of the event is the floating button
+   */
+  isOverInlineTarget(e) {
+    return (
+      this.inlineTarget ===
+      document.elementFromPoint(e.clientX, e.clientY).closest("div")
+    );
+  }
+}

data/app/views/katalyst/navigation/items/_button.html.erb

@@ -1,34 +1,30 @@
-<%= form_with model: item, scope: :item, url: path do |form| %>
-  <%= form.hidden_field :type %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:) %>
 
-  <div class="input">
-    <%= form.label :title %>
-    <%= form.text_field :title %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="input">
-    <%= form.label :url %>
-    <%= form.text_field :url %>
-  </div>
+<div class="field">
+  <%= form.label :title %>
+  <%= form.text_field :title %>
+</div>
 
-  <div class="input">
-    <%= form.label :http_method %>
-    <%= form.select :http_method, Katalyst::Navigation::Button::HTTP_METHODS %>
-  </div>
+<div class="field">
+  <%= form.label :url %>
+  <%= form.text_field :url %>
+</div>
 
-  <div class="field">
-    <%= form.label :target %>
-    <%= form.select :target, Katalyst::Navigation::Button::TARGETS %>
-  </div>
+<div class="field">
+  <%= form.label :http_method %>
+  <%= form.select :http_method, Katalyst::Navigation::Button::HTTP_METHODS %>
+</div>
 
-  <div class="input">
-    <%= form.check_box :visible %>
-    <%= form.label :visible %>
-  </div>
+<div class="field">
+  <%= form.label :target %>
+  <%= form.select :target, Katalyst::Navigation::Button::TARGETS %>
+</div>
 
-  <div class="button-row">
-    <%= form.submit "Done" %>
-    <%= link_to "Discard", menu_path(item.menu), class: "button--text" %>
-  </div>
-<% end %>
+<div class="field">
+  <%= form.label(:visible) do %>
+    <%= form.check_box :visible %>
+    Visible
+  <% end %>
+</div>

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

@@ -0,0 +1,6 @@
+<%# locals: (model:, scope:, url:, id:) %>
+
+<%= form_with(model:, scope:, url:, id:) do |form| %>
+  <%= form.hidden_field(:type) %>
+  <%= render(model.model_name.param_key, form:) %>
+<% end %>

data/app/views/katalyst/navigation/items/_form_errors.html.erb

@@ -1,4 +1,4 @@
-<%= tag.ul class: "errors" do %>
+<%= tag.ul(class: "errors", role: "list") do %>
   <% form.object.errors.full_messages.each do |error| %>
     <li class="error"><%= error %></li>
   <% end %>

data/app/views/katalyst/navigation/items/_heading.html.erb

@@ -1,17 +1,15 @@
-<%= form_with model: item, scope: :item, url: path do |form| %>
-  <%= form.hidden_field :type %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:) %>
 
-  <div class="field">
-    <%= form.label :title %>
-    <%= form.text_field :title %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :title %>
+  <%= form.text_field :title %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", item.menu %>
-<% end %>
+<div class="field">
+  <%= form.label(:visible) do %>
+    <%= form.check_box :visible %>
+    Visible
+  <% end %>
+</div>

data/app/views/katalyst/navigation/items/_link.html.erb

@@ -1,32 +1,30 @@
-<%= form_with model: item, scope: :item, url: path do |form| %>
-  <%= form.hidden_field :type %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:) %>
 
-  <div class="field">
-    <%= form.label :title %>
-    <%= form.text_field :title %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :url %>
-    <%= form.text_field :url %>
-  </div>
+<div class="field">
+  <%= form.label :title %>
+  <%= form.text_field :title %>
+</div>
 
-  <div class="input">
-    <%= form.label :http_method %>
-    <%= form.select :http_method, Katalyst::Navigation::Link::HTTP_METHODS %>
-  </div>
+<div class="field">
+  <%= form.label :url %>
+  <%= form.text_field :url %>
+</div>
 
-  <div class="field">
-    <%= form.label :target %>
-    <%= form.select :target, Katalyst::Navigation::Link::TARGETS %>
-  </div>
+<div class="input">
+  <%= form.label :http_method %>
+  <%= form.select :http_method, Katalyst::Navigation::Link::HTTP_METHODS %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :target %>
+  <%= form.select :target, Katalyst::Navigation::Link::TARGETS %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", item.menu %>
-<% end %>
+<div class="field">
+  <%= form.label(:visible) do %>
+    <%= form.check_box :visible %>
+    Visible
+  <% end %>
+</div>

data/app/views/katalyst/navigation/items/edit.html.erb

@@ -1,3 +1,41 @@
-<%= render Kpop::ModalComponent.new(title: item_editor.title, layout: "side-panel") do %>
-  <%= render item_editor %>
+<%= turbo_frame_tag(
+      "navigation--editor--item-editor",
+      data: { controller: "navigation--editor--item-editor" },
+    ) do %>
+  <dialog class="modal"
+          data-navigation--editor--item-editor-target="dialog"
+          data-action="
+            click->navigation--editor--item-editor#dismiss
+            close->navigation--editor--item-editor#dismiss
+          "
+          data-item-id="<%= dom_id(item_editor.item) %>"
+          <%= "data-item-persisted" if item_editor.item.persisted? %>>
+    <article class="flow" data-action="click->navigation--editor--item-editor#noop:stop">
+      <header class="repel" data-nowrap>
+        <h2><%= item_editor.title %></h2>
+        <button form="<%= item_editor.id %>"
+                formmethod="dialog"
+                class="button"
+                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>
+        <%= render item_editor %>
+      </main>
+      <footer class="actions" data-reverse>
+        <button form="<%= item_editor.id %>" class="button">
+          Done
+        </button>
+        <button form="<%= item_editor.id %>"
+                formmethod="dialog"
+                class="button"
+                data-ghost-button>
+          Discard
+        </button>
+      </footer>
+    </article>
+  </dialog>
 <% end %>

data/app/views/katalyst/navigation/items/edit.turbo_stream.erb

@@ -1,3 +1,5 @@
+<%# locals: (item_editor:) %>
+
 <%= turbo_stream.replace item_editor.id do %>
   <%= render item_editor %>
 <% end %>

data/app/views/katalyst/navigation/items/update.turbo_stream.erb

@@ -1,4 +1,3 @@
-<%= turbo_stream.kpop.dismiss %>
 <%= turbo_stream.replace dom_id(previous) do %>
   <%= render editor.item(item:) %>
 <% end %>

data/app/views/katalyst/navigation/menus/show.html.erb

@@ -2,4 +2,3 @@
 
 <%= render editor.status_bar %>
 <%= render editor %>
-<%= render editor.new_items %>

data/lib/katalyst/navigation/engine.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require "katalyst/kpop"
 require "katalyst/tables"
 require "rails/engine"
 

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-navigation
 version: !ruby/object:Gem::Version
-  version: 1.8.4
+  version: 2.0.0
 platform: ruby
 authors:
 - Katalyst Interactive
-autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-09-16 00:00:00.000000000 Z
+date: 2025-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: katalyst-html-attributes
@@ -24,20 +23,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: katalyst-kpop
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: katalyst-tables
   requirement: !ruby/object:Gem::Requirement
@@ -66,7 +51,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: 
 email:
 - developers@katalyst.com.au
 executables: []
@@ -80,12 +64,21 @@ files:
 - app/assets/builds/katalyst/navigation.min.js
 - app/assets/builds/katalyst/navigation.min.js.map
 - app/assets/config/katalyst-navigation.js
-- app/assets/stylesheets/katalyst/navigation/editor/_icon.scss
-- app/assets/stylesheets/katalyst/navigation/editor/_index.scss
-- app/assets/stylesheets/katalyst/navigation/editor/_item-actions.scss
-- app/assets/stylesheets/katalyst/navigation/editor/_item-rules.scss
-- app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss
-- app/assets/stylesheets/katalyst/navigation/editor/_status-bar.scss
+- app/assets/images/katalyst/navigation/icons/button.svg
+- app/assets/images/katalyst/navigation/icons/collapse.svg
+- app/assets/images/katalyst/navigation/icons/edit.svg
+- app/assets/images/katalyst/navigation/icons/expand.svg
+- app/assets/images/katalyst/navigation/icons/heading.svg
+- app/assets/images/katalyst/navigation/icons/hidden.svg
+- app/assets/images/katalyst/navigation/icons/indent.svg
+- app/assets/images/katalyst/navigation/icons/link.svg
+- app/assets/images/katalyst/navigation/icons/outdent.svg
+- app/assets/images/katalyst/navigation/icons/remove.svg
+- app/assets/stylesheets/katalyst/_navigation.scss
+- app/assets/stylesheets/katalyst/navigation.css
+- app/assets/stylesheets/katalyst/navigation/editor.css
+- app/assets/stylesheets/katalyst/navigation/icons.css
+- app/assets/stylesheets/katalyst/navigation/status-bar.css
 - app/components/katalyst/navigation/editor/base_component.rb
 - app/components/katalyst/navigation/editor/errors_component.html.erb
 - app/components/katalyst/navigation/editor/errors_component.rb
@@ -111,10 +104,11 @@ files:
 - app/javascript/navigation/application.js
 - app/javascript/navigation/editor/item.js
 - app/javascript/navigation/editor/item_controller.js
+- app/javascript/navigation/editor/item_editor_controller.js
 - app/javascript/navigation/editor/list_controller.js
 - app/javascript/navigation/editor/menu.js
 - app/javascript/navigation/editor/menu_controller.js
-- app/javascript/navigation/editor/new_item_controller.js
+- app/javascript/navigation/editor/new_items_controller.js
 - app/javascript/navigation/editor/rules-engine.js
 - app/javascript/navigation/editor/status_bar_controller.js
 - app/models/concerns/katalyst/navigation/garbage_collection.rb
@@ -129,6 +123,7 @@ files:
 - app/models/katalyst/navigation/node.rb
 - app/models/katalyst/navigation/types/nodes_type.rb
 - app/views/katalyst/navigation/items/_button.html.erb
+- app/views/katalyst/navigation/items/_form.html.erb
 - app/views/katalyst/navigation/items/_form_errors.html.erb
 - app/views/katalyst/navigation/items/_heading.html.erb
 - app/views/katalyst/navigation/items/_link.html.erb
@@ -156,7 +151,6 @@ licenses:
 - MIT
 metadata:
   rubygems_mfa_required: 'true'
-post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -171,8 +165,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.16
-signing_key: 
+rubygems_version: 3.6.2
 specification_version: 4
 summary: Navigation generator and editor
 test_files: []

data/app/assets/stylesheets/katalyst/navigation/editor/_icon.scss

@@ -1,17 +0,0 @@
-%icon-block {
-  display: block;
-  cursor: pointer;
-  position: relative;
-  padding: 0.65rem;
-  min-width: 2.5rem;
-  min-height: 2.5rem;
-}
-
-%icon {
-  position: absolute;
-  content: "";
-  width: 1.2rem;
-  height: 1.2rem;
-  background-repeat: no-repeat;
-  background-position: center;
-}