Raw Source Toggle Dropdown

• Minified Source

MichaelSchreiner / rolz.org draggable panes

// ==UserScript==
// @name         rolz.org draggable panes
// @namespace    UserScript
// @version      1.0
// @description  make panes resizeable by dragging, in dice room on rolz.org
// @author       Michael Schreiner
// @match        https://rolz.org/dr?*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=rolz.org
// @grant        none
// @license MIT
// ==/UserScript==

movable_panesize();

function movable_panesize() {
	// smaller paddings, more space
	var paddingwidth = 4;
	document.getElementById('content').style.paddingLeft = '0.25em';
	document.getElementById('content').style.paddingRight = '0.25em';
	document.getElementById('prompt-line-lower2').style.marginTop = '0';
	document.getElementById('prompt-line-lower2').style.height = '3em';
	document.getElementById('topmenu').style.lineHeight = '130%';
	document.getElementById('container').style.marginTop = '37px';
	document.getElementById('send-button').style.float = 'none';
	document.getElementById('dr-panes').style.maxWidth = 'none';
	// hide button for optional content does not work anymore
	document.getElementsByClassName('width-optional-content')[2].style.display = 'none';
	// insert draggable pane
	document.getElementById('dr-panes').style.backgroundColor = '#888888';
	document.getElementById('dr-panes').style.display = 'flex';
	document.getElementById('dr-panes').style.gap = '0';
	document.getElementById('pane-x-1').insertAdjacentHTML('afterend', '<div id="handler" style="display: relative; width: 0.45em; height: 37px; padding: 0; background-color: #888888; background-image: radial-gradient(circle at center, black 1px, transparent 0), radial-gradient(circle at center, black 1px, transparent 0); background-size: 6px 6px; background-position: 2px 2px, 5px 5px; cursor: ew-resize; user-select: none; flex: 0 0 auto;"></div>');
	document.getElementById('pane-x-1').style.boxSizing = 'border-box';
	document.getElementById('pane-x-1').style.flex = '1 1 auto';
	document.getElementById('pane-x-1').style.width = '250px';
	document.getElementById('pane-x-2').style.boxSizing = 'border-box';
	document.getElementById('pane-x-2').style.flex = '1 1 auto';
	var handler = document.getElementById('handler');
	var wrapper = document.getElementById('dr-panes');
	var leftBox = document.getElementById('pane-x-1');
	// minimum width set on pane-x-1
	var leftBoxminWidth = 250;
	// minimum width set on pane-x-2
	var righBoxminWidth = 332;
	var isHandlerDragging = false;
	var isHandlerTouching = false;

 function movePane(moveEvent) {
	  // get offset
	  var containerOffsetLeft = wrapper.offsetLeft;
	  // get x-coordinate of pointer relative to container
	  var pointerRelativeXpos = moveEvent.clientX - containerOffsetLeft;
	  // resize left box
	  leftBox.style.width = (Math.min(Math.max(leftBoxminWidth, pointerRelativeXpos), document.getElementById('dr-panes').offsetWidth - righBoxminWidth)) + 'px';
	  // set flex-grow to 0 to prevent it from growing
	  leftBox.style.flexGrow = 0;
 }

	document.addEventListener('mousedown', function(e) {
	  if (e.target === handler) {
	    isHandlerDragging = true;
	  }
	});

	document.addEventListener('mouseup', function(e) {
	  isHandlerDragging = false;
	});

	document.addEventListener('mousemove', function(e) {
	  if (!isHandlerDragging) {
	    return false;
	  }
	  movePane(e);
	});

	document.addEventListener('touchstart', function(e) {
	  if (e.target === handler) {
	    isHandlerTouching = true;
	  }
	});

	document.addEventListener('touchend', function(e) {
	  isHandlerTouching = false;
	});

	document.addEventListener('touchmove', function(e) {
	  if (!isHandlerTouching) {
	    return false;
	  }
	  movePane(e.changedTouches[0]);
	});
}