Booru Tags Hauler

Adds a 'Copy all tags' button to the thumbnail hover preview tooltip. Copy all of a tooltip tags instantly!
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name            Booru Tags Hauler
// @name:ru         Booru Tags Hauler
// @namespace       https://github.com/vanja-san/JS-UserScripts/main/scripts/Booru%20Tags%20Hauler
// @version         1.9.9
// @description     Adds a 'Copy all tags' button to the thumbnail hover preview tooltip. Copy all of a tooltip tags instantly!
// @description:ru  Добавляет кнопку 'Скопировать все теги' во всплывающую подсказку при наведении на превью. Копируйте все теги картинки, не открывая её страницу! Существенная экономия времени.
// @author          vanja-san
// @license         MIT
// @match           https://danbooru.donmai.us/*
// @match           https://safebooru.donmai.us/*
// @match           https://hijiribe.donmai.us/*
// @icon            https://www.google.com/s2/favicons?sz=64&domain=donmai.us
// @grant           GM_addStyle
// @grant           GM_registerMenuCommand
// @grant           GM_getValue
// @grant           GM_setValue
// ==/UserScript==

(function () {
  "use strict";

  // ===== MODERN LOCALIZATION SYSTEM =====
  const localization = {
    en: {
      title: "Copy all tags",
      notification: "Tags copied to clipboard!",
      settings: "Settings",
      formatting: "Tag Formatting",
      addCommas: "Add commas between tags",
      escapeParentheses: "Escape parentheses (\\( \\))",
      escapeColons: "Escape colons (\\:)",
      replaceUnderscores: "Replace Underscores",
      languageSettings: "Language Settings",
      language: "Language:",
      langAuto: "System default",
      langEn: "English",
      langRu: "Russian",
      buttonText: "Copy tags",
      saveButton: "Save",
      savedButton: "Saved!",
      cancelButton: "Close",
      savedNotification: "Settings saved!",
      reloadNotice: "PLEASE NOTE: Page reload required for language change",
    },
    ru: {
      title: "Скопировать все теги",
      notification: "Теги скопированы в буфер!",
      settings: "Настройки",
      formatting: "Форматирование тегов",
      addCommas: "Добавлять запятые между тегами",
      escapeParentheses: "Экранировать скобки (\\( \\))",
      escapeColons: "Экранировать двоеточия (\\:)",
      replaceUnderscores: "Заменять нижнии подчеркивания пробелами",
      languageSettings: "Настройки языка",
      language: "Язык:",
      langAuto: "Как в системе",
      langEn: "Английский",
      langRu: "Русский",
      buttonText: "Скопировать теги",
      saveButton: "Сохранить",
      savedButton: "Сохранено!",
      cancelButton: "Закрыть",
      savedNotification: "Настройки сохранены!",
      reloadNotice: "ВНИМАНИЕ: Для смены языка требуется перезагрузка страницы",
    }
  };

  // ===== CORE SETTINGS =====
  const DEFAULT_SETTINGS = {
    addCommas: true,
    escapeParentheses: true,
    escapeColons: false,
    replaceUnderscores: true,
    language: "auto"
  };

  const SETTINGS = {
    ...DEFAULT_SETTINGS,
    ...GM_getValue("tagCopierSettings", {}),
  };

  // ===== DYNAMIC LANGUAGE MANAGEMENT =====
  let currentLang = "en";

  function updateLanguage() {
    if (SETTINGS.language === "auto") {
      const systemLang = navigator.language.toLowerCase();
      currentLang = systemLang.startsWith("ru") ? "ru" : "en";
    } else {
      currentLang = SETTINGS.language;
    }
    return currentLang;
  }

  function t(key) {
    const lang = updateLanguage();
    return localization[lang]?.[key] || localization.en[key] || key;
  }

  // Initialize language
  updateLanguage();

  // ===== STYLE MANAGEMENT =====
  function applyGlobalStyles() {
    GM_addStyle(`
      .tag-copy-btn {
        display: flex;
        background: rgba(0, 0, 0, 0.7) !important;
        color: var(--muted-text-color);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10000;
        border: none !important;
        border-radius: 4px;
        padding: 0;
        width: 28px;
        height: 28px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        gap: .2rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out;
        will-change: opacity;
      }

      .tag-copy-btn.visible {
        opacity: 1;
        pointer-events: auto;
      }

      .tag-copy-btn.with-text {
        width: auto;
      }

      .tag-copy-btn.with-text-left {
        justify-content: flex-start;
      }

      .tag-copy-btn.with-text-right {
        justify-content: flex-end;
      }

      .tag-copy-btn:hover {
        color: #4CAF50 !important;
        background: rgba(0, 0, 0, 0.9) !important;
      }

      .tag-copy-btn.copied {
        color: #2196F3 !important;
      }

      .tag-copy-btn svg {
        height: .9rem;
        stroke-width: 2;
        flex-shrink: 0;
      }

      .tag-copy-btn .btn-text {
        white-space: nowrap;
      }

      /* Save button feedback */
      #saveSettings.saved { background: #2196F3 !important; }
    `);
  }

  applyGlobalStyles();

  // ===== UI COMPONENTS =====
  const copyIcon = createCopyIcon();
  const checkIcon = createCheckIcon();
  
  // Helper function to create SVG elements
  function createSvgElement(tag, attrs = {}) {
    const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
    Object.keys(attrs).forEach(key => {
      element.setAttribute(key, attrs[key]);
    });
    return element;
  }
  
  // Helper function to create SVG icons with common attributes
  function createSvgIcon(children = [], attrs = {}) {
    const svg = createSvgElement("svg", {
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      ...attrs
    });
    
    children.forEach(child => svg.appendChild(child));
    return svg;
  }

  function createCopyIcon() {
    const rect = createSvgElement("rect", {
      x: "9",
      y: "9",
      width: "13",
      height: "13",
      rx: "2"
    });
    
    const path = createSvgElement("path", {
      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
    });
    
    return createSvgIcon([rect, path]);
  }

  function createCheckIcon() {
    const path = createSvgElement("path", {
      d: "M20 6L9 17l-5-5"
    });
    
    return createSvgIcon([path]);
  }

  // ===== MEMORY LEAK PREVENTION =====
  let currentPreview = null;
  let copyButton = null;
  let hideTimeout = null;
  let isMouseOverPreview = false;
  let isMouseOverButton = false;
  let currentPreviewLink = null;

  // ===== MAIN FUNCTIONALITY =====
  function initCopyButton() {
    // Create a single global copy button
    copyButton = document.createElement("button");
    copyButton.className = "tag-copy-btn";
    copyButton.title = t("title");

    // Clone the copy icon and append it to the button
    const iconClone = copyIcon.cloneNode(true);
    copyButton.appendChild(iconClone);

    // Add click handler
    copyButton.addEventListener("click", async (e) => {
      e.stopPropagation();
      e.preventDefault();

      if (!currentPreview) return;

      // Get the post ID and tags from the current preview's parent article
      const article = currentPreview.closest('article');
      if (!article) return;

      const tagsString = article.dataset.tags;
      if (!tagsString) return;

      // Format tags according to settings
      let formattedTags = tagsString;

      // Apply transformations in correct order
      if (SETTINGS.escapeParentheses) {
        formattedTags = formattedTags.replace(/\\/g, "\\\\").replace(/\(/g, "\\(").replace(/\)/g, "\\)");
      }

      if (SETTINGS.escapeColons) {
        formattedTags = formattedTags.replace(/:/g, "\\:");
      }

      // Split tags by space, process each tag, then join back
      if (SETTINGS.replaceUnderscores || SETTINGS.addCommas) {
        const tags = formattedTags.split(' ');
        const processedTags = tags.map(tag => {
          // Replace underscores with spaces within each tag
          if (SETTINGS.replaceUnderscores) {
            tag = tag.replace(/_/g, ' ');
          }
          return tag;
        });

        // Join tags with comma+space if needed, otherwise with space
        if (SETTINGS.addCommas) {
          formattedTags = processedTags.join(', ');
        } else {
          formattedTags = processedTags.join(' ');
        }
      }

      try {
        await navigator.clipboard.writeText(formattedTags);
        showFeedback(copyButton);
      } catch (err) {
        console.error("Copy error:", err);
      }
    });

    // Add mouse events to the button itself
    copyButton.addEventListener('mouseenter', () => {
      // Clear any pending hide timeout when mouse enters the button
      isMouseOverButton = true;
      clearHideTimeout();
    });

    copyButton.addEventListener('mouseleave', (e) => {
      isMouseOverButton = false;
      // Only hide if mouse is not over preview
      if (!isMouseOverPreview) {
        scheduleHideButton();
      }
    });
  }

  function showFeedback(btn) {
    // Store the original content
    const originalContent = btn.cloneNode(true);

    // Clear the button and add check icon
    btn.innerHTML = '';
    const checkClone = checkIcon.cloneNode(true);
    btn.appendChild(checkClone);
    btn.classList.add("copied");

    // Change background to indicate successful copy
    const originalBg = btn.style.background;
    btn.style.background = "rgba(33, 150, 243, 0.9)"; // Blue color for success

    setTimeout(() => {
      // Restore original content
      btn.innerHTML = '';
      const originalIcon = originalContent.firstChild.cloneNode(true);
      btn.appendChild(originalIcon);
      btn.classList.remove("copied");
      // Restore original background
      btn.style.background = originalBg || "rgba(0, 0, 0, 0.7)";
    }, 2000);
  }

  function positionButton(previewElement) {
    if (!copyButton || !previewElement) return;

    // Find the post-preview-link element
    const previewLink = previewElement.querySelector('.post-preview-link');
    if (!previewLink) return;

    // Append button directly to the preview link
    previewLink.style.position = 'relative';
    previewLink.appendChild(copyButton);

    // Position button in the bottom-right corner of the link
    Object.assign(copyButton.style, {
      position: 'absolute',
      bottom: '5px',
      right: '5px',
      zIndex: '10'
    });
  }

  function showButton(previewElement) {
    if (!copyButton) return;

    // Clear any pending hide timeout
    clearHideTimeout();

    currentPreview = previewElement;
    positionButton(previewElement);

    // Add a small delay before showing to prevent flickering
    hideTimeout = setTimeout(() => {
      copyButton.classList.add('visible');
    }, 50);
  }

  function scheduleHideButton() {
    // Clear any pending hide timeout
    clearHideTimeout();

    // Schedule hiding with delay
    hideTimeout = setTimeout(() => {
      if (!isMouseOverPreview && !isMouseOverButton) {
        hideButton();
      }
    }, 200);
  }

  function clearHideTimeout() {
    if (hideTimeout) {
      clearTimeout(hideTimeout);
      hideTimeout = null;
    }
  }

  function hideButton() {
    if (!copyButton) return;

    clearHideTimeout();
    copyButton.classList.remove('visible');
    currentPreview = null;
  }

  function attachHoverHandlers() {
    // Attach hover handlers to all post previews
    const postPreviews = document.querySelectorAll('article > .post-preview-container');

    postPreviews.forEach(preview => {
      preview.addEventListener('mouseenter', () => {
        isMouseOverPreview = true;
        showButton(preview);
      });

      preview.addEventListener('mouseleave', (e) => {
        isMouseOverPreview = false;
        // Only schedule hide if mouse is not over button
        if (!isMouseOverButton) {
          scheduleHideButton();
        }
      });
    });
  }

  function addCopyButton() {
    // Attach hover handlers to existing previews
    attachHoverHandlers();
  }

  // ===== SETTINGS EDITOR =====
  // Helper function to create DOM elements with properties and styles
  function createElement(tag, props = {}, styles = {}) {
    const element = document.createElement(tag);

    // Set properties/attributes
    Object.keys(props).forEach(key => {
      if (key === 'textContent' || key === 'innerHTML') {
        element[key] = props[key];
      } else {
        element.setAttribute(key, props[key]);
      }
    });

    // Set styles
    Object.keys(styles).forEach(key => {
      element.style[key] = styles[key];
    });

    return element;
  }
  
  // Helper function to create checkbox setting
  function createCheckboxSetting(id, labelKey, isChecked, isDarkMode) {
    const container = createElement("div", {}, {
      display: "flex",
      alignItems: "center",
      padding: "8px",
      border: `1px solid ${isDarkMode ? "var(--default-border-color)" : "#ddd"}`,
      borderRadius: "3px",
      background: isDarkMode ? "var(--grey-7)" : "#f9f9f9",
      cursor: "pointer",
      marginBottom: "4px"
    });

    const input = createElement("input", {
      type: "checkbox",
      id: id
    }, {
      marginRight: "6px",
      transform: "scale(1.1)"
    });
    if (isChecked) {
      input.checked = true;
    }
    container.appendChild(input);

    const label = createElement("label", { 
      textContent: t(labelKey),
      htmlFor: id
    }, {
      color: isDarkMode ? "var(--text-color)" : "#333",
      cursor: "pointer",
      flex: "1"
    });
    container.appendChild(label);

    // Add click handler to container
    container.addEventListener("click", (e) => {
      // Don't trigger if clicking on the checkbox itself
      if (e.target !== input) {
        input.checked = !input.checked;
      }
    });

    return { container, input, label };
  }
  
  // Helper function to update button text with temporary feedback
  function updateButtonTextWithFeedback(button, defaultText, feedbackText, className, duration = 3000) {
    button.textContent = feedbackText;
    if (className) button.classList.add(className);
    
    setTimeout(() => {
      button.textContent = defaultText;
      if (className) button.classList.remove(className);
    }, duration);
  }
  
  function createSettingsEditor() {
    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

    // Create editor content using helper function
    const editor = createElement("div", { id: "tag-copier-editor" });

    const editorContainer = createElement("div", {}, {
      position: "fixed",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      padding: "5px 10px 10px 10px",
      border: `1px solid ${isDarkMode ? "var(--default-border-color)" : "#ddd"}`,
      borderRadius: "4px",
      boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.08)",
      zIndex: "9999",
      fontFamily: "Tahoma, Verdana, Helvetica, sans-serif",
      width: "300px",
      maxWidth: "90vw",
      maxHeight: "90vh",
      overflowY: "auto",
      background: isDarkMode ? "var(--post-tooltip-background-color)" : "white",
      userSelect: "none"
    });

    const heading = createElement("h2", { textContent: t("settings") }, {
      margin: "0 0 12px 0",
      textAlign: "center",
      color: isDarkMode ? "var(--header-color)" : "#000"
    });
    editorContainer.appendChild(heading);

    // Create settings container
    const settingsContainer = createElement("div", {}, {
      display: "flex",
      flexDirection: "column",
      gap: "10px",
      marginBottom: "20px"
    });

    // Add commas checkbox
    const { container: addCommasContainer, input: addCommasInput } = createCheckboxSetting(
      "addCommas", 
      "addCommas", 
      SETTINGS.addCommas, 
      isDarkMode
    );

    settingsContainer.appendChild(addCommasContainer);

    // Escape parentheses checkbox
    const { container: escapeParenthesesContainer, input: escapeParenthesesInput } = createCheckboxSetting(
      "escapeParentheses", 
      "escapeParentheses", 
      SETTINGS.escapeParentheses, 
      isDarkMode
    );

    settingsContainer.appendChild(escapeParenthesesContainer);

    // Escape colons checkbox
    const { container: escapeColonsContainer, input: escapeColonsInput } = createCheckboxSetting(
      "escapeColons", 
      "escapeColons", 
      SETTINGS.escapeColons, 
      isDarkMode
    );

    settingsContainer.appendChild(escapeColonsContainer);

    // Replace underscores checkbox
    const { container: replaceUnderscoresContainer, input: replaceUnderscoresInput } = createCheckboxSetting(
      "replaceUnderscores", 
      "replaceUnderscores", 
      SETTINGS.replaceUnderscores, 
      isDarkMode
    );

    settingsContainer.appendChild(replaceUnderscoresContainer);

    // Language settings
    const languageContainer = createElement("div", {}, {
      display: "flex",
      alignItems: "center",
      padding: "8px",
      border: `1px solid ${isDarkMode ? "var(--default-border-color)" : "#ddd"}`,
      borderRadius: "3px",
      background: isDarkMode ? "var(--grey-7)" : "#f9f9f9",
      marginBottom: "0",
      cursor: "default"
    });

    const languageLabel = createElement("label", {
      textContent: t("language"),
      htmlFor: "language"
    }, {
      color: isDarkMode ? "var(--text-color)" : "#333",
      marginRight: "10px",
      cursor: "default"
    });
    languageContainer.appendChild(languageLabel);

    const languageSelect = createElement("select", { id: "language" }, {
      background: isDarkMode ? "var(--grey-6)" : "#ffffff",
      color: isDarkMode ? "#fff" : "#333",
      padding: "6px",
      borderRadius: "3px",
      border: `2px solid ${isDarkMode ? "#4a90e2" : "#007bff"}`,
      flex: "1",
      boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
    });

    const autoOption = createElement("option", {
      value: "auto",
      textContent: t("langAuto")
    });
    if (SETTINGS.language === "auto") {
      autoOption.selected = true;
    }
    languageSelect.appendChild(autoOption);

    const enOption = createElement("option", {
      value: "en",
      textContent: t("langEn")
    });
    if (SETTINGS.language === "en") {
      enOption.selected = true;
    }
    languageSelect.appendChild(enOption);

    const ruOption = createElement("option", {
      value: "ru",
      textContent: t("langRu")
    });
    if (SETTINGS.language === "ru") {
      ruOption.selected = true;
    }
    languageSelect.appendChild(ruOption);

    languageContainer.appendChild(languageSelect);
    settingsContainer.appendChild(languageContainer);

    editorContainer.appendChild(settingsContainer);

    // Buttons container
    const buttonsContainer = createElement("div", {}, {
      display: "flex",
      justifyContent: "end"
    });

    const saveButton = createElement("button", {
      id: "saveSettings",
      textContent: t("saveButton")
    }, {
      padding: "6px 12px",
      background: "#4CAF50",
      color: "white",
      border: "none",
      borderRadius: "2px",
      cursor: "pointer",
      fontWeight: "bold"
    });
    buttonsContainer.appendChild(saveButton);

    const closeButton = createElement("button", {
      id: "closeEditor",
      textContent: t("cancelButton")
    }, {
      marginLeft: "10px",
      padding: "6px 12px",
      background: "#f44336",
      color: "white",
      border: "none",
      borderRadius: "2px",
      cursor: "pointer"
    });
    buttonsContainer.appendChild(closeButton);

    editorContainer.appendChild(buttonsContainer);
    editor.appendChild(editorContainer);

    // Add event handlers
    closeButton.addEventListener("click", () => {
      document.body.removeChild(editor);
    });

    const getInputValue = (id) => {
      const el = document.getElementById(id);
      if (!el) return null;
      if (el.type === "checkbox") return el.checked;
      if (el.type === "range" || el.type === "number") {
        return parseFloat(el.value);
      }
      return el.value;
    };

    const saveSettings = () => {
      const newSettings = {
        addCommas: getInputValue("addCommas"),
        escapeParentheses: getInputValue("escapeParentheses"),
        escapeColons: getInputValue("escapeColons"),
        replaceUnderscores: getInputValue("replaceUnderscores"),
        language: getInputValue("language"),
      };

      // Update global settings
      Object.assign(SETTINGS, newSettings);
      GM_setValue("tagCopierSettings", SETTINGS);

      // Apply changes
      document.querySelectorAll(".tag-copy-btn").forEach((btn) => {
        btn.title = t("title");
        // Update button content (only icon)
        btn.innerHTML = '';
        const iconClone = copyIcon.cloneNode(true);
        btn.appendChild(iconClone);
      });

      // Update button text with feedback
      updateButtonTextWithFeedback(saveButton, t("saveButton"), t("savedButton"), "saved", 3000);
    };

    saveButton.addEventListener("click", saveSettings);

    return editor;
  }

  function openSettingsEditor() {
    const existingEditor = document.getElementById("tag-copier-editor");
    if (existingEditor) return;

    const editor = createSettingsEditor();
    document.body.appendChild(editor);
  }

  // ===== INITIALIZATION =====
  GM_registerMenuCommand(t("settings"), openSettingsEditor);

  // Global variables for observer and event handlers
  let observer = null;
  let throttleTimer = null;

  // Optimized observer with throttling
  function initObserver() {
    if (observer) {
      observer.disconnect();
    }

    observer = new MutationObserver(() => {
      // Throttling to reduce frequency of calls
      if (throttleTimer) return;

      throttleTimer = setTimeout(() => {
        addCopyButton();
        throttleTimer = null;
      }, 100); // Ограничиваем частоту вызовов до 10 раз в секунду
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }

  // Initialize with optimized observer
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      initCopyButton(); // Initialize the single copy button
      initObserver();
      addCopyButton();
    });
  } else {
    initCopyButton(); // Initialize the single copy button
    initObserver();
    addCopyButton();
  }

  // Handle PJAX navigation (used by Danbooru)
  document.addEventListener('pjax:end', function() {
    // Reattach hover handlers to new previews
    attachHoverHandlers();
  });

  // Cleanup function for potential script re-initialization
  window.addEventListener('beforeunload', () => {
    if (observer) {
      observer.disconnect();
      observer = null;
    }
    if (throttleTimer) {
      clearTimeout(throttleTimer);
      throttleTimer = null;
    }
    // Remove the copy button from the DOM
    if (copyButton && copyButton.parentNode) {
      copyButton.parentNode.removeChild(copyButton);
    }
  });
})()