katalyst-navigation 1.1.2 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e67d176cb768b324a1be109e98dc001bd9ce8419abba00d4856cd0d3c84dc6c9
-  data.tar.gz: 35555b9bac352c1e21786dcdddc638ccc3929e314003c7859dc3be56ad13c03e
+  metadata.gz: 6424bb96df0ceb96b40aa6d225dbe12461784edb41c1b83863435a56db02fd68
+  data.tar.gz: 6a46bbd339f8c171fe7a9791ad94281c6e0cb6f846f8bab04bd62edb8e8c339c
 SHA512:
-  metadata.gz: 4ba4e987c87e8dfe56def8ef4d2f9214c7376cd285385008079b82b84f2ed44e354248d1d8aceaa50f2ac0cad81311935b038c5cedaff9001ab38199bea61b8a
-  data.tar.gz: 0ac8744ff0e111c921974d82951f4c7b09f57df32d1c93d8c5cff0474de53b5254d53bbc2129d90ca81597ae08c8166e843f0609e58bd5c6311606da0fa1f4f7
+  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);
 
@@ -41,7 +67,9 @@ export default class MenuController extends Controller {
   nest(event) {
     const item = getEventItem(event);
 
-    item.nest();
+    item.traverse((child) => {
+      child.depth += 1;
+    });
 
     this.#update();
     event.preventDefault();
@@ -50,7 +78,9 @@ export default class MenuController extends Controller {
   deNest(event) {
     const item = getEventItem(event);
 
-    item.deNest();
+    item.traverse((child) => {
+      child.depth -= 1;
+    });
 
     this.#update();
     event.preventDefault();
@@ -85,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,44 +127,24 @@ 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));
-  }
-
-  /**
-   * Increase the depth of this item and its descendants.
-   * If this causes it to become a child of a collapsed item, then collapse this item.
-   */
-  nest() {
-    this.traverse((child) => {
-      child.depth += 1;
-    });
-
-    if (this.previousItem.hasCollapsedDescendants()) {
-      this.previousItem.collapseChild(this);
-    }
+    this.#traverseCollapsed(callback);
+    expanded.forEach((item) => item.#traverseCollapsed(callback));
   }
 
   /**
-   * Move the given item into this element's hidden children list.
-   * Assumes the list already exists.
+   * Recursively traverse the node's collapsed descendants, if any.
    *
-   * @param item {Item}
+   * @callback {Item}
    */
-  collapseChild(item) {
-    this.#childrenListElement.appendChild(item.node);
-  }
+  #traverseCollapsed(callback) {
+    if (!this.hasCollapsedDescendants()) return;
 
-  /**
-   * Decrease the depth of this item (and its descendants).
-   */
-  deNest() {
-    this.traverse((child) => {
-      child.depth -= 1;
+    this.#collapsedDescendants.forEach((item) => {
+      callback(item);
+      item.#traverseCollapsed(callback);
     });
   }
 
@@ -240,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 = [];
 
@@ -252,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/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/_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.2"
+    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.2
+  version: 1.2.0
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-15 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