☰

Tag Column for Kanka Entity Lists

Adds a Tags column to entity lists (in table view) in Kanka

  1. // ==UserScript==
  2. // @name         Tag Column for Kanka Entity Lists
  3. // @namespace    http://tampermonkey.net/
  4. // @license      MIT
  5. // @version      4
  6. // @description  Adds a Tags column to entity lists (in table view) in Kanka
  7. // @author       Salvatos
  8. // @match        https://app.kanka.io/*
  9. // @exclude      https://app.kanka.io/*/bookmarks
  10. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  11. // @connect      kanka.io
  12. // ==/UserScript==
  13.  
  14. /* You can set after which column Tags should go.
  15.  * Note that not all entities have the same columns, so the safe choices are, from left to right:
  16.  - ".col-checkbox"
  17.  - ".dg-avatar"
  18.  - ".dg-name"
  19.  - ".dg-type"
  20.  - ".dg-is_private"
  21.  */
  22. const insertAfter = ".dg-type";
  23.  
  24. // Try to run only in tabled entity lists
  25. if (document.querySelector(".table-entities")) {
  26.     // In Tags list, clarify the headings
  27.     try {
  28.         document.querySelector(".dg-tags").textContent = "Subtags";
  29.     }
  30.     catch {
  31.     }
  32.  
  33.     // Add column heading
  34.     document.querySelector(insertAfter).insertAdjacentHTML("afterend", `<th class="dg-tags dg-tagged hidden lg:table-cell">Tags</th>`);
  35.  
  36.     // Not every entity type displays the same columns, so we need to figure out the column number to populate the rows
  37.     const colNum = document.querySelector(".dg-tagged").cellIndex;
  38.  
  39.     // Create a parser for our JSON/HTML
  40.     const parser = new DOMParser();
  41.  
  42.     // Cycle through rows
  43.     document.querySelectorAll(".table-striped tbody tr").forEach((row , index)=>{
  44.         // Add a cell for Tags (.font-normal prevents bold in Nested view for items with descendants)
  45.         row.querySelector('td:nth-child('+colNum+')').insertAdjacentHTML("afterend", `<td class="tooltip-tags font-normal truncated max-w-fit"></td>`);
  46.  
  47.         // Get the tooltip URL for the current row
  48.         let tooltipURL = row.querySelector("a.name").dataset.url;
  49.  
  50.         // Fetch and parse the tooltip’s JSON
  51.         var xhr = new XMLHttpRequest();
  52.         xhr.open("GET", tooltipURL, true);
  53.         xhr.responseType = 'json';
  54.         xhr.onload = function (e) {
  55.             if (xhr.readyState === 4) {
  56.                 if (xhr.status === 200) {
  57.                     let tooltipObject = parser.parseFromString(xhr.response[0], "text/html");
  58.  
  59.                     // Look for tags in tooltip and append if any
  60.                     try {
  61.                         let new_element = tooltipObject.querySelector(".tooltip-tags").cloneNode(true);
  62.                         row.querySelector("td.tooltip-tags").append(new_element);
  63.                     }
  64.                     catch {
  65.                     }
  66.                 } else {
  67.                     console.error(xhr.statusText);
  68.                 }
  69.             }
  70.         };
  71.         xhr.onerror = function (e) {
  72.             console.error(xhr.statusText);
  73.         };
  74.         xhr.send(null);
  75.     });
  76. }