color picker background con memoria
目前為
// ==UserScript==
// @name Browsing Designer color picker figuccio
// @namespace https://greasyfork.org/users/237458
// @version 0.5
// @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 prova(){
if(my.style.display = (my.style.display!='none') ? 'none' : 'block');}
GM_registerMenuCommand("nascondi/mostra box",prova);
///////////////////////////////test funzione chiudi menu da close funziona
function myFunction() {
document.getElementById("my").style.display = "none";
}
//////////////////////////////////////////////////
(function() {
'use strict';
var menudiv= document.createElement('menudiv');
menudiv.setAttribute ('id', 'my');
document.getElementsByTagName('body')[0].appendChild(menudiv);
/////////////////////////////////////////////////////////////////////
//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";
}
//posizione menu
menudiv.style.cssText = `
position:fixed;
top: -11px;
left: 370px;
background:blue;
z-index: 99999;
`;
///////////////////////////////////////////////////////////
//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:270px;
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:-5px;}
`);
//elemento html nel div (<p align="left">allinea a sinistra)
menudiv.innerHTML=`
</p>
<div id=setui>
<div id="colorspan">${mycolor}</div> <p align="left">
<span id="code">${mycolor}</span> color picker <input type="color" 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>
`;
//////////////////////////////////
function newset(newcolor) {
// non togliere se no non funziona
}
//////////////////////////////
//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);
});
})();
// Make the DIV element draggable:
dragElement(document.getElementById("my"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}