From 3faeb4f093e9f3dcbbee15025cd04935c64516cd Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 15 Feb 2018 14:33:20 -0500
Subject: [PATCH] Calculate the heights when we need them

---
 .../discourse/widgets/topic-timeline.js.es6   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index 72f52350c76..a82525157f6 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -5,12 +5,17 @@ import { relativeAge } from 'discourse/lib/formatter';
 import { iconNode } from 'discourse-common/lib/icon-library';
 import RawHtml from 'discourse/widgets/raw-html';
 
-const windowHeight = $(window).height();
-const SCROLLAREA_HEIGHT = (windowHeight < 425)? 150 : 300;
 const SCROLLER_HEIGHT = 50;
-const SCROLLAREA_REMAINING = SCROLLAREA_HEIGHT - SCROLLER_HEIGHT;
 const LAST_READ_HEIGHT = 20;
 
+function scrollareaHeight() {
+  return ($(window).height() < 425) ? 150 : 300;
+}
+
+function scrollareaRemaining() {
+  return scrollareaHeight() - SCROLLER_HEIGHT;
+}
+
 function clamp(p, min=0.0, max=1.0) {
   return Math.max(Math.min(p, max), min);
 }
@@ -28,7 +33,7 @@ createWidget('timeline-last-read', {
   tagName: 'div.timeline-last-read',
 
   buildAttributes(attrs) {
-    const bottom = SCROLLAREA_HEIGHT - (LAST_READ_HEIGHT / 2);
+    const bottom = scrollareaHeight() - (LAST_READ_HEIGHT / 2);
     const top = attrs.top > bottom ? bottom : attrs.top;
     return { style: `height: ${LAST_READ_HEIGHT}px; top: ${top}px` };
   },
@@ -116,7 +121,7 @@ createWidget('timeline-scrollarea', {
   buildKey: () => `timeline-scrollarea`,
 
   buildAttributes() {
-    return { style: `height: ${SCROLLAREA_HEIGHT}px` };
+    return { style: `height: ${scrollareaHeight()}px` };
   },
 
   defaultState(attrs) {
@@ -169,8 +174,8 @@ createWidget('timeline-scrollarea', {
     const percentage = state.percentage;
     if (percentage === null) { return; }
 
-    const before = SCROLLAREA_REMAINING * percentage;
-    const after = (SCROLLAREA_HEIGHT - before) - SCROLLER_HEIGHT;
+    const before = scrollareaRemaining() * percentage;
+    const after = (scrollareaHeight() - before) - SCROLLER_HEIGHT;
 
     let showButton = false;
     const hasBackPosition =
@@ -180,13 +185,13 @@ createWidget('timeline-scrollarea', {
       (position.lastRead && position.lastRead !== position.total);
 
     if (hasBackPosition) {
-      const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT);
+      const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight());
       showButton = ((before + SCROLLER_HEIGHT - 5) < lastReadTop) ||
                     (before > (lastReadTop + 25));
 
 
       // Don't show if at the bottom of the timeline
-      if (lastReadTop > (SCROLLAREA_HEIGHT - (LAST_READ_HEIGHT / 2))) {
+      if (lastReadTop > (scrollareaHeight() - (LAST_READ_HEIGHT / 2))) {
         showButton = false;
       }
     }
@@ -201,7 +206,7 @@ createWidget('timeline-scrollarea', {
     ];
 
     if (hasBackPosition) {
-      const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT);
+      const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight());
       result.push(this.attach('timeline-last-read', {
         top: lastReadTop,
         lastRead: position.lastRead,