☰

Custom Spectrum Palette

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

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

  1. // ==UserScript==
  2. // @name         Custom Spectrum Palette
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3
  5. // @description  Modifies Spectrum color pickers to offer the user’s selection of preset colors and accept input.
  6. // @author       Salvatos
  7. // @match        https://app.kanka.io/*relations*
  8. // @match        https://app.kanka.io/*entity_events*
  9. // @match        https://app.kanka.io/*map_markers*
  10. // @match        https://app.kanka.io/*presets*
  11. // @match        https://app.kanka.io/*calendars*
  12. // @match        https://app.kanka.io/*families/*/tree*
  13. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  14. // @grant        none
  15. // @run-at       document-end
  16. // ==/UserScript==
  17.  
  18. /* INSTRUCTIONS
  19. Add your color values in any valid format to the "palette" setting in the function below.
  20. - Each line enclosed in square brackets corresponds to a row of options in the color picker.
  21. - Each line should end with a comma, except the last row.
  22. - Values are enclosed in quotation marks and separated by commas.
  23. Valid formats:
  24. https://bgrins.github.io/spectrum/#details-acceptedColorInputs
  25. */
  26.  
  27. function spectrumSettings(appendTo, pageDelay = 0) {
  28. 	setTimeout(function() {
  29. 		$("input.spectrum").spectrum({
  30. 			showInput: true,
  31. 			showPalette: true,
  32. 			preferredFormat: "hex",
  33. 			appendTo: appendTo,
  34. 			palette: [ // Add your colors here
  35. 				['#ffffff', '#000000', '#ff0000', '#ff8000', '#ffff00'],
  36. 				['#008000', '#0000ff', '#4b0082', '#9400d3']
  37. 			]
  38. 		});
  39. 	}, pageDelay);
  40. }
  41.  
  42. /* Set the closest container (to the input) that exists at page load to watch for changes to keep MutationObserver lean */
  43. /* Also, specify appendTo to make the input field editable in modals */
  44.  
  45. // Entity Connections page and calendar Event modal and entity Event modal
  46. if (
  47. 	(window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") != -1) ||
  48. 	window.location.href.indexOf("calendars") != -1 ||
  49. 	window.location.href.indexOf("entity_events") != -1
  50. ) {
  51. 	document.targetNode = $("#entity-modal")[0];
  52. 	document.appendTo = "#entity-modal";
  53. }
  54. // Bulk relation edit page
  55. else if (window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") == -1) {
  56. 	document.targetNode = $("#bulk-edit")[0];
  57. 	document.appendTo = "#bulk-edit";
  58. }
  59. // Map marker edit page
  60. else if (window.location.href.indexOf("map_markers") != -1) {
  61. 	document.targetNode = $("#map-marker-form")[0];
  62. 	document.appendTo = "#map-marker-form";
  63. }
  64. // Map marker preset edit page
  65. else if (window.location.href.indexOf("presets") != -1) {
  66.     document.targetNode = $("section.content .grid")[0];
  67. 	document.appendTo = "section.content .grid";
  68.  
  69. }
  70. // Family tree relation edit modal
  71. else if (window.location.href.indexOf("tree") != -1) {
  72. 	document.targetNode = $("#family-tree")[0];
  73. 	document.appendTo = "#family-tree";
  74. }
  75. // Undocumented instances (normally the script shouldn’t run on those pages)
  76. else {
  77. 	document.targetNode = false; // if we wanted to run everywhere just in case, we might observe and appendTo $("#app")[0];
  78. }
  79.  
  80. // If we know what we’re looking for, start observing the page
  81. if (document.targetNode) {
  82. 	/* Even though it exists in the DOM at page load,
  83. 	* the relations bulk editor seems to recreate the color picker when the modal opens for the first time...
  84. 	* So we need a bit of a delay to hit the new instance and not the one that’s being destroyed
  85. 	*/
  86. 	let pageDelay = (window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") == -1) ? 500 : 0;
  87.  
  88. 	// Set and run the observer until the color picker becomes visible on screen after its container changes
  89. 	let observer = new MutationObserver(function(mutations) {
  90. 		if ($('.sp-replacer:visible').length) {
  91. 			observer.disconnect();
  92. 			spectrumSettings(document.appendTo, pageDelay);
  93. 		}
  94. 	});
  95.  
  96. 	observer.observe(document.targetNode, {attributes: false, childList: true, characterData: false, subtree:true});
  97. }