Website Customizer picker figuccio

Customize background color
À partir de 2023-04-30. Voir la dernière version.
Poser une question, écrire un avis, ou signaler le script.
Enveloppe les lignes
// ==UserScript==
// @name          Website Customizer picker figuccio
// @namespace     https://greasyforks.org/users/237458
// @version       0.1
// @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.12.1/jquery-ui.js
// @noframes
// @license      MIT
// ==/UserScript==
//Creazione del colorPicker
var $ = window.jQuery;
var j = $.noConflict();
//avvia la funzione dopo che la pagina e stata caricata
$(document).ready(function() {
var body=document.body;
var style="position:fixed; top:200px; left:1100px;z-index:99999;"
var customizer=document.createElement("div");

customizer.id="my100";
customizer.style=style;
j(customizer).draggable();
body.append(customizer);
    /////////////////////////////////////////////////////////
        //dati per la conservazione
        var userdata = {color:'figuccio',}
        var mycolor;//dichiarare la variabile colore
        //imposta la variabile del colore
        if(/^#+\w+$/.test(GM_getValue(userdata.color))){mycolor = GM_getValue(userdata.color);}
        else {mycolor="#00ff00";}
////////////////////////////////////////////////////////////
     // salvare i dati personalizzati
    function saveSetting() {GM_setValue(userdata.color, mycolor);
    $('body').css("background-color",mycolor );
       //  $('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor );
          }
 ////////////////
   //Imposta lo stile CSS degli elementi nel menu
 GM_addStyle(`
    #code { margin-left:1px; margin-bottom:-19px;  color:lime;background-color:brown; border: 1px solid blue; border-radius: 5px;}

    #colorinput2{margin-left:4px; margin-top:4px; background-color:#3b3b3b; color:red; border:2px solid green; border-radius: 5px;}
.button {padding: 2px 2px; margin-top:-19px; display:inline-block;border: 1px solid green; border-radius:3px; cursor:pointer;background:red;}
            `);
    // 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:170px;">

             <div style="display: flex; justify-content: space-between;align-items:center;">
                <h3 style="margin: 0;">Website Customizer</h3>
                <button id="closeButton" style="background-color:red; color:white; border:none; 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 id="openButtonContainer" style="display:none; margin-top:10px;">
                <button id="openButton" style="background-color:green; color:white; border:none; border-radius:5px; padding:5px 10px; cursor:pointer;">Open</button>
            </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', function(event){Change(event)},false);

    ///////////////////////////////////////////////////
           //evento della tavolozza dei colori
           function Change (e) {
            mycolor = e.target.value;
            code .innerHTML=e.target.value;
             //colore immediatamente visibile
            $('body').css("background-color",mycolor );
//$('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor );
            }

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

    // Add event listener to the close button
    const closeButton = document.getElementById('closeButton');
    closeButton.addEventListener('click', () => {
        document.getElementById('controls').style.display = 'none';
        document.getElementById('openButtonContainer').style.display = 'block';
    });

    // Add event listener to the open button
    const openButton = document.getElementById('openButton');
    openButton.addEventListener('click', () => {
        document.getElementById('openButtonContainer').style.display = 'none';
        document.getElementById('controls').style.display = 'block';
    });
//})();
   /////////
//recupero colore barra facebook giochi

var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
 saveSetting();
        });
    });
 observer.observe(document, {childList:true, subtree:true});
})();