☰

Browsing Designer color picker figuccio

color picker background con memoria

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

// ==UserScript==
// @name          Browsing Designer color picker figuccio
// @namespace     https://greasyfork.org/users/237458
// @version       0.8
// @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==
(function() {
   'use strict';
let $ = window.jQuery;
var j = $.noConflict();
const body=document.body;
let btn_style=" position:fixed; top:-11px;left:370px;background:transparent;z-index:99999;"
let box=document.createElement("div");

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

function prova(){
if(my7.style.display = (my7.style.display!='none') ? 'none' : 'block');}
GM_registerMenuCommand("nascondi/mostra box",prova);
/////////////////////////////// funzione chiudi menu da close funziona
function myFunction() {
document.getElementById("my7").style.display = "none";
}

/////////////////////////////////////////////////////////////////////
 //dati per la conservazione
        var userdata = {color: '#000000',}

        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";}

            ///////////////////////////////////////////////////////////
            //Imposta lo stile CSS degli elementi nel menu
        GM_addStyle(`
                #myMenu {
                    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
                    font-size: 14px;
                    z-index: 2147483648;
                }
                 .button {
                    padding: 3px 6px;
                    line-height: 16px;
                    margin-top:-19px;
                    display: inline-block;
                    border: 1px solid black;
                    border-radius: 3px;
                    cursor: pointer;
                    background:chocolate;

                }

                #colorspan { margin-left:1px; margin-bottom:-19px;}

                #seletcolor{margin-top:-47px; margin-left:5px;}

                #setui{
                    width:auto;
                    height:35px;
                    margin-top:10px;
                    margin-left:10px;
                    margin-right:10px;
                    margin-bottom:5px;
                    background-color: red;
                    border-width:1px;
                    border-style: solid;
                    color:lime;

                }

                #colorinput{ margin-left:4px; margin-top:4px;}
                #code{ color:lime;background-color:brown; border: 1px solid blue;}
            `);

  //elemento html nel div
   box.innerHTML=`
                      </p>
    <div id=setui>
   <button id="code">${mycolor}</button>  color picker <input type="color" list="colors" id="colorinput" value="${mycolor}" title="color picker" oninput= "document.getElementById('code').innerHTML = this.value;">
   <span class="button" title="chiudi" id='close'>close</span>
   <datalist id="colors">
			<option value="#000000">
			<option value="#404040">
			<option value="#808080">
			<option value="#c0c0c0">
			<option value="#FFFFFF">
			<option value="#980000">
			<option value="#FF0000">
            <option value="#FF9900">
			<option value="#FFFF00">
			<option value="#00FF00">
			<option value="#00FFFF">
			<option value="#4a86e8">
			<option value="#0000FF">
			<option value="#9900ff">
            <option value="#ff00ff">
			<option value="#003f00">
			<option value="#ff7200">
			<option value="#9e6600">
			<option value="#d1754e">
			<option value="#ffcdb2">
			<option value="#2d6a4f">
            <option value="#ff5d8f">
			<option value="#f0efeb">
			<option value="#f8f9fa">
			<option value="#57060c">
			<option value="#9d6b53">
			<option value="#01fe94">
			<option value="#333922">
            <option value="#f9dcc4">
			<option value="#1b4332">

		</datalist>

                                    </p>
                    </div>
            `;
            //////////////////////////////
            //aggiunta span close per chiudere il box direttamente
            var colorinputsetMenuClose=document.querySelector('#close');
            colorinputsetMenuClose.addEventListener('click',myFunction,false);

            ////////////////////////////////////////
            var colorinput=document.querySelector('#colorinput');
            var colorspan = document.querySelector('#colorspan');
            ////////////////////////////////////////
           //evento della tavolozza dei colori
            function colorChange (e) {
            mycolor = e.target.value;
            colorspan.innerHTML=e.target.value;
            }

                 colorinput.addEventListener('input', function(event){colorChange(event)},false);
                 $('.diyh7w1b,body,.thodolrn,._2t-a').css("background-color", mycolor);
                 document.getElementById('colorinput').value =mycolor;
                  colorinput.addEventListener('input', function(){
                             GM_setValue(userdata.color, mycolor);
console.log(this.value);

 $('.diyh7w1b,body,.thodolrn,._2t-a').css("background-color",mycolor);
        });

})();