DEV: Fewer jQuery calls in offset calculation (#15465)

app/assets/javascripts/discourse/app/components/composer-body.js

@@ -8,7 +8,7 @@ import Composer from "discourse/models/composer";
 import KeyEnterEscape from "discourse/mixins/key-enter-escape";
 import afterTransition from "discourse/lib/after-transition";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { headerOffset } from "discourse/components/site-header";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import positioningWorkaround from "discourse/lib/safari-hacks";
 
 const START_DRAG_EVENTS = ["touchstart", "mousedown"];

app/assets/javascripts/discourse/app/components/site-header.js

@@ -7,6 +7,7 @@ import Docking from "discourse/mixins/docking";
 import MountWidget from "discourse/components/mount-widget";
 import ItsATrap from "@discourse/itsatrap";
 import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import { observes } from "discourse-common/utils/decorators";
 import { topicTitleDecorators } from "discourse/components/topic-title";
 
@@ -438,15 +439,6 @@ export default SiteHeaderComponent.extend({
   classNames: ["d-header-wrap"],
 });
 
-export function headerOffset() {
-  return (
-    parseInt(
-      document.documentElement.style.getPropertyValue("--header-offset"),
-      10
-    ) || 0
-  );
-}
-
 export function headerTop() {
   const header = document.querySelector("header.d-header");
   const headerOffsetTop = header.offsetTop ? header.offsetTop : 0;

app/assets/javascripts/discourse/app/components/topic-navigation.js

@@ -5,7 +5,7 @@ import PanEvents, {
 import Component from "@ember/component";
 import EmberObject from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { headerOffset } from "discourse/components/site-header";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import { later, next } from "@ember/runloop";
 import { observes } from "discourse-common/utils/decorators";
 import showModal from "discourse/lib/show-modal";

app/assets/javascripts/discourse/app/components/topic-timeline.js

@@ -1,6 +1,6 @@
 import Docking from "discourse/mixins/docking";
 import MountWidget from "discourse/components/mount-widget";
-import { headerOffset } from "discourse/components/site-header";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import { next } from "@ember/runloop";
 import { observes } from "discourse-common/utils/decorators";
 import optionalService from "discourse/lib/optional-service";

app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js

@@ -1,3 +1,5 @@
+import { bind } from "discourse-common/utils/decorators";
+import discourseDebounce from "discourse-common/lib/debounce";
 import { isAppWebview } from "discourse/lib/utilities";
 import { later, run, schedule, throttle } from "@ember/runloop";
 import {
@@ -6,9 +8,10 @@ import {
 } from "discourse/lib/topic-list-tracker";
 import Composer from "discourse/models/composer";
 import DiscourseURL from "discourse/lib/url";
+import domUtils from "discourse-common/utils/dom-utils";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import { ajax } from "discourse/lib/ajax";
-import { minimumOffset } from "discourse/lib/offset-calculator";
+import { headerOffset } from "discourse/lib/offset-calculator";
 
 const DEFAULT_BINDINGS = {
   "!": { postAction: "showFlags" },
@@ -608,7 +611,7 @@ export default {
     // Discard selection if it is not in viewport, so users can combine
     // keyboard shortcuts with mouse scrolling.
     if ($selected.length !== 0 && !fast) {
-      const offset = minimumOffset();
+      const offset = headerOffset();
       const beginScreen = $(window).scrollTop() - offset;
       const endScreen = beginScreen + window.innerHeight + offset;
       const beginArticle = $selected.offset().top;
@@ -621,7 +624,7 @@ export default {
     // If still nothing is selected, select the first post that is
     // visible and cancel move operation.
     if (!$selected || $selected.length === 0) {
-      const offset = minimumOffset();
+      const offset = headerOffset();
       $selected = $articles
         .toArray()
         .find((article) =>
@@ -636,32 +639,32 @@ export default {
     }
 
     const index = $articles.index($selected);
-    let $article = $articles.eq(index);
+    let article = $articles.eq(index)[0];
 
     // Try doing a page scroll in the context of current post.
-    if (!fast && direction !== 0 && $article.length > 0) {
+    if (!fast && direction !== 0 && article) {
       // The beginning of first article is the beginning of the page.
       const beginArticle =
-        $article.is(".topic-post") && $article.find("#post_1").length
+        article.classList.contains("topic-post") &&
+        article.querySelector("#post_1")
           ? 0
-          : $article.offset().top;
-      const endArticle =
-        $article.offset().top + $article[0].getBoundingClientRect().height;
+          : domUtils.offset(article).top;
+      const endArticle = domUtils.offset(article).top + article.offsetHeight;
 
-      const beginScreen = $(window).scrollTop();
+      const beginScreen = window.scrollY;
       const endScreen = beginScreen + window.innerHeight;
 
       if (direction < 0 && beginScreen > beginArticle) {
         return this._scrollTo(
           Math.max(
-            beginScreen - window.innerHeight + 3 * minimumOffset(), // page up
-            beginArticle - minimumOffset() // beginning of article
+            beginScreen - window.innerHeight + 3 * headerOffset(), // page up
+            beginArticle - headerOffset() // beginning of article
           )
         );
-      } else if (direction > 0 && endScreen < endArticle - minimumOffset()) {
+      } else if (direction > 0 && endScreen < endArticle - headerOffset()) {
         return this._scrollTo(
           Math.min(
-            endScreen - 3 * minimumOffset(), // page down
+            endScreen - 3 * headerOffset(), // page down
             endArticle - window.innerHeight // end of article
           )
         );
@@ -678,68 +681,59 @@ export default {
       }
     }
 
-    $article = $articles.eq(index + direction);
-    if ($article.length > 0) {
-      $articles.removeClass("selected");
-      $article.addClass("selected");
-      this.appEvents.trigger("keyboard:move-selection", {
-        articles: $articles.get(),
-        selectedArticle: $article.get(0),
-      });
-
-      const articleRect = $article[0].getBoundingClientRect();
-      if (!fast && direction < 0 && articleRect.height > window.innerHeight) {
-        // Scrolling to the last "page" of the previous post if post has multiple
-        // "pages" (if its height does not fit in the screen).
-        return this._scrollTo(
-          $article.offset().top + articleRect.height - window.innerHeight
-        );
-      } else if ($article.is(".topic-post")) {
-        return this._scrollTo(
-          $article.find("#post_1").length > 0
-            ? 0
-            : $article.offset().top - minimumOffset(),
-          () => $("a.tabLoc", $article).focus()
-        );
-      }
-
-      // Otherwise scroll through the suggested topic list.
-      this._scrollList($article, direction);
+    article = $articles.eq(index + direction)[0];
+    if (!article) {
+      return;
     }
+
+    $articles.removeClass("selected");
+    article.classList.add("selected");
+
+    this.appEvents.trigger("keyboard:move-selection", {
+      articles: $articles.get(),
+      selectedArticle: article,
+    });
+
+    const articleTop = domUtils.offset(article).top;
+    if (!fast && direction < 0 && article.offsetHeight > window.innerHeight) {
+      // Scrolling to the last "page" of the previous post if post has multiple
+      // "pages" (if its height does not fit in the screen).
+      return this._scrollTo(
+        articleTop + article.offsetHeight - window.innerHeight
+      );
+    } else if (article.classList.contains("topic-post")) {
+      return this._scrollTo(
+        article.querySelector("#post_1") ? 0 : articleTop - headerOffset(),
+        { focusTabLoc: true }
+      );
+    }
+
+    // Otherwise scroll through the suggested topic list.
+    article.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
   },
 
-  _scrollTo(scrollTop) {
+  _scrollTo(scrollTop, opts = {}) {
     window.scrollTo({
       top: scrollTop,
       behavior: "smooth",
     });
+
+    if (opts.focusTabLoc) {
+      window.addEventListener("scroll", this._onScrollEnds, { passive: true });
+    }
   },
 
-  _scrollList($article) {
-    // Try to keep the article on screen
-    const pos = $article.offset();
-    const height = $article.height();
-    const headerHeight = $("header.d-header").height();
-    const scrollTop = $(window).scrollTop();
-    const windowHeight = $(window).height();
+  @bind
+  _onScrollEnds() {
+    window.removeEventListener("scroll", this._onScrollEnds, { passive: true });
+    discourseDebounce(this, this._onScrollEndsCallback, animationDuration);
+  },
 
-    // skip if completely on screen
-    if (
-      pos.top - headerHeight > scrollTop &&
-      pos.top + height < scrollTop + windowHeight
-    ) {
-      return;
-    }
-
-    let scrollPos = pos.top + height / 2 - windowHeight * 0.5;
-    if (height > windowHeight - headerHeight) {
-      scrollPos = pos.top - headerHeight;
-    }
-    if (scrollPos < 0) {
-      scrollPos = 0;
-    }
-
-    this._scrollTo(scrollPos);
+  _onScrollEndsCallback() {
+    document.querySelector(".topic-post.selected a.tabLoc")?.focus();
   },
 
   categoriesTopicsList() {

app/assets/javascripts/discourse/app/lib/lock-on.js

@@ -1,5 +1,5 @@
 import { bind } from "discourse-common/utils/decorators";
-import { minimumOffset } from "discourse/lib/offset-calculator";
+import { headerOffset } from "discourse/lib/offset-calculator";
 
 // Dear traveller, you are entering a zone where we are at war with the browser.
 // The browser is insisting on positioning scrollTop per the location it was in
@@ -50,7 +50,7 @@ export default class LockOn {
       }
     }
 
-    return offset - minimumOffset();
+    return offset - headerOffset();
   }
 
   clearLock() {

app/assets/javascripts/discourse/app/lib/offset-calculator.js

@@ -1,8 +1,18 @@
+import deprecated from "discourse-common/lib/deprecated";
+
 export function scrollTopFor(y) {
   return y - offsetCalculator();
 }
 
 export function minimumOffset() {
+  deprecated(
+    "The minimumOffset() helper is deprecated, please use headerOffset() instead.",
+    {
+      since: "2.8.0.beta10",
+      dropFrom: "2.9.0.beta2",
+    }
+  );
+
   const header = document.querySelector("header.d-header"),
     iPadNav = document.querySelector(".footer-nav-ipad .footer-nav"),
     iPadNavHeight = iPadNav ? iPadNav.offsetHeight : 0;
@@ -17,8 +27,17 @@ export function minimumOffset() {
     : 0;
 }
 
+export function headerOffset() {
+  return (
+    parseInt(
+      document.documentElement.style.getPropertyValue("--header-offset"),
+      10
+    ) || 0
+  );
+}
+
 export default function offsetCalculator() {
-  const min = minimumOffset();
+  const min = headerOffset();
 
   // on mobile, just use the header
   if (document.querySelector("html").classList.contains("mobile-view")) {

app/assets/javascripts/discourse/app/lib/sticky-avatars.js

@@ -1,7 +1,7 @@
 import { addWidgetCleanCallback } from "discourse/components/mount-widget";
 import Site from "discourse/models/site";
 import { bind } from "discourse-common/utils/decorators";
-import { headerOffset } from "discourse/components/site-header";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import { schedule } from "@ember/runloop";
 
 export default class StickyAvatars {
@@ -79,6 +79,9 @@ export default class StickyAvatars {
   @bind
   _initIntersectionObserver() {
     schedule("afterRender", () => {
+      const headerOffsetInPx =
+        headerOffset() <= 0 ? "0px" : `-${headerOffset()}px`;
+
       this.intersectionObserver = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
@@ -99,7 +102,7 @@ export default class StickyAvatars {
         },
         {
           threshold: [0.0, 1.0],
-          rootMargin: `-${headerOffset()}px 0px 0px 0px`,
+          rootMargin: `${headerOffsetInPx} 0px 0px 0px`,
         }
       );
     });

plugins/discourse-narrative-bot/assets/javascripts/initializers/new-user-narrative.js

@@ -1,6 +1,6 @@
 import { ajax } from "discourse/lib/ajax";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { headerOffset } from "discourse/components/site-header";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
 import { withPluginApi } from "discourse/lib/plugin-api";