katalyst-navigation 1.0.2 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b1e30c9f62f9c95fbd95824c1fca798f29e8d8240040cf92bfe3e6d802f0f4b
-  data.tar.gz: 7b86b9670845b41baa6214bd1ac19e5b6cf9aed0e391f31f270b183b5891e32a
+  metadata.gz: 5c41babca4e58e13c18e53437a8992f93a1f2e82566542ed43dd8f62a2a0a83f
+  data.tar.gz: 4d3ea6600b660cf877ac8c53aa81be4367169ea27ffca16d86374ca0a61a0b41
 SHA512:
-  metadata.gz: 247b24aec0411a6e45c316a68d1020f57bb3672cb2c7f649f3deab98c6c0c3820b3ca49fd4074b779d693ee4bc39ecaad112586b2a75fc32cddb574be8568245
-  data.tar.gz: 8dbe6529fea49f7f497ee5d1310cc5f4f618f86f41bfcd9b83395a91bf4c5764e9fe7ddab32bd0da04826689c5f5b6556ee3bfda79da6ee48397db9e733aa70f
+  metadata.gz: dfff1369051123cbd3411fe4d873a8a1bee97166c09f05c117f6df9a11b0a0b618d8255349aed78213b76ee5b8c078807d904fd51899e803e2222f56d9beb086
+  data.tar.gz: 07e367633bd15cc6f84aa242d5f785e82822f9354482ed071a90e4ed975aa4ed40eeac22bea5d30ab949031d7aa6702cfd18c7fae6f3f9beb08d2c202dbd6d1d

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

@@ -6,6 +6,9 @@ import RulesEngine from "utils/navigation/editor/rules-engine";
 
 export default class MenuController extends Controller {
   static targets = ["menu"];
+  static values = {
+    maxDepth: Number,
+  };
 
   connect() {
     this.state = this.menu.state;
@@ -85,7 +88,7 @@ export default class MenuController extends Controller {
       if (!this.updateRequested) return;
 
       this.updateRequested = false;
-      const engine = new RulesEngine();
+      const engine = new RulesEngine(this.maxDepthValue);
       this.menu.items.forEach((item) => engine.update(item));
 
       this.#notifyChange();

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

@@ -7,9 +7,12 @@ export default class RulesEngine {
     "denyRemove",
     "denyDrag",
     "denyEdit",
-    "invalidDepth",
   ];
 
+  constructor(maxDepth = null) {
+    this.maxDepth = maxDepth;
+  }
+
   /**
    * Apply rules to the given item by computing a ruleset then merging it
    * with the item's current state.
@@ -19,16 +22,21 @@ export default class RulesEngine {
   update(item) {
     this.rules = {};
 
+    // structural rules enforce a valid tree structure
     this.firstItemDepthZero(item);
     this.depthMustBeSet(item);
+    this.itemCannotHaveInvalidDepth(item);
+    this.itemCannotExceedDepthLimit(item);
+
+    // behavioural rules define what the user is allowed to do
     this.parentsCannotDeNest(item);
     this.rootsCannotDeNest(item);
     this.nestingNeedsParent(item);
+    this.nestingCannotExceedMaxDepth(item);
     this.leavesCannotCollapse(item);
     this.needHiddenItemsToExpand(item);
     this.parentsCannotBeDeleted(item);
     this.parentsCannotBeDragged(item);
-    this.itemCannotHaveInvalidDepth(item);
 
     RulesEngine.rules.forEach((rule) => {
       item.toggleRule(rule, !!this.rules[rule]);
@@ -55,6 +63,34 @@ export default class RulesEngine {
     }
   }
 
+  /**
+   * Depth must increase stepwise.
+   *
+   * @param {Item} item
+   */
+  itemCannotHaveInvalidDepth(item) {
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth - 1) {
+      item.depth = previous.depth + 1;
+    }
+  }
+
+  /**
+   * Depth must not exceed menu's depth limit.
+   *
+   * @param {Item} item
+   */
+  itemCannotExceedDepthLimit(item) {
+    if (this.maxDepth > 0 && this.maxDepth <= item.depth) {
+      // Note: this change can cause an issue where the previous item is treated
+      // like a parent even though it no longer has children. This is because
+      // items are processed in order. This issue does not seem worth solving
+      // as it only occurs if the max depth is altered. The issue can be worked
+      // around by saving the menu.
+      item.depth = this.maxDepth - 1;
+    }
+  }
+
   /**
    * De-nesting an item would create a gap of 2 between itself and its children
    *
@@ -102,31 +138,32 @@ export default class RulesEngine {
   }
 
   /**
-   * An item can't be deleted if it has visible children.
+   * An item can't be nested (indented) if doing so would exceed the max depth.
    *
    * @param {Item} item
    */
-  parentsCannotBeDeleted(item) {
-    if (item.hasExpandedDescendants()) this.#deny("denyRemove");
+  nestingCannotExceedMaxDepth(item) {
+    if (this.maxDepth > 0 && this.maxDepth <= item.depth + 1) {
+      this.#deny("denyNest");
+    }
   }
 
   /**
-   * Items cannot be dragged if they have visible children.
+   * An item can't be deleted if it has visible children.
    *
    * @param {Item} item
    */
-  parentsCannotBeDragged(item) {
-    if (item.hasExpandedDescendants()) this.#deny("denyDrag");
+  parentsCannotBeDeleted(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyRemove");
   }
 
   /**
-   * Depth must increase stepwise.
+   * Items cannot be dragged if they have visible children.
    *
    * @param {Item} item
    */
-  itemCannotHaveInvalidDepth(item) {
-    const previous = item.previousItem;
-    if (previous && previous.depth < item.depth - 1) this.#deny("invalidDepth");
+  parentsCannotBeDragged(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDrag");
   }
 
   /**

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

@@ -10,7 +10,6 @@ $grey: #ececec !default;
 $grey-dark: #999 !default;
 $table-hover-background: #fff0eb !default;
 $primary-color: #ff521f !default;
-$error-color: #990000 !default;
 
 $row-inset: 2rem !default;
 $row-height: 3rem !default;
@@ -20,7 +19,6 @@ $row-background-color: $grey-light !default;
 $row-hover-color: $table-hover-background !default;
 $icon-active-color: $primary-color !default;
 $icon-passive-color: $grey-dark !default;
-$row-depth-invalid-color: $error-color !default;
 
 $status-published-background-color: #ebf9eb !default;
 $status-published-border-color: #4dd45c !default;
@@ -42,7 +40,6 @@ $status-dirty-color: #aaa !default;
   --row-hover-color: #{$row-hover-color};
   --icon-active-color: #{$icon-active-color};
   --icon-passive-color: #{$icon-passive-color};
-  --row-depth-invalid-color: #{$row-depth-invalid-color};
 
   ol,
   li {

data/app/assets/stylesheets/katalyst/navigation/editor/_item-rules.scss

@@ -16,8 +16,4 @@
     display: none !important;
     pointer-events: none;
   }
-
-  [data-invalid-depth] {
-    box-shadow: inset 0 0 0 3px var(--row-depth-invalid-color);
-  }
 }

data/app/controllers/concerns/katalyst/navigation/has_navigation.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    # Preloads navigation menus before content is rendered.
+    module HasNavigation
+      extend ActiveSupport::Concern
+
+      # Override the default navigation builder for all views rendered by this
+      # controller and any of its descendants. Accepts a subclass of
+      # Katalyst::Navigation::Frontend::Builder.
+      #
+      # For example, given a form builder:
+      #
+      #   class AdminNavBuilder < Katalyst::Navigation::Frontend::Builder
+      #     def render_item(item)
+      #     end
+      #   end
+      #
+      # The controller specifies a form builder as its default:
+      #
+      #   class AdminAreaController < ApplicationController
+      #     default_navigation_builder AdminNavBuilder
+      #   end
+      #
+      # Then in the view any form using +navigation_menu_with+ will be an instance of the
+      # specified navigation builder:
+      #
+      #   <%= navigation_menu_with(menu: @menu) %>
+      module NavigationBuilder
+        extend ActiveSupport::Concern
+
+        included do
+          class_attribute :_default_navigation_builder, instance_accessor: false
+        end
+
+        class_methods do
+          # Set the navigation builder to be used as the default for all navs
+          # in the views rendered by this controller and its subclasses.
+          #
+          # @param builder {Katalyst::Navigation::Frontend::Builder}
+          def default_navigation_builder(builder)
+            self._default_navigation_builder = builder
+          end
+        end
+
+        # Default navigation builder for the controller
+        #
+        # @return {Katalyst::Navigation::Frontend::Builder}
+        def default_navigation_builder
+          self.class._default_navigation_builder
+        end
+      end
+
+      # Provide an accessor for navigation menus
+      module NavigationHelper
+        # Retrieves the preloaded menu that matches the given slug.
+        #
+        # @return {Katalyst::Navigation::Menu} menu with the given slug
+        def navigation_menu_for(slug)
+          @navigation_menus[slug.to_s]
+        end
+
+        # @see ActionView::Helpers::ControllerHelper#assign_controller
+        def assign_controller(controller)
+          super
+
+          if controller.respond_to?(:default_navigation_builder)
+            @_default_navigation_builder = controller.default_navigation_builder
+          end
+        end
+      end
+
+      included do
+        include NavigationBuilder
+
+        helper Katalyst::Navigation::FrontendHelper
+        helper NavigationHelper
+
+        # @see ActionController::Rendering#render
+        def render(*args)
+          set_navigation_menus
+
+          super
+        end
+      end
+
+      protected
+
+      def set_navigation_menus
+        @navigation_menus = Katalyst::Navigation::Menu.includes(:published_version).index_by(&:slug)
+      end
+    end
+  end
+end

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

@@ -39,7 +39,7 @@ module Katalyst
       def update
         menu = Menu.find(params[:id])
 
-        menu.attributes = navigation_params
+        menu.attributes = menu_params
 
         unless menu.valid?
           return render :show, locals: { menu: menu }, status: :unprocessable_entity
@@ -62,20 +62,15 @@ module Katalyst
 
         menu.destroy!
 
-        redirect_to action: :index
+        redirect_to action: :index, status: :see_other
       end
 
       private
 
       def menu_params
-        params.require(:menu).permit(:title, :slug)
-      end
-
-      def navigation_params
         return {} if params[:menu].blank?
 
-        params.require(:menu)
-          .permit(:title, :slug, items_attributes: %i[id index depth])
+        params.require(:menu).permit(:title, :slug, :depth, items_attributes: %i[id index depth])
       end
     end
   end

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

@@ -8,7 +8,7 @@ module Katalyst
 
         def build(item, **options, &block)
           self.item = item
-          content_tag(:div, default_options(id: dom_id(item), **options)) do
+          tag.div **default_options(id: dom_id(item), **options) do
             concat(capture { yield self }) if block
             concat fields(item)
           end

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

@@ -14,7 +14,7 @@ module Katalyst
         ACTIONS
 
         def build(options, &_block)
-          content_tag :ol, default_options(id: menu_form_id, **options) do
+          tag.ol **default_options(id: menu_form_id, **options) do
             yield self
           end
         end

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

@@ -29,6 +29,10 @@ module Katalyst
           add_option(options, :data, :controller, MENU_CONTROLLER)
           add_option(options, :data, :action, ACTIONS)
 
+          depth = options.delete(:depth) || menu.depth
+
+          add_option(options, :data, :"#{MENU_CONTROLLER}-max-depth-value", depth) if depth
+
           options
         end
       end

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

@@ -10,7 +10,7 @@ module Katalyst
 
         def build(item, **options, &block)
           capture do
-            concat(content_tag(:div, **default_options(options)) do
+            concat(tag.div(**default_options(options)) do
               concat capture(&block)
               concat item_template(item)
             end)
@@ -31,7 +31,7 @@ module Katalyst
         # events when the user initiates drag so that it can be copied into the
         # editor list on drop.
         def item_template(item)
-          content_tag(:template, data: { "#{NEW_ITEM_CONTROLLER}-target" => "template" }) do
+          tag.template data: { "#{NEW_ITEM_CONTROLLER}-target" => "template" } do
             navigation_editor_items(item: item)
           end
         end

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

@@ -9,7 +9,7 @@ module Katalyst
         ACTIONS
 
         def build(**options)
-          content_tag(:div, default_options(**options)) do
+          tag.div **default_options(**options) do
             concat status(:published, last_update: l(menu.updated_at, format: :short))
             concat status(:draft)
             concat status(:dirty)
@@ -24,7 +24,7 @@ module Katalyst
         end
 
         def actions
-          content_tag(:menu) do
+          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")

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

@@ -8,15 +8,15 @@ module Katalyst
 
         delegate_missing_to :@template
 
-        def initialize(template, menu: {}, list: {}, item: {})
+        def initialize(template, list: {}, item: {}, **menu_options)
           self.template     = template
-          self.menu_options = menu
+          self.menu_options = menu_options
           self.list_options = list
           self.item_options = item
         end
 
         def render(tree)
-          content_tag(:ul, menu_options) do
+          tag.ul **menu_options do
             tree.each do |item|
               concat render_item(item)
             end
@@ -26,14 +26,14 @@ module Katalyst
         def render_item(item)
           return unless item.visible?
 
-          content_tag :li, item_options do
+          tag.li **item_options do
             concat public_send("render_#{item.model_name.param_key}", item)
             concat render_list(item.children) if item.children.any?
           end
         end
 
         def render_list(items)
-          content_tag :ul, list_options do
+          tag.ul **list_options do
             items.each do |child|
               concat render_item(child)
             end

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

@@ -5,15 +5,19 @@ module Katalyst
     module FrontendHelper
       mattr_accessor :navigation_builder
 
+      attr_internal :default_navigation_builder
+
       # Render a navigation menu. Caches based on the published version's id.
       #
       # @param(menu: Katalyst::Navigation::Menu)
       # @return Structured HTML containing top level + nested navigation links
-      def render_navigation_menu(menu, item: {}, list: {}, **options)
+      def navigation_menu_with(menu:, **options)
+        builder = navigation_builder(**options)
+        menu    = menu.is_a?(Symbol) ? navigation_menu_for(menu) : menu
+
         return unless menu&.published_version&.present?
 
         cache menu.published_version do
-          builder = default_navigation_builder_class.new(self, menu: options, item: item, list: list)
           concat builder.render(menu.published_tree)
         end
       end
@@ -22,8 +26,9 @@ module Katalyst
       #
       # @param(items: [Katalyst::Navigation::Item])
       # @return Structured HTML containing top level + nested navigation links
-      def render_navigation_items(items, list: {}, **options)
-        builder = default_navigation_builder_class.new(self, item: options, list: list)
+      def navigation_items_with(items:, **options)
+        builder = navigation_builder(**options)
+
         capture do
           items.each do |item|
             concat builder.render_item(item)
@@ -33,8 +38,13 @@ module Katalyst
 
       private
 
+      def navigation_builder(**options)
+        builder = options.delete(:builder) || default_navigation_builder_class
+        builder.new(self, **options)
+      end
+
       def default_navigation_builder_class
-        builder = controller.try(:default_navigation_builder) || Frontend::Builder
+        builder = default_navigation_builder || Frontend::Builder
         builder.respond_to?(:constantize) ? builder.constantize : builder
       end
     end

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

@@ -45,6 +45,7 @@ module Katalyst
 
       validates :title, :slug, presence: true
       validates :slug, uniqueness: true
+      validates :depth, numericality: { greater_than: 0, only_integer: true, allow_nil: true }
 
       # A menu is in draft mode if it has an unpublished draft or it has no published version.
       # @return the current state of the menu, either `published` or `draft`

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

@@ -1,15 +1,25 @@
 <% content_for :title, "Edit navigation" %>
 
 <%= form_with model: menu do |form| %>
-  <div class="field">
+  <div class="field required">
     <%= form.label :title %>
     <%= form.text_field :title %>
   </div>
 
-  <div class="field">
+  <div class="field required">
     <%= form.label :slug %>
     <%= form.text_field :slug %>
   </div>
 
-  <%= form.submit :save %>
+  <div class="field optional">
+    <%= form.label :depth %>
+    <%= form.text_field :depth %>
+  </div>
+
+  <div class="button-row">
+    <%= form.submit :save %>
+    <%= link_to "Delete", url_for(action: :show),
+                class: "button button-secondary",
+                data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
+  </div>
 <% end %>

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

@@ -11,7 +11,4 @@
     <%= link_to cell.value, menu %>
   <% end %>
   <%= row.cell :slug %>
-  <%= row.cell :actions do |cell| %>
-    <%= button_to "Delete", menu, method: :delete, class: "button button--text" %>
-  <% end %>
 <% end %>

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

@@ -1,15 +1,20 @@
 <% content_for :title, "New navigation" %>
 
 <%= form_with model: menu do |form| %>
-  <div class="field">
+  <div class="field required">
     <%= form.label :title %>
     <%= form.text_field :title %>
   </div>
 
-  <div class="field">
+  <div class="field required">
     <%= form.label :slug %>
     <%= form.text_field :slug %>
   </div>
 
+  <div class="field optional">
+    <%= form.label :depth %>
+    <%= form.text_field :depth %>
+  </div>
+
   <%= form.submit %>
 <% end %>

data/db/migrate/20220908044500_add_depth_limit_to_menus.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddDepthLimitToMenus < ActiveRecord::Migration[7.0]
+  def change
+    add_column :katalyst_navigation_menus, :depth, :integer
+  end
+end

data/lib/katalyst/navigation/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-navigation
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.1.1
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-06 00:00:00.000000000 Z
+date: 2022-09-12 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -34,6 +34,7 @@ files:
 - 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/controllers/concerns/katalyst/navigation/has_navigation.rb
 - app/controllers/katalyst/navigation/base_controller.rb
 - app/controllers/katalyst/navigation/items_controller.rb
 - app/controllers/katalyst/navigation/menus_controller.rb
@@ -72,6 +73,7 @@ files:
 - config/routes.rb
 - db/migrate/20220826034057_create_katalyst_navigation_menus.rb
 - db/migrate/20220826034507_create_katalyst_navigation_items.rb
+- db/migrate/20220908044500_add_depth_limit_to_menus.rb
 - lib/katalyst/navigation.rb
 - lib/katalyst/navigation/engine.rb
 - lib/katalyst/navigation/version.rb