Calculate the heights when we need them
This commit is contained in:
parent
5ab44833ab
commit
3faeb4f093
|
@ -5,12 +5,17 @@ import { relativeAge } from 'discourse/lib/formatter';
|
||||||
import { iconNode } from 'discourse-common/lib/icon-library';
|
import { iconNode } from 'discourse-common/lib/icon-library';
|
||||||
import RawHtml from 'discourse/widgets/raw-html';
|
import RawHtml from 'discourse/widgets/raw-html';
|
||||||
|
|
||||||
const windowHeight = $(window).height();
|
|
||||||
const SCROLLAREA_HEIGHT = (windowHeight < 425)? 150 : 300;
|
|
||||||
const SCROLLER_HEIGHT = 50;
|
const SCROLLER_HEIGHT = 50;
|
||||||
const SCROLLAREA_REMAINING = SCROLLAREA_HEIGHT - SCROLLER_HEIGHT;
|
|
||||||
const LAST_READ_HEIGHT = 20;
|
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) {
|
function clamp(p, min=0.0, max=1.0) {
|
||||||
return Math.max(Math.min(p, max), min);
|
return Math.max(Math.min(p, max), min);
|
||||||
}
|
}
|
||||||
|
@ -28,7 +33,7 @@ createWidget('timeline-last-read', {
|
||||||
tagName: 'div.timeline-last-read',
|
tagName: 'div.timeline-last-read',
|
||||||
|
|
||||||
buildAttributes(attrs) {
|
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;
|
const top = attrs.top > bottom ? bottom : attrs.top;
|
||||||
return { style: `height: ${LAST_READ_HEIGHT}px; top: ${top}px` };
|
return { style: `height: ${LAST_READ_HEIGHT}px; top: ${top}px` };
|
||||||
},
|
},
|
||||||
|
@ -116,7 +121,7 @@ createWidget('timeline-scrollarea', {
|
||||||
buildKey: () => `timeline-scrollarea`,
|
buildKey: () => `timeline-scrollarea`,
|
||||||
|
|
||||||
buildAttributes() {
|
buildAttributes() {
|
||||||
return { style: `height: ${SCROLLAREA_HEIGHT}px` };
|
return { style: `height: ${scrollareaHeight()}px` };
|
||||||
},
|
},
|
||||||
|
|
||||||
defaultState(attrs) {
|
defaultState(attrs) {
|
||||||
|
@ -169,8 +174,8 @@ createWidget('timeline-scrollarea', {
|
||||||
const percentage = state.percentage;
|
const percentage = state.percentage;
|
||||||
if (percentage === null) { return; }
|
if (percentage === null) { return; }
|
||||||
|
|
||||||
const before = SCROLLAREA_REMAINING * percentage;
|
const before = scrollareaRemaining() * percentage;
|
||||||
const after = (SCROLLAREA_HEIGHT - before) - SCROLLER_HEIGHT;
|
const after = (scrollareaHeight() - before) - SCROLLER_HEIGHT;
|
||||||
|
|
||||||
let showButton = false;
|
let showButton = false;
|
||||||
const hasBackPosition =
|
const hasBackPosition =
|
||||||
|
@ -180,13 +185,13 @@ createWidget('timeline-scrollarea', {
|
||||||
(position.lastRead && position.lastRead !== position.total);
|
(position.lastRead && position.lastRead !== position.total);
|
||||||
|
|
||||||
if (hasBackPosition) {
|
if (hasBackPosition) {
|
||||||
const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT);
|
const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight());
|
||||||
showButton = ((before + SCROLLER_HEIGHT - 5) < lastReadTop) ||
|
showButton = ((before + SCROLLER_HEIGHT - 5) < lastReadTop) ||
|
||||||
(before > (lastReadTop + 25));
|
(before > (lastReadTop + 25));
|
||||||
|
|
||||||
|
|
||||||
// Don't show if at the bottom of the timeline
|
// 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;
|
showButton = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -201,7 +206,7 @@ createWidget('timeline-scrollarea', {
|
||||||
];
|
];
|
||||||
|
|
||||||
if (hasBackPosition) {
|
if (hasBackPosition) {
|
||||||
const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT);
|
const lastReadTop = Math.round(position.lastReadPercentage * scrollareaHeight());
|
||||||
result.push(this.attach('timeline-last-read', {
|
result.push(this.attach('timeline-last-read', {
|
||||||
top: lastReadTop,
|
top: lastReadTop,
|
||||||
lastRead: position.lastRead,
|
lastRead: position.lastRead,
|
||||||
|
|
Loading…
Reference in New Issue