fix(UI): Fixed collapsable nestable node-tree state, in ajax navigation

roadiz · Jun 7, 2024 · 2546848 · 2546848
1 parent 90e7d4e
commit 2546848
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 82 deletions.
diff --git a/lib/Rozier/src/Resources/app/Rozier.js b/lib/Rozier/src/Resources/app/Rozier.js
@@ -69,49 +69,7 @@ export default class Rozier {
          * override default nestable settings in order to
          * store toggle state between reloads.
          */
-        if (window.localStorage) {
-            this.collapsedNestableState = window.localStorage.getItem('collapsed.uk.nestable')
-            /*
-             * First login into backoffice
-             */
-            if (!this.collapsedNestableState) {
-                this.saveCollapsedNestableState(null)
-                this.collapsedNestableState = window.localStorage.getItem('collapsed.uk.nestable')
-            }
-            this.collapsedNestableState = JSON.parse(this.collapsedNestableState)
-
-            window.UIkit.on('beforeready.uk.dom', function () {
-                $.extend(window.UIkit.components.nestable.prototype, {
-                    collapseItem: function (li) {
-                        var lists = li.children(this.options._listClass)
-                        if (lists.length) {
-                            li.addClass(this.options.collapsedClass)
-                        }
-                        /*
-                         * Create new event on collapse
-                         */
-                        document.dispatchEvent(
-                            new CustomEvent('collapse.uk.nestable', {
-                                detail: li,
-                            })
-                        )
-                    },
-                })
-                $.extend(window.UIkit.components.nestable.prototype, {
-                    expandItem: function (li) {
-                        li.removeClass(this.options.collapsedClass)
-                        /*
-                         * Create new event on expand
-                         */
-                        document.dispatchEvent(
-                            new CustomEvent('expand.uk.nestable', {
-                                detail: li,
-                            })
-                        )
-                    },
-                })
-            })
-        }
+        this.setupCollapsedNestableState()
 
         this.lazyload = new Lazyload()
         this.entriesPanel = new EntriesPanel()
@@ -162,9 +120,56 @@ export default class Rozier {
         bulkActions()
         window.addEventListener('pageshowend', () => {
             bulkActions()
+            this.syncCollapsedNestableState()
         })
     }
 
+    setupCollapsedNestableState() {
+        if (window.localStorage) {
+            this.collapsedNestableState = window.localStorage.getItem('collapsed.uk.nestable')
+            /*
+             * First login into backoffice
+             */
+            if (!this.collapsedNestableState) {
+                this.saveCollapsedNestableState(null)
+                this.collapsedNestableState = window.localStorage.getItem('collapsed.uk.nestable')
+            }
+            this.collapsedNestableState = JSON.parse(this.collapsedNestableState)
+
+            window.UIkit.on('beforeready.uk.dom', function () {
+                $.extend(window.UIkit.components.nestable.prototype, {
+                    collapseItem: function (li) {
+                        var lists = li.children(this.options._listClass)
+                        if (lists.length) {
+                            li.addClass(this.options.collapsedClass)
+                        }
+                        /*
+                         * Create new event on collapse
+                         */
+                        document.dispatchEvent(
+                            new CustomEvent('collapse.uk.nestable', {
+                                detail: li,
+                            })
+                        )
+                    },
+                })
+                $.extend(window.UIkit.components.nestable.prototype, {
+                    expandItem: function (li) {
+                        li.removeClass(this.options.collapsedClass)
+                        /*
+                         * Create new event on expand
+                         */
+                        document.dispatchEvent(
+                            new CustomEvent('expand.uk.nestable', {
+                                detail: li,
+                            })
+                        )
+                    },
+                })
+            })
+        }
+    }
+
     saveCollapsedNestableState(state = null) {
         if (state === null) {
             state = {
@@ -176,46 +181,48 @@ export default class Rozier {
         window.localStorage.setItem('collapsed.uk.nestable', JSON.stringify(state))
     }
 
-    /**
-     * init nestable for ajax
-     * @return {[type]} [description]
-     */
-    initNestables() {
+    syncCollapsedNestableState() {
         this.collapsedNestableState.nodes.forEach((value) => {
-            const li = $('.uk-nestable-item[data-node-id="' + $.escapeSelector(value) + '"]')
-            if (li.length) {
-                li[0].classList.add('uk-collapsed')
-            }
+            const li = document.querySelectorAll('.uk-nestable-item[data-node-id="' + $.escapeSelector(value) + '"]')
+            li.forEach((element) => {
+                element.classList.add('uk-collapsed')
+            })
         })
         this.collapsedNestableState.tags.forEach((value) => {
-            const li = $('.uk-nestable-item[data-tag-id="' + $.escapeSelector(value) + '"]')
-            if (li.length) {
-                li[0].classList.add('uk-collapsed')
-            }
+            const li = document.querySelectorAll('.uk-nestable-item[data-tag-id="' + $.escapeSelector(value) + '"]')
+            li.forEach((element) => {
+                element.classList.add('uk-collapsed')
+            })
         })
         this.collapsedNestableState.folders.forEach((value) => {
-            const li = $('.uk-nestable-item[data-folder-id="' + $.escapeSelector(value) + '"]')
-            if (li.length) {
-                li[0].classList.add('uk-collapsed')
-            }
+            const li = document.querySelectorAll('.uk-nestable-item[data-folder-id="' + $.escapeSelector(value) + '"]')
+            li.forEach((element) => {
+                element.classList.add('uk-collapsed')
+            })
         })
+    }
+
+    /**
+     * init nestable for ajax
+     */
+    initNestables() {
+        this.syncCollapsedNestableState()
 
-        $('.uk-nestable').each((index, element) => {
-            let $tree = $(element)
+        document.querySelectorAll('.uk-nestable').forEach((element) => {
             /*
              * make drag&drop only available on handle
              * very important for Touch based device which need to
              * scroll on trees.
              */
-            let options = {
+            const options = {
                 handleClass: 'uk-nestable-handle',
             }
 
-            if ($tree.hasClass('nodetree')) {
+            if (element.classList.contains('nodetree')) {
                 options.group = 'nodeTree'
-            } else if ($tree.hasClass('tagtree')) {
+            } else if (element.classList.contains('tagtree')) {
                 options.group = 'tagTree'
-            } else if ($tree.hasClass('foldertree')) {
+            } else if (element.classList.contains('foldertree')) {
                 options.group = 'folderTree'
             }
 

diff --git a/lib/Rozier/src/Resources/app/RozierMobile.js b/lib/Rozier/src/Resources/app/RozierMobile.js
@@ -66,7 +66,6 @@ export default class RozierMobile {
 
     /**
      * Menu click
-     * @return {[type]} [description]
      */
     menuClick(e) {
         if (!this.menuOpen) this.openMenu()

diff --git a/lib/Rozier/src/Resources/app/less/widgets/nestable.less b/lib/Rozier/src/Resources/app/less/widgets/nestable.less
@@ -327,11 +327,11 @@
     &.unpublished-node {
         & > .non-nestable-handle:before,
         & > .uk-nestable-handle:before {
-            width: 9px;
-            height: 9px;
-            border-radius: 2px;
+            width: 8px;
+            height: 8px;
+            border-radius: 1px;
             .rotation(45deg);
-            top: 1px; left: 1px; // t2
+            z-index: 1;
         }
     }
 

diff --git a/lib/Rozier/src/Resources/app/less/widgets/node_tree.less b/lib/Rozier/src/Resources/app/less/widgets/node_tree.less
@@ -54,7 +54,7 @@
         @media screen and (min-width: 992px) {
             position: relative;
             vertical-align: middle;
-            padding: 5px 10px 5px 0;
+            padding: 0 10px 0 0; // do not add vertical padding, it will break the vertical align
             display: flex;
             flex-wrap: wrap;
             align-items: center;

diff --git a/lib/Rozier/src/Resources/app/widgets/StackNodeTree.js b/lib/Rozier/src/Resources/app/widgets/StackNodeTree.js
@@ -5,7 +5,6 @@ import NodeTreeContextActions from '../components/trees/NodeTreeContextActions'
 export default class StackNodeTree {
     constructor() {
         this.$page = $('.stack-tree').eq(0)
-        this.currentRequest = null
         this.$quickAddNodeButtons = this.$page.find('.stack-tree-quick-creation a')
         this.$nodeTree = this.$page.find('.root-tree').eq(0)
 

diff --git a/lib/Rozier/src/Resources/views/partials/css-inject.html.twig b/lib/Rozier/src/Resources/views/partials/css-inject.html.twig
@@ -1,7 +1,7 @@
 
 <link href="{{ asset('css/vendor.9b59501e29a05f532c3c.css', 'Rozier') }}" rel="stylesheet">
 
-<link href="{{ asset('css/app.dea952832312ed7f5246.css', 'Rozier') }}" rel="stylesheet">
+<link href="{{ asset('css/app.f510cb7c95b4a54abe88.css', 'Rozier') }}" rel="stylesheet">
 
 
 

diff --git a/lib/Rozier/src/Resources/views/partials/js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/js-inject.html.twig
@@ -1,5 +1,5 @@
 
-<script src="{{ asset('js/vendor.28b7dd745d0e77fa87ef.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/vendor.af133cce52f787d4c208.js', 'Rozier') }}" defer type="text/javascript"></script>
 
-<script src="{{ asset('js/app.28b7dd745d0e77fa87ef.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/app.af133cce52f787d4c208.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig
@@ -1,3 +1,3 @@
 
-<script src="{{ asset('js/simple.28b7dd745d0e77fa87ef.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/simple.af133cce52f787d4c208.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/static/css/app.dea952832312ed7f5246.css.map b/lib/Rozier/src/static/css/app.dea952832312ed7f5246.css.map
diff --git a/...c/static/css/app.dea952832312ed7f5246.css → ...c/static/css/app.f510cb7c95b4a54abe88.css b/...c/static/css/app.dea952832312ed7f5246.css → ...c/static/css/app.f510cb7c95b4a54abe88.css
diff --git a/lib/Rozier/src/static/css/app.f510cb7c95b4a54abe88.css.map b/lib/Rozier/src/static/css/app.f510cb7c95b4a54abe88.css.map
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,3 @@

		<script src="{{ asset('js/simple.28b7dd745d0e77fa87ef.js', 'Rozier') }}" defer type="text/javascript"></script>
		<script src="{{ asset('js/simple.af133cce52f787d4c208.js', 'Rozier') }}" defer type="text/javascript"></script>