EZP-30269: Fix jumping Collapse All button when scrolling

ezsystems · Mar 8, 2019 · 706b057 · 706b057
1 parent 2cb12f7
commit 706b057
Showing 1 changed file with 6 additions and 9 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,14 +2,13 @@
     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');
     const { currentLocationPath, userId } = contentTreeContainer.dataset;
-    let onViewportChangeTimeout = null;
+    let frame = null;
     const toggleContentTreePanel = () => {
         contentTreeContainer.classList.toggle(CLASS_CONTENT_TREE_EXPANDED);
         btn.classList.toggle(CLASS_BTN_CONTENT_TREE_EXPANDED);
@@ -21,15 +20,13 @@
         const height = Math.min(window.innerHeight - contentTreeContainer.getBoundingClientRect().top, window.innerHeight);
 
         contentTreeWrapper.style.height = `${height}px`;
-        onViewportChangeTimeout = null;
     };
     const handleViewportChange = () => {
-        if (onViewportChangeTimeout) {
-            return;
+        if (frame) {
+            cancelAnimationFrame(frame);
         }
 
-        window.clearTimeout(onViewportChangeTimeout);
-        onViewportChangeTimeout = window.setTimeout(updateContentTreeWrapperHeight, VIEWPORT_CHANGE_TIMEOUT);
+        frame = requestAnimationFrame(updateContentTreeWrapperHeight);
     };
 
     ReactDOM.render(
@@ -50,6 +47,6 @@
 
     updateContentTreeWrapperHeight();
 
-    doc.addEventListener('scroll', handleViewportChange, false);
-    window.addEventListener('resize', handleViewportChange, false);
+    doc.addEventListener('scroll', handleViewportChange, { capture: false, passive: true });
+    window.addEventListener('resize', handleViewportChange, { capture: false, passive: true });
 })(window.document, window.React, window.ReactDOM, window.eZ, window.localStorage);