color picker background con memoria
当前为
// ==UserScript==
// @name Browsing Designer color picker figuccio
// @namespace https://greasyfork.org/users/237458
// @version 1.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==
(function() {
'use strict';
var $ = window.jQuery;
var j = $.noConflict();
var body=document.body;
var style=" position:fixed; top:-11px;left:370px;background:;z-index:99999;"
var box=document.createElement("div");
box.id="my7";
box.style=style;
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: 'mio colore',}
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>
<fieldset style="background:green; border: 2px solid red;color:lime;border-radius:7px;">
<legend>Select Color</legend>
<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>
</p>
</div>
</fieldset>
`;
//////////////////////////////
//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);
$('body,#blueBarDOMInspector>div, #blueBarDOMInspector div[role="banner"], #fb2k_pagelet_bluebar>#blueBarDOMInspector>div>div, div[aria-label="Facebook"][role="navigation"]').css("background-color", mycolor);
document.getElementById('colorinput').value =mycolor;
colorinput.addEventListener('input', function(){
GM_setValue(userdata.color, mycolor);
console.log(this.value);
$('body,#blueBarDOMInspector>div, #blueBarDOMInspector div[role="banner"], #fb2k_pagelet_bluebar>#blueBarDOMInspector>div>div, div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor);
});
})();