new picker barra Facebook figuccio

color picker allinterno barra facebook

// ==UserScript==
// @name          new picker barra Facebook figuccio
// @namespace     https://greasyfork.org/users/237458
// @version       1.3
// @author        figuccio
// @description   color picker allinterno barra facebook
// @match         https://*.facebook.com/*
// @grant         GM_addStyle
// @grant         GM_setValue
// @grant         GM_getValue
// @grant         GM_registerMenuCommand
// @require       https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @run-at        document-start
// @icon          https://facebook.com/favicon.ico
// @require       https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// @noframes
// @license        MIT
// ==/UserScript==
(function() {
'use strict';
var $ = window.jQuery;
$(document).ready(function() {
var body=document.getElementsByTagName("body")[0]
var container=document.createElement("div")
//container.style="top:1px;position:fixed;right:330px;"
body.append(container)
container.innerHTML=`
<input type="button"id="colorspan"title="Hex color">${mycolor}</button> Color<input type="color" list="colors" id="colorinput" value="${mycolor}" title="Color picker">

`
///////////////////////////////////////////////////////////////////////////////////////////////
         //Imposta lo stile css degli elementi nel menu
GM_addStyle(`
#colorspan { z-index:999999999999;position:fixed;top:13px;right:425px;color:darkred;border:2px solid green;border-radius:6px;cursor:pointer;}
#colorinput{ z-index:999999999999;position:fixed;top:10px;right:330px;border:2px solid yellow;border-radius:6px;cursor:pointer;}

         `);
    //////////////////////////////////////////////////////////////////////////////////////////////
       //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="#000000"; }
//////////////////////////////////////////
      // salvare i dati personalizzati
    function saveSetting() {GM_setValue(userdata.color, mycolor);
    $('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor);
          }
/////////////////////////////
     var colorinput=document.querySelector('#colorinput');
     var colorspan = document.querySelector('#colorspan');
     colorinput.addEventListener('input', function(event){colorChange(event)},false);

$('div[role="banner"]+div div[role="navigation"], div[role="complementary"], div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor);

 //evento della tavolozza dei colori
            function colorChange (e) {
            mycolor = e.target.value;
            colorspan.innerHTML=e.target.value;
            document.getElementById('colorspan').value =mycolor;//value hex

                //colore immediatamente visibile
$('div[role="banner"]+div div[role="navigation"], div[role="complementary"], 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;

 saveSetting();//salva
 window.setTimeout(saveSetting,3000);//attendi 3sec e risalva il colore utile sulla barra facebook giochi facebook
})();
//////////////////////
})();