Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Calculate the heights when we need them

This commit is contained in:
Robin Ward 2018-02-15 14:33:20 -05:00
parent 5ab44833ab
commit 3faeb4f093
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
View File

@ -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,