☰

Custom Spectrum Palette

Modifies Spectrum color pickers to offer the user’s selection of preset colors and accept input.

当前为 2021-12-09 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Custom Spectrum Palette
// @namespace    http://tampermonkey.net/
// @version      1
// @description  Modifies Spectrum color pickers to offer the user’s selection of preset colors and accept input.
// @author       Salvatos
// @match        https://kanka.io/*relations*
// @match        https://kanka.io/*entity_events*
// @match        https://kanka.io/*map_markers*
// @match        https://kanka.io/*calendars*
// @icon         https://www.google.com/s2/favicons?domain=kanka.io
// @grant        none
// @run-at       document-end
// ==/UserScript==

/* INSTRUCTIONS
Add your color values in any valid format to the "palette" setting in the function below.
- Each line enclosed in square brackets corresponds to a row of options in the color picker.
- Each line should end with a comma, except the last row.
- Values are enclosed in quotation marks and separated by commas.
Valid formats:
https://bgrins.github.io/spectrum/#details-acceptedColorInputs
*/

function spectrumSettings(appendTo, pageDelay = 0) {
	setTimeout(function() {
		$("input.spectrum").spectrum({
			showInput: true,
			showPalette: true,
			preferredFormat: "hex",
			appendTo: appendTo,
			palette: [ // Add your colors here
				['#ffffff', '#000000', '#ff0000', '#ff8000', '#ffff00'],
				['#008000', '#0000ff', '#4b0082', '#9400d3']
			]
		});
	}, pageDelay);
}

/* Set the closest container that exists at page load to watch for changes to keep MutationObserver lean */
/* Also, specify appendTo to make the input field editable in modals */

// Entity Connections page and calendar Event modal and entity Event modal
if (
	(window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") != -1) ||
	window.location.href.indexOf("calendars") != -1 ||
	window.location.href.indexOf("entity_events") != -1
) {
	document.targetNode = $("#entity-modal")[0];
	document.appendTo = "#entity-modal";
}
// Bulk relation edit page
else if (window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") == -1) {
	document.targetNode = $("#bulk-edit")[0];
	document.appendTo = "#bulk-edit";
}
// Map marker edit page
else if (window.location.href.indexOf("map_markers") != -1) {
	document.targetNode = $("#map-marker-form")[0];
	document.appendTo = "#map-marker-form";
}
// Undocumented instances (normally the script shouldn’t run on those pages)
else {
	document.targetNode = false; // if we wanted to run everywhere just in case, we might observe and appendTo $("#app")[0];
}

// If we know what we’re looking for, start observing the page
if (document.targetNode) {
	/* Even though it exists in the DOM at page load,
	* the relations bulk editor seems to recreate the color picker when the modal opens for the first time...
	* So we need a bit of a delay to hit the new instance and not the one that’s being destroyed
	*/
	let pageDelay = (window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") == -1) ? 500 : 0;

	// Set and run the observer until the color picker becomes visible on screen after its container changes
	let observer = new MutationObserver(function(mutations) {
		if ($('.sp-replacer:visible').length) {
			observer.disconnect();
			spectrumSettings(document.appendTo, pageDelay);
		}
	});

	observer.observe(document.targetNode, {attributes: false, childList: true, characterData: false, subtree:true});
}