☰

MetaFilter highlight selected comment

On MetaFilter.com, adds a border to the selected comment to make it stand out visually, and adds "selected comment" to the small text to make it easy to search if you lose your place.

// ==UserScript==
// @name        MetaFilter highlight selected comment
// @version     14
// @grant       none
// @match       *://*.metafilter.com/*
// @description On MetaFilter.com, adds a border to the selected comment to make it stand out visually, and adds "selected comment" to the small text to make it easy to search if you lose your place.
// @namespace   https://greasyfork.org/users/324881
// ==/UserScript==

// on load, run highlight and attach event listeners
if (window.location.hash.substring(1) != "") highlightSelectedComment(window.location.hash.substring(1)); // Highlight selected comment on first load. No need to remove highlight on first load as it won't exist.
window.addEventListener('hashchange', handleHashChangeEvent); // Run every time the hash changes.

function handleHashChangeEvent(event) {
  if (event.oldURL.split('#')[1] != null) removeSelectedCommentHighlight(event.oldURL.split('#')[1]);
  if (event.newURL.split('#')[1] != null) highlightSelectedComment(event.newURL.split('#')[1]);
}

function highlightSelectedComment(newHash) {
  let divToHighlight = getTargetDiv(newHash);
  divToHighlight.style.outline = '.2em solid #9cc754';
  divToHighlight.style.outlineOffset = '.2em';
  //divToHighlight.lastChild.innerHTML += '<span class=\'tehhundUserScriptSelectedComment\'>Selected comment. </span>';
  divToHighlight.querySelector('.smallcopy').innerHTML += '<span class=\'tehhundUserScriptSelectedComment\'>Selected comment. </span>';
}

function removeSelectedCommentHighlight(oldHash) {
  let commentDiv = getTargetDiv(oldHash);

  // Remove styles
  commentDiv.style.outline = '';
  commentDiv.style.outlineOffset = '';

  // Remove 'Selected comment' text
  let allSelectedCommentsSpans = commentDiv.getElementsByClassName('tehhundUserScriptSelectedComment');
  for (selectedCommentSpan of allSelectedCommentsSpans) {
    selectedCommentSpan.remove();
  }
}

function getTargetDiv(hash) {
  let anchor = document.getElementsByName(hash)[0];
  let targetDiv = anchor.nextSibling;
  return targetDiv;
}