☰

Browsing Designer color picker figuccio

color picker background con memoria

目前為 2022-09-04 提交的版本，檢視 最新版本。

// ==UserScript==
// @name          Browsing Designer color picker figuccio
// @namespace     https://greasyfork.org/users/237458
// @version       0.1
// @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:center;position:fixed;right:10px;top:10px;transition:.6s;border-box;padding:5px;color:black;background:red;border:1px solid lightgrey;border-radius:5px;width:150px;cursor:default;height:100px;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=`
        <h1 style="font-size:18px;margin:10px;margin-bottom:30px;">Color picker</h1>
        <div style="text-align:center;margin-top:20px;width:100%;height:fit-content;margin-bottom:20px;">

           <input title="Background-Color"  "Background-Color" name="bgColor" value="#000000" class="inp-customizer picker" type="color"/><br>
        </div>
        <div style="width:100%;height:fit-content;margin-bottom:40px;">

<button id="random" >


        </div>
        <center>
        <div style="width:93%;height:fit-content;margin-bottom:30px;border-radius:5px;">

        </div>
        </center>
`;

        let colorPickers=document.getElementsByClassName("picker");
        let randomBtn=document.getElementById("random");
        randomBtn.addEventListener("click",function(){

        })


        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');
}