☰

rolz.org draggable panes

make panes resizeable by dragging, in dice room on rolz.org

  1. // ==UserScript==
  2. // @name         rolz.org draggable panes
  3. // @namespace    UserScript
  4. // @version      1.0
  5. // @description  make panes resizeable by dragging, in dice room on rolz.org
  6. // @author       Michael Schreiner
  7. // @match        https://rolz.org/dr?*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=rolz.org
  9. // @grant        none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. movable_panesize();
  14.  
  15. function movable_panesize() {
  16. 	// smaller paddings, more space
  17. 	var paddingwidth = 4;
  18. 	document.getElementById('content').style.paddingLeft = '0.25em';
  19. 	document.getElementById('content').style.paddingRight = '0.25em';
  20. 	document.getElementById('prompt-line-lower2').style.marginTop = '0';
  21. 	document.getElementById('prompt-line-lower2').style.height = '3em';
  22. 	document.getElementById('topmenu').style.lineHeight = '130%';
  23. 	document.getElementById('container').style.marginTop = '37px';
  24. 	document.getElementById('send-button').style.float = 'none';
  25. 	document.getElementById('dr-panes').style.maxWidth = 'none';
  26. 	// hide button for optional content does not work anymore
  27. 	document.getElementsByClassName('width-optional-content')[2].style.display = 'none';
  28. 	// insert draggable pane
  29. 	document.getElementById('dr-panes').style.backgroundColor = '#888888';
  30. 	document.getElementById('dr-panes').style.display = 'flex';
  31. 	document.getElementById('dr-panes').style.gap = '0';
  32. 	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>');
  33. 	document.getElementById('pane-x-1').style.boxSizing = 'border-box';
  34. 	document.getElementById('pane-x-1').style.flex = '1 1 auto';
  35. 	document.getElementById('pane-x-1').style.width = '250px';
  36. 	document.getElementById('pane-x-2').style.boxSizing = 'border-box';
  37. 	document.getElementById('pane-x-2').style.flex = '1 1 auto';
  38. 	var handler = document.getElementById('handler');
  39. 	var wrapper = document.getElementById('dr-panes');
  40. 	var leftBox = document.getElementById('pane-x-1');
  41. 	// minimum width set on pane-x-1
  42. 	var leftBoxminWidth = 250;
  43. 	// minimum width set on pane-x-2
  44. 	var righBoxminWidth = 332;
  45. 	var isHandlerDragging = false;
  46. 	var isHandlerTouching = false;
  47.  
  48.  function movePane(moveEvent) {
  49. 	  // get offset
  50. 	  var containerOffsetLeft = wrapper.offsetLeft;
  51. 	  // get x-coordinate of pointer relative to container
  52. 	  var pointerRelativeXpos = moveEvent.clientX - containerOffsetLeft;
  53. 	  // resize left box
  54. 	  leftBox.style.width = (Math.min(Math.max(leftBoxminWidth, pointerRelativeXpos), document.getElementById('dr-panes').offsetWidth - righBoxminWidth)) + 'px';
  55. 	  // set flex-grow to 0 to prevent it from growing
  56. 	  leftBox.style.flexGrow = 0;
  57.  }
  58.  
  59. 	document.addEventListener('mousedown', function(e) {
  60. 	  if (e.target === handler) {
  61. 	    isHandlerDragging = true;
  62. 	  }
  63. 	});
  64.  
  65. 	document.addEventListener('mouseup', function(e) {
  66. 	  isHandlerDragging = false;
  67. 	});
  68.  
  69. 	document.addEventListener('mousemove', function(e) {
  70. 	  if (!isHandlerDragging) {
  71. 	    return false;
  72. 	  }
  73. 	  movePane(e);
  74. 	});
  75.  
  76. 	document.addEventListener('touchstart', function(e) {
  77. 	  if (e.target === handler) {
  78. 	    isHandlerTouching = true;
  79. 	  }
  80. 	});
  81.  
  82. 	document.addEventListener('touchend', function(e) {
  83. 	  isHandlerTouching = false;
  84. 	});
  85.  
  86. 	document.addEventListener('touchmove', function(e) {
  87. 	  if (!isHandlerTouching) {
  88. 	    return false;
  89. 	  }
  90. 	  movePane(e.changedTouches[0]);
  91. 	});
  92. }