Skip to content

Commit

Permalink
Scroll to the root comment of thread on middle click on thread line
Browse files Browse the repository at this point in the history
Change-Id: I9b52d8042556ffde31ef7ffbc922f7494e13b625
  • Loading branch information
jwbth committed May 28, 2024
1 parent a329346 commit 977d76c
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 11 deletions.
25 changes: 16 additions & 9 deletions src/Comment.js
Original file line number Diff line number Diff line change
Expand Up @@ -2338,7 +2338,7 @@ class Comment extends CommentSkeleton {
}

/**
* Scroll to the comment if it is not in the viewport.
* Scroll to the comment if it is not in the viewport. See also {@link Comment#scrollTo}.
*
* @param {'top'|'center'|'bottom'} alignment Where should the element be positioned relative to
* the viewport.
Expand All @@ -2348,7 +2348,8 @@ class Comment extends CommentSkeleton {
}

/**
* Scroll to the comment and (by default) flash it as a target.
* Scroll to the comment and (by default) flash it as a target. See also
* {@link Comment#scrollIntoView}.
*
* @param {object} [options]
* @param {boolean} [options.smooth=true] Use a smooth animation.
Expand All @@ -2358,13 +2359,16 @@ class Comment extends CommentSkeleton {
* @param {boolean} [options.pushState=false] Whether to push a state to the history with the
* comment ID as a fragment.
* @param {Function} [options.callback] Callback to run after the animation has completed.
* @param {'top'|'center'|'bottom'} [options.alignment] Where should the element be positioned
* relative to the viewport.
*/
scrollTo({
smooth = true,
expandThreads = false,
flash = true,
pushState = false,
callback,
alignment,
} = {}) {
if (expandThreads) {
this.expandAllThreadsDownTo();
Expand All @@ -2377,7 +2381,7 @@ class Comment extends CommentSkeleton {
}

if (this.isCollapsed) {
this.getVisibleExpandNote().cdScrollTo('top', smooth, callback);
this.getVisibleExpandNote().cdScrollTo(alignment || 'top', smooth, callback);
const notification = mw.notification.notify(
wrapHtml(cd.sParse('navpanel-firstunseen-hidden'), {
callbacks: {
Expand All @@ -2398,13 +2402,16 @@ class Comment extends CommentSkeleton {
} else {
const offset = this.getOffset({ considerFloating: true });
(this.editForm?.$element || this.$elements).cdScrollIntoView(
alignment ||
(
this.isOpeningSection ||
this.editForm ||
(offset && offset.bottom !== offset.bottomForVisibility)
) ?
'top' :
'center',
(
this.isOpeningSection ||
this.editForm ||
(offset && offset.bottom !== offset.bottomForVisibility)
) ?
'top' :
'center'
),
smooth,
callback
);
Expand Down
22 changes: 20 additions & 2 deletions src/Thread.js
Original file line number Diff line number Diff line change
Expand Up @@ -260,12 +260,29 @@ class Thread {
this.clickArea?.classList.remove('cd-thread-clickArea-hovered');
}

/**
* Handle the `mousedown` event on the click area.
*
* @param {Event} e
* @private
*/
handleClickAreaMouseDown(e) {
if (!this.clickArea.classList.contains('cd-thread-clickArea-hovered')) return;

// Middle button
if (!this.rootComment.isCollapsed && e.button === 1) {
e.preventDefault();
this.handleClickAreaUnhover();
this.rootComment.scrollTo({ alignment: 'top' });
}
}

/**
* Handle the `click` event on the click area.
*
* @private
*/
handleToggleClick() {
handleClickAreaClick() {
if (!this.clickArea.classList.contains('cd-thread-clickArea-hovered')) return;

this.toggle();
Expand All @@ -292,7 +309,8 @@ class Thread {
this.clickArea.onmouseenter = this.handleClickAreaHover.bind(this);
this.clickArea.onmouseleave = this.handleClickAreaUnhover.bind(this);

this.clickArea.onclick = this.handleToggleClick.bind(this);
this.clickArea.onmousedown = this.handleClickAreaMouseDown.bind(this);
this.clickArea.onclick = this.handleClickAreaClick.bind(this);

/**
* Thread line.
Expand Down

0 comments on commit 977d76c

Please sign in to comment.