allow references pane to be resized (#546)

Author: michaelficarra

css/elements.css

@@ -992,6 +992,8 @@ tr.del > td {
   flex-grow: 0;
   flex-shrink: 0;
   font-size: 80%;
+  cursor: row-resize;
+  user-select: none;
 }
 
 .menu-pane-header emu-opt,
@@ -1245,7 +1247,6 @@ li.menu-search-result-term:before {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 250px;
   display: none;
   background-color: #ddd;
   z-index: 1;
@@ -1254,6 +1255,8 @@ li.menu-search-result-term:before {
 #references-pane-table-container {
   overflow-x: hidden;
   overflow-y: auto;
+  min-height: 35px;
+  max-height: 85vh;
 }
 
 #references-pane {

js/menu.js

@@ -723,6 +723,10 @@ let referencePane = {
     this.$header.appendChild(this.$headerText);
     this.$headerRefId = document.createElement('a');
     this.$header.appendChild(this.$headerRefId);
+    this.$header.addEventListener('pointerdown', e => {
+      this.dragStart(e);
+    });
+
     this.$closeButton = document.createElement('span');
     this.$closeButton.setAttribute('id', 'references-pane-close');
     this.$closeButton.addEventListener('click', () => {
@@ -731,16 +735,16 @@ let referencePane = {
     this.$header.appendChild(this.$closeButton);
 
     this.$pane.appendChild(this.$header);
-    let tableContainer = document.createElement('div');
-    tableContainer.setAttribute('id', 'references-pane-table-container');
+    this.$tableContainer = document.createElement('div');
+    this.$tableContainer.setAttribute('id', 'references-pane-table-container');
 
     this.$table = document.createElement('table');
     this.$table.setAttribute('id', 'references-pane-table');
 
     this.$tableBody = this.$table.createTBody();
 
-    tableContainer.appendChild(this.$table);
-    this.$pane.appendChild(tableContainer);
+    this.$tableContainer.appendChild(this.$table);
+    this.$pane.appendChild(this.$tableContainer);
 
     menu.$specContainer.appendChild(this.$container);
   },
@@ -793,6 +797,7 @@ let referencePane = {
     this.$table.removeChild(this.$tableBody);
     this.$tableBody = newBody;
     this.$table.appendChild(this.$tableBody);
+    this.autoSize();
   },
 
   showSDOs(sdos, alternativeId) {
@@ -839,6 +844,34 @@ let referencePane = {
     this.$table.removeChild(this.$tableBody);
     this.$tableBody = newBody;
     this.$table.appendChild(this.$tableBody);
+    this.autoSize();
+  },
+
+  autoSize() {
+    this.$tableContainer.style.height =
+      Math.min(250, this.$table.getBoundingClientRect().height) + 'px';
+  },
+
+  dragStart(pointerDownEvent) {
+    let startingMousePos = pointerDownEvent.clientY;
+    let startingHeight = this.$tableContainer.getBoundingClientRect().height;
+    let moveListener = pointerMoveEvent => {
+      if (pointerMoveEvent.buttons === 0) {
+        removeListeners();
+        return;
+      }
+      let desiredHeight = startingHeight - (pointerMoveEvent.clientY - startingMousePos);
+      this.$tableContainer.style.height = Math.max(0, desiredHeight) + 'px';
+    };
+    let listenerOptions = { capture: true, passive: true };
+    let removeListeners = () => {
+      document.removeEventListener('pointermove', moveListener, listenerOptions);
+      this.$header.removeEventListener('pointerup', removeListeners, listenerOptions);
+      this.$header.removeEventListener('pointercancel', removeListeners, listenerOptions);
+    };
+    document.addEventListener('pointermove', moveListener, listenerOptions);
+    this.$header.addEventListener('pointerup', removeListeners, listenerOptions);
+    this.$header.addEventListener('pointercancel', removeListeners, listenerOptions);
   },
 };