☰

Color Picker

Color picker for Sketchful

目前为 2020-06-30 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Color Picker
  3. // @namespace   https://greasyfork.org/users/281093
  4. // @match       https://sketchful.io/*
  5. // @grant       none
  6. // @version     0.5
  7. // @author      Bell
  8. // @description Color picker for Sketchful 
  9. // @run-at      document-end
  10. // jshint esversion: 6
  11. // ==/UserScript==
  12.  
  13. let defaultPalettes = [
  14.     [   
  15.         "#ffffff","#d3d1d2","#f70f0f","#ff7200","#fce700","#02cb00","#01fe94","#05b0ff","#221ecd","#a300bd","#cc7fad","#fdad88","#9e5425",
  16.         "#514f54","#a9a7a8","#ae0b00","#c84706","#ec9e06","#007612","#049d6f","#00579d","#0f0b96","#6e0083","#a65673","#e38a5e","#5e320d",
  17.         "#000000","#827c80","#57060c","#8b2500","#9e6600","#003f00","#00766a","#003b75","#0e0151","#3c0350","#73314d","#d1754e","#421e06"
  18.     ], 
  19.  
  20.     [
  21.         "#3a3a3c","#8e8e93","#f8f9fa","#ffadad","#ffd6a5","#fdffb6","#caffbf","#9bf6ff","#a0c4ff","#bdb2ff","#ffc6ff","#fdad88","#9e5425",
  22.         "#2c2c2e","#636366","#e0e0e0","#ff7070","#f3a220","#f9e079","#049d6f","#92ddea","#6dafe0","#ab87ff","#ff87ab","#e38a5e","#5e320d",
  23.         "#1c1c1e","#48484a","#c2c2c2","#f54d4d","#dc8700","#f0c808","#00766a","#219bc3","#548bbc","#715aff","#ff5d8f","#d1754e","#421e06"
  24.     ],
  25.  
  26.     [
  27.         "#081c15","#1b4332","#2d6a4f","#40916c","#52b788","#74c69d","#95d5b2","#b7e4c7","#d8f3dc","#000000","#faf9f9","#ffd6ba","#fec89a",
  28.         "#774936","#8a5a44","#9d6b53","#b07d62","#c38e70","#cd9777","#d69f7e","#deab90","#e6b8a2","#edc4b3","#ffb5a7","#fcd5ce","#f8edeb",
  29.         "#cb997e","#eddcd2","#fff1e6","#f0efeb","#ddbea9","#a5a58d","#b7b7a4","#6d6875","#b5838d","#e5989b","#ffb4a2","#ffcdb2","#f9dcc4"
  30.     ],
  31.  
  32.     [
  33.         "#10002b","#240046","#3c096c","#5a189a","#7b2cbf","#9d4edd","#c77dff","#e0aaff","#efcefa","#d4b2d8","#a88fac","#826c7f","#5d4e60",
  34.         "#7c6f93","#886f93","#a967ad","#ad6789","#db81ad","#ff6c91","#ff736c","#ff9e46","#faa275","#ff8c61","#ce6a85","#985277","#5c374c",
  35.         "#721b65","#b80d57","#f8615a","#ffd868","#bb596b","#f96d80","#ff9a76","#ffc4a3","#00e0ff","#74f9ff","#a6fff2","#e8ffe8","#ffffff"
  36.     ],
  37.  
  38.     [
  39.         "#007f5f","#2b9348","#55a630","#80b918","#aacc00","#bfd200","#d4d700","#dddf00","#eeef20","#ffff3f","#03045e","#0077b6","#00b4d8",
  40.         "#ff4800","#ff5400","#ff6000","#ff6d00","#ff7900","#ff8500","#ff9100","#ff9e00","#ffaa00","#ffb600","#90e0ef","#caf0f8","#000000",
  41.         "#143642","#263c41","#38413f","#4a473e","#5c4d3c","#6f523b","#815839","#935e38","#a56336","#b76935","#000000","#ffffff","#ffffff"
  42.     ]
  43. ];
  44. let palettes = JSON.parse(localStorage.getItem('palettes')) || defaultPalettes;
  45. let paletteIndex = parseInt(localStorage.getItem("paletteIndex")) || 0;
  46. let lockedPalettes = JSON.parse(localStorage.getItem('lockedPalettes')) || [0];
  47. let activeColor = {
  48.   node: null,
  49.   index: null
  50. };
  51.  
  52. const canvas = document.querySelector("#canvas");
  53. const ctx = canvas.getContext("2d");
  54. const gameTools = document.querySelector("#gameTools");
  55. const chatBox = document.querySelector("#gameChat");
  56. const colorButtons = document.querySelectorAll(".gameToolsColor");
  57. const colorsDiv = document.querySelector("#gameToolsColors");
  58. const colorButton = document.querySelector("#gameToolsColors > div:nth-child(1) > div:nth-child(1)");
  59.  
  60. const colorPickerWrapper = document.createElement("div");
  61. const colorInput = document.createElement("input");
  62. const colorPicker = document.createElement("input");
  63. const inputStyle = `margin: 5px 0; height: 20px; width: 35%; text-align: center; border: none;font-weight: 800; border-radius: 5px; background-color: #CBCBCB;`;
  64. const wrapperStyle = `position: absolute; margin: 5px 35%; height: 20px; width: 37px; border-radius: 5px;`;
  65.  
  66. (function init() { 
  67.     addPicker();
  68.     updatePageStyle();
  69.     addObservers();
  70.     addListeners();
  71.     changePalette(paletteIndex);
  72. })();
  73.  
  74. function addPicker() {
  75.     colorPicker.type = "color";
  76.     colorPicker.setAttribute("style", "opacity: 0; width: 37px; cursor: pointer;");
  77.     colorPicker.oninput = updatePicker; 
  78.  
  79.     colorPickerWrapper.setAttribute("style", wrapperStyle);
  80.     colorPickerWrapper.style.backgroundColor = colorPicker.value;
  81.     colorPickerWrapper.appendChild(colorPicker);
  82.     gameTools.appendChild(colorPickerWrapper);
  83.  
  84.     colorInput.oninput = updateInput;
  85.     colorInput.addEventListener("click", selectInputText, false);
  86.     colorInput.setAttribute("style", inputStyle);
  87.     colorInput.setAttribute("spellcheck", "false");
  88.     colorInput.value = colorPicker.value;
  89.     gameTools.appendChild(colorInput);
  90.     addButtons();
  91. }
  92.  
  93. function addObservers() {
  94.     const heightObserver = new MutationObserver(adjustChatSize);
  95.     const config = {
  96.         attributes: true,
  97.         childList: false,
  98.         subtree: false
  99.     };
  100.     heightObserver.observe(gameTools, config);
  101.     heightObserver.observe(chatBox, config);
  102. }
  103.  
  104. function addListeners() {
  105.     canvas.addEventListener('pointerdown', pickCanvasColor, false);
  106.     colorsDiv.addEventListener("click", editColor, false);
  107.     let saveBtn = document.querySelector("#savePalette");
  108.     saveBtn.addEventListener("dragenter", highlight, false);
  109.     saveBtn.addEventListener("dragleave", unhighlight, false);
  110.     saveBtn.addEventListener("drop", handleDrop, false);
  111.     saveBtn.addEventListener("dragover", e => { e.preventDefault(); }, false);
  112. }
  113.  
  114. function updatePageStyle() {
  115.     document.querySelector("#gameToolsSlider").style.top = "77px";
  116.     gameTools.style.height = "200px";
  117. }
  118.  
  119. function toggleLock() {
  120.     let lockBtn = document.querySelector("#lockButton");
  121.     if (lockBtn.getAttribute("state") === "unlocked") {
  122.         lockPalette(lockBtn);
  123.     } else {
  124.         unlockPalette(lockBtn);
  125.     }
  126.     updateLock();
  127. }
  128.  
  129. function lockPalette(lockBtn) {
  130.     lockedPalettes.push(paletteIndex);
  131.     localStorage.setItem("lockedPalettes", JSON.stringify(lockedPalettes));
  132. }
  133.  
  134. function unlockPalette(lockBtn) {
  135.     let index = lockedPalettes.indexOf(paletteIndex);
  136.     if (index < 0) return;  
  137.     lockedPalettes.splice(index, 1);
  138.     localStorage.setItem("lockedPalettes", JSON.stringify(lockedPalettes));
  139. }
  140.  
  141. function updateLock() {
  142.     let lockBtn = document.querySelector("#lockButton");
  143.     if (isPaletteLocked()) {
  144.         lockBtn.classList.remove("fa-unlock-alt");
  145.         lockBtn.classList.add("fa-lock");
  146.         lockBtn.setAttribute("state", "locked");
  147.     } else {
  148.         lockBtn.classList.add("fa-unlock-alt");
  149.         lockBtn.classList.remove("fa-lock");
  150.         lockBtn.setAttribute("state", "unlocked");
  151.     }
  152.     resetActiveColor();
  153. }
  154.  
  155. function addButtons() {
  156.     let prevPaletteBtn = document.createElement("button");
  157.     let saveColorBtn = document.createElement("button"); 
  158.     let nextPaletteBtn = document.createElement("button");
  159.     let lockBtn = document.createElement("button");
  160.     
  161.     addButton(prevPaletteBtn, "arrow-left", "5px 5px 5px 45px;");
  162.     addButton(saveColorBtn, "save", "5px 5px 5px 75px;", "savePalette");
  163.     addButton(nextPaletteBtn, "arrow-right", "5px 5px 5px 105px;");
  164.     addButton(lockBtn, "unlock-alt", "5px 5px 5px 135px;", "lockButton");
  165.     lockBtn.setAttribute("state", "unlocked");
  166.  
  167.     prevPaletteBtn.addEventListener("click", prevPalette, false);
  168.     saveColorBtn.addEventListener("click", saveColor, false);
  169.     nextPaletteBtn.addEventListener("click", nextPalette, false);
  170.     lockBtn.addEventListener("click", toggleLock, false);
  171. }
  172.  
  173. function nextPalette() {
  174.     paletteIndex < (palettes.length - 1) && paletteIndex++;
  175.     localStorage.setItem("paletteIndex", paletteIndex);
  176.     changePalette();
  177. }
  178.  
  179. function prevPalette() {
  180.     paletteIndex > 0 && paletteIndex--;
  181.     localStorage.setItem("paletteIndex", paletteIndex);
  182.     changePalette();
  183. }
  184.  
  185. function saveColor(e) {
  186.     if (e.shiftKey) {
  187.         downloadPalettes();
  188.         return;
  189.     }
  190.     let currentPalette = palettes[paletteIndex];
  191.     if (activeColor.index) {
  192.         currentPalette[activeColor.index] = colorPicker.value;
  193.     } else {
  194.         while (currentPalette.length >= 39 || isPaletteLocked()) {
  195.             paletteIndex++;
  196.             if (paletteIndex === palettes.length) {
  197.                 palettes.push([]);
  198.             }
  199.             currentPalette = palettes[paletteIndex];
  200.         }
  201.         currentPalette.push(colorPicker.value);
  202.     }
  203.     changePalette();
  204.     savePalettes();
  205. }
  206.  
  207. function savePalettes() {
  208.     localStorage.setItem("palettes", JSON.stringify(palettes));
  209. }
  210.  
  211. function downloadPalettes() {
  212.     let formattedPaletteData = JSON.stringify(palettes).replace(/\]\,/g, "],\n\n");
  213.     download("palettes.txt", formattedPaletteData);
  214. }
  215.  
  216. function download(filename, text) {
  217.     let pom = document.createElement('a');
  218.     pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  219.     pom.setAttribute('download', filename);
  220.     
  221.     if (document.createEvent) {
  222.         let event = document.createEvent('MouseEvents');
  223.         event.initEvent('click', true, true);
  224.         pom.dispatchEvent(event);
  225.     }
  226.     else {
  227.         pom.click();
  228.     }
  229. }
  230.  
  231. function isPaletteLocked() {
  232.     return lockedPalettes.includes(paletteIndex);
  233. }
  234.  
  235. function editColor(event) {
  236.     if (isPaletteLocked() || !event.target.classList.contains("gameToolsColor")) return;
  237.     event.preventDefault();
  238.     let color = {
  239.         node: event.target,
  240.         index: Array.prototype.indexOf.call(colorButtons, event.target)
  241.     };
  242.     if (event.altKey) {
  243.         if (color.index >= 0 && paletteIndex >= 0) {
  244.             let palette = palettes[paletteIndex];
  245.             palette.splice(color.index, 1);
  246.             if (isPaletteEmpty(palette)) {
  247.                 palettes.splice(paletteIndex, 1);
  248.                 paletteIndex--;
  249.             } 
  250.             changePalette();
  251.             savePalettes();
  252.         }
  253.     } else if (event.shiftKey) {
  254.         setActiveColor(color);
  255.     }
  256. }
  257.  
  258. function changePalette() {
  259.     if (paletteIndex < 0 || paletteIndex >= palettes.length) {
  260.         paletteIndex = 0;
  261.         localStorage.setItem("paletteIndex", paletteIndex); 
  262.     }
  263.     colorButtons.forEach((button, idx) => {
  264.         let color = palettes[paletteIndex][idx] || "#fff";
  265.         button.style.backgroundColor = color;
  266.     });
  267.     resetActiveColor();
  268.     updateLock();
  269. }
  270.  
  271. function isPaletteEmpty(palette) {
  272.     if (!palette) return true;
  273.     let empty = true;
  274.     for (let color of palette) {
  275.         if (color) {
  276.             empty = false;
  277.             break;
  278.         }
  279.     }
  280.     return empty;
  281. }
  282.  
  283. function setActiveColor(color) {
  284.     resetActiveColor();
  285.     activeColor = color;
  286.     console.log(activeColor);
  287.     activeColor.node.style.border = "solid 2px red";
  288. } 
  289.  
  290. function resetActiveColor() {
  291.     if (activeColor.node) {
  292.         activeColor.node.style.border = "";
  293.         activeColor = {
  294.             node: null,
  295.             index: null
  296.         };
  297.     }
  298. }
  299.  
  300. function addButton(button, icon, pos, id = "") {
  301.     let buttonStyle = `margin: ${pos}; position: absolute; height: 20px; border: none; background-color: #CBCBCB; border-radius: 5px;`;
  302.     button.setAttribute("style", buttonStyle);
  303.     button.setAttribute("class", `fas fa-${icon}`);
  304.     button.id = id;
  305.     gameTools.appendChild(button);
  306. }
  307.  
  308. function updatePicker(event) {
  309.     let color = event.target.value;
  310.     colorPickerWrapper.style.backgroundColor = color;
  311.     colorInput.value = color;
  312.     setColor(color);
  313. }
  314.  
  315. function updateInput(event) {
  316.     let color = event.target.value;
  317.     colorPickerWrapper.style.backgroundColor = color;
  318.     colorPicker.value = color;
  319.     setColor(color);
  320. }
  321.  
  322. function setColor(color) {
  323.     let prevColor = colorButton.style.backgroundColor;
  324.     colorButton.style.backgroundColor = color;
  325.     colorButton.dispatchEvent(new Event("pointerdown"));
  326.     colorButton.style.backgroundColor = prevColor;
  327. }
  328.  
  329. function selectInputText() {
  330.     colorInput.select();
  331. }
  332.  
  333. function pickCanvasColor(event) {
  334.     if (!event.altKey) return;
  335.     event.stopImmediatePropagation();
  336.     let pos = getPos(event);
  337.     let [r, g, b, a] = ctx.getImageData(pos.x, pos.y, 1, 1).data;
  338.     let color = `rgb(${r}, ${g}, ${b})`;
  339.     setColor(color);
  340. }
  341.  
  342. function getPos(event) {
  343.     let canvasRect = canvas.getBoundingClientRect();
  344.     let canvasScale = canvas.width / canvasRect.width;
  345.     return {
  346.         x: (event.clientX - canvasRect.left) * canvasScale,
  347.         y: (event.clientY - canvasRect.top) * canvasScale
  348.     };
  349. }
  350.  
  351. function handleDrop(e) {
  352.     e.preventDefault();
  353.     colorsDiv.style.filter = "";
  354.     let file = e.dataTransfer.files[0];
  355.     console.log(file);
  356.     if (file) {
  357.         let reader = new FileReader();
  358.         reader.readAsText(file);
  359.         reader.onload = (e) => {
  360.             loadPalettes(JSON.parse(e.target.result));
  361.         };
  362.     }
  363. }
  364.  
  365. function loadPalettes(loadedPalettes) {
  366.     downloadPalettes();
  367.     palettes = loadedPalettes;
  368.     paletteIndex = 0;
  369.     lockedPalettes = [];
  370.     resetActiveColor();
  371.     updateLock();
  372.     changePalette();
  373.     savePalettes();
  374. }
  375.  
  376. function highlight(e) {
  377.     e.preventDefault();
  378.     colorsDiv.style.filter = "brightness(0.8)";
  379. }
  380.  
  381. function unhighlight(e) {
  382.     console.log("leave");
  383.     e.preventDefault();
  384.     colorsDiv.style.filter = "";
  385. }
  386.  
  387. function isDrawing() {
  388.     return document.querySelector("#gameTools").style.display !== "none";
  389. }
  390.  
  391. function adjustChatSize() {
  392.     chatBox.style.height = isDrawing() ? "calc(100% - 200px)" : "calc(100% - 180px)";
  393. }