Merge branch 'MDL-79599-master' of https://github.com/ferranrecio/moodle

theme/boost/amd/src/drawers.js

@@ -581,8 +581,9 @@ export default class Drawers {
             direction = 1;
             scrollThreshold = THRESHOLD;
         }
-        if (scrollPosition > scrollThreshold) {
-            displace = drawrWidth + THRESHOLD;
+        // LTR scroll is positive while RTL scroll is negative.
+        if (Math.abs(scrollPosition) > scrollThreshold) {
+            displace = Math.sign(scrollPosition) * (drawrWidth + THRESHOLD);
         }
         displace *= direction;
         const transform = `translateX(${displace}px)`;
@@ -598,19 +599,38 @@ export default class Drawers {
      * @param {HTMLElement} currentFocus
      */
     preventOverlap(currentFocus) {
-        if (!this.isOpen) {
+        // Start position drawer (aka. left drawer) will never overlap with the page content.
+        if (!this.isOpen || this.drawerNode.dataset?.state === 'show-drawer-left') {
             return;
         }
         const drawrWidth = this.drawerNode.offsetWidth;
         const element = currentFocus.getBoundingClientRect();
-        const drawer = this.boundingRect;
-        const overlapping = (
-            (element.right + THRESHOLD) > drawer.left &&
-            (element.left - THRESHOLD) < drawer.right
+
+        // The this.boundingRect is calculated only once and it is reliable
+        // for horizontal overlapping (which is the most common). However,
+        // it is not reliable for vertical overlapping because the drawer
+        // height can be changed by other elements like sticky footer.
+        // To prevent recalculating the boundingRect on every
+        // focusin event, we use horizontal overlapping as first fast check.
+        let overlapping = (
+            (element.right + THRESHOLD) > this.boundingRect.left &&
+            (element.left - THRESHOLD) < this.boundingRect.right
         );
+        if (overlapping) {
+            const currentBoundingRect = this.drawerNode.getBoundingClientRect();
+            overlapping = (
+                (element.bottom) > currentBoundingRect.top &&
+                (element.top) < currentBoundingRect.bottom
+            );
+        }
+
         if (overlapping) {
             // Force drawer to displace out of the page.
-            this.displace(drawrWidth + 1);
+            let displaceOut = drawrWidth + 1;
+            if (window.right_to_left()) {
+                displaceOut *= -1;
+            }
+            this.displace(displaceOut);
         } else {
             // Reset drawer displacement.
             this.displace(window.scrollX);