Modifies Spectrum color pickers to offer the user’s selection of preset colors and accept input.
От
// ==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});
}