logseq table resizer - custom.js / custom.css

custom.js.md

DEPRECATED GIST: go here instead: https://github.com/cannibalox/logseq-custom-files

snippets for logseq (copy - paste to custom.js / custom.css)

• query table view : add handles on the table headers to resize column width (not persistent)
• replace namespace prefixes eg [[prefix/page/test]] becomes [[../test]]

logseq_custom.css

    /* logseq table resizer v20220314b ======================= */
    /* add rules to custom.css =============================== */
        .table th {
            position: relative;
        }
        .query-table-resizer {
            /* Displayed at the right side of column */
            position: relative;
            top: -20px;
            right: 0;
            margin-bottom: -18px;
            cursor: col-resize;
            user-select: none;
            border-right: 1px solid var(--ls-border-color);
        }

        .query-table-resizer:active,
        .query-table-resizing {
            border-right: 2px solid rgb(255, 0, 0);
        }

        .dsl-query table.table-auto {
            width: -webkit-fill-available;
            table-layout: fixed;
        }
        .dsl-query .table-auto>thead>tr>th {
            border-bottom: 1px solid var(--ls-border-color);
        }
        .dsl-query .table-auto>thead>tr>th {
            background-color: rgba(0, 0, 0, 0.1);
            padding: 3px 6px;
        }
        .dsl-query .table-auto>tbody>tr>td.whitespace-nowrap {
            overflow-wrap: break-word;
            min-width: 20px;
            white-space: normal;
            font-weight: 300;
            font-size: 13px;
        }
        .dsl-query .table-auto>tbody>tr>.whitespace-nowrap img {
            max-height: 120px;
            margin: 0;
        }
/* ==================================== nend of table resizer */

logseq_custom.js

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

// throttle MutationObserver 
// from https://stackoverflow.com/a/52868150
  const throttle = (func, limit) => {
    let inThrottle;
    return (...args) => {
      if (!inThrottle) {
        func(...args);
        inThrottle = setTimeout(() => (inThrottle = false), limit);
      }
    };
  };

// query table resizer ===================================== 
// source : https://htmldom.dev/resize-columns-of-a-table/   
  console.log("========= query table resizer v20220312 ============");

  const createResizableColumn = function (col, resizer) {
    // Track the current position of mouse
    let x = 0;
    let w = 0;

    const mouseDownHandler = function (e) {
      // Get the current mouse position
      x = e.clientX;

      // Calculate the current width of column
      const styles = window.getComputedStyle(col);
      w = parseInt(styles.width, 10);

      // Attach listeners for document's events
      document.addEventListener("mousemove", mouseMoveHandler);
      document.addEventListener("mouseup", mouseUpHandler);
    };

    const mouseMoveHandler = function (e) {
      // Determine how far the mouse has been moved
      const dx = e.clientX - x;
      // Update the width of column
      col.style.width = `${w + dx}px`;
    };

    // When user releases the mouse, remove the existing event listeners
    const mouseUpHandler = function () {
      document.removeEventListener("mousemove", mouseMoveHandler);
      document.removeEventListener("mouseup", mouseUpHandler);
    };
    resizer.addEventListener("mousedown", mouseDownHandler);
  };

  const updateTables = function () {
    // Query the table
    const table = document.querySelectorAll(".table-auto:not(.table-resizable)");
    for (let i = 0; i < table.length; i++) {
      // Query all headers1
      const cols = table[i].querySelectorAll("th.whitespace-nowrap");
      // Loop ver them
      Array.from(cols).forEach((col) => {
        // Create a resizer element
        const resizer = document.createElement("div");
        resizer.classList.add("query-table-resizer");
        table[i].classList.add("table-resizable");
        console.info("-- injected div.query-table-resizer --");
        // Set the height
        resizer.style.height = "20px";
        // Add a resizer element to the column
        col.appendChild(resizer);
        createResizableColumn(col, resizer);
      });
    }
  };

  const updateTablesThrottled = throttle(updateTables, 1000);
  const obsTable = new MutationObserver(updateTablesThrottled);
  const watchTarget = document.getElementById("app-container");
  obsTable.observe(watchTarget, {
    subtree: true,
    childList: true,
  }); 

// hide namespace prefix ============================================ 
  function hideNamespace() {
    console.info("====== LS HIDE NAMESPACE v20220314 =====");
    let nmsp = document.querySelectorAll(
      'a.page-ref[data-ref*="/"]:not(.hidden-namespace)'
    );
    for (var i = 0; i < nmsp.length; i++) {
      if (nmsp[i].innerText.indexOf("/") !== -1) {
        nmsp[i].innerHTML =
          "<span style='color:rgb(133, 211, 81)'>..</span>" +
          nmsp[i].innerText.substring(nmsp[i].innerText.lastIndexOf("/"));
        nmsp[i].classList.add("hidden-namespace"); 
        //console.info(" namespace off ==> " + nmsp[i].innerText);
      }
    }
  }

  const updateHideNamespace = throttle(hideNamespace, 1000);
  const obsNamespace = new MutationObserver(updateHideNamespace);
  obsNamespace.observe(watchTarget, {
    subtree: true,
    attributes: true,
  });

const updateTables = function () {
  // Query the table
  const table = document.getElementsByClassName("table-auto");
  for (let i = 0; i < table.length; i++) {
    let resizerExists = table[i].querySelector(".query-table-resizer");
    if (!resizerExists) {
      // Query all headers1
      const cols = table[i].querySelectorAll("th.whitespace-nowrap");
      // Loop ver them
      Array.from(cols).forEach((col) => {
        // Create a resizer element
        const resizer = document.createElement("div");
        resizer.classList.add("query-table-resizer");
        console.info("-- injected div.query-table-resizer --");
        // Set the height
        resizer.style.height = `20px`;
        // Add a resizer element to the column
        col.appendChild(resizer);
        createResizableColumn(col, resizer);
      });
    }
  }
};

// from https://stackoverflow.com/a/52868150
const throttle = (func, limit) => {
  let inThrottle
  return (...args) => {
    if (!inThrottle) {
      func(...args)
      inThrottle = setTimeout(() => inThrottle = false, limit)
    }
  }
}

const updateTablesThrottled = throttle(updateTables, 1000);
const observer = new MutationObserver(updateTablesThrottled);

thanks ! much better this way :D