User:Referentis/diff-link.js

/**
 * Show "copy" links on history and contribution pages that copy
 * "Special:Diff/XYZ" to your clipboard when clicked.
 *
 * Inspired by [[User:BrandonXLF/ShowRevisionID.js]] and
 * [[User:Enterprisey/diff-permalink.js]]
 *
 * Written by [[User:Rublov]] at [[User:Rublov/diff-link.js]], June 2021
 * Fixed to prevent "null" errors on Vector 2022
 *
 * This script was developed on GitHub: https://github.com/rublovwiki/scripts
 */

const INPUT_ID = "user-rublov-diff-link";

$(function () {
  // diff-link works on the history and contributions pages.
  if (location.search.includes("action=history")) {
    initializePage(
      /* copyBoxLocation= */ ".mw-history-compareselectedversions",
      /* copyLinkLocation= */ "span.mw-history-histlinks"
    );
  } else if (location.href.includes("Special:Contributions")) {
    initializePage(
      /* copyBoxLocation= */ ".mw-pager-navigation-bar",
      /* copyLinkLocation= */ "span.mw-changeslist-links"
    );
  }
});

/**
 * Set up diff-link on the page by appending the copy box after the element
 * identified by the selector `copyBoxLocation`, and for each entry in the
 * revision list, adding a copy link to the element identified by the selector
 * `copyLinkLocation`.
 */
function initializePage(copyBoxLocation, copyLinkLocation) {
  const targetElement = document.querySelector(copyBoxLocation);
  
  // SAFETY CHECK: If the target element isn't found, stop to prevent a crash
  if (!targetElement) {
    return;
  }

  targetElement.after(makeCopyBox());

  const items = document.querySelectorAll("li[data-mw-revid]");
  for (let item of items) {
    const diffLink = "Special:Diff/" + item.getAttribute("data-mw-revid");
    const nav = item.querySelector(copyLinkLocation);
    
    // SAFETY CHECK: Ensure the nav element exists before appending
    if (nav) {
      nav.appendChild(makeCopyLink(diffLink));
    }
  }
}

/**
 * Make the <a> element that copies the diff link when clicked.
 */
function makeCopyLink(diffLink) {
  const e = document.createElement("a");
  e.textContent = "copy";
  
  e.addEventListener("click", (event) => {
    event.preventDefault();
    // This copies the diff link to the clipboard by (1) putting the diff link
    // in the input box created by `makeCopyBox` and (2) selecting the input
    // box and using `document.execCommand("copy")` to copy the text to the
    // user's clipboard.
    const input = document.getElementById(INPUT_ID);
    input.value = diffLink;
    input.select();
    document.execCommand("copy");
  });
  
  const span = document.createElement("span");
  span.appendChild(e);
  return span;
}

/**
 * Make the <input> element that holds the text to be copied to the clipboard.
 */
function makeCopyBox() {
  const input = document.createElement("input");
  input.setAttribute("id", INPUT_ID);
  
  const div = document.createElement("div");
  div.append(document.createTextNode("Diff link: "));
  div.appendChild(input);
  
  return div;
}