Enhanced Copy PID with Persistent Popup and Optimizations

Copy PID to clipboard with persistent popup, hover highlight, and optimized performance.
Per 11-10-2024. Zie de nieuwste versie.
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==UserScript==
// @name         Enhanced Copy PID with Persistent Popup and Optimizations
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Copy PID to clipboard with persistent popup, hover highlight, and optimized performance.
// @author       You
// @match        *://.imvu.com/shop/product.php?products_id*
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function () {
    'use strict';

    const pidElement = document.querySelector('#product-cfl-pid'); // Cache the PID element

    if (!pidElement) return; // Exit if PID element is not found

    // Preload tooltip and popup elements
    const tooltip = document.createElement('div');
    tooltip.textContent = 'Click to Copy';
    tooltip.className = 'copy-tooltip';
    tooltip.style.position = 'absolute';
    tooltip.style.display = 'none'; // Initially hidden
    document.body.appendChild(tooltip);

    const popup = document.createElement('div');
    popup.textContent = 'Copied - Shop Spikes!';
    popup.className = 'copy-popup';
    popup.style.position = 'absolute';
    popup.style.display = 'none'; // Initially hidden
    document.body.appendChild(popup);

    // Function to handle copying to clipboard and showing popup
    function copyToClipboard(event) {
        const pidText = pidElement.textContent;

        // Remove tooltip when clicked
        tooltip.style.display = 'none';

        // Copy the PID number to the clipboard
        navigator.clipboard.writeText(pidText).then(() => {
            // Position popup relative to the PID element
            const rect = pidElement.getBoundingClientRect();
            popup.style.left = `${rect.left + window.scrollX + rect.width + 10}px`;
            popup.style.top = `${rect.top + window.scrollY}px`;
            popup.style.display = 'block';

            // Remove popup after 1.5 seconds
            setTimeout(() => {
                popup.style.display = 'none';
            }, 1500);
        });
    }

    // Function to show tooltip on hover
    function showTooltip(event) {
        // Position tooltip relative to the PID element
        const rect = pidElement.getBoundingClientRect();
        tooltip.style.left = `${rect.left + window.scrollX + rect.width + 10}px`;
        tooltip.style.top = `${rect.top + window.scrollY}px`;
        tooltip.style.display = 'block';
    }

    // Function to highlight PID element on hover
    function highlightOnHover() {
        pidElement.style.border = '2px solid #0073e6'; // Add blue border
        pidElement.style.backgroundColor = '#f0f8ff';  // Add light background color
    }

    // Function to remove highlight on mouseout
    function removeHighlight() {
        pidElement.style.border = ''; // Reset border
        pidElement.style.backgroundColor = ''; // Reset background color
        tooltip.style.display = 'none'; // Hide tooltip on mouseout
    }

    // Add styles for the popup, tooltip, and hover highlight
    GM_addStyle(`
        .copy-popup {
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            pointer-events: none;
            z-index: 1000;
            transition: opacity 0.2s ease-in-out;
        }

        .copy-tooltip {
            background: #555;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            pointer-events: none;
            z-index: 1000;
            transition: opacity 0.2s ease-in-out;
        }

        #product-cfl-pid {
            transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
        }
    `);

    // Attach event listeners to the PID element
    pidElement.addEventListener('mouseover', function (event) {
        highlightOnHover();
        showTooltip(event);
    });

    pidElement.addEventListener('mouseout', function () {
        removeHighlight();
    });

    pidElement.addEventListener('click', function (event) {
        copyToClipboard(event);
    });
})();