From 706b057be47b8a01284804e7ab76dda810405e44 Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Fri, 8 Mar 2019 09:54:31 +0100
Subject: [PATCH] EZP-30269: Fix jumping Collapse All button when scrolling

---
 .../js/scripts/admin.location.content.tree.js     | 15 ++++++---------
 1 file changed, 6 insertions(+), 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
index 7f659a6302..eaf33611e8 100644
--- 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);