☰

Custom Spectrum Palette

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

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

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