☰

Browsing Designer color picker figuccio

color picker background con memoria

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

  1. // ==UserScript==
  2. // @name          Browsing Designer color picker figuccio
  3. // @namespace     https://greasyfork.org/users/237458
  4. // @version       0.5
  5. // @description   color picker background con memoria
  6. // @author        figuccio
  7. // @match         *://*/*
  8. // @icon          https://www.flaticon.com/svg/1426/1426846.svg
  9. // @require       http://code.jquery.com/jquery-latest.js
  10. // @require       https://code.jquery.com/ui/1.12.1/jquery-ui.js
  11. // @grant         GM_addStyle
  12. // @grant         GM_setValue
  13. // @grant         GM_getValue
  14. // @grant         GM_registerMenuCommand
  15. // @license                  MIT
  16. // @noframes
  17. // ==/UserScript==
  18. function prova(){
  19. if(my.style.display = (my.style.display!='none') ? 'none' : 'block');}
  20. GM_registerMenuCommand("nascondi/mostra box",prova);
  21. ///////////////////////////////test funzione chiudi menu da close funziona
  22. function myFunction() {
  23. document.getElementById("my").style.display = "none";
  24. }
  25. //////////////////////////////////////////////////
  26. (function() {
  27.    'use strict';
  28.     var menudiv= document.createElement('menudiv');
  29.     menudiv.setAttribute ('id', 'my');
  30.     document.getElementsByTagName('body')[0].appendChild(menudiv);
  31. /////////////////////////////////////////////////////////////////////
  32.  
  33.  //dati per la conservazione
  34.         var userdata = {
  35.             color: '#000000',
  36.  
  37.         }
  38.         var mycolor;//dichiarare la variabile colore
  39.  
  40.    //imposta la variabile del colore
  41.         if(/^#+\w+$/.test(GM_getValue(userdata.color))){
  42.             mycolor = GM_getValue(userdata.color);
  43.         }
  44.  
  45.    else {
  46.            mycolor="#000000";
  47.         }
  48.  
  49.  
  50.              //posizione menu
  51.             menudiv.style.cssText = `
  52.                 position:fixed;
  53.                 top: -11px;
  54.                 left: 370px;
  55.                 background:blue;
  56.                 z-index: 99999;
  57.  
  58.                 `;
  59.  
  60.  
  61.             ///////////////////////////////////////////////////////////
  62.             //Imposta lo stile CSS degli elementi nel menu
  63.         GM_addStyle(`
  64.                 #myMenu {
  65.                     font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
  66.                     font-size: 14px;
  67.                     z-index: 2147483648;
  68.                 }
  69.                  .button {
  70.                     padding: 3px 6px;
  71.                     line-height: 16px;
  72.                     margin-top:-19px;
  73.                     display: inline-block;
  74.                     border: 1px solid black;
  75.                     border-radius: 3px;
  76.                     cursor: pointer;
  77.                     background:chocolate;
  78.  
  79.                 }
  80.  
  81.                 #colorspan { margin-left:1px; margin-bottom:-19px;}
  82.  
  83.                 #seletcolor{margin-top:-47px; margin-left:5px;}
  84.  
  85.                 #setui{
  86.                     width:270px;
  87.                     height:35px;
  88.                     margin-top:10px;
  89.                     margin-left:10px;
  90.                     margin-right:10px;
  91.                     margin-bottom:5px;
  92.                     background-color: red;
  93.                     border-width:1px;
  94.                     border-style: solid;
  95.                     color:lime;
  96.  
  97.                 }
  98.  
  99.                 #colorinput{ margin-left:4px; margin-top:-5px;}
  100.  
  101.             `);
  102.  
  103.   //elemento html nel div                   (<p align="left">allinea a sinistra)
  104.    menudiv.innerHTML=`
  105.                       </p>
  106.     <div id=setui>
  107.    <div id="colorspan">${mycolor}</div>    <p align="left">
  108.    <span id="code">${mycolor}</span>  color picker <input type="color" id="colorinput" value="${mycolor}" title="color picker" oninput= "document.getElementById('code').innerHTML = this.value;">
  109.    <span class="button" title="chiudi" id='close'>close</span>
  110.                                     </p>
  111.                     </div>
  112.             `;
  113.  
  114.  
  115.  
  116.             //////////////////////////////////
  117.                function newset(newcolor) {
  118.                // non togliere se no non funziona
  119.             }
  120.             //////////////////////////////
  121.             //aggiunta span close per chiudere il box direttamente
  122.             var colorinputsetMenuClose=document.querySelector('#close');
  123.             colorinputsetMenuClose.addEventListener('click',myFunction,false);
  124.  
  125.             ////////////////////////////////////////
  126.             var colorinput=document.querySelector('#colorinput');
  127.             var colorspan = document.querySelector('#colorspan');
  128.             ////////////////////////////////////////
  129.            //evento della tavolozza dei colori
  130.             function colorChange (e) {
  131.             mycolor = e.target.value;
  132.             colorspan.innerHTML=e.target.value;
  133.             }
  134.  
  135.                  colorinput.addEventListener('input', function(event){colorChange(event)},false);
  136.                  $('.diyh7w1b,body,.thodolrn,._2t-a').css("background-color", mycolor);
  137.                  document.getElementById('colorinput').value =mycolor;
  138.                   colorinput.addEventListener('input', function(){
  139.                              GM_setValue(userdata.color, mycolor);
  140. console.log(this.value);
  141.  
  142.  $('.diyh7w1b,body,.thodolrn,._2t-a').css("background-color",mycolor);
  143.         });
  144.  
  145. })();
  146.  
  147. // Make the DIV element draggable:
  148. dragElement(document.getElementById("my"));
  149.  
  150. function dragElement(elmnt) {
  151.   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  152.   if (document.getElementById(elmnt.id + "header")) {
  153.     // if present, the header is where you move the DIV from:
  154.     document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  155.   } else {
  156.     // otherwise, move the DIV from anywhere inside the DIV:
  157.     elmnt.onmousedown = dragMouseDown;
  158.   }
  159.  
  160.   function dragMouseDown(e) {
  161.     e = e || window.event;
  162.     e.preventDefault();
  163.     // get the mouse cursor position at startup:
  164.     pos3 = e.clientX;
  165.     pos4 = e.clientY;
  166.     document.onmouseup = closeDragElement;
  167.     // call a function whenever the cursor moves:
  168.     document.onmousemove = elementDrag;
  169.   }
  170.  
  171.   function elementDrag(e) {
  172.     e = e || window.event;
  173.     e.preventDefault();
  174.     // calculate the new cursor position:
  175.     pos1 = pos3 - e.clientX;
  176.     pos2 = pos4 - e.clientY;
  177.     pos3 = e.clientX;
  178.     pos4 = e.clientY;
  179.     // set the element's new position:
  180.     elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  181.     elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  182.   }
  183.  
  184.   function closeDragElement() {
  185.     // stop moving when mouse button is released:
  186.     document.onmouseup = null;
  187.     document.onmousemove = null;
  188.   }
  189. }