☰

Browsing Designer color picker figuccio

color picker background con memoria

  1. // ==UserScript==
  2. // @name          Browsing Designer color picker figuccio
  3. // @namespace     https://greasyfork.org/users/237458
  4. // @version       1.8
  5. // @description   color picker background con memoria
  6. // @author        figuccio
  7. // @match         *://*/*
  8. // @require       http://code.jquery.com/jquery-latest.js
  9. // @require       https://code.jquery.com/ui/1.13.2/jquery-ui.js
  10. // @grant         GM_addStyle
  11. // @grant         GM_setValue
  12. // @grant         GM_getValue
  13. // @grant         GM_registerMenuCommand
  14. // @icon          https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  15. // @license       MIT
  16. // @noframes
  17. // ==/UserScript==
  18. (function() {
  19. 'use strict';
  20.     //marzo 2024
  21.    // Aggiungi la funzione per il trascinamento limitato allo schermo
  22. function makeDraggableLimited(element) {
  23.     element.draggable({
  24.         containment: "window",
  25.         stop: function(event, ui) {
  26.             // Memorizza la posizione dopo il trascinamento
  27.             GM_setValue('boxPosition', JSON.stringify(ui.position));//importante
  28.         }
  29.     });
  30. }
  31.  
  32. const $ = window.jQuery.noConflict();
  33. const body=document.body;
  34. const style=" position:fixed; top:1px;left:370px;z-index:99999;"
  35. const box=document.createElement("div");
  36.  
  37. box.id="my7";
  38. box.style=style;
  39. body.append(box);
  40.  // Ripristina la posizione salvata se presente
  41. const savedPosition = GM_getValue('boxPosition');
  42. if (savedPosition) {
  43.     const parsedPosition = JSON.parse(savedPosition);
  44.     $(box).css({ top: parsedPosition.top, left: parsedPosition.left });
  45. }
  46.     ////////////////////////////////////////////marzo 2024
  47.      // Rendi l'elemento trascinabile con limitazioni di schermo
  48.     makeDraggableLimited($(box));
  49.     /////////////////////////////////
  50. function prova(){
  51. var box = document.getElementById('my7');
  52. box.style.display = ((box.style.display!='none') ? 'none' : 'block');
  53. }
  54. GM_registerMenuCommand("nascondi/mostra box",prova);
  55. /////////////////////////////// funzione chiudi menu da close funziona
  56. function myFunction() {
  57. document.getElementById("my7").style.display = "none";
  58. }
  59.  
  60. /////////////////////////////////////////////////////////////////////
  61.         //dati per la conservazione
  62.         const userdata = {color: 'mio colore'}
  63.         var mycolor = GM_getValue(userdata.color, "#ff0000"); // Valore predefinito   (marzo 2025)
  64. /////////////////////////////////////////////////////////////////////////////////////
  65.      function saveSetting(color) {GM_setValue(userdata.color,mycolor );
  66.      $('body,div[aria-label="Facebook"][role="navigation"]').css("background-color", mycolor);
  67.           }
  68.      // Aggiungi un MutationObserver per monitorare i cambiamenti nel DOM
  69.         const observer = new MutationObserver(() => {
  70.         saveSetting(mycolor); // Applica il colore ogni volta che cambia il DOM
  71.     });
  72.     // Configura e osserva il body del documento
  73.     observer.observe(document.body, { childList: true, subtree: true });
  74.    ///////////////////////////////////////////////////////////
  75.             //Imposta lo stile CSS degli elementi nel menu
  76.         GM_addStyle(`
  77.                 #myMenu {
  78.                     font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
  79.                     font-size: 14px;
  80.                     z-index: 2147483648;
  81.                 }
  82.                  .button {
  83.                     padding: 3px 6px;
  84.                     line-height: 16px;
  85.                     margin-top:-19px;
  86.                     display: inline-block;
  87.                     border: 1px solid black;
  88.                     border-radius: 3px;
  89.                     cursor: pointer;
  90.                     background:chocolate;
  91.  
  92.                 }
  93.  
  94.                 #colorspan { margin-left:1px; margin-bottom:-19px;}
  95.  
  96.                 #seletcolor{margin-top:-47px; margin-left:5px;}
  97.  
  98.                 #setuibd{
  99.                     width:auto;
  100.                     height:35px;
  101.                     margin-top:-3px;
  102.                     margin-left:10px;
  103.                     margin-right:10px;
  104.                     margin-bottom:5px;
  105.                     border-width:1px;
  106.                     color:lime;
  107.  
  108.                 }
  109.  
  110.                 #colorinput{ margin-left:4px; margin-top:4px;height:22px;width:50px;}
  111.                 #colorspan{ color:lime;background-color:brown; border: 1px solid blue;}
  112.             `);
  113.  
  114.   //elemento html nel div
  115.    box.innerHTML=`
  116.                       <fieldset style="background:green; border: 2px solid red;color:lime;border-radius:7px;text-align:center; width:180px;height:35px;">
  117.                       <legend>Select Color</legend>
  118.     <div id=setuibd>
  119.    <button id="colorspan"title="Hex value">${mycolor}</button><input type="color" list="colors" id="colorinput" value="${mycolor}" title="color picker">
  120.    <span class="button" title="chiudi" id='close'>close</span>
  121.                      </fieldset>
  122.             `;
  123.             //////////////////////////////
  124.             //aggiunta span close per chiudere il box direttamente
  125.             var colorinputsetMenuClose=document.querySelector('#close');
  126.             colorinputsetMenuClose.addEventListener('click',myFunction,false);
  127.  
  128.             ////////////////////////////////////////
  129.             var colorinput=document.querySelector('#colorinput');
  130.             var colorspan = document.querySelector('#colorspan');
  131.             ////////////////////////////////////////
  132.            //evento della tavolozza dei colori
  133.             colorinput.addEventListener('input', colorChange, false);
  134.             function colorChange (e) {
  135.             mycolor = e.target.value;
  136.             colorspan.innerHTML=e.target.value;
  137.             //colore immediatamente visibile
  138.         GM_setValue(userdata.color, mycolor);
  139.         saveSetting(mycolor);
  140.             }
  141.  
  142. })();
  143.