1
0
mirror of https://github.com/flarum/core.git synced 2025-08-10 18:35:56 +02:00

Restore old scrubber index calculation system

This commit is contained in:
Alexander Skvortsov
2020-07-09 17:59:47 -04:00
committed by Franz Liedke
parent af55a13c61
commit a850f4a6fb
2 changed files with 9 additions and 14 deletions

View File

@@ -175,7 +175,7 @@ export default class PostStream extends Component {
// seen if the browser were scrolled right up to the top of the page, // seen if the browser were scrolled right up to the top of the page,
// and the viewport had a height of 0. // and the viewport had a height of 0.
const $items = this.$('.PostStream-item[data-index]'); const $items = this.$('.PostStream-item[data-index]');
let index; let index = $items.first().data('index') || 0;
let visible = 0; let visible = 0;
let period = ''; let period = '';
@@ -203,14 +203,8 @@ export default class PostStream extends Component {
const visibleBottom = Math.min(height, viewportTop + viewportHeight - top); const visibleBottom = Math.min(height, viewportTop + viewportHeight - top);
const visiblePost = visibleBottom - visibleTop; const visiblePost = visibleBottom - visibleTop;
const threeQuartersVisible = visibleTop / height < 0.75; if (top <= viewportTop) {
const coversQuarterOfViewport = (height - visibleTop) / viewportHeight > 0.25; index = parseFloat($this.data('index')) + visibleTop / height;
if (index === undefined && (threeQuartersVisible || coversQuarterOfViewport)) {
index = parseFloat($this.data('index')) + (visibleTop / height) * (1 / 0.75);
// If this item has a time associated with it, then set the
// scrollbar's current period to a formatted version of this time.
const time = $this.data('time');
if (time) period = time;
} }
if (visiblePost > 0) { if (visiblePost > 0) {
@@ -218,7 +212,7 @@ export default class PostStream extends Component {
} }
}); });
this.state.index = index; this.state.index = index + 1;
this.state.visible(visible); this.state.visible(visible);
if (period) this.state.description = dayjs(period).format('MMMM YYYY'); if (period) this.state.description = dayjs(period).format('MMMM YYYY');
} }

View File

@@ -277,20 +277,23 @@ export default class PostStreamScrubber extends Component {
* @param {Boolean} animate * @param {Boolean} animate
*/ */
updateScrubberValues(options = {}) { updateScrubberValues(options = {}) {
if (!options.fromScroll) console.log("hello")
const index = this.state.index; const index = this.state.index;
const count = this.state.count(); const count = this.state.count();
const visible = this.state.visible() || 1; const visible = this.state.visible() || 1;
const percentPerPost = this.percentPerPost(); const percentPerPost = this.percentPerPost();
const $scrubber = this.$(); const $scrubber = this.$();
$scrubber.find(`.Scrubber-index`).html(formatNumber(this.state.sanitizeIndex(index + 1))); $scrubber.find(`.Scrubber-index`).text(formatNumber(this.state.sanitizeIndex(index + 1)));
$scrubber.find(`.Scrubber-description`).text(this.state.description);
$scrubber.toggleClass('disabled', this.state.disabled());
const heights = {}; const heights = {};
heights.before = Math.max(0, percentPerPost.index * Math.min(index, count - visible)); heights.before = Math.max(0, percentPerPost.index * Math.min(index, count - visible));
heights.handle = Math.min(100 - heights.before, percentPerPost.visible * visible); heights.handle = Math.min(100 - heights.before, percentPerPost.visible * visible);
heights.after = 100 - heights.before - heights.handle; heights.after = 100 - heights.before - heights.handle;
console.log(heights.after); console.log(heights.before + heights.after);
if (!(options.fromScroll && this.state.paused) && (!this.adjustingHeight || options.forceHeightChange)) { if (!(options.fromScroll && this.state.paused) && (!this.adjustingHeight || options.forceHeightChange)) {
const func = options.animate ? 'animate' : 'css'; const func = options.animate ? 'animate' : 'css';
@@ -311,7 +314,5 @@ export default class PostStreamScrubber extends Component {
} }
Promise.all(animationPromises).then(() => (this.adjustingHeight = false)); Promise.all(animationPromises).then(() => (this.adjustingHeight = false));
} }
$scrubber.toggleClass('disabled', this.state.disabled());
} }
} }