Browsing Designer color picker figuccio

color picker background con memoria

当前为 2022-10-28 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Browsing Designer color picker figuccio
  3. // @namespace https://greasyfork.org/users/237458
  4. // @version 1.2
  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() {
  19. 'use strict';
  20. var $ = window.jQuery;
  21. var j = $.noConflict();
  22. var body=document.body;
  23. var style=" position:fixed; top:-11px;left:370px;background:;z-index:99999;"
  24. var box=document.createElement("div");
  25.  
  26. box.id="my7";
  27. box.style=style;
  28. j(box).draggable();
  29. body.append(box);
  30.  
  31. function prova(){
  32. if(my7.style.display = (my7.style.display!='none') ? 'none' : 'block');}
  33. GM_registerMenuCommand("nascondi/mostra box",prova);
  34. /////////////////////////////// funzione chiudi menu da close funziona
  35. function myFunction() {
  36. document.getElementById("my7").style.display = "none";
  37. }
  38.  
  39. /////////////////////////////////////////////////////////////////////
  40. //dati per la conservazione
  41. var userdata = {color: 'mio colore',}
  42.  
  43. var mycolor;//dichiarare la variabile colore
  44.  
  45. //imposta la variabile del colore
  46. if(/^#+\w+$/.test(GM_getValue(userdata.color))){mycolor = GM_getValue(userdata.color);}
  47.  
  48. else {mycolor="#000000";}
  49.  
  50. ///////////////////////////////////////////////////////////
  51. //Imposta lo stile CSS degli elementi nel menu
  52. GM_addStyle(`
  53. #myMenu {
  54. font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
  55. font-size: 14px;
  56. z-index: 2147483648;
  57. }
  58. .button {
  59. padding: 3px 6px;
  60. line-height: 16px;
  61. margin-top:-19px;
  62. display: inline-block;
  63. border: 1px solid black;
  64. border-radius: 3px;
  65. cursor: pointer;
  66. background:chocolate;
  67.  
  68. }
  69.  
  70. #colorspan { margin-left:1px; margin-bottom:-19px;}
  71.  
  72. #seletcolor{margin-top:-47px; margin-left:5px;}
  73.  
  74. #setui{
  75. width:auto;
  76. height:35px;
  77. margin-top:10px;
  78. margin-left:10px;
  79. margin-right:10px;
  80. margin-bottom:5px;
  81. background-color: red;
  82. border-width:1px;
  83. border-style: solid;
  84. color:lime;
  85.  
  86. }
  87.  
  88. #colorinput{ margin-left:4px; margin-top:4px;}
  89. #code{ color:lime;background-color:brown; border: 1px solid blue;}
  90. `);
  91.  
  92. //elemento html nel div
  93. box.innerHTML=`
  94. </p>
  95. <fieldset style="background:green; border: 2px solid red;color:lime;border-radius:7px;text-align:center;">
  96. <legend>Select Color</legend>
  97. <div id=setui>
  98. <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;">
  99. <span class="button" title="chiudi" id='close'>close</span>
  100.  
  101. </p>
  102. </div>
  103. </fieldset>
  104. `;
  105. //////////////////////////////
  106. //aggiunta span close per chiudere il box direttamente
  107. var colorinputsetMenuClose=document.querySelector('#close');
  108. colorinputsetMenuClose.addEventListener('click',myFunction,false);
  109.  
  110. ////////////////////////////////////////
  111. var colorinput=document.querySelector('#colorinput');
  112. var colorspan = document.querySelector('#colorspan');
  113. ////////////////////////////////////////
  114. //evento della tavolozza dei colori
  115. function colorChange (e) {
  116. mycolor = e.target.value;
  117. colorspan.innerHTML=e.target.value;
  118. }
  119.  
  120. colorinput.addEventListener('input', function(event){colorChange(event)},false);
  121. $('body,#blueBarDOMInspector>div, #blueBarDOMInspector div[role="banner"], #fb2k_pagelet_bluebar>#blueBarDOMInspector>div>div, div[aria-label="Facebook"][role="navigation"]').css("background-color", mycolor);
  122. document.getElementById('colorinput').value =mycolor;
  123. colorinput.addEventListener('input', function(){
  124. GM_setValue(userdata.color, mycolor);
  125. console.log(this.value);
  126.  
  127. $('body,#blueBarDOMInspector>div, #blueBarDOMInspector div[role="banner"], #fb2k_pagelet_bluebar>#blueBarDOMInspector>div>div, div[aria-label="Facebook"][role="navigation"]').css("background-color",mycolor);
  128. });
  129.  
  130. })();
  131.