katalyst-navigation 1.1.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c41babca4e58e13c18e53437a8992f93a1f2e82566542ed43dd8f62a2a0a83f
-  data.tar.gz: 4d3ea6600b660cf877ac8c53aa81be4367169ea27ffca16d86374ca0a61a0b41
+  metadata.gz: 6424bb96df0ceb96b40aa6d225dbe12461784edb41c1b83863435a56db02fd68
+  data.tar.gz: 6a46bbd339f8c171fe7a9791ad94281c6e0cb6f846f8bab04bd62edb8e8c339c
 SHA512:
-  metadata.gz: dfff1369051123cbd3411fe4d873a8a1bee97166c09f05c117f6df9a11b0a0b618d8255349aed78213b76ee5b8c078807d904fd51899e803e2222f56d9beb086
-  data.tar.gz: 07e367633bd15cc6f84aa242d5f785e82822f9354482ed071a90e4ed975aa4ed40eeac22bea5d30ab949031d7aa6702cfd18c7fae6f3f9beb08d2c202dbd6d1d
+  metadata.gz: 173290becb5111777b887baeefe3a93642d8b154cb6463fd0a84a83e0246be7159568cc836d3eb2ca4ca7b9d7a2b616eff69c284d7abbaa93f7f2a26e0f81f76
+  data.tar.gz: cad3f1cf87f00b7868aac073b71d192345b341feb73a0d28de332fccd932278988c256cc9228d2f30eadc55b2de0c4070d8a263c323e235b22f18f087bbc9abb

data/app/assets/javascripts/controllers/navigation/editor/list_controller.js

@@ -46,7 +46,7 @@ export default class ListController extends Controller {
   }
 
   drop(event) {
-    const item = this.dragItem();
+    let item = this.dragItem();
 
     if (!item) return;
 
@@ -55,17 +55,22 @@ export default class ListController extends Controller {
     swap(this.dropTarget(event.target), item);
 
     if (item.dataset.hasOwnProperty("newItem")) {
+      const placeholder = item;
       const template = document.createElement("template");
       template.innerHTML = event.dataTransfer.getData("text/html");
-      const newItem = template.content.querySelector("li");
+      item = template.content.querySelector("li");
 
-      this.element.replaceChild(newItem, item);
+      this.element.replaceChild(item, placeholder);
       setTimeout(() =>
-        newItem.querySelector("[role='button'][value='edit']").click()
+        item.querySelector("[role='button'][value='edit']").click()
       );
     }
 
-    this.reindex();
+    this.dispatch("drop", {
+      target: item,
+      bubbles: true,
+      prefix: "navigation",
+    });
   }
 
   dragend() {

data/app/assets/javascripts/controllers/navigation/editor/menu_controller.js

@@ -29,6 +29,32 @@ export default class MenuController extends Controller {
     this.menu.reset();
   }
 
+  drop(event) {
+    this.menu.reindex(); // set indexes before calculating previous
+
+    const item = getEventItem(event);
+    const previous = item.previousItem;
+
+    let delta = 0;
+    if (previous === undefined) {
+      // if previous does not exist, set depth to 0
+      delta = -item.depth;
+    } else if (item.nextItem && item.nextItem.depth > previous.depth) {
+      // if next is a child of previous, make item a child of previous
+      delta = previous.depth - item.depth + 1;
+    } else {
+      // otherwise, make item a sibling of previous
+      delta = previous.depth - item.depth;
+    }
+
+    item.traverse((child) => {
+      child.depth += delta;
+    });
+
+    this.#update();
+    event.preventDefault();
+  }
+
   remove(event) {
     const item = getEventItem(event);
 
@@ -89,6 +115,7 @@ export default class MenuController extends Controller {
 
       this.updateRequested = false;
       const engine = new RulesEngine(this.maxDepthValue);
+      this.menu.items.forEach((item) => engine.normalize(item));
       this.menu.items.forEach((item) => engine.update(item));
 
       this.#notifyChange();

data/app/assets/javascripts/utils/navigation/editor/item.js

@@ -80,6 +80,13 @@ export default class Item {
     this.#indexInput.value = `${index}`;
   }
 
+  /**
+   * @returns {boolean} true if this item can have children
+   */
+  get isLayout() {
+    return this.node.hasAttribute("data-content-layout");
+  }
+
   /**
    * @returns {Item} nearest neighbour (index - 1)
    */
@@ -120,12 +127,25 @@ export default class Item {
   traverse(callback) {
     // capture descendants before traversal in case of side-effects
     // specifically, setting depth affects calculation
-    const collapsed = this.#collapsedChildren;
     const expanded = this.#expandedDescendants;
 
     callback(this);
-    collapsed.forEach((item) => item.traverse(callback));
-    expanded.forEach((item) => item.traverse(callback));
+    this.#traverseCollapsed(callback);
+    expanded.forEach((item) => item.#traverseCollapsed(callback));
+  }
+
+  /**
+   * Recursively traverse the node's collapsed descendants, if any.
+   *
+   * @callback {Item}
+   */
+  #traverseCollapsed(callback) {
+    if (!this.hasCollapsedDescendants()) return;
+
+    this.#collapsedDescendants.forEach((item) => {
+      callback(item);
+      item.#traverseCollapsed(callback);
+    });
   }
 
   /**
@@ -162,10 +182,12 @@ export default class Item {
    * @param deny {boolean}
    */
   toggleRule(rule, deny = false) {
-    if (this.node.dataset.hasOwnProperty(rule) && !deny)
+    if (this.node.dataset.hasOwnProperty(rule) && !deny) {
       delete this.node.dataset[rule];
-    if (!this.node.dataset.hasOwnProperty(rule) && deny)
+    }
+    if (!this.node.dataset.hasOwnProperty(rule) && deny) {
       this.node.dataset[rule] = "";
+    }
 
     if (rule === "denyDrag") {
       if (!this.node.hasAttribute("draggable") && !deny) {
@@ -205,6 +227,9 @@ export default class Item {
     return this.node.querySelector(`:scope > [data-navigation-children]`);
   }
 
+  /**
+   * @returns {Item[]} all items that follow this element that have a greater depth.
+   */
   get #expandedDescendants() {
     const descendants = [];
 
@@ -217,7 +242,10 @@ export default class Item {
     return descendants;
   }
 
-  get #collapsedChildren() {
+  /**
+   * @returns {Item[]} all items directly contained inside this element's hidden children element.
+   */
+  get #collapsedDescendants() {
     if (!this.hasCollapsedDescendants()) return [];
 
     return Array.from(this.#childrenListElement.children).map(

data/app/assets/javascripts/utils/navigation/editor/rules-engine.js

@@ -9,24 +9,38 @@ export default class RulesEngine {
     "denyEdit",
   ];
 
-  constructor(maxDepth = null) {
+  constructor(maxDepth = null, debug = false) {
     this.maxDepth = maxDepth;
+    if (debug) {
+      this.debug = (...args) => console.log(...args);
+    } else {
+      this.debug = () => {};
+    }
   }
 
   /**
-   * Apply rules to the given item by computing a ruleset then merging it
-   * with the item's current state.
+   * Enforce structural rules to ensure that the given item is currently in a
+   * valid state.
    *
    * @param {Item} item
    */
-  update(item) {
-    this.rules = {};
-
+  normalize(item) {
     // structural rules enforce a valid tree structure
     this.firstItemDepthZero(item);
     this.depthMustBeSet(item);
     this.itemCannotHaveInvalidDepth(item);
     this.itemCannotExceedDepthLimit(item);
+    this.parentMustBeLayout(item);
+    this.parentCannotHaveExpandedAndCollapsedChildren(item);
+  }
+
+  /**
+   * Apply rules to the given item to determine what operations are permitted.
+   *
+   * @param {Item} item
+   */
+  update(item) {
+    this.rules = {};
 
     // behavioural rules define what the user is allowed to do
     this.parentsCannotDeNest(item);
@@ -47,7 +61,9 @@ export default class RulesEngine {
    * First item can't have a parent, so its depth should always be 0
    */
   firstItemDepthZero(item) {
-    if (item.index === 0) {
+    if (item.index === 0 && item.depth !== 0) {
+      this.debug(`enforce depth on item ${item.index}: ${item.depth} => 0`);
+
       item.depth = 0;
     }
   }
@@ -59,6 +75,8 @@ export default class RulesEngine {
    */
   depthMustBeSet(item) {
     if (isNaN(item.depth) || item.depth < 0) {
+      this.debug(`unset depth on item ${item.index}: => 0`);
+
       item.depth = 0;
     }
   }
@@ -71,6 +89,12 @@ export default class RulesEngine {
   itemCannotHaveInvalidDepth(item) {
     const previous = item.previousItem;
     if (previous && previous.depth < item.depth - 1) {
+      this.debug(
+        `invalid depth on item ${item.index}: ${item.depth} => ${
+          previous.depth + 1
+        }`
+      );
+
       item.depth = previous.depth + 1;
     }
   }
@@ -91,6 +115,37 @@ export default class RulesEngine {
     }
   }
 
+  /**
+   * Parent item, if any, must be a layout.
+   *
+   * @param {Item} item
+   */
+  parentMustBeLayout(item) {
+    // if we're the first child, make sure our parent is a layout
+    // if we're a sibling, we know the previous item is valid so we must be too
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth && !previous.isLayout) {
+      this.debug(
+        `invalid parent for item ${item.index}: ${item.depth} => ${previous.depth}`
+      );
+
+      item.depth = previous.depth;
+    }
+  }
+
+  /**
+   * If a parent has expanded and collapsed children, expand.
+   *
+   * @param {Item} item
+   */
+  parentCannotHaveExpandedAndCollapsedChildren(item) {
+    if (item.hasCollapsedDescendants() && item.hasExpandedDescendants()) {
+      this.debug(`expanding collapsed children of item ${item.index}`);
+
+      item.expand();
+    }
+  }
+
   /**
    * De-nesting an item would create a gap of 2 between itself and its children
    *
@@ -134,7 +189,13 @@ export default class RulesEngine {
    */
   nestingNeedsParent(item) {
     const previous = item.previousItem;
-    if (!previous || previous.depth < item.depth) this.#deny("denyNest");
+    // no previous, so cannot nest
+    if (!previous) this.#deny("denyNest");
+    // previous is too shallow, nesting would increase depth too much
+    else if (previous.depth < item.depth) this.#deny("denyNest");
+    // new parent is not a layout
+    else if (previous.depth === item.depth && !previous.isLayout)
+      this.#deny("denyNest");
   }
 
   /**
@@ -154,7 +215,7 @@ export default class RulesEngine {
    * @param {Item} item
    */
   parentsCannotBeDeleted(item) {
-    if (item.hasExpandedDescendants()) this.#deny("denyRemove");
+    if (!item.itemId || item.hasExpandedDescendants()) this.#deny("denyRemove");
   }
 
   /**

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

@@ -118,7 +118,7 @@ $status-dirty-color: #aaa !default;
 }
 
 // Ensures vertical alignment of header with rows
-[data-controller="navigation--editor-menu"] {
+[data-controller="navigation--editor--menu"] {
   [role="rowheader"] {
     min-height: var(--row-height);
     background: var(--table-header-color);

data/app/helpers/katalyst/navigation/editor/item.rb

@@ -14,13 +14,6 @@ module Katalyst
           end
         end
 
-        def build_all(*items)
-          render partial:    "katalyst/navigation/menus/link_item",
-                 layout:     "katalyst/navigation/menus/navigation_menu_link",
-                 collection: items,
-                 as:         :item
-        end
-
         def accordion_actions
           tag.div role: "toolbar", data: { tree_accordion_controls: "" } do
             concat tag.span(role: "button", value: "collapse",

data/app/helpers/katalyst/navigation/editor/menu.rb

@@ -6,6 +6,7 @@ module Katalyst
       class Menu < Base
         ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
           submit->#{MENU_CONTROLLER}#reindex
+          navigation:drop->#{MENU_CONTROLLER}#drop
           navigation:reindex->#{MENU_CONTROLLER}#reindex
           navigation:reset->#{MENU_CONTROLLER}#reset
         ACTIONS

data/app/helpers/katalyst/navigation/editor_helper.rb

@@ -5,6 +5,7 @@ module Katalyst
     module EditorHelper
       def navigation_editor_new_items(menu)
         [
+          Heading.new(menu: menu),
           Link.new(menu: menu),
           Button.new(menu: menu),
         ]

data/app/helpers/katalyst/navigation/frontend/builder.rb

@@ -40,6 +40,10 @@ module Katalyst
           end
         end
 
+        def render_heading(heading)
+          tag.header { tag.p heading.title }
+        end
+
         def render_link(link)
           link_to(link.title, link.url, item_options)
         end

data/app/models/katalyst/navigation/heading.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    class Heading < Layout
+      validates :title, presence: true
+    end
+  end
+end

data/app/models/katalyst/navigation/item.rb

@@ -2,7 +2,7 @@
 
 module Katalyst
   module Navigation
-    # STI base class for menu items (links and buttons)
+    # STI base class for menu items (headings, links and buttons)
     class Item < ApplicationRecord
       belongs_to :menu, inverse_of: :items, class_name: "Katalyst::Navigation::Menu"
 
@@ -10,6 +10,10 @@ module Katalyst
 
       attr_accessor :parent, :children, :index, :depth
 
+      def layout?
+        is_a? Layout
+      end
+
       private
 
       def initialize_tree

data/app/models/katalyst/navigation/layout.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    # Base class for Layout items
+    class Layout < Item
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<%= form_with model: item, scope: :item, url: path do |form| %>
+  <%= form.hidden_field :type %>
+
+  <div class="field">
+    <%= form.label :title %>
+    <%= form.text_field :title %>
+  </div>
+
+  <div class="field">
+    <%= form.label :visible %>
+    <%= form.check_box :visible %>
+  </div>
+
+  <%= form.submit "Done" %>
+  <%= link_to "Discard", item.menu %>
+<% end %>

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

@@ -2,7 +2,7 @@
   <div class="tree" data-invisible="<%= !item.visible? %>">
     <%= builder.accordion_actions %>
 
-    <span role="img" value="<%= item.url.present? ? "link" : "title" %>" title="Hidden"></span>
+    <span role="img" value="<%= item.url.present? ? "link" : "title" %>" title="Type"></span>
     <h4 class="title" title="<%= item.title %>"><%= item.title %></h4>
     <span role="img" value="invisible" title="Hidden"></span>
   </div>

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

@@ -3,6 +3,7 @@
     data-navigation-item-id="<%= item.id %>"
     data-navigation-index="<%= item.index %>"
     data-navigation-depth="<%= item.depth %>"
+    <%= "data-content-layout" if item.layout? %>
     data-deny-de-nest
     data-deny-nest
     data-deny-collapse

data/lib/katalyst/navigation/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Navigation
-    VERSION = "1.1.1"
+    VERSION = "1.2.0"
   end
 end

data/spec/factories/katalyst/navigation/items.rb

@@ -11,4 +11,8 @@ FactoryBot.define do
     url { Faker::Internet.unique.url }
     http_method { Katalyst::Navigation::Button::HTTP_METHODS.keys.sample }
   end
+
+  factory :katalyst_navigation_heading, aliases: [:navigation_heading], class: "Katalyst::Navigation::Heading" do
+    title { Faker::Beer.hop }
+  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-navigation
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.2.0
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-12 00:00:00.000000000 Z
+date: 2022-10-25 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -50,12 +50,15 @@ files:
 - app/models/concerns/katalyst/navigation/garbage_collection.rb
 - app/models/concerns/katalyst/navigation/has_tree.rb
 - app/models/katalyst/navigation/button.rb
+- app/models/katalyst/navigation/heading.rb
 - app/models/katalyst/navigation/item.rb
+- app/models/katalyst/navigation/layout.rb
 - app/models/katalyst/navigation/link.rb
 - app/models/katalyst/navigation/menu.rb
 - 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/_heading.html.erb
 - app/views/katalyst/navigation/items/_link.html.erb
 - app/views/katalyst/navigation/items/edit.html.erb
 - app/views/katalyst/navigation/items/new.html.erb