Fix a crash with tehe collapsible tree and pagination; make initial c…

…ollapsing configurable
feincms · Aug 21, 2023 · 21a27a5 · 21a27a5
1 parent 60deb5a
commit 21a27a5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/feincms3/admin.py b/feincms3/admin.py
@@ -14,6 +14,7 @@
 from django.utils.text import capfirst
 from django.utils.translation import gettext_lazy as _
 from django.views.decorators.csrf import csrf_protect
+from js_asset.js import JS
 from tree_queries.forms import TreeNodeChoiceField
 
 
@@ -67,10 +68,22 @@ class NodeAdmin(TreeAdmin):
     """
 
     list_display = ("indented_title", "move_column")
-
-    class Media:
-        css = {"all": ["feincms3/box-drawing.css"]}
-        js = ["feincms3/box-drawing.js"]
+    initially_collapse_depth = 1
+
+    @property
+    def media(self):
+        return forms.Media(
+            css={"all": ["feincms3/box-drawing.css"]},
+            js=[
+                JS(
+                    "feincms3/box-drawing.js",
+                    {
+                        "id": "feincms3-context",
+                        "data-initially-collapse-depth": self.initially_collapse_depth,
+                    },
+                )
+            ],
+        )
 
     def get_queryset(self, request):
         return self.model._default_manager.with_tree_fields()

diff --git a/feincms3/static/feincms3/box-drawing.css b/feincms3/static/feincms3/box-drawing.css
@@ -41,6 +41,8 @@
 
 .field-collapse_column {
   position: relative;
+  width: 1rem;
+  padding: 0 !important;
 }
 
 .collapse-toggle {
@@ -52,18 +54,19 @@
 
   display: inline-block;
   transition: 0.1s transform;
-  transform: rotate(0deg) translateY(4px);
+  transform: rotate(0deg) translateY(6px);
   transform-origin: 50% 50%;
 
   cursor: pointer;
 }
 
 .collapse-toggle.collapsed {
-  transform: rotate(-45deg) translateY(-2px);
+  transform: rotate(-45deg) translateY(2px);
 }
 
 .collapse-toggle::after {
   content: "\25E2";
+  font-size: 1rem;
 }
 
 .collapse-hide {

diff --git a/feincms3/static/feincms3/box-drawing.js b/feincms3/static/feincms3/box-drawing.js
@@ -19,8 +19,12 @@ document.addEventListener("DOMContentLoaded", () => {
       nodes[pk] =
         [pk, treeDepth, [], node, toggle])
     if (treeDepth > 0) {
-      parents[treeDepth - 1][CHILDREN].push(rec)
-      parents[treeDepth - 1][TOGGLE].classList.remove("collapse-hide")
+      // parent may be on the previous page if the changelist is paginated.
+      let parent = parents[treeDepth - 1]
+      if (parent) {
+        parent[CHILDREN].push(rec)
+        parent[TOGGLE].classList.remove("collapse-hide")
+      }
     }
   }
 
@@ -51,5 +55,6 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   })
 
-  initiallyCollapse(1)
+  const context = document.querySelector("#feincms3-context")
+  initiallyCollapse(+context.getAttribute("data-initially-collapse-depth"))
 })