Add JS to insert row in custom position

CHANGELOG.md

@@ -21,21 +21,21 @@
 
 ### New features:
 
-- Render README and CHANGELOG in pypi readme @erral 
+- Render README and CHANGELOG in pypi readme @erral
 
 
 ### Bug fixes:
 
-- Minor styling fixes @libargutxi 
+- Minor styling fixes @libargutxi
 
 ## 1.0.0b9 (2026-03-25)
 
 
 ### Internal:
 
-- Add llms plugin for documentation @erral 
-- Add tests for documentation how-tos @erral 
-- Fix docs base url @erral 
+- Add llms plugin for documentation @erral
+- Add tests for documentation how-tos @erral
+- Fix docs base url @erral
 
 ## 1.0.0b8 (2026-03-23)
 
@@ -47,20 +47,20 @@
 
 ### Internal:
 
-- Add documentation @erral 
+- Add documentation @erral
 
 ## 1.0.0b7 (2026-03-20)
 
 
 ### New features:
 
-- Add tests @erral 
+- Add tests @erral
 
 
 ### Bug fixes:
 
-- Return false if trying to add a view that exists to the registry @erral 
-- Translate comments @erral 
+- Return false if trying to add a view that exists to the registry @erral
+- Translate comments @erral
 
 ## 1.0.0b6 (2026-03-12)
 
@@ -75,18 +75,18 @@
 ### New features:
 
 - Add row marker CSS classes @erral [#10](https://github.com/codesyntax/cs_dynamicpages/issues/10)
-- Add template handling @erral 
+- Add template handling @erral
 
 
 ### Bug fixes:
 
 - Change the id for the content wrapping div @erral [#9](https://github.com/codesyntax/cs_dynamicpages/issues/9)
-- Add name to the body-class adapter not to clash with other existing adapters @erral 
+- Add name to the body-class adapter not to clash with other existing adapters @erral
 
 
 ### Internal:
 
-- - Fix and expand test coverage: fix pre-existing placeholder tests, add tests for utils, indexers, upgrade steps, behaviors, vocabularies, control panel and browser components @erral 
+- - Fix and expand test coverage: fix pre-existing placeholder tests, add tests for utils, indexers, upgrade steps, behaviors, vocabularies, control panel and browser components @erral
 
 ## 1.0.0b4 (2025-11-10)
 
@@ -104,7 +104,7 @@
 ### New features:
 
 - Add more javascript code to the frontend @libargutxi [#5](https://github.com/codesyntax/cs_dynamicpages/issues/5)
-- New configuration options @libargutxi 
+- New configuration options @libargutxi
 
 ## 1.0.0b2 (2025-10-08)
 

Makefile

@@ -31,6 +31,12 @@ else
 PLONE_VERSION := 6.1.4
 endif
 
+ifdef CI
+UV_VENV_ARGS :=
+else
+UV_VENV_ARGS := --python=3.13
+endif
+
 VENV_FOLDER=$(BACKEND_FOLDER)/.venv
 export VIRTUAL_ENV=$(VENV_FOLDER)
 BIN_FOLDER=$(VENV_FOLDER)/bin
@@ -54,7 +60,7 @@ requirements-mxdev.txt: pyproject.toml mx.ini ## Generate constraints file
 
 $(VENV_FOLDER): requirements-mxdev.txt ## Install dependencies
 	@echo "$(GREEN)==> Install environment$(RESET)"
-	@uv venv $(VENV_FOLDER) --clear
+	@if [[ -d "$(VENV_FOLDER)" ]]; then echo "$(YELLOW)==> Environment already exists at $(VENV_FOLDER)$(RESET)"; else uv venv $(UV_VENV_ARGS) $(VENV_FOLDER); fi
 	@uv pip install -r requirements-mxdev.txt
 
 .PHONY: sync

news/31.feature

@@ -0,0 +1 @@
+Register add-row-position JS bundle @libargutxi

src/cs_dynamicpages/browser/static/add-row-position.js

@@ -0,0 +1,56 @@
+/**
+ * Handles setting the position when adding a new row
+ */
+(function () {
+  "use strict";
+
+  let lastClickedPosition = null;
+
+  // Track which button was clicked last
+  document.addEventListener("click", (event) => {
+    const button = event.target.closest(".add-row-plus-btn");
+    if (button) {
+      lastClickedPosition = button.getAttribute("data-position");
+    }
+  });
+
+  const initAddRowPosition = () => {
+    const offcanvasAddRow = document.getElementById("addrow-offcanvasRight");
+    if (!offcanvasAddRow) return;
+
+    offcanvasAddRow.addEventListener("show.bs.offcanvas", (event) => {
+      // event.relatedTarget sometimes fails in some Bootstrap versions or environments
+      const button = event.relatedTarget || null;
+      const position = (button ? button.getAttribute("data-position") : null) || lastClickedPosition;
+
+      if (position !== null) {
+        const links = offcanvasAddRow.querySelectorAll('a[href*="add-row-content"]');
+
+        links.forEach(link => {
+          let href = link.getAttribute('href');
+
+          // Remove existing position if any to avoid duplication
+          href = href.replace(/[&?]position=\d+/, '');
+
+          // Add new position
+          const separator = href.includes('?') ? '&' : '?';
+          const newHref = href + separator + 'position=' + position;
+
+          link.setAttribute('href', newHref);
+        });
+
+        // Also update template apply buttons
+        const templateButtons = offcanvasAddRow.querySelectorAll('.apply-template');
+        templateButtons.forEach(btn => {
+          btn.setAttribute('data-position', position);
+        });
+      }
+    });
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initAddRowPosition);
+  } else {
+    initAddRowPosition();
+  }
+})();

src/cs_dynamicpages/browser/static/dynamicpageview.css

@@ -40,6 +40,7 @@ body.template-dynamic-view.can_edit {
   }
 
   &.preview-mode .edit-options {
+    display: none !important;
     position: absolute;
     opacity: 0;
     visibility: hidden;
@@ -107,6 +108,83 @@ body.template-dynamic-view.can_edit {
     opacity: 1 !important;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   }
+
+  .add-row-plus-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    margin: 0 !important;
+    position: relative;
+    z-index: 10;
+    transition: all 0.3s ease;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 10%;
+      right: 10%;
+      height: 1px;
+      background: linear-gradient(
+        to right,
+        transparent,
+        var(--dynamicpages-primary-color),
+        transparent
+      );
+      z-index: -1;
+      opacity: 0.2;
+      transition: all 0.3s ease;
+    }
+
+    &:hover {
+      &::before {
+        opacity: 0.5;
+        left: 5%;
+        right: 5%;
+      }
+    }
+
+    .add-row-plus-btn {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: white;
+      border: 1px solid var(--dynamicpages-primary-color);
+      color: var(--dynamicpages-primary-color);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+      svg {
+        width: 14px;
+        height: 14px;
+        transition: transform 0.2s ease;
+      }
+
+      &:hover {
+        background-color: var(--dynamicpages-primary-color);
+        color: white;
+        transform: scale(1.1);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+        svg {
+          transform: rotate(90.01deg);
+        }
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+
+  /* Remove Bootsptrap's default configuration not to break centering */
+  .add-row-plus-btn.btn {
+    line-height: 1;
+  }
 }
 
 .no-underline {
@@ -123,3 +201,7 @@ body.template-dynamic-view.can_edit {
     }
   }
 }
+
+.dynamic-row .dropdown-menu {
+  z-index: 1030; /* Ensure dropdown is above other elements */
+}

src/cs_dynamicpages/browser/static/reorder-rows.js

@@ -4,12 +4,6 @@
 (function () {
   "use strict";
 
-  // Store references to avoid re-querying the DOM
-  let sortableInstance = null;
-  const upClickHandlers = new Map();
-  const downClickHandlers = new Map();
-  let isInitialized = false;
-
   // Initialize when DOM is loaded
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", initRowReordering);
@@ -55,20 +49,20 @@
     if (element) {
       moveElementInDOM(element, delta);
       sendReorderRequest(element, delta);
+      updateRowPositions(); // Recalculate plus button positions
     }
 
     setTimeout(() => (button.disabled = false), 500);
   }
 
   function initDragAndDropReordering() {
     if (typeof Sortable === "undefined") {
-      console.log("SortableJS not loaded. Drag-and-drop reordering disabled.");
       return;
     }
 
     // Find the container of the rows. We assume all draggable items share the same parent.
     const firstDraggableElement = document.querySelector(
-      '[data-move-target="true"]'
+      '.dynamic-row-wrapper'
     );
     if (!firstDraggableElement?.parentElement) {
       return;
@@ -85,18 +79,31 @@
       ghostClass: "sortable-ghost", // Class for the drop placeholder
       chosenClass: "sortable-chosen", // Class for the chosen item
       dragClass: "sortable-drag", // Class for the dragging item
+      draggable: ".dynamic-row-wrapper", // Only allow dragging the wrappers
 
       // Element is dropped
       onEnd: (evt) => {
         const { oldIndex, newIndex, item } = evt;
         if (oldIndex !== newIndex) {
           const delta = newIndex - oldIndex;
           sendReorderRequest(item, delta);
+          updateRowPositions(); // Recalculate plus button positions
         }
       },
     });
   }
 
+  /**
+   * Recalculates all data-position attributes for add-row-plus-buttons
+   * based on their current order in the DOM.
+   */
+  function updateRowPositions() {
+    const plusButtons = document.querySelectorAll(".add-row-plus-btn");
+    plusButtons.forEach((btn, index) => {
+      btn.setAttribute("data-position", index);
+    });
+  }
+
   function moveElementInDOM(element, delta) {
     const parent = element.parentNode;
     if (!parent) return;

src/cs_dynamicpages/profiles/default/metadata.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <metadata>
-  <version>1008</version>
+  <version>1009</version>
   <dependencies>
     <dependency>profile-plone.app.dexterity:default</dependency>
     <dependency>profile-collective.z3cform.datagridfield:default</dependency>

src/cs_dynamicpages/profiles/default/registry/dynamic_bundle.xml

@@ -35,6 +35,17 @@
     <value key="expression" />
   </records>
 
+  <records interface="Products.CMFPlone.interfaces.IBundleRegistry"
+           prefix="plone.bundles/cs_dynamicpages.dynamicpagerow_add_position"
+  >
+    <value key="enabled">True</value>
+    <value key="jscompilation">++plone++cs_dynamicpages.edit/add-row-position.js</value>
+    <value key="depends">plone</value>
+    <value key="load_async">True</value>
+    <value key="load_defer">False</value>
+    <value key="expression" />
+  </records>
+
   <records interface="Products.CMFPlone.interfaces.IBundleRegistry"
            prefix="plone.bundles/cs_dynamicpages.toast_handler"
   >