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. })();