☰

resizemas

equal resizable columns in mastodon

  1. // ==UserScript==
  2. // @name         resizemas
  3. // @namespace    http://poshcode.org/resizemas
  4. // @version      0.2.1
  5. // @description  equal resizable columns in mastodon
  6. // @author       jaykul
  7. // @license      MIT
  8. // @match        https://fosstodon.org/*
  9. // @match        https://*/deck/*
  10. // @match        https://*/web/*
  11. // @icon         https://www.google.com/s2/favicons?sz=64&domain=aus.social
  12. // @sandbox      DOM
  13. // @run-at       document-idle
  14. // ==/UserScript==
  15. const makeResizeable = function (col, all) {
  16.     // Track the current position of mouse
  17.     let x = 0;
  18.     let w = 0;
  19.  
  20.     if (all === undefined) {
  21.         all = [col];
  22.     }
  23.  
  24.     const mouseDownHandler = function (e) {
  25.         // Get the current mouse position
  26.         x = e.clientX;
  27.  
  28.         // Calculate the current width of column
  29.         const styles = window.getComputedStyle(col);
  30.         w = parseInt(styles.width, 10);
  31.  
  32.         // Attach listeners for document's events
  33.         document.addEventListener('mousemove', mouseMoveHandler);
  34.         document.addEventListener('mouseup', mouseUpHandler);
  35.     };
  36.  
  37.     const mouseMoveHandler = function (e) {
  38.         // Determine how far the mouse has been moved
  39.         const dx = e.clientX - x;
  40.         // Update the width of column
  41.         all.forEach(function (c) { c.style.width = `${w + dx}px` });
  42.     };
  43.  
  44.     // When user releases the mouse, remove the existing event listeners
  45.     const mouseUpHandler = function () {
  46.         document.removeEventListener('mousemove', mouseMoveHandler);
  47.         document.removeEventListener('mouseup', mouseUpHandler);
  48.     };
  49.  
  50.     // Add a resizer element
  51.     const resizer = document.createElement('div');
  52.     resizer.style.position = 'absolute';
  53.     resizer.style.top = 0;
  54.     resizer.style.right = 0;
  55.     resizer.style.width = '5px';
  56.     resizer.style.height = '100%';
  57.     resizer.style.cursor = 'col-resize';
  58.  
  59.     // Add a resizer element to the column
  60.     col.appendChild(resizer);
  61.  
  62.     resizer.addEventListener('mousedown', mouseDownHandler);
  63. };
  64.  
  65. const cols = document.querySelectorAll('div.column');
  66.  
  67. // Make all the columns resizable together
  68. cols.forEach(function (col) {
  69.     makeResizeable(col);
  70. });
  71.  
  72. const drawer = document.querySelector('div.drawer');
  73. makeResizeable(drawer);
  74.  
  75. // Make the drawer sticky
  76. drawer.style.position = 'sticky';
  77. drawer.style.left = 0;
  78. // Hide things that slide behind the drawer
  79. drawer.style.zIndex = 100;
  80. drawer.style.background = window.getComputedStyle(document.body).background;