Issue #3495602 by tom konda, catch, quietone: Remove code which checks browser...

Issue #3495602 by tom konda, catch, quietone: Remove code which checks browser support for Intersection Observer and scrollTo options argument

core/modules/layout_builder/js/layout-builder.js

@@ -291,17 +291,11 @@
           const viewportMiddle = (viewportBottom + viewportTop) / 2;
           const scrollAmount = targetTop - viewportMiddle;
 
-          // Check whether the browser supports scrollBy(options). If it does
-          // not, use scrollBy(x-coord, y-coord) instead.
-          if ('scrollBehavior' in document.documentElement.style) {
-            window.scrollBy({
-              top: scrollAmount,
-              left: 0,
-              behavior: 'smooth',
-            });
-          } else {
-            window.scrollBy(0, scrollAmount);
-          }
+          window.scrollBy({
+            top: scrollAmount,
+            left: 0,
+            behavior: 'smooth',
+          });
         }
       }
     });

core/themes/olivero/js/navigation-utils.js

@@ -129,108 +129,99 @@
     return item.value;
   }
 
-  // Only enable scroll interactivity if the browser supports Intersection
-  // Observer.
-  // @see https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js#L19-L21
-  if (
-    'IntersectionObserver' in window &&
-    'IntersectionObserverEntry' in window &&
-    'intersectionRatio' in window.IntersectionObserverEntry.prototype
-  ) {
-    const fixableElements = document.querySelectorAll(
-      '[data-drupal-selector="site-header-fixable"], [data-drupal-selector="social-bar-inner"]',
-    );
-
-    function toggleDesktopNavVisibility(entries) {
-      if (!isDesktopNav()) return;
+  const fixableElements = document.querySelectorAll(
+    '[data-drupal-selector="site-header-fixable"], [data-drupal-selector="social-bar-inner"]',
+  );
 
-      entries.forEach((entry) => {
-        // Firefox doesn't seem to support entry.isIntersecting properly,
-        // so we check the intersectionRatio.
-        fixableElements.forEach((el) =>
-          el.classList.toggle('is-fixed', entry.intersectionRatio < 1),
-        );
-      });
-    }
+  function toggleDesktopNavVisibility(entries) {
+    if (!isDesktopNav()) return;
 
-    /**
-     * Gets the root margin by checking for various toolbar classes.
-     *
-     * @return {string}
-     *   Root margin for the Intersection Observer options object.
-     */
-    function getRootMargin() {
-      let rootMarginTop = 72;
-      const { body } = document;
-
-      if (body.classList.contains('toolbar-fixed')) {
-        rootMarginTop -= 39;
-      }
+    entries.forEach((entry) => {
+      // Firefox doesn't seem to support entry.isIntersecting properly,
+      // so we check the intersectionRatio.
+      fixableElements.forEach((el) =>
+        el.classList.toggle('is-fixed', entry.intersectionRatio < 1),
+      );
+    });
+  }
 
-      if (
-        body.classList.contains('toolbar-horizontal') &&
-        body.classList.contains('toolbar-tray-open')
-      ) {
-        rootMarginTop -= 40;
-      }
+  /**
+   * Gets the root margin by checking for various toolbar classes.
+   *
+   * @return {string}
+   *   Root margin for the Intersection Observer options object.
+   */
+  function getRootMargin() {
+    let rootMarginTop = 72;
+    const { body } = document;
 
-      return `${rootMarginTop}px 0px 0px 0px`;
+    if (body.classList.contains('toolbar-fixed')) {
+      rootMarginTop -= 39;
     }
 
-    /**
-     * Monitor the navigation position.
-     */
-    function monitorNavPosition() {
-      const primaryNav = document.querySelector(
-        '[data-drupal-selector="site-header"]',
-      );
-      const options = {
-        rootMargin: getRootMargin(),
-        threshold: [0.999, 1],
-      };
-
-      const observer = new IntersectionObserver(
-        toggleDesktopNavVisibility,
-        options,
-      );
-
-      if (primaryNav) {
-        observer.observe(primaryNav);
-      }
+    if (
+      body.classList.contains('toolbar-horizontal') &&
+      body.classList.contains('toolbar-tray-open')
+    ) {
+      rootMarginTop -= 40;
     }
 
-    if (stickyHeaderToggleButton) {
-      stickyHeaderToggleButton.addEventListener('click', () => {
-        const pinnedState = !stickyHeaderIsEnabled();
-        toggleStickyHeaderState(pinnedState);
-        setStickyHeaderStorage(pinnedState);
-      });
-    }
+    return `${rootMarginTop}px 0px 0px 0px`;
+  }
 
-    // If header is pinned open and a header element gains focus, scroll to the
-    // top of the page to ensure that the header elements can be seen.
-    const siteHeaderInner = document.querySelector(
-      '[data-drupal-selector="site-header-inner"]',
+  /**
+   * Monitor the navigation position.
+   */
+  function monitorNavPosition() {
+    const primaryNav = document.querySelector(
+      '[data-drupal-selector="site-header"]',
     );
-    if (siteHeaderInner) {
-      siteHeaderInner.addEventListener('focusin', () => {
-        if (isDesktopNav() && !stickyHeaderIsEnabled()) {
-          const header = document.querySelector(
-            '[data-drupal-selector="site-header"]',
-          );
-          const headerNav = header.querySelector(
-            '[data-drupal-selector="header-nav"]',
-          );
-          const headerMargin = header.clientHeight - headerNav.clientHeight;
-          if (window.scrollY > headerMargin) {
-            window.scrollTo(0, headerMargin);
-          }
-        }
-      });
+    const options = {
+      rootMargin: getRootMargin(),
+      threshold: [0.999, 1],
+    };
+
+    const observer = new IntersectionObserver(
+      toggleDesktopNavVisibility,
+      options,
+    );
+
+    if (primaryNav) {
+      observer.observe(primaryNav);
     }
+  }
 
-    monitorNavPosition();
-    updateStickyHeaderStorage(getStickyHeaderStorage());
-    toggleStickyHeaderState(getStickyHeaderStorage());
+  if (stickyHeaderToggleButton) {
+    stickyHeaderToggleButton.addEventListener('click', () => {
+      const pinnedState = !stickyHeaderIsEnabled();
+      toggleStickyHeaderState(pinnedState);
+      setStickyHeaderStorage(pinnedState);
+    });
   }
+
+  // If header is pinned open and a header element gains focus, scroll to the
+  // top of the page to ensure that the header elements can be seen.
+  const siteHeaderInner = document.querySelector(
+    '[data-drupal-selector="site-header-inner"]',
+  );
+  if (siteHeaderInner) {
+    siteHeaderInner.addEventListener('focusin', () => {
+      if (isDesktopNav() && !stickyHeaderIsEnabled()) {
+        const header = document.querySelector(
+          '[data-drupal-selector="site-header"]',
+        );
+        const headerNav = header.querySelector(
+          '[data-drupal-selector="header-nav"]',
+        );
+        const headerMargin = header.clientHeight - headerNav.clientHeight;
+        if (window.scrollY > headerMargin) {
+          window.scrollTo(0, headerMargin);
+        }
+      }
+    });
+  }
+
+  monitorNavPosition();
+  updateStickyHeaderStorage(getStickyHeaderStorage());
+  toggleStickyHeaderState(getStickyHeaderStorage());
 })(Drupal);