Facepunch quick post scroll

Makes clicking on a post link in a quote immediately scroll to the post if it's on the same page, rather than reloading the page, and updates the URL so the post can be easily linked to. Shows a different cursor to indicate when the page will be scrolled.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name			Facepunch quick post scroll
// @version			2.3
// @description		Makes clicking on a post link in a quote immediately scroll to the post if it's on the same page, rather than reloading the page, and updates the URL so the post can be easily linked to. Shows a different cursor to indicate when the page will be scrolled.
// @match			https://forum.facepunch.com/*
// @namespace		https://greasyfork.org/users/28313
// ==/UserScript==

( function() {
	'use strict';

	var posts;
	var findPost = function( e ) {
		if ( !e.target || !e.target.matches( 'postquote > div > .head > a' ) ) {
			return;
		}

		posts = posts || document.getElementsByClassName( 'postrender' );

		var postFragment = e.target.href.match( /\/f\/p\/(\d+)\/$/ );
		if ( !postFragment ) {
			return;
		}

		var postId = postFragment[1];
		var post;
		for ( var postRender of posts ) {
			if ( postId === postRender.__vue__.$options.propsData.postid ) {
				post = postRender.closest( '.postblock' );
				break;
			}
		}

		if ( !post ) {
			return;
		}

		// Indicate that the link will scroll the page rather than load a different one
		e.target.style.cursor = 'alias';

		// Only do the scroll when clicking
		if ( e.type === 'click' ) {
			history.pushState( {}, '', '#' + post.id );
			post.scrollIntoView( { behavior: 'smooth' } );

			e.preventDefault();
		}
	};

	var threadSections = document.querySelectorAll( '.threadviewsection, .threadreplysection' );
	if ( !threadSections.length ) {
		return;
	}

	// Bind event on hover to add styling, and on click to do the scroll
	for ( var section of threadSections ) {
		section.addEventListener( 'mouseover', findPost, false );
		section.addEventListener( 'click', findPost, false );
	}

}() );