注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
?_=1
来访问最新页面。https://mzh.moegirl.org.cn/User:W3jc/js/ColorPicker.js?_=1
//可视化颜色选择器 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"}] } ];