☰

Color Picker

Color picker for Sketchful

当前为 2020-07-29 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Color Picker
  3. // @namespace   https://greasyfork.org/users/281093
  4. // @match       https://sketchful.io/*
  5. // @grant       none
  6. // @version     0.6.2
  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();
  72. })();
  73.  
  74. function addPicker() {
  75.     colorPicker.type = "color";
  76.     colorPicker.setAttribute("style", "opacity: 0; width: 37px; cursor: pointer;");
  77.     colorPicker.oninput = updatePicker;
  78.   	colorPicker.setAttribute("data-toggle", "tooltip");
  79.   	colorPicker.setAttribute("data-original-title", "Color Picker");
  80.   	colorPicker.setAttribute("data-placement", "bottom");
  81.   	colorPicker.title = "Color Picker";
  82. 	
  83.     colorPickerWrapper.setAttribute("style", wrapperStyle);
  84.     colorPickerWrapper.style.backgroundColor = colorPicker.value;
  85.     colorPickerWrapper.appendChild(colorPicker);
  86.     gameTools.appendChild(colorPickerWrapper);
  87.  
  88.     colorInput.oninput = updateInput;
  89.     colorInput.onclick = selectInputText;
  90.     colorInput.setAttribute("style", inputStyle);
  91.     colorInput.setAttribute("spellcheck", "false");
  92.     colorInput.setAttribute("maxlength", "7");
  93.     colorInput.value = colorPicker.value;
  94.     gameTools.appendChild(colorInput);
  95.     addButtons();
  96. }
  97.  
  98. function addObservers() {
  99.     const heightObserver = new MutationObserver(adjustChatSize);
  100.     const config = {
  101.         attributes: true,
  102.     };
  103.     heightObserver.observe(gameTools, config);
  104.     heightObserver.observe(chatBox, config);
  105. }
  106.  
  107. function addListeners() {
  108.     canvas.addEventListener("pointerdown", pickCanvasColor, false);
  109.     colorsDiv.onpointerdown = editColor;
  110.     let saveBtn = document.querySelector("#savePalette");
  111.     saveBtn.addEventListener("dragenter", highlight, false);
  112.     saveBtn.addEventListener("dragleave", unhighlight, false);
  113.     saveBtn.addEventListener("drop", handleDrop, false);
  114.     saveBtn.addEventListener("dragover", e => {
  115.         e.preventDefault();
  116.     }, false);
  117.  
  118.     document.addEventListener('keydown', e => {
  119.         if (e.altKey && e.shiftKey && !isPaletteLocked(paletteIndex)) {
  120.             colorsDiv.style.boxShadow = "0 0 0 2px red";
  121.         }
  122.     }, false);
  123.     document.addEventListener('keyup', e => {
  124.         if (e.altKey || e.shiftKey) {
  125.             colorsDiv.style.boxShadow = "";
  126.         }
  127.     }, false);
  128. }
  129.  
  130. function updatePageStyle() {
  131.     document.querySelector("#gameToolsSlider").style.top = "77px";
  132.     gameTools.style.height = "200px";
  133. }
  134.  
  135. function toggleLock() {
  136.     let lockBtn = document.querySelector("#lockButton");
  137.     if (lockBtn.getAttribute("state") === "unlocked") {
  138.         lockPalette(lockBtn);
  139.     } else {
  140.         unlockPalette(lockBtn);
  141.     }
  142.     updateLock();
  143. }
  144.  
  145. function lockPalette() {
  146.     lockedPalettes.push(paletteIndex);
  147.     localStorage.setItem("lockedPalettes", JSON.stringify(lockedPalettes));
  148. }
  149.  
  150. function unlockPalette() {
  151.     let index = lockedPalettes.indexOf(paletteIndex);
  152.     if (index < 0) return;
  153.     lockedPalettes.splice(index, 1);
  154.     localStorage.setItem("lockedPalettes", JSON.stringify(lockedPalettes));
  155. }
  156.  
  157. function updateLock() {
  158.     let lockBtn = document.querySelector("#lockButton");
  159.     if (isPaletteLocked(paletteIndex)) {
  160.         lockBtn.classList.remove("fa-unlock-alt");
  161.         lockBtn.classList.add("fa-lock");
  162.         lockBtn.setAttribute("state", "locked");
  163.         colorsDiv.style.boxShadow = "";
  164.     } else {
  165.         lockBtn.classList.add("fa-unlock-alt");
  166.         lockBtn.classList.remove("fa-lock");
  167.         lockBtn.setAttribute("state", "unlocked");
  168.     }
  169.     resetActiveColor();
  170. }
  171.  
  172. function addButtons() {
  173.     let prevPaletteBtn = document.createElement("button");
  174.     let saveColorBtn = document.createElement("button");
  175.     let nextPaletteBtn = document.createElement("button");
  176.     let lockBtn = document.createElement("button");
  177.   
  178.   	const saveTooltip = "Save Color<br>Hold <strong>shift</strong> to save the current palette.";
  179.   	const lockTooltip = "Lock Current Palette";
  180.  
  181.     addButton(prevPaletteBtn, "arrow-left", "5px 5px 5px 45px;");
  182.     addButton(saveColorBtn, "save", "5px 5px 5px 75px;", saveTooltip, "savePalette");
  183.     addButton(nextPaletteBtn, "arrow-right", "5px 5px 5px 105px;");
  184.     addButton(lockBtn, "unlock-alt", "5px 5px 5px 135px;", lockTooltip, "lockButton");
  185.     lockBtn.setAttribute("state", "unlocked");
  186.  
  187.     prevPaletteBtn.addEventListener("click", prevPalette, false);
  188.     saveColorBtn.addEventListener("click", saveColor, false);
  189.     nextPaletteBtn.addEventListener("click", nextPalette, false);
  190.     lockBtn.addEventListener("click", toggleLock, false);
  191. }
  192.  
  193. function nextPalette() {
  194.     paletteIndex = paletteIndex < (palettes.length - 1) ? paletteIndex + 1 : 0;
  195.     localStorage.setItem("paletteIndex", paletteIndex);
  196.     changePalette();
  197. }
  198.  
  199. function prevPalette() {
  200.     paletteIndex = paletteIndex > 0 ? paletteIndex - 1 : palettes.length - 1;
  201.     localStorage.setItem("paletteIndex", paletteIndex);
  202.     changePalette();
  203. }
  204.  
  205. function saveColor(e) {
  206.     if (e.shiftKey) {
  207.         downloadPalettes();
  208.         return;
  209.     }
  210.     let currentPalette = palettes[paletteIndex];
  211.     if (activeColor.index) {
  212.         currentPalette[activeColor.index] = colorPicker.value;
  213.     } else {
  214.         addColor(colorPicker.value);
  215.     }
  216.     changePalette();
  217.     savePalettes();
  218. }
  219.  
  220. function addColor(color) {
  221.     if (palettes[paletteIndex].length > 38 || isPaletteLocked(paletteIndex)) {
  222.         palettes.push([]);
  223.         paletteIndex = palettes.length - 1;
  224.     }
  225.     palettes[paletteIndex].push(color);
  226. }
  227.  
  228. function rgbToHex(rgb) {
  229.     let regEx = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
  230.     let [, r, g, b] = regEx.exec(rgb);
  231.  
  232.     function hex(x) {
  233.         return ("0" + parseInt(x).toString(16)).slice(-2);
  234.     }
  235.  
  236.     return `#${hex(r)}${hex(g)}${hex(b)}`;
  237. }
  238.  
  239. function savePalettes() {
  240.     localStorage.setItem("palettes", JSON.stringify(palettes));
  241. }
  242.  
  243. function downloadPalettes() {
  244.     let formattedPaletteData = JSON.stringify(palettes[paletteIndex]).replace(/\]\,/g, "],\n\n");
  245.     download("palette.txt", formattedPaletteData);
  246. }
  247.  
  248. function download(filename, text) {
  249.     let pom = document.createElement('a');
  250.     pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  251.     pom.setAttribute('download', filename);
  252.  
  253.     if (document.createEvent) {
  254.         let event = document.createEvent('MouseEvents');
  255.         event.initEvent('click', true, true);
  256.         pom.dispatchEvent(event);
  257.     } else {
  258.         pom.click();
  259.     }
  260. }
  261.  
  262. function isPaletteLocked(index) {
  263.     return lockedPalettes.includes(index);
  264. }
  265.  
  266. function updateColorInputs(colorValue) {
  267.     colorPickerWrapper.style.backgroundColor = colorValue;
  268.     colorPicker.value = colorValue;
  269.     colorInput.value = colorValue;
  270. }
  271.  
  272. function editColor(event) {
  273.     if (!event.target.classList.contains("gameToolsColor")) return;
  274.     if (!event.shiftKey) updateColorInputs(rgbToHex(event.target.style.backgroundColor));
  275.  
  276.     if (isPaletteLocked(paletteIndex)) return;
  277.     let color = {
  278.         node: event.target,
  279.         index: Array.prototype.indexOf.call(colorButtons, event.target)
  280.     };
  281.  
  282.     if (event.altKey && event.shiftKey) {
  283.         deletePalette(paletteIndex);
  284.     } else if (event.altKey && color.index >= 0) {
  285.         let palette = palettes[paletteIndex];
  286.         palette.splice(color.index, 1);
  287.         changePalette();
  288.         if (isPaletteEmpty(palette)) deletePalette(paletteIndex);
  289.     } else if (event.shiftKey && color.index >= 0) {
  290.         setActiveColor(color);
  291.     }
  292. }
  293.  
  294. function deletePalette(index) {
  295.     if (palettes.length < 2) return;
  296.     palettes.splice(index, 1);
  297.     lockedPalettes = lockedPalettes.map(lockedIndex => {
  298.         return lockedIndex > index ? lockedIndex - 1 : lockedIndex;
  299.     });
  300.     localStorage.setItem("lockedPalettes", JSON.stringify(lockedPalettes));
  301.     prevPalette();
  302.     savePalettes();
  303.     updateLock();
  304. }
  305.  
  306. function changePalette() {
  307.     if (paletteIndex < 0 || paletteIndex >= palettes.length) {
  308.         paletteIndex = 0;
  309.         localStorage.setItem("paletteIndex", paletteIndex);
  310.     }
  311.     colorButtons.forEach((button, idx) => {
  312.         button.style.backgroundColor = palettes[paletteIndex][idx] || "#fff";
  313.     });
  314.     updateLock();
  315. }
  316.  
  317. function isPaletteEmpty(palette) {
  318.     if (!palette) return true;
  319.     let empty = true;
  320.     for (let color of palette) {
  321.         if (color) {
  322.             empty = false;
  323.             break;
  324.         }
  325.     }
  326.     return empty;
  327. }
  328.  
  329. function setActiveColor(color) {
  330.     resetActiveColor();
  331.     activeColor = color;
  332.     activeColor.node.style.border = "solid 2px red";
  333. }
  334.  
  335. function resetActiveColor() {
  336.     if (activeColor.node) {
  337.         activeColor.node.style.border = "";
  338.         activeColor = {
  339.             node: null,
  340.             index: null
  341.         };
  342.     }
  343. }
  344.  
  345. function addButton(button, icon, pos, tooltip = "", id = "") {
  346.     let buttonStyle = `margin: ${pos}; position: absolute; height: 20px; border: none; background-color: #CBCBCB; border-radius: 5px;`;
  347.     button.setAttribute("style", buttonStyle);
  348.     button.setAttribute("class", `fas fa-${icon}`);
  349.   	tooltip && button.setAttribute("data-toggle", "tooltip");
  350.   	tooltip && button.setAttribute("data-original-title", tooltip);
  351.   	button.setAttribute("data-placement", "bottom");
  352.   	button.title = tooltip;
  353.     button.id = id;
  354.     gameTools.appendChild(button);
  355. }
  356.  
  357. function updatePicker(event) {
  358.     let color = event.target.value;
  359.     colorPickerWrapper.style.backgroundColor = color;
  360.     colorInput.value = color;
  361.     setColor(color);
  362. }
  363.  
  364. function updateInput(event) {
  365.     let hexFound = /([0-9A-Fa-f]{3}){1,2}/.exec(event.target.value);
  366.     if (!hexFound) return;
  367.     let color = "#" + hexFound[0];
  368.     colorPickerWrapper.style.backgroundColor = color;
  369.     colorPicker.value = color;
  370.     setColor(color);
  371. }
  372.  
  373. function setColor(color) {
  374.     let prevColor = colorButton.style.backgroundColor;
  375.     colorButton.style.backgroundColor = color;
  376.     colorButton.dispatchEvent(new Event("pointerdown"));
  377.     colorButton.style.backgroundColor = prevColor;
  378. }
  379.  
  380. function selectInputText() {
  381.     colorInput.select();
  382. }
  383.  
  384. function pickCanvasColor(event) {
  385.     if (!event.altKey) return;
  386.     event.preventDefault();
  387.     event.stopImmediatePropagation();
  388.     let pos = getPos(event);
  389.     let [r, g, b, a] = ctx.getImageData(pos.x, pos.y, 1, 1).data;
  390.     let color = `rgb(${r}, ${g}, ${b})`;
  391.     updateColorInputs(rgbToHex(color));
  392.     setColor(color);
  393. }
  394.  
  395. function getPos(event) {
  396.     let canvasRect = canvas.getBoundingClientRect();
  397.     let canvasScale = canvas.width / canvasRect.width;
  398.     return {
  399.         x: (event.clientX - canvasRect.left) * canvasScale,
  400.         y: (event.clientY - canvasRect.top) * canvasScale
  401.     };
  402. }
  403.  
  404. function handleDrop(e) {
  405.     e.preventDefault();
  406.     colorsDiv.style.filter = "";
  407.     handleFiles(e.dataTransfer.files);
  408. }
  409.  
  410. function handleFiles(files) {
  411.     if (!files) return;
  412.     files = [...files];
  413.     files.forEach(file => {
  414.         let reader = new FileReader();
  415.         reader.readAsText(file);
  416.         reader.onload = loadPalette;
  417.     });
  418. }
  419.  
  420. function addPalette(palette) {
  421.     if (palettes[paletteIndex].length + palette.length < 40 && !isPaletteLocked(paletteIndex)) {
  422.         palettes[paletteIndex] = palettes[paletteIndex].concat(palette);
  423.     } else {
  424.         palettes.push(palette);
  425.         paletteIndex = palettes.length - 1;
  426.         localStorage.setItem("paletteIndex", paletteIndex);
  427.     }
  428.     resetPaletteState();
  429. }
  430.  
  431. function loadPalette(event) {
  432.     const loadedString = event.target.result;
  433.     const coolorRegex = /CSV \*\/\s*(\S+)/;
  434.     const arrayRegex = /\[\[?\s*([^\]]+)/g;
  435.     const hexRegex = /#([0-9A-Fa-f]{3}){1,2}/g;
  436.     let coolorMatch = loadedString.match(coolorRegex);
  437.     let arrayMatch = loadedString.match(arrayRegex);
  438.     if (coolorMatch) {
  439.         let palette = coolorMatch[1].split(",").map(color => `#${color}`);
  440.         addPalette(palette);
  441.         return;
  442.     } else if (arrayMatch) {
  443.         let palettes = arrayMatch.map(palette => palette.match(hexRegex));
  444.         palettes.forEach(palette => addPalette(palette));
  445.     } else {
  446.         let hexCodesFound = [...new Set(loadedString.match(hexRegex))];
  447.         console.log("Hex codes found: ", hexCodesFound);
  448.         hexCodesFound.forEach(code => addColor(code));
  449.         changePalette();
  450.         savePalettes();
  451.     }
  452. }
  453.  
  454. function replacePalettes(newPalettes) {
  455.     palettes = newPalettes;
  456.     paletteIndex = 0;
  457.     lockedPalettes = [];
  458.     resetPaletteState();
  459. }
  460.  
  461. function resetPaletteState() {
  462.     updateLock();
  463.     changePalette();
  464.     savePalettes();
  465. }
  466.  
  467. function highlight(e) {
  468.     e.preventDefault();
  469.     colorsDiv.style.filter = "brightness(0.6)";
  470. }
  471.  
  472. function unhighlight(e) {
  473.     e.preventDefault();
  474.     colorsDiv.style.filter = "";
  475. }
  476.  
  477. function isDrawing() {
  478.     return document.querySelector("#gameTools").style.display !== "none";
  479. }
  480.  
  481. function adjustChatSize() {
  482.     chatBox.style.height = isDrawing() ? "calc(100% - 200px)" : "calc(100% - 180px)";
  483. }