katalyst-navigation 1.1.2 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e67d176cb768b324a1be109e98dc001bd9ce8419abba00d4856cd0d3c84dc6c9
-  data.tar.gz: 35555b9bac352c1e21786dcdddc638ccc3929e314003c7859dc3be56ad13c03e
+  metadata.gz: 368bcecb2264a1a536d2bbeb6c05f2dfa6762dcd693a215db21ef93db4da26f8
+  data.tar.gz: 83ef6762cddd830df2acc4ef1404c8037211c4de4b3dbe5d8b5501bb4cf42fd7
 SHA512:
-  metadata.gz: 4ba4e987c87e8dfe56def8ef4d2f9214c7376cd285385008079b82b84f2ed44e354248d1d8aceaa50f2ac0cad81311935b038c5cedaff9001ab38199bea61b8a
-  data.tar.gz: 0ac8744ff0e111c921974d82951f4c7b09f57df32d1c93d8c5cff0474de53b5254d53bbc2129d90ca81597ae08c8166e843f0609e58bd5c6311606da0fa1f4f7
+  metadata.gz: a4e9965e0b7e49c055e405d90dd13dcb764f2b4b1b0fb62191347eb066e784dea5c1ee069b9a848fe283d87da1241fa840663d8152a92fe2b1f73607bae11b9b
+  data.tar.gz: df13a7692f558a2eb5937a4e85d7137540d175ca6be500a743bfbd1caa53fc4fbba1be0acc27cc6bedf665009a8ff58439bc1d2fc35ae76028059ec0ea0614f4

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/controllers/katalyst/navigation/items_controller.rb

@@ -41,8 +41,17 @@ module Katalyst
         params[:type] || Link.name
       end
 
+      def item_params_type
+        type = params.require(:item).fetch(:type, "")
+        if Katalyst::Navigation.config.items.include?(type)
+          type.safe_constantize
+        else
+          Item
+        end
+      end
+
       def item_params
-        params.require(:item).permit(%i[title url visible http_method new_tab type])
+        params.require(:item).permit(item_params_type.permitted_params)
       end
 
       def set_menu

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

@@ -4,10 +4,10 @@ module Katalyst
   module Navigation
     module EditorHelper
       def navigation_editor_new_items(menu)
-        [
-          Link.new(menu: menu),
-          Button.new(menu: menu),
-        ]
+        Katalyst::Navigation.config.items.map do |item_class|
+          item_class = item_class.is_a?(String) ? item_class.safe_constantize : item_class
+          item_class.new(menu: menu)
+        end
       end
 
       def navigation_editor_menu(menu:, **options, &block)

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

@@ -1,22 +1,23 @@
 # frozen_string_literal: true
 
+# rubocop:disable Rails/HelperInstanceVariable
 module Katalyst
   module Navigation
     module Frontend
       class Builder
-        attr_accessor :template, :menu_options, :list_options, :item_options
+        attr_accessor :template
 
         delegate_missing_to :@template
 
         def initialize(template, list: {}, item: {}, **menu_options)
-          self.template     = template
-          self.menu_options = menu_options
-          self.list_options = list
-          self.item_options = item
+          self.template = template
+          @menu_options = menu_options.freeze
+          @list_options = list.freeze
+          @item_options = item.freeze
         end
 
         def render(tree)
-          tag.ul **menu_options do
+          tag.ul(**menu_options(tree)) do
             tree.each do |item|
               concat render_item(item)
             end
@@ -26,28 +27,47 @@ module Katalyst
         def render_item(item)
           return unless item.visible?
 
-          tag.li **item_options do
+          tag.li(**item_options(item)) do
             concat public_send("render_#{item.model_name.param_key}", item)
-            concat render_list(item.children) if item.children.any?
+            concat render_children(item) if item.children.any?
           end
         end
 
-        def render_list(items)
-          tag.ul **list_options do
-            items.each do |child|
+        def render_children(item)
+          tag.ul(**list_options(item)) do
+            item.children.each do |child|
               concat render_item(child)
             end
           end
         end
 
+        def render_heading(heading)
+          tag.span(heading.title)
+        end
+
         def render_link(link)
-          link_to(link.title, link.url, item_options)
+          link_to(link.title, link.url)
         end
 
         def render_button(link)
-          link_to(link.title, link.url, **item_options, method: link.http_method)
+          link_to(link.title, link.url, method: link.http_method)
+        end
+
+        private
+
+        def menu_options(_tree)
+          @menu_options
+        end
+
+        def list_options(_item)
+          @list_options
+        end
+
+        def item_options(_item)
+          @item_options
         end
       end
     end
   end
 end
+# rubocop:enable Rails/HelperInstanceVariable

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

@@ -10,6 +10,10 @@ module Katalyst
 
       validates :title, :url, :http_method, presence: true
       validates :http_method, inclusion: { in: HTTP_METHODS.values.map(&:to_s) }
+
+      def self.permitted_params
+        super + %i[http_method]
+      end
     end
   end
 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,20 @@ module Katalyst
 
       attr_accessor :parent, :children, :index, :depth
 
+      def self.permitted_params
+        %i[
+          title
+          url
+          visible
+          new_tab
+          type
+        ]
+      end
+
+      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/config.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "active_support/configurable"
+
+module Katalyst
+  module Navigation
+    class Config
+      include ActiveSupport::Configurable
+
+      config_accessor(:items) do
+        %w[
+          Katalyst::Navigation::Heading
+          Katalyst::Navigation::Link
+          Katalyst::Navigation::Button
+        ]
+      end
+    end
+  end
+end

data/lib/katalyst/navigation/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Navigation
-    VERSION = "1.1.2"
+    VERSION = "1.3.0"
   end
 end

data/lib/katalyst/navigation.rb

@@ -1,9 +1,19 @@
 # frozen_string_literal: true
 
+require "katalyst/navigation/config"
 require "katalyst/navigation/engine"
 require "katalyst/navigation/version"
 
 module Katalyst
   module Navigation # :nodoc:
+    extend self
+
+    def config
+      @config ||= Config.new
+    end
+
+    def configure
+      yield config
+    end
   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.3.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
@@ -75,6 +78,7 @@ files:
 - db/migrate/20220826034507_create_katalyst_navigation_items.rb
 - db/migrate/20220908044500_add_depth_limit_to_menus.rb
 - lib/katalyst/navigation.rb
+- lib/katalyst/navigation/config.rb
 - lib/katalyst/navigation/engine.rb
 - lib/katalyst/navigation/version.rb
 - lib/tasks/yarn.rake