☰

Enhanced Copy PID with Persistent Popup and Optimizations

Copy PID to clipboard with persistent popup, hover highlight, and optimized performance.

  1. // ==UserScript==
  2. // @name         Enhanced Copy PID with Persistent Popup and Optimizations
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  Copy PID to clipboard with persistent popup, hover highlight, and optimized performance.
  6. // @author       You
  7. // @match        *://.imvu.com/shop/product.php?products_id*
  8. // @grant        GM_addStyle
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     const pidElement = document.querySelector('#product-cfl-pid'); // Cache the PID element
  16.  
  17.     if (!pidElement) return; // Exit if PID element is not found
  18.  
  19.     // Preload tooltip and popup elements
  20.     const tooltip = document.createElement('div');
  21.     tooltip.textContent = 'Click to Copy';
  22.     tooltip.className = 'copy-tooltip';
  23.     tooltip.style.position = 'absolute';
  24.     tooltip.style.display = 'none'; // Initially hidden
  25.     document.body.appendChild(tooltip);
  26.  
  27.     const popup = document.createElement('div');
  28.     popup.textContent = 'Copied - Shop Spikes!';
  29.     popup.className = 'copy-popup';
  30.     popup.style.position = 'absolute';
  31.     popup.style.display = 'none'; // Initially hidden
  32.     document.body.appendChild(popup);
  33.  
  34.     // Function to handle copying to clipboard and showing popup
  35.     function copyToClipboard(event) {
  36.         const pidText = pidElement.textContent;
  37.  
  38.         // Remove tooltip when clicked
  39.         tooltip.style.display = 'none';
  40.  
  41.         // Copy the PID number to the clipboard
  42.         navigator.clipboard.writeText(pidText).then(() => {
  43.             // Position popup relative to the PID element
  44.             const rect = pidElement.getBoundingClientRect();
  45.             popup.style.left = `${rect.left + window.scrollX + rect.width + 10}px`;
  46.             popup.style.top = `${rect.top + window.scrollY}px`;
  47.             popup.style.display = 'block';
  48.  
  49.             // Remove popup after 1.5 seconds
  50.             setTimeout(() => {
  51.                 popup.style.display = 'none';
  52.             }, 1500);
  53.         });
  54.     }
  55.  
  56.     // Function to show tooltip on hover
  57.     function showTooltip(event) {
  58.         // Position tooltip relative to the PID element
  59.         const rect = pidElement.getBoundingClientRect();
  60.         tooltip.style.left = `${rect.left + window.scrollX + rect.width + 10}px`;
  61.         tooltip.style.top = `${rect.top + window.scrollY}px`;
  62.         tooltip.style.display = 'block';
  63.     }
  64.  
  65.     // Function to highlight PID element on hover
  66.     function highlightOnHover() {
  67.         pidElement.style.border = '2px solid #0073e6'; // Add blue border
  68.         pidElement.style.backgroundColor = '#f0f8ff';  // Add light background color
  69.     }
  70.  
  71.     // Function to remove highlight on mouseout
  72.     function removeHighlight() {
  73.         pidElement.style.border = ''; // Reset border
  74.         pidElement.style.backgroundColor = ''; // Reset background color
  75.         tooltip.style.display = 'none'; // Hide tooltip on mouseout
  76.     }
  77.  
  78.     // Add styles for the popup, tooltip, and hover highlight
  79.     GM_addStyle(`
  80.         .copy-popup {
  81.             background: #333;
  82.             color: white;
  83.             padding: 5px 10px;
  84.             border-radius: 5px;
  85.             font-size: 12px;
  86.             pointer-events: none;
  87.             z-index: 1000;
  88.             transition: opacity 0.2s ease-in-out;
  89.         }
  90.  
  91.         .copy-tooltip {
  92.             background: #555;
  93.             color: white;
  94.             padding: 3px 8px;
  95.             border-radius: 4px;
  96.             font-size: 11px;
  97.             pointer-events: none;
  98.             z-index: 1000;
  99.             transition: opacity 0.2s ease-in-out;
  100.         }
  101.  
  102.         #product-cfl-pid {
  103.             transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  104.         }
  105.     `);
  106.  
  107.     // Attach event listeners to the PID element
  108.     pidElement.addEventListener('mouseover', function (event) {
  109.         highlightOnHover();
  110.         showTooltip(event);
  111.     });
  112.  
  113.     pidElement.addEventListener('mouseout', function () {
  114.         removeHighlight();
  115.     });
  116.  
  117.     pidElement.addEventListener('click', function (event) {
  118.         copyToClipboard(event);
  119.     });
  120. })();