☰

MeFi replace quote label

MetaFilter: nicer MefiQuote buttons

当前为 2025-04-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         MeFi replace quote label
  3. // @namespace    https://github.com/klipspringr/mefi-userscripts
  4. // @version      2025-04-02
  5. // @description  MetaFilter: nicer MefiQuote buttons
  6. // @author       Klipspringer
  7. // @supportURL   https://github.com/klipspringr/mefi-userscripts
  8. // @license      MIT
  9. // @match        *://*.metafilter.com/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. const SVG_REPLY = `<svg xmlns="http://www.w3.org/2000/svg" hidden viewBox="0 0 100 80"><path id="mrql-reply" fill="currentColor" d="M 69.941 48.117 C 72.437 48.117 74.776 47.63 76.959 46.657 C 79.142 45.684 81.043 44.37 82.66 42.715 C 84.279 41.06 85.555 39.134 86.491 36.934 C 87.427 34.735 87.894 32.39 87.894 29.898 C 87.894 27.406 87.427 25.071 86.491 22.891 C 85.555 20.711 84.279 18.803 82.66 17.169 C 81.043 15.532 79.142 14.248 76.959 13.314 C 74.776 12.379 72.437 11.912 69.941 11.912 L 68.071 12.087 L 68.071 0 L 69.941 0 C 74.074 0 77.963 0.779 81.608 2.336 C 85.253 3.892 88.441 6.024 91.169 8.729 C 93.899 11.435 96.053 14.608 97.632 18.249 C 99.211 21.888 100 25.772 100 29.898 C 100 34.025 99.211 37.908 97.632 41.548 C 96.053 45.187 93.899 48.37 91.169 51.095 C 88.441 53.82 85.253 55.972 81.608 57.548 C 77.963 59.125 74.074 59.913 69.941 59.913 L 23.626 59.913 L 44.036 80 L 27.953 80 L 0 53.723 L 27.953 28.028 L 44.036 28.028 L 23.626 48.117 L 69.941 48.117 Z" /></svg>`;
  14. const SVG_USE_REPLY = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="0.8em" viewBox="0 0 100 80"><use href="#mrql-reply" /></svg>`;
  15.  
  16. const getSetting = (key) => {
  17.     try {
  18.         return localStorage.getItem(key) || null;
  19.     } catch {
  20.         return null;
  21.     }
  22. };
  23.  
  24. const modifyQuoteButton = (quoteButtonNode, customText) => {
  25.     // replace quote button content
  26.     quoteButtonNode.innerHTML = customText || SVG_USE_REPLY; // DOM manipulation would be faster, but innerHTML is fast enough
  27.  
  28.     // move quote button to before flag button
  29.     quoteButtonNode.parentNode.parentNode
  30.         .querySelector("span[id^='flag']")
  31.         ?.before(quoteButtonNode.parentNode);
  32.  
  33.     // mark as done so we don't pick this up again
  34.     quoteButtonNode.setAttribute("data-mrql-done", "");
  35. };
  36.  
  37. const modifyQuoteButtons = (customText) => {
  38.     const start = performance.now();
  39.  
  40.     const quoteButtonNodes = document.querySelectorAll(
  41.         'a[class="quotebutton"]:not([data-mrql-done])'
  42.     );
  43.  
  44.     for (const quoteButtonNode of quoteButtonNodes)
  45.         modifyQuoteButton(quoteButtonNode, customText);
  46.  
  47.     console.log(
  48.         "mefi-replace-quote-label",
  49.         quoteButtonNodes.length,
  50.         Math.round(performance.now() - start) + "ms"
  51.     );
  52. };
  53.  
  54. (() => {
  55.     if (!/^\/(\d|comments\.mefi)/.test(window.location.pathname)) return;
  56.  
  57.     const customText = getSetting("mefi-replace-quote-label");
  58.     if (!customText) document.body.insertAdjacentHTML("beforeend", SVG_REPLY);
  59.  
  60.     const runner = () => modifyQuoteButtons(customText);
  61.  
  62.     // MefiQuote listens for the "mefi-comments" event, but:
  63.     //    (a) my event listener wasn't picking that up, for some reason; and
  64.     //    (b) there could be timing issues as MefiQuote needs to complete its work first
  65.     // hence using MutationObserver instead.
  66.     const newCommentsElement = document.getElementById("newcomments");
  67.     if (newCommentsElement) {
  68.         const observer = new MutationObserver(runner);
  69.         observer.observe(newCommentsElement, { childList: true });
  70.     }
  71.  
  72.     runner();
  73. })();