☰

Facebook cambia colore barra new facebook

color picker barra facebook

// ==UserScript==
// @name          Facebook cambia colore barra new facebook
// @author        figuccio
// @namespace     https://greasyfork.org/users/237458
// @description   color picker barra facebook
// @match         https://*.facebook.com/*
// @version       13.2
// @grant         GM_addStyle
// @grant         GM_setValue
// @grant         GM_getValue
// @run-at        document-start
// @grant         GM_registerMenuCommand
// @noframes
// @icon          https://www.google.com/s2/favicons?domain=facebook.com
// @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
// @license        MIT
// ==/UserScript==
(function() {
    'use strict';
     // 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
        }
    });
}
    ////////////////////////////////////////////////////////////////////////////////////
//Creazione del colorPicker
const $ = window.jQuery;
const j = $.noConflict();
//avvia la funzione dopo che la pagina e stata caricata
$(document).ready(function() {
const body=document.body;
const style="position:fixed; top:60px;left:1101px;z-index:99999;"
const box=document.createElement("div");

box.id="my100";
box.style=style;
j(box).draggable();
body.append(box);

    // Ripristina la posizione salvata se presente
const savedPosition = GM_getValue('boxPosition');
if (savedPosition) {
    const parsedPosition = JSON.parse(savedPosition);
    $(box).css({ top: parsedPosition.top, left: parsedPosition.left });
}
///////////////////////////////////////////marzo 2024
     // Rendi l'elemento trascinabile con limitazioni di schermo
    makeDraggableLimited($(box));
    ////////////////////////////////

     //mostra/nascondi dal menu
function nascondi() {
const box = document.getElementById('my100');
box.style.display = ((box.style.display!='none') ? 'none' : 'block');
}
GM_registerMenuCommand("nascondi/mostra box",nascondi);

///////////////////////////////////////////////////////////////
        //dati per la conservazione
        const userdata = {color:'figuccio'}

        let 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
    //window.setTimeout(saveSetting,3000);
    function saveSetting() {GM_setValue(userdata.color, mycolor);
    $('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor );
          }

// Funzione per osservare i cambiamenti nel DOM
    function observeDOMChanges() {
    // Creazione di un observer con una funzione di callback
    var observer = new MutationObserver(function(mutationsList, observer) {
        // Per ogni mutazione rilevata, esegui la funzione saveSetting
        for(var mutation of mutationsList) {
            saveSetting();
        }
    });

    // Configurazione dell'observer per osservare cambiamenti nei nodi figlio e nei nodi attributo
    var config = {childList: true, attributes: true, subtree: true};

    // Inizia ad osservare il DOM target
    observer.observe(document.body, config);
}

// Avvia l'osservazione dei cambiamenti nel DOM
observeDOMChanges();
    ////////////////
   //Imposta lo stile CSS degli elementi nel menu
 GM_addStyle(`
 #colorspan { margin-left:1px; margin-bottom:-19px;  color:lime;background-color:brown; border: 1px solid blue; border-radius: 5px;}

 #setui{width:auto;height:25px; margin-top:-10px;margin-left:0px; margin-right:0px;margin-bottom:0px;border-width:1px;border-style:;color:lime;}

 #colorinput{margin-left:4px; margin-top:4px; background-color:#3b3b3b; color:red; border:2px solid green; border-radius: 5px;}
input[type="datetime-local"] {background:#3b3b3b;color:lime;border:1px solid yellow; border-radius:5px;margin:0px;text-align:center;font-size:px;}
.button {padding: 2px 2px; margin-top:-19px; display:inline-block;border: 1px solid green; border-radius:3px; cursor:pointer;background:red;}
            `);
setInterval(function(){
let today = new Date();
today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
document.getElementById('datePicker').value = today.toISOString().slice(0, -1);
}, 70);
 //elemento html nel div
    box.innerHTML=`
                      </p>
                   <fieldset style="background:orange; border: 2px solid red;color:lime;border-radius:7px;text-align:center;width:220px;">
                   <legend>Time<input readonly id="datePicker" type="datetime-local" /></legend>

   <div id=setui>
HEX<button id="colorspan">${mycolor}</button><input type="color" list="colors" id="colorinput" value="${mycolor}" title="color picker">

  </p>
                    </div>
                    </fieldset>
            `;
            ////////////////////////////////////////
             var colorinput=document.querySelector('#colorinput');
             var colorspan = document.querySelector('#colorspan');

                 //fa vedere la modifica colore prima di salvarla col tasto Salva
        colorinput.addEventListener('input', function(event){Change(event)},false);
        $('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor);
    //////////////////////////////////////////////////////////////////////////////////
           //evento della tavolozza dei colori
           function Change (e) {
            mycolor = e.target.value;
            colorspan.innerHTML=e.target.value;
            document.getElementById('colorspan').value =mycolor;//value hex
             //colore immediatamente visibile
            $('div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor);
               GM_setValue(userdata.color, mycolor);
            }
    //////////////////////
         document.getElementById('colorspan').value =mycolor;//value hex
         document.getElementById('colorinput').value =mycolor;
})();

})();