better editor panel resize

Author: joemeszaros

css/iconbar.css

@@ -3,6 +3,7 @@
   height: 48px;
   font-family: Arial, Helvetica, sans-serif;
   margin-top: 5px;
+  overflow: hidden; /* if the editor is too narrow, it flows to multiple lines */
 }
 
 .iconbar a {

css/main.css

@@ -560,16 +560,15 @@ body {
   text-align: center;
   min-height: 150px;
   min-width: 300px;
-  max-height: 500px;
-  max-width: 800px;
+  max-height: 80%;
+  max-width: 80%;
 }
 
 /*Drgable */
 
 .popup {
   position: absolute;
-  /*resize: both; !*enable this to css resize*! */
-  overflow: auto;
+  overflow: hidden;
 }
 
 .popup-header {
@@ -581,6 +580,10 @@ body {
   color: #fff;
 }
 
+.popup-content {
+  margin-bottom: 6px;
+}
+
 /*Resizeable*/
 
 .popup .resizer-right {
@@ -591,25 +594,27 @@ body {
   right: 0;
   bottom: 0;
   cursor: e-resize;
+  z-index: 100;
 }
 
 .popup .resizer-bottom {
   width: 100%;
-  height: 10px;
-  background: red;
+  height: 6px;
+  background: transparent;
   position: absolute;
   right: 0;
   bottom: 0;
-  cursor: n-resize;
+  cursor: s-resize;
+  z-index: 100;
 }
 
 .popup .resizer-both {
-  width: 5px;
-  height: 5px;
+  width: 10px;
+  height: 10px;
   background: transparent;
-  z-index: 10;
+  z-index: 100;
   position: absolute;
   right: 0;
   bottom: 0;
-  cursor: nw-resize;
+  cursor: se-resize;
 }

icons/validate.svg

@@ -244,7 +244,10 @@ class SurveyEditor extends Editor {
       `Survey editor: ${this.survey.name}`,
       true,
       () => this.closeEditor(),
-      (_newWidth, newHeight) => this.table.setHeight(newHeight - 100),
+      (_newWidth, _newHeight) => {
+        this.table.setHeight(this.panel.offsetHeight - 100); // we cannot use newHeight, because it could be a higher value than max-height
+      },
+
       () => {
         this.table.redraw();
       }
@@ -290,19 +293,6 @@ class SurveyEditor extends Editor {
       },
       { id: 'update-survey', tooltip: 'Update survey', icon: 'icons/update.svg', click: () => this.updateSurvey() },
       { separator: true },
-      {
-        id      : 'splays-toggle',
-        tooltip : 'Show / hide splays',
-        icon    : 'icons/splay.svg',
-        click   : () => {
-          if (this.iconSelected['splays-toggle'] === true) {
-            this.table.addFilter(showOrphans);
-          } else if (this.iconSelected['splays-toggle'] === false) {
-            this.table.addFilter(hideOrphans);
-          }
-        }
-      },
-      { separator: true },
       {
         id      : 'xyz-toggle',
         tooltip : 'Toggle XYZ',
@@ -366,7 +356,7 @@ class SurveyEditor extends Editor {
 
     });
 
-    this.panel.appendChild(U.node`<div id="surveydata"></div>`);
+    this.panel.appendChild(U.node`<div id="surveydata" class="popup-content"></div>`);
 
     var isFloatNumber = function (_cell, value) {
       return U.isFloatStr(value);
@@ -404,18 +394,6 @@ class SurveyEditor extends Editor {
       cell.getRow().reformat();
     };
 
-    function showCenter(data) {
-      return data.type === 'center';
-    }
-
-    function hideOrphans(data) {
-      return data.status !== 'orphan';
-    }
-
-    function showOrphans(data) {
-      return data.status === 'orphan';
-    }
-
     const columns = [
       {
         width             : 25,
@@ -564,10 +542,10 @@ class SurveyEditor extends Editor {
       clipboardPasteAction  : 'range',
 
       // pagination
-      pagination             : true,
-      paginationSize         : this.options.tabulator.paginationSize, // From config.js
-      paginationSizeSelector : [this.options.tabulator.paginationSize, 10, 25, 50, 100], // optional: shows the dropdown to select page size
-      paginationCounter      : 'rows', // optional: shows the current page size
+      // pagination             : true,
+      // paginationSize         : this.options.tabulator.paginationSize, // From config.js
+      // paginationSizeSelector : [this.options.tabulator.paginationSize, 10, 25, 50, 100], // optional: shows the dropdown to select page size
+      // paginationCounter      : 'rows', // optional: shows the current page size
 
       rowContextMenu : this.baseTableFunctions.getContextMenu(),
       rowHeader      : {

src/ui/editor/survey.js

@@ -69,9 +69,22 @@ function makeMovable(panel, headerText, resizable = true, closeFn, doDragFn, sto
     pos2 = pos4 - e.clientY;
     pos3 = e.clientX;
     pos4 = e.clientY;
-    // set the element's new position:
-    elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
-    elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
+
+    // Calculate new position
+    let newTop = elmnt.offsetTop - pos2;
+    let newLeft = elmnt.offsetLeft - pos1;
+
+    // Clamp to viewport
+    const minTop = 0;
+    const minLeft = 0;
+    const maxTop = window.innerHeight - elmnt.offsetHeight;
+    const maxLeft = window.innerWidth - elmnt.offsetWidth;
+
+    newTop = Math.max(minTop, Math.min(newTop, maxTop));
+    newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft));
+
+    elmnt.style.top = newTop + 'px';
+    elmnt.style.left = newLeft + 'px';
   }
 
   function initDrag(e) {