☰

Custom Coloris Palette

Modifies Coloris color pickers in Kanka to offer the user’s selection of preset colors.

  1. // ==UserScript==
  2. // @name         Custom Coloris Palette
  3. // @namespace    http://tampermonkey.net/
  4. // @version      4
  5. // @description  Modifies Coloris color pickers in Kanka to offer the user’s selection of preset colors.
  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. // @match        https://app.kanka.io/*theme-builder
  14. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  15. // @grant        none
  16. // @run-at       document-end
  17. // ==/UserScript==
  18.  
  19. /*** INSTRUCTIONS
  20. Add your color values in any valid format to the "customColors" setting below.
  21. - Values are enclosed in quotation marks and separated by commas (line breaks are optional).
  22. - All standard web color formats are accepted: named, hexadecimal, RGB(A), HSL, etc.
  23.  
  24. Example:
  25. var customColorsExample = [
  26.     'navy',
  27.     '#07b',
  28.     '#123321',
  29.     '#00b4d880',
  30.     'rgb(244,162,97)',
  31.     'rgba(0,119,182,0.8)',
  32.     'hsl(0, 100%, 50%)',
  33. ];
  34.  
  35. Remember you can also define a palette on each campaign; details on GreasyFork.
  36. ***/
  37.  
  38. var customColors = [
  39.     
  40. ];
  41.  
  42. // Prepare to check for supported themes in the campaign
  43. var rootFlags = getComputedStyle(document.documentElement);
  44.  
  45. /* Campaign-specific swatches */
  46. if (rootFlags.getPropertyValue('--coloris-presets')) {
  47.     let campaignSwatches = rootFlags.getPropertyValue('--coloris-presets').split(" ");
  48.     // Merge browser and campaign arrays, removing duplicates
  49.     customColors = customColors.concat(campaignSwatches.filter((item) => customColors.indexOf(item) < 0));
  50. }
  51.  
  52. /* Build swatches */
  53. var swatches = `<div>`;
  54. for (let i = 0; i < customColors.length; i++) {
  55.     swatches += `<button type="button" id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${customColors[i]};">${customColors[i]}</button>`;
  56. }
  57. swatches += `</div>`;
  58.  
  59. /* Select the element to watch for the appearance of a color picker based on the current page */
  60. /* Use the closest parent to input.spectrum that exists at page load to keep MutationObserver lean */
  61.  
  62. // Buld relations edit modal
  63. if (window.location.href.indexOf("relations") != -1 && window.location.href.indexOf("entities") == -1) {
  64. 	document.targetNode = document.getElementById("bulk-edit");
  65. }
  66. // Map marker edit page
  67. else if (window.location.href.indexOf("map_markers") != -1) {
  68. 	document.targetNode = document.getElementById("map-marker-form");
  69. }
  70. // Map marker preset edit page
  71. else if (window.location.href.indexOf("presets") != -1) {
  72.     document.targetNode = document.querySelector("section.content .grid");
  73. }
  74. // Family tree relation edit modal
  75. else if (window.location.href.indexOf("tree") != -1) {
  76. 	document.targetNode = document.getElementById("family-tree");
  77. }
  78. // Theme Builder
  79. // Form is created at page load, so no need to observe mutations
  80. else if (window.location.href.indexOf("theme-builder") != -1) {
  81.     // Just add the swatches once, but allow a second for Coloris to initialize
  82.     setTimeout(() => {
  83.         document.getElementById("clr-swatches").insertAdjacentHTML("beforeend", swatches);
  84.     }, "1000");
  85.  
  86. }
  87. // Default (entity relations and reminders, calendar reminders, theme builder, etc.)
  88. else {
  89. 	document.targetNode = document.getElementById("primary-dialog");
  90. }
  91.  
  92. // Start observing the page for the appearance of a "Spectrum" input, except for the Theme Builder
  93. if (document.targetNode) {
  94.     let observer = new MutationObserver(function(mutations) {
  95.         if (document.querySelector(':is(.spectrum, .picker)')) {
  96.             // If swatches have not already been added, append them to the existing container
  97.             if (document.getElementById("clr-swatches").children.length < 1) {
  98.                 document.getElementById("clr-swatches").insertAdjacentHTML("beforeend", swatches);
  99.             }
  100.             // Keep the observer running in case the modal is closed and reopened
  101.         }
  102.     });
  103.  
  104.     observer.observe(document.targetNode, {attributes: false, childList: true, characterData: false, subtree:true});
  105. }