User:W3jc/js/ColorPicker.js

//可視化顏色選擇器
var favColor = localStorage.getItem("favColor");
if(favColor === null) {
	favColor = "#A5E4A5";
	localStorage.setItem("favColor", favColor);
}
$.getScript("/index.php?title=User:W3jc/js/w3color.js&action=raw&ctype=text/javascript", () => {
	if(mw.config.get("wgNamespaceNumber") === -1) {
		return;
	}
	$colorPicker = $("<div class='portal' id='p-cp' style='position:sticky;top:0;bottom:0;background-color:rgba(246, 246, 246, 0.9);'></div>");
	if($("#p-sl").length) {
		$colorPicker.css("top", $("#p-sl").outerHeight());
	} else {
		$("body").css("height", "auto");
		$("#mw-panel").height($("body").height());
	}
	$colorPicker.append("<h3 lang='zh-CN' dir='ltr' id='p-cp-label'>顏色選擇器</h3>");
	$colorPicker.append("<div class='body'><ul id='p-cp-list'></ul></div>");
	$("#mw-panel>div:last").after($colorPicker);
	$("#p-cp-list").append("<li><input id='cp-color' type='color' style='height:2em;width:80px;'/></li>");
	$("#p-cp-list").append("<li><select id='cp-select' style='height:2em;width:80px;'><option value='FavColor' selected></option></select></li>");
	$("#p-cp-list").append("<li><input id='cp-insert' type='button' value='插入顏色' style='height:2em;width:80px;' disabled=true/></li>");
	$("#cp-color").on("change", colorChange);
	$("#cp-select").on("change", selectChange);
	$("#cp-color").on("click", updateColor);
	$("#cp-insert").on("click", insertColor);
	if((mw.config.get('wgIsProbablyEditable') === true) && (mw.config.get("wgAction") == "edit" || mw.config.get("wgAction") == "submit")) {
		$("#cp-insert").attr("disabled", false);
	}
	updateColor();
	if (typeof customColors != "undefined") {
		addColors(customColors);
	}
	addColors(defaultColors);
});
function addColors(colors) {
	for(let i=0;i<colors.length;i++) {
		let $tempOptgroup = $("<optgroup></optgroup>");
		$tempOptgroup.attr("label",colors[i].name);
		for(let j=0;j<colors[i].value.length;j++) {
			let $tempOption = $("<option></option>");
			$tempOptgroup.append($tempOption);
			$tempOption.val(colors[i].value[j].value);
			$tempOption.text(colors[i].value[j].name);
			$tempOption.css("background-color", colors[i].value[j].value);
			if(w3color(colors[i].value[j].value).isDark()) {
				$tempOption.css("color", "white");
			} else {
				$tempOption.css("color", "black");
			}
		}
		$("#cp-select").append($tempOptgroup);
	}
}
function updateColor() {
	favColor = localStorage.getItem("favColor");
	$("#cp-color").val(favColor);
	$('#cp-select').val("FavColor");
	$("#cp-select>option:first").text(favColor);
	if(w3color(favColor).isDark()) {
		$("#cp-select>option:first").css("color", "white");
	} else {
		$("#cp-select>option:first").css("color", "black");
	}
	$("#cp-select>option:first").css("background-color", favColor);
}
function selectChange(event) {
	if(event.target.value == "FavColor") {
		$("#cp-color").val(favColor);
	} else {
		$("#cp-color").val(w3color(event.target.value).toHexString());
	}
}
function colorChange(event) {
	favColor = event.target.value;
	$('#cp-select').val("FavColor");
	$("#cp-select>option:first").text(favColor);
	if(w3color(favColor).isDark()) {
		$("#cp-select>option:first").css("color", "white");
	} else {
		$("#cp-select>option:first").css("color", "black");
	}
	$('#cp-select>option:first').css("background-color", favColor);
	localStorage.setItem("favColor", favColor);
}
function insertColor() {
	var targetColor = $('#cp-select').val();
	if(targetColor == "FavColor") {
		targetColor = favColor;
	}
	let $currentFocused = $('#wpTextbox1');
	if ($currentFocused.length) {
		$currentFocused.textSelection('encapsulateSelection', {peri: targetColor, replace: true});
	}
}
var defaultColors = [{
	"name":"粉色",
	"value":[
		{"name":"Pink","value":"Pink"},
		{"name":"LightPink","value":"LightPink"},
		{"name":"HotPink","value":"HotPink"},
		{"name":"DeepPink","value":"DeepPink"},
		{"name":"PaleVioletRed","value":"PaleVioletRed"},
		{"name":"MediumVioletRed","value":"MediumVioletRed"}]
	},{
	"name":"紫色",
	"value":[
		{"name":"Lavender","value":"Lavender"},
		{"name":"Thistle","value":"Thistle"},
		{"name":"Plum","value":"Plum"},
		{"name":"Orchid","value":"Orchid"},
		{"name":"Violet","value":"Violet"},
		{"name":"Fuchsia","value":"Fuchsia"},
		{"name":"Magenta","value":"Magenta"},
		{"name":"MediumOrchid","value":"MediumOrchid"},
		{"name":"DarkOrchid","value":"DarkOrchid"},
		{"name":"DarkViolet","value":"DarkViolet"},
		{"name":"BlueViolet","value":"BlueViolet"},
		{"name":"DarkMagenta","value":"DarkMagenta"},
		{"name":"Purple","value":"Purple"},
		{"name":"MediumPurple","value":"MediumPurple"},
		{"name":"MediumSlateBlue","value":"MediumSlateBlue"},
		{"name":"SlateBlue","value":"SlateBlue"},
		{"name":"DarkSlateBlue","value":"DarkSlateBlue"},
		{"name":"RebeccaPurple","value":"RebeccaPurple"},
		{"name":"Indigo","value":"Indigo"}]
	},{
	"name":"紅色",
	"value":[
		{"name":"LightSalmon","value":"LightSalmon"},
		{"name":"Salmon","value":"Salmon"},
		{"name":"DarkSalmon","value":"DarkSalmon"},
		{"name":"LightCoral","value":"LightCoral"},
		{"name":"IndianRed","value":"IndianRed"},
		{"name":"Crimson","value":"Crimson"},
		{"name":"Red","value":"Red"},
		{"name":"FireBrick","value":"FireBrick"},
		{"name":"DarkRed","value":"DarkRed"}]
	},{
	"name":"橙色",
	"value":[
		{"name":"Orange","value":"Orange"},
		{"name":"DarkOrange","value":"DarkOrange"},
		{"name":"Coral","value":"Coral"},
		{"name":"Tomato","value":"Tomato"},
		{"name":"OrangeRed","value":"OrangeRed"}]
	},{
	"name":"黃色",
	"value":[
		{"name":"Gold","value":"Gold"},
		{"name":"Yellow","value":"Yellow"},
		{"name":"LightYellow","value":"LightYellow"},
		{"name":"LemonChiffon","value":"LemonChiffon"},
		{"name":"LightGoldenrodYellow","value":"LightGoldenrodYellow"},
		{"name":"PapayaWhip","value":"PapayaWhip"},
		{"name":"Moccasin","value":"Moccasin"},
		{"name":"PeachPuff","value":"PeachPuff"},
		{"name":"PaleGoldenrod","value":"PaleGoldenrod"},
		{"name":"Khaki","value":"Khaki"},
		{"name":"DarkKhaki","value":"DarkKhaki"}]
	},{
	"name":"綠色",
	"value":[
		{"name":"GreenYellow","value":"GreenYellow"},
		{"name":"Chartreuse","value":"Chartreuse"},
		{"name":"LawnGreen","value":"LawnGreen"},
		{"name":"Lime","value":"Lime"},
		{"name":"LimeGreen","value":"LimeGreen"},
		{"name":"PaleGreen","value":"PaleGreen"},
		{"name":"LightGreen","value":"LightGreen"},
		{"name":"MediumSpringGreen","value":"MediumSpringGreen"},
		{"name":"SpringGreen","value":"SpringGreen"},
		{"name":"MediumSeaGreen","value":"MediumSeaGreen"},
		{"name":"SeaGreen","value":"SeaGreen"},
		{"name":"ForestGreen","value":"ForestGreen"},
		{"name":"Green","value":"Green"},
		{"name":"DarkGreen","value":"DarkGreen"},
		{"name":"YellowGreen","value":"YellowGreen"},
		{"name":"OliveDrab","value":"OliveDrab"},
		{"name":"DarkOliveGreen","value":"DarkOliveGreen"},
		{"name":"MediumAquamarine","value":"MediumAquamarine"},
		{"name":"DarkSeaGreen","value":"DarkSeaGreen"},
		{"name":"LightSeaGreen","value":"LightSeaGreen"},
		{"name":"DarkCyan","value":"DarkCyan"},
		{"name":"Teal","value":"Teal"}]
	},{
	"name":"青色",
	"value":[
		{"name":"Aqua","value":"Aqua"},
		{"name":"Cyan","value":"Cyan"},
		{"name":"LightCyan","value":"LightCyan"},
		{"name":"PaleTurquoise","value":"PaleTurquoise"},
		{"name":"Aquamarine","value":"Aquamarine"},
		{"name":"Turquoise","value":"Turquoise"},
		{"name":"MediumTurquoise","value":"MediumTurquoise"},
		{"name":"DarkTurquoise","value":"DarkTurquoise"}]
	},{
	"name":"藍色",
	"value":[
		{"name":"CadetBlue","value":"CadetBlue"},
		{"name":"SteelBlue","value":"SteelBlue"},
		{"name":"LightSteelBlue","value":"LightSteelBlue"},
		{"name":"LightBlue","value":"LightBlue"},
		{"name":"PowderBlue","value":"PowderBlue"},
		{"name":"LightSkyBlue","value":"LightSkyBlue"},
		{"name":"SkyBlue","value":"SkyBlue"},
		{"name":"CornflowerBlue","value":"CornflowerBlue"},
		{"name":"DeepSkyBlue","value":"DeepSkyBlue"},
		{"name":"DodgerBlue","value":"DodgerBlue"},
		{"name":"RoyalBlue","value":"RoyalBlue"},
		{"name":"Blue","value":"Blue"},
		{"name":"MediumBlue","value":"MediumBlue"},
		{"name":"DarkBlue","value":"DarkBlue"},		
		{"name":"Navy","value":"Navy"},
		{"name":"MidnightBlue","value":"MidnightBlue"}]
	},{
	"name":"棕色",
	"value":[
		{"name":"Cornsilk","value":"Cornsilk"},
		{"name":"BlanchedAlmond","value":"BlanchedAlmond"},
		{"name":"Bisque","value":"Bisque"},
		{"name":"NavajoWhite","value":"NavajoWhite"},
		{"name":"Wheat","value":"Wheat"},
		{"name":"BurlyWood","value":"BurlyWood"},
		{"name":"Tan","value":"Tan"},
		{"name":"RosyBrown","value":"RosyBrown"},
		{"name":"SandyBrown","value":"SandyBrown"},
		{"name":"GoldenRod","value":"GoldenRod"},
		{"name":"DarkGoldenRod","value":"DarkGoldenRod"},
		{"name":"Peru","value":"Peru"},
		{"name":"Chocolate","value":"Chocolate"},
		{"name":"Olive","value":"Olive"},
		{"name":"SaddleBrown","value":"SaddleBrown"},
		{"name":"Sienna","value":"Sienna"},
		{"name":"Brown","value":"Brown"},
		{"name":"Maroon","value":"Maroon"}]
	},{
	"name":"白色",
	"value":[
		{"name":"White","value":"White"},
		{"name":"Snow","value":"Snow"},
		{"name":"HoneyDew","value":"HoneyDew"},
		{"name":"MintCream","value":"MintCream"},
		{"name":"Azure","value":"Azure"},
		{"name":"AliceBlue","value":"AliceBlue"},
		{"name":"GhostWhite","value":"GhostWhite"},
		{"name":"WhiteSmoke","value":"WhiteSmoke"},
		{"name":"SeaShell","value":"SeaShell"},
		{"name":"Beige","value":"Beige"},
		{"name":"OldLace","value":"OldLace"},
		{"name":"FloralWhite","value":"FloralWhite"},
		{"name":"Ivory","value":"Ivory"},
		{"name":"AntiqueWhite","value":"AntiqueWhite"},
		{"name":"Linen","value":"Linen"},
		{"name":"LavenderBlush","value":"LavenderBlush"},
		{"name":"MistyRose","value":"MistyRose"}]
	},{
	"name":"灰色",
	"value":[
		{"name":"Gainsboro","value":"Gainsboro"},
		{"name":"LightGray","value":"LightGray"},
		{"name":"Silver","value":"Silver"},
		{"name":"DarkGray","value":"DarkGray"},
		{"name":"DimGray","value":"DimGray"},
		{"name":"Gray","value":"Gray"},
		{"name":"LightSlateGray","value":"LightSlateGray"},
		{"name":"SlateGray","value":"SlateGray"},
		{"name":"DarkSlateGray","value":"DarkSlateGray"},
		{"name":"Black","value":"Black"}]
	}
];