☰

GitHub Label Color Picker

A userscript that adds a color picker to the label color input

当前为 2018-01-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Label Color Picker
  3. // @version     1.0.4
  4. // @description A userscript that adds a color picker to the label color input
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @grant       GM_getValue
  12. // @grant       GM_setValue
  13. // @grant       GM_registerMenuCommand
  14. // @require     https://gf.qytechs.cn/scripts/23181-colorpicker/code/colorPicker.js?version=147862
  15. // @icon        https://assets-cdn.github.com/pinned-octocat.svg
  16. // ==/UserScript==
  17. (() => {
  18. 	"use strict";
  19.  
  20. 	GM_addStyle("div.cp-app { margin-top:65px; z-index:10; }");
  21.  
  22. 	function addPicker() {
  23. 		if (document.querySelector(".js-color-editor")) {
  24. 			jsColorPicker(".js-color-editor-input", {
  25. 				customBG: "#222",
  26. 				noAlpha: true,
  27. 				renderCallback: function(colors) {
  28. 					let input = this && this.input;
  29. 					if (input) {
  30. 						input.value = "#" + colors.HEX;
  31. 						input.previousElementSibling.style.backgroundColor = input.value;
  32. 					}
  33. 				}
  34. 			});
  35. 		}
  36. 	}
  37.  
  38. 	/* replace colorPicker storage */
  39. 	window.ColorPicker.docCookies = (key, val) => {
  40. 		if (typeof val === "undefined") {
  41. 			return GM_getValue(key);
  42. 		}
  43. 		GM_setValue(key, val);
  44. 	};
  45.  
  46. 	/* colorPickerMemosNoAlpha *MUST* follow this format
  47. 	"'rgba(83,25,231,1)','rgba(86,66,66,1)','rgba(22,20,223,1)'"
  48. 	*/
  49. 	function convertColorsToRgba(values) {
  50. 		let result = [];
  51. 		// see http://stackoverflow.com/a/26196012/145346
  52. 		values
  53. 			.replace(/['"]/g, "")
  54. 			.split(/\s*,(?![^()]*(?:\([^()]*\))?\))\s*/g)
  55. 			.forEach(val => {
  56. 				let rgb = hexToRgb(val);
  57. 				if (rgb) {
  58. 					result.push(`'rgba(${rgb.r},${rgb.g},${rgb.b},1)'`);
  59. 				} else if (rgb === null && val.indexOf("rgba(") > -1) {
  60. 					// allow adding rgba() definitions
  61. 					result.push(`'${val}'`);
  62. 				}
  63. 			});
  64. 		return result.join(",");
  65. 	}
  66.  
  67. 	// Modified code from http://stackoverflow.com/a/5624139/145346
  68. 	function hexToRgb(hex) {
  69. 		let result,
  70. 			// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  71. 			shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  72. 		hex = hex.replace(shorthandRegex, (m, r, g, b) => {
  73. 			return r + r + g + g + b + b;
  74. 		});
  75. 		result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  76. 		return result ? {
  77. 			r: parseInt(result[1], 16),
  78. 			g: parseInt(result[2], 16),
  79. 			b: parseInt(result[3], 16)
  80. 		} : null;
  81. 	}
  82.  
  83. 	// Add GM options
  84. 	GM_registerMenuCommand(
  85. 		"Set label ColorPicker swatches (8 HEX or RGBA Max)",
  86. 		() => {
  87. 			const colors = GM_getValue("colorPickerMemosNoAlpha", "#000000,#ffffff"),
  88. 				val = prompt("Set label default colors (8 max):", colors);
  89. 			if (val !== null && typeof val === "string") {
  90. 				GM_setValue("colorPickerMemosNoAlpha", convertColorsToRgba(val));
  91. 			}
  92. 		}
  93. 	);
  94.  
  95. 	document.body.addEventListener("click", event => {
  96. 		// initialize if "Edit" or "New label" button clicked
  97. 		// because "Save changes" updates the entire item
  98. 		if (
  99. 			event.target && event.target.matches(".js-edit-label, .js-details-target")
  100. 		) {
  101. 			addPicker();
  102. 		}
  103. 	});
  104. 	addPicker();
  105.  
  106. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址