EZP-30072: As an editor I would like to see the content tree state re…

…stored after reloading a page (#857) * EZP-30072: As an editor I would like to see the content tree state restored after reloading a page * Adjust Content Tree container width to window size & scroll * Rename __content -> __wrapper * Add debounce
ezsystems · Feb 28, 2019 · af00cc9 · af00cc9
1 parent f8a8131
commit af00cc9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.location.content.tree.js b/src/bundle/Resources/public/js/scripts/admin.location.content.tree.js
@@ -2,20 +2,40 @@
     const KEY_CONTENT_TREE_EXPANDED = 'ez-content-tree-expanded';
     const CLASS_CONTENT_TREE_EXPANDED = 'ez-content-tree-container--expanded';
     const CLASS_BTN_CONTENT_TREE_EXPANDED = 'ez-btn--content-tree-expanded';
+    const VIEWPORT_CHANGE_TIMEOUT = 50;
+    const token = doc.querySelector('meta[name="CSRF-Token"]').content;
+    const siteaccess = doc.querySelector('meta[name="SiteAccess"]').content;
     const contentTreeContainer = doc.querySelector('.ez-content-tree-container');
+    const contentTreeWrapper = doc.querySelector('.ez-content-tree-container__wrapper');
     const btn = doc.querySelector('.ez-btn--toggle-content-tree');
+    let onViewportChangeTimeout = null;
     const toggleContentTreePanel = () => {
         contentTreeContainer.classList.toggle(CLASS_CONTENT_TREE_EXPANDED);
         btn.classList.toggle(CLASS_BTN_CONTENT_TREE_EXPANDED);
 
         localStorage.setItem(KEY_CONTENT_TREE_EXPANDED, contentTreeContainer.classList.contains(CLASS_CONTENT_TREE_EXPANDED));
     };
+    const updateContentTreeWrapperHeight = () => {
+        const height = Math.min(window.innerHeight - contentTreeContainer.getBoundingClientRect().top, window.innerHeight);
+
+        contentTreeWrapper.style.height = `${height}px`;
+        onViewportChangeTimeout = null;
+    };
+    const handleViewportChange = () => {
+        if (onViewportChangeTimeout) {
+            return;
+        }
+
+        window.clearTimeout(onViewportChangeTimeout);
+        onViewportChangeTimeout = window.setTimeout(updateContentTreeWrapperHeight, VIEWPORT_CHANGE_TIMEOUT);
+    };
 
     ReactDOM.render(
         React.createElement(eZ.modules.ContentTree, {
             currentLocationId: parseInt(contentTreeContainer.dataset.currentLocationId, 10),
+            restInfo: { token, siteaccess },
         }),
-        contentTreeContainer
+        contentTreeWrapper
     );
 
     btn.addEventListener('click', toggleContentTreePanel, false);
@@ -24,4 +44,9 @@
         contentTreeContainer.classList.add(CLASS_CONTENT_TREE_EXPANDED);
         btn.classList.add(CLASS_BTN_CONTENT_TREE_EXPANDED);
     }
+
+    updateContentTreeWrapperHeight();
+
+    doc.addEventListener('scroll', handleViewportChange, false);
+    window.addEventListener('resize', handleViewportChange, false);
 })(window.document, window.React, window.ReactDOM, window.eZ, window.localStorage);
diff --git a/src/bundle/Resources/public/scss/_view-content.scss b/src/bundle/Resources/public/scss/_view-content.scss
@@ -9,14 +9,20 @@
         max-width: 0;
         position: relative;
         background: $ez-white;
-        overflow: auto;
         color: inherit;
         transition: max-width 0.2s $ez-admin-transition;
+        margin-bottom: calculateRem(-24px);
 
         &--expanded {
             min-width: calculateRem(250px);
             max-width: 33vw;
         }
+
+        &__wrapper {
+            position: -webkit-sticky;
+            position: sticky;
+            top: 0;
+        }
     }
 
     .ez-location-view-container {

diff --git a/src/bundle/Resources/views/content/locationview.html.twig b/src/bundle/Resources/views/content/locationview.html.twig
@@ -26,7 +26,9 @@
         {% endblock left_sidebar %}
 
         <div class="px-0 pb-4 ez-content-container">
-            <div class="ez-content-tree-container" data-current-location-id="{{ location.id }}"></div>
+            <div class="ez-content-tree-container" data-current-location-id="{{ location.id }}">
+                <div class="ez-content-tree-container__wrapper"></div>
+            </div>
             <div class="ez-location-view-container">
                 <div class="ez-header">
                     <div class="container">