From 8c1d145f0eaa8539a920c44537c0a64192650e1d Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Tue, 13 Mar 2018 14:05:52 +1100
Subject: [PATCH] FIX: when visiting post on mobile it is not selected

---
 .../components/scrolling-post-stream.js.es6   |  9 +++++-
 .../discourse/lib/keyboard-shortcuts.js.es6   |  2 +-
 .../javascripts/discourse/lib/lock-on.js.es6  |  2 +-
 .../discourse/lib/offset-calculator.js.es6    | 28 ++++++++++---------
 app/views/layouts/application.html.erb        |  2 --
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6 b/app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6
index b36b39a7019..74d6b378b7d 100644
--- a/app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6
+++ b/app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6
@@ -96,7 +96,14 @@ export default MountWidget.extend({
     const topCheck = Math.ceil(windowTop + offset);
 
     // uncomment to debug the eyeline
-    // $('.debug-eyeline').css({ height: '1px', width: '100%', backgroundColor: 'blue', position: 'absolute', top: `${topCheck}px` });
+    /*
+    let $eyeline = $('.debug-eyeline');
+    if ($eyeline.length === 0) {
+      $('body').prepend('<div class="debug-eyeline"></div>');
+      $eyeline = $('.debug-eyeline');
+    }
+    $eyeline.css({ height: '1px', width: '100%', backgroundColor: 'blue', position: 'absolute', top: `${topCheck}px` });
+    */
 
     let allAbove = true;
     let bottomView = topView;
diff --git a/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6 b/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
index 8746f872059..18453287e68 100644
--- a/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
+++ b/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
@@ -365,7 +365,7 @@ export default {
 
   _scrollToPost($article) {
     const pos = $article.offset();
-    $(window).scrollTop(Math.ceil(pos.top - scrollTopFor(pos.top)));
+    $(window).scrollTop(scrollTopFor(pos.top));
   },
 
   _scrollList($article) {
diff --git a/app/assets/javascripts/discourse/lib/lock-on.js.es6 b/app/assets/javascripts/discourse/lib/lock-on.js.es6
index 65504d4df67..111b713a359 100644
--- a/app/assets/javascripts/discourse/lib/lock-on.js.es6
+++ b/app/assets/javascripts/discourse/lib/lock-on.js.es6
@@ -35,7 +35,7 @@ export default class LockOn {
     const selected = $(this.selector);
     if (selected && selected.offset && selected.offset()) {
       const result = selected.offset().top;
-      return result - (Math.round(scrollTopFor(result)) * 0.9);
+      return scrollTopFor(result);
     }
   }
 
diff --git a/app/assets/javascripts/discourse/lib/offset-calculator.js.es6 b/app/assets/javascripts/discourse/lib/offset-calculator.js.es6
index 84691d6a05d..3442970057f 100644
--- a/app/assets/javascripts/discourse/lib/offset-calculator.js.es6
+++ b/app/assets/javascripts/discourse/lib/offset-calculator.js.es6
@@ -1,29 +1,32 @@
-// TODO: This is quite ugly but seems reasonably fast? Maybe refactor
-// this out before we merge into stable.
 export function scrollTopFor(y) {
-  let off = 0;
-  for (let i=0; i<3; i++) {
-    off = offsetCalculator(y - off);
-  }
-  return off;
+  return y - offsetCalculator(y);
 }
 
 export default function offsetCalculator(y) {
   const $header = $('header');
-  const $title = $('#topic-title');
+  const $container = $('.posts-wrapper');
+  const containerOffset = $container.offset();
+
+  let titleHeight = 0;
+  const scrollTop = y || $(window).scrollTop();
+
+  if (!containerOffset || scrollTop < containerOffset.top) {
+    console.log("ADD height");
+    titleHeight = $('#topic-title').height() || 0;
+  }
+
   const rawWinHeight = $(window).height();
-  const windowHeight = rawWinHeight - $title.height();
+  const windowHeight = rawWinHeight - titleHeight;
+
   const eyeTarget = (windowHeight / 10);
   const headerHeight = $header.outerHeight(true);
-  const expectedOffset = $title.height() - $header.find('.contents').height() + (eyeTarget * 2);
+  const expectedOffset = titleHeight - ($header.find('.contents').height() || 0) + (eyeTarget * 2);
   const ideal = headerHeight + ((expectedOffset < 0) ? 0 : expectedOffset);
 
-  const $container = $('.posts-wrapper');
   if ($container.length === 0) { return expectedOffset; }
 
   const topPos = $container.offset().top;
 
-  const scrollTop = y || $(window).scrollTop();
   const docHeight = $(document).height();
   let scrollPercent = Math.min((scrollTop / (docHeight-rawWinHeight)), 1.0);
 
@@ -32,7 +35,6 @@ export default function offsetCalculator(y) {
     inter = headerHeight + eyeTarget;
   }
 
-
   if (inter > ideal) {
     const bottom = $('#topic-bottom').offset().top;
     const switchPos = bottom - rawWinHeight - ideal;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index b597a3217c2..361466c3544 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -62,8 +62,6 @@
   <body class="<%= body_classes %>">
     <%= render_google_tag_manager_code %>
 
-    <div class='debug-eyeline'></div>
-
     <noscript data-path="<%= request.env['PATH_INFO'] %>">
       <%= render partial: 'header' %>
       <div id="main-outlet" class="wrap">