- {showBackButton ? this.backButton() : ''}
+ {showBackButton ? (
+
@@ -95,22 +104,11 @@ export default class PostStreamScrubber extends Component {
);
}
- backButton() {
- return (
-
- {icon('fas fa-minus')}
-
-
- );
- }
-
returnToLastPosition(e) {
// Don't fire the scrubber click event as well
e.stopPropagation();
- this.stream.goToIndex(Math.floor(this.lastPosition));
+ this.stream.goToIndex(Math.floor(this.stream.previousIndex));
this.updateScrubberValues({ animate: true });
this.$().removeClass('open');
@@ -184,7 +182,7 @@ export default class PostStreamScrubber extends Component {
* @param {Boolean} animate
*/
updateScrubberValues(options = {}) {
- const index = this.stream.index;
+ const index = this.pendingMoveIndex || this.stream.index;
const count = this.stream.count();
const visible = this.stream.visible || 1;
const percentPerPost = this.percentPerPost();
@@ -226,7 +224,6 @@ export default class PostStreamScrubber extends Component {
* Go to the first post in the discussion.
*/
goToFirst() {
- this.lastPosition = this.stream.index;
this.stream.goToFirst();
this.updateScrubberValues({ animate: true, forceHeightChange: true });
}
@@ -235,7 +232,6 @@ export default class PostStreamScrubber extends Component {
* Go to the last post in the discussion.
*/
goToLast() {
- this.lastPosition = this.stream.index;
this.stream.goToLast();
this.updateScrubberValues({ animate: true, forceHeightChange: true });
}
@@ -261,7 +257,6 @@ export default class PostStreamScrubber extends Component {
this.mouseStart = e.clientY || e.originalEvent.touches[0].clientY;
this.indexStart = this.stream.index;
this.dragging = true;
- this.lastPosition = this.stream.index;
$('body').css('cursor', 'move');
this.$().toggleClass('dragging', this.dragging);
}
@@ -278,7 +273,7 @@ export default class PostStreamScrubber extends Component {
const deltaIndex = deltaPercent / this.percentPerPost().index || 0;
const newIndex = Math.min(this.indexStart + deltaIndex, this.stream.count() - 1);
- this.stream.index = Math.max(0, newIndex);
+ this.pendingMoveIndex = Math.max(0, newIndex);
this.updateScrubberValues();
}
@@ -295,8 +290,9 @@ export default class PostStreamScrubber extends Component {
// If the index we've landed on is in a gap, then tell the stream-
// content that we want to load those posts.
- const intIndex = Math.floor(this.stream.index);
+ const intIndex = Math.floor(this.pendingMoveIndex);
this.stream.goToIndex(intIndex);
+ this.pendingMoveIndex = null;
}
onclick(e) {
@@ -308,7 +304,6 @@ export default class PostStreamScrubber extends Component {
const $scrollbar = this.$('.Scrubber-scrollbar');
const offsetPixels = (e.pageY || e.originalEvent.touches[0].pageY) - $scrollbar.offset().top + $('body').scrollTop();
let offsetPercent = (offsetPixels / $scrollbar.outerHeight()) * 100;
- this.lastPosition = this.stream.index;
// 2. We want the handle of the scrollbar to end up centered on the click
// position. Thus, we calculate the height of the handle in percent and
diff --git a/js/src/forum/states/PostStreamState.js b/js/src/forum/states/PostStreamState.js
index b93ec9143..c49d284a6 100644
--- a/js/src/forum/states/PostStreamState.js
+++ b/js/src/forum/states/PostStreamState.js
@@ -22,6 +22,7 @@ class PostStreamState {
this.pagesLoading = 0;
this.index = 0;
+ this.previousIndex = 0;
this.number = 1;
/**
@@ -137,6 +138,7 @@ class PostStreamState {
this.needsScroll = true;
this.targetPost = { index };
this.animateScroll = !noAnimation;
+ this.previousIndex = (index === this.previousIndex) ? index : this.index;
this.index = index;
m.redraw();
diff --git a/less/forum/Scrubber.less b/less/forum/Scrubber.less
index b8de06671..c5f3173ec 100644
--- a/less/forum/Scrubber.less
+++ b/less/forum/Scrubber.less
@@ -24,20 +24,9 @@
}
.Scrubber-back {
position: absolute;
+ left: 12.5px;
z-index: 1;
-
- .icon {
- margin-left: -0.35em;
- color: @muted-color;
- }
-
- .Button {
- padding: 5px;
- position: absolute;
- left: 15px;
- top: -5px;
- width: initial;
- }
+ color: @muted-color;
}
.Scrubber-unread {
position: absolute;