☰

Browsing Designer color picker figuccio

color picker background con memoria

当前为 2022-09-08 提交的版本，查看 最新版本。

// ==UserScript==
// @name          Browsing Designer color picker figuccio
// @namespace     https://greasyfork.org/users/237458
// @version       0.4
// @description   color picker background con memoria
// @author        figuccio
// @match         *://*/*
// @icon          https://www.flaticon.com/svg/1426/1426846.svg
// @require       http://code.jquery.com/jquery-latest.js
// @require       https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @grant         GM_addStyle
// @grant         GM_setValue
// @grant         GM_getValue
// @grant         GM_registerMenuCommand
// @license                  MIT
// @noframes
// ==/UserScript==
let $ = window.jQuery;
var j = $.noConflict();
const body=document.body;
let btn_style=`position:fixed;right:10px;bottom:10px;transition:.2s;font-size:15px;box-sizing:border-box;padding:5px;color:black;background:white;border:1px solid lightgrey;border-radius:5px;cursor:pointer;height:fit-content;width:fit-content;z-index:20000000000;font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;`;

let box_style=`text-align:right;position:fixed;right:10px;top:10px;width:230px;color:lime!important;height:25px;transition:.6s;border-box;padding:5px;color:black;background:red;border:1px solid lightgrey;border-radius:5px;cursor:default;z-index:200000000000;font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;`;
let box=document.createElement("div");

box.innerText="Personalizza";
box.style=btn_style;
let box_state="btn";
j(box).draggable();
body.append(box);

//////////////////////////////////////popup pulsante cambia colori al click visibile dal menu mostra nasconde
function myFunctionbox() {
 box.style.display = ((box.style.display!='none') ? 'none' : 'block');}
GM_registerMenuCommand("display",myFunctionbox);
                      //scomparsa automatica pulsante cambia colori dopo 30sec
setTimeout(() => myFunctionbox(), 30000);//30sec
////////////////////////////////////////////////////////////////////////////
 //la finestra si apre da sola dopo sec
 setTimeout(function(){document.querySelector("body > div.ui-draggable.ui-draggable-handle").click();}, 3000);
//////////////////////////////////////////////////
box.addEventListener("click",function(){
    if(box_state=="btn"){
        this.style=box_style;
        this.innerText="";
        box_state="box";
        this.innerHTML=`
        color picker
<span id="code">Hex value</span>

<input id="random" title="Background-Color" name="bgColor" class="inp-customizer picker"  value="#FF0000"   type="color" oninput="document.getElementById('code').innerHTML = this.value;">


        </div>

        </div>
        </center>
`;

        let colorPickers=document.getElementsByClassName("picker");
        let randomBtn=document.getElementById("random");

        for(let i=0;i<colorPickers.length;i++){
            colorPickers[i].addEventListener("input", function(){
                if(this.name=="bgColor"){
                   body.style.background=this.value;
                    GM_setValue('bg',body.style.background );
                }
            })
        }
    }
})


if (GM_getValue('bg') !==null){
  document.body.style.backgroundColor=GM_getValue('bg');
}