User:Arthurfragoso/ResizingDragBar.js

// ==UserScript==

// @name ResizingDragBar

// @namespace https://en.wikipedia.org/wiki/User:Arthurfragoso/ResizingDragBar.js

// @version 1.0

// @description Add a draggable resizing bar to Wikipedia text areas.

// @author Arthurfragoso

// @match https://*.wikipedia.org/w/index.php?*action=*

// @icon https://en.wikipedia.org/static/favicon/wikipedia.ico

// @grant none

// @run-at document-end

// ==/UserScript==

/*

* Inspired by WikiEditor.

* written with the help of ChatGPT

*

* */

(async function () {

'use strict';

// Adds the WpExtnSideBySideEnabled CSS class to the HTML tag,

// This allows for external scripts to check if it is enabled.

// It also prevents two versions of the script to be run at the same time,

// In case it is activated in Wikipedia and as a browser user script

if (document.documentElement.classList.contains("WpExtnResizingDragBar")) {

return;

}

document.documentElement.classList.add("WpExtnResizingDragBar");

// Function to add a draggable resizing bar

function addResizingBar(textArea) {

const dragBar = document.createElement('div');

dragBar.id = 'ext-ResizingDragBar';

dragBar.style.width = '100%';

dragBar.style.height = '10px';

dragBar.style.cursor = 'row-resize';

dragBar.style.backgroundColor = '#ccc';

// Insert the drag bar below the text area

textArea.parentNode.insertBefore(dragBar, textArea.nextSibling);

let isDragging = false;

// Mouse events

dragBar.addEventListener('mousedown', (e) => {

e.preventDefault();

isDragging = true;

document.body.style.userSelect = 'none'; // Prevent text selection during drag

});

document.addEventListener('mousemove', (e) => {

if (!isDragging) return;

const newHeight = e.clientY - textArea.getBoundingClientRect().top;

textArea.style.height = `${Math.max(newHeight, 100)}px`; // Set a minimum height

});

document.addEventListener('mouseup', () => {

isDragging = false;

document.body.style.userSelect = ''; // Restore text selection

});

}

// Wait to check if WikiEditor is available

setTimeout(() => {

// Only load if WikiEditor is not available, as it already has a RisizingBar.

if (document.querySelector('.ext-WikiEditor-ResizingDragBar')){

return false;

}

const textArea = document.querySelector('#wpTextbox1'); // Wikipedia's editing textarea

if (textArea) {

textArea.style.resize = 'none'; // Disable default resizing

textArea.style.overflow = 'auto';

addResizingBar(textArea);

}

},1000);

})();