equal resizable columns in mastodon
目前为
// ==UserScript==
// @name resizemastodo
// @namespace http://poshcode.org/resizemastodo
// @version 0.1.0
// @description equal resizable columns in mastodon
// @author Joel "Jaykul" Bennett
// @license MIT
// @match https://*/web/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=aus.social
// @run-at document-idle
// ==/UserScript==
(function() {
const makeResizeable = function (all, 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
all.forEach(function(c){c.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 cols = document.querySelectorAll('div.column');
// Query all columns
cols.forEach(function (col) {
// Add a resizer element
const resizer = document.createElement('div');
resizer.style.position = 'absolute';
resizer.style.top = 0;
resizer.style.right = 0;
resizer.style.width = '5px';
resizer.style.height = '100%';
resizer.style.cursor = 'col-resize';
// Add a resizer element to the column
col.appendChild(resizer);
// Will be implemented in the next section
makeResizeable(cols, col, resizer);
});
})();