FIX: when visiting post on mobile it is not selected
This commit is contained in:
parent
64e30d799e
commit
8c1d145f0e
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue