☰

Website Customizer picker figuccio

Customize background color

Versione datata 19/03/2025. Vedi la nuova versione l'ultima versione.

// ==UserScript==
// @name          Website Customizer picker figuccio
// @namespace     https://greasyfork.org/users/237458
// @version       0.7
// @description   Customize background color
// @author        figuccio
// @match         *://*/*
// @grant         GM_addStyle
// @grant         GM_setValue
// @grant         GM_getValue
// @grant         GM_registerMenuCommand
// @require       https://code.jquery.com/jquery-1.11.0.min.js
// @require       http://code.jquery.com/jquery-latest.js
// @require       https://code.jquery.com/ui/1.13.2/jquery-ui.js
// @icon          https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @noframes
// @license      MIT
// ==/UserScript==
//Creazione del colorPicker
(function() {
    'use strict';
var $ = window.jQuery.noConflict();
//avvia la funzione dopo che la pagina e stata caricata
$(document).ready(function() {
      // Aggiungi la funzione per il trascinamento limitato allo schermo
function makeDraggableLimited(element) {
    element.draggable({
        containment: "window",
        stop: function(event, ui) {
            // Memorizza la posizione dopo il trascinamento
            GM_setValue('boxPosition', JSON.stringify(ui.position));//importante
        }
    });
}
/////////////////
    var body=document.body;
    var style="position:fixed; top:200px; left:1100px;z-index:99999;"
    var customizer=document.createElement("div");

    customizer.id="controll";
    customizer.style=style;
    body.append(customizer);
    // Ripristina la posizione salvata se presente
const savedPosition = GM_getValue('boxPosition');
if (savedPosition) {
    const parsedPosition = JSON.parse(savedPosition);
    $(customizer).css({ top: parsedPosition.top, left: parsedPosition.left });
}
     // Rendi l'elemento trascinabile con limitazioni di schermo
    makeDraggableLimited($(customizer));
//////////////////////////////////////////

    // Nascondi/mostra customizer
    function nascondi() {
        var customizer = document.getElementById('controll');
        customizer.style.display = ((customizer.style.display!='none') ? 'none' : 'block');
    }
    GM_registerMenuCommand("nascondi/mostra customizer",nascondi);

    // Dati per la conservazione
    const userdata = {color:'Background',}
    var mycolor = GM_getValue(userdata.color,"#00ff00");


    function saveSetting(color) {
        GM_setValue(userdata.color, mycolor);
        $('body,div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor );
    }
        // Aggiungi un MutationObserver per monitorare i cambiamenti nel DOM
        const observer = new MutationObserver(() => {
        saveSetting(mycolor); // Applica il colore ogni volta che cambia il DOM
    });
  // Configura e osserva il body del documento
    observer.observe(document.body, { childList: true, subtree: true });
/////////////
    // Imposta lo stile CSS degli elementi nel menu
    GM_addStyle(`
        #code { margin-left:1px; margin-bottom:-19px;  color:lime;background-color:brown; border: 2px solid blue; border-radius: 5px;cursor:pointer;}
        #colorinput2{margin-left:4px; margin-top:4px; background-color:#3b3b3b; color:red; border:2px solid green; border-radius: 5px;cursor:pointer;}
    `);

    // Define the customization controls width:170px evita che spostandolo hai lati cambi di dimensioni
    customizer.innerHTML= `
        <div style="padding:10px; background-color:white; border-radius:10px; border:4px solid green;width:180px;">
            <div style="display: flex; justify-content: space-between;align-items:center;">
                <h3 style="margin: 0; color:blue;">Figuccio-Color</h3>
                <button id="closeButton" style="background-color:red; color:white; border:2px solid blue; border-radius:50%; width:25px; height:25px; cursor:pointer;">X</button>
            </div>
            <div id="controls" style="display: block;">
                <button id="code">${mycolor}</button> <input type="color" list="colors" id="colorinput2"  value="${mycolor}">
            </div>
        </div>
    `;

    var colorinput2=document.querySelector('#colorinput2');
    var code = document.querySelector('#code');

    // Fa vedere la modifica colore prima di salvarla col tasto Salva
    colorinput2.addEventListener('input', Change,false);
    function Change (e) {
        mycolor = e.target.value;
        code.innerHTML=e.target.value;
        // Colore immediatamente visibile
        GM_setValue(userdata.color, mycolor);
        saveSetting(mycolor);
    }

    // Add the customizer to the document body
    document.body.insertAdjacentHTML('beforeend', customizer);

    var Close=document.querySelector('#closeButton');
    // Funzione chiudi con la x prende la funzione mostra nascondi dal menu
    Close.addEventListener('click',nascondi,false);
})();

})();