User:Enterprisey/parsoid-jump.js

( function {    var queryString = window.location.search,        targetIdMatch = /[?&]parsoid_jump=(.+?)($|&)/.exec( queryString ),        targetId = null;    if( targetIdMatch ) {        targetId = targetIdMatch[1];    } else if( document.cookie.indexOf( "parsoid_jump=" ) >= 0 ) {        targetId = /parsoid_jump=([^;]+)/.exec( document.cookie )[1];        document.cookie = "parsoid_jump=; expires=Thu, 01 Jan 1970 00:00:01 GMT";    } else {        return;    }

var liveTarget = document.getElementById( targetId ); if( liveTarget ) { liveTarget.scrollIntoView; return; }

mw.notify( "Jumping to the new content..." );

var CONTENT_SLICE_LEN = 20, parsoidEndpoint = "https:" + mw.config.get( "wgServer" ) + "/api/rest_v1/page/html/", parsoidUrl = parsoidEndpoint + encodeURIComponent( mw.config.get( "wgPageName" ) ) + "/" + mw.config.get( "wgCurRevisionId" ); $.get( parsoidUrl ).then( function ( domString ) {       var domParser = new DOMParser,            dom = domParser.parseFromString( domString, "text/html" ),            target = dom.getElementById( targetId );        if( !target ) {            console.error( "[parsoid-jump] Couldn't locate element with ID " + targetId + " in " + parsoidUrl );           return;        }

var tag = target.tagName.toLowerCase, classesSelector = target.className ? "." +           Array.prototype.join.call( target.classList, "." ) : "", fullSelector = tag + classesSelector, partialContent = target.textContent.slice(0, CONTENT_SLICE_LEN), hasSimilarContent = function ( el ) { return el.textContent.slice( 0, CONTENT_SLICE_LEN ) === partialContent; },

// Neat trick from https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc similarEls = Array.prototype.filter.call( dom.querySelectorAll( fullSelector ),           hasSimilarContent ), targetIdx = similarEls.indexOf( target );

// Now, try to find the element in the live DOM var liveSimilarEls = Array.prototype.filter.call( document.querySelectorAll( fullSelector ),           hasSimilarContent ); if( !liveSimilarEls ) { console.error( "[parsoid-jump] Couldn't locate any live elements with tag " +               tag + " and partial content " + partialContent ); return; }

var liveEl = liveSimilarEls[targetIdx]; if( !liveEl ) { console.error( "[parsoid-jump] Tried to get the live similar element at index " +               targetIdx + ", but there were only " + liveSimilarEls.length + " of them" ); return; }

liveEl.scrollIntoView; if( !window.parsoidJumpNoHighlight ) { mw.loader.addStyleTag( "@keyframes highlight { from { background-color: #ffb; } to { background-color: transparent; } } .psj-highlight { animation: highlight 2s; }" ); liveEl.className += " psj-highlight"; }   } ); } );