MediaWiki:Vector.js

From bibbleWiki
Revision as of 23:09, 22 March 2025 by Iwiseman (talk | contribs) (Created page with "All JavaScript here will be loaded for users of the Vector skin: // Add copy buttons to all <syntaxhighlight> blocks document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("div.mw-highlight").forEach((block) => { const button = document.createElement("button"); button.className = "copy-button"; button.textContent = "Copy"; button.addEventListener("click", () => { const code = block.innerText;...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All JavaScript here will be loaded for users of the Vector skin */

// Add copy buttons to all <syntaxhighlight> blocks
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("div.mw-highlight").forEach((block) => {
        const button = document.createElement("button");
        button.className = "copy-button";
        button.textContent = "Copy";

        button.addEventListener("click", () => {
            const code = block.innerText;
            navigator.clipboard.writeText(code).then(() => {
                button.textContent = "Copied!";
                setTimeout(() => (button.textContent = "Copy"), 2000);
            });
        });

        block.style.position = "relative";
        block.style.paddingTop = "30px"; // Add space for the button
        button.style.position = "absolute";
        button.style.top = "10px";
        button.style.right = "10px";
        button.style.backgroundColor = "#444";
        button.style.color = "white";
        button.style.border = "none";
        button.style.borderRadius = "5px";
        button.style.padding = "5px 10px";
        button.style.cursor = "pointer";
        button.style.fontSize = "12px";

        block.appendChild(button);
    });
});