Bug #3083 fix

[Neethu Mariya Joy]

Hi,
I am Neethu Mariya Joy, an undergraduate pursuing BE in Computer Science at
BITS Pilani.

I've attempted to fix https://redmine.postgresql.org/issues/3083. Since the
textarea resize feature is the default HTML feature, I have not changed it.
Instead, I've added draggable borders to the wrapper which expands the
textarea inside it.

I'm attaching my patch as bug3083.diff below as per the contribution
guidelines.

Hope this helps. Thank you for your consideration!

Sincerely,
Neethu Mariya Joy
GitHub <https://github.com/Roboneet> | Linkedin
<https://www.linkedin.com/in/neethu-mariya-joy-653655128/>

diff --git a/web/pgadmin/static/js/slickgrid/editors.js 
b/web/pgadmin/static/js/slickgrid/editors.js
index 7652bf3..d369928 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -123,6 +123,53 @@
     return position;
   }
 
+  function resizeContentOnDrag($wrapper, $input){
+    // right border, bottom border and right bottom corner of the wrapper are 
draggable
+    $wrapper.append('<div class="drag-border" data="right"></div>\
+      <div class="drag-border" data="bottom"></div>\
+      <div class="drag-border" data="both"></div>');
+    
+    $wrapper.find('.drag-border').on('drag', (event)=>{
+      event.preventDefault();
+      var mouseX = event.clientX;
+      var mouseY = event.clientY;
+
+      // mouseX == 0 && mouseY == 0 mouse up / end of drag
+      if(mouseX == 0 && mouseY == 0)return;
+      
+      // default spacing between $input and cursor
+      var paddingBottom = 30;
+      var paddingRight = 10;
+      var dir = event.target.getAttribute('data');
+      
+      // size of $input is changed according to cursor position
+      switch(dir){
+      case 'right':
+        changeWidth($input, mouseX, paddingRight);
+        break;
+      case 'bottom':
+        changeHeight($input, mouseY, paddingBottom);
+        break;
+      case 'both':
+        changeHeight($input, mouseY, paddingBottom);
+        changeWidth($input, mouseX, paddingRight);
+      }      
+    });
+  }
+
+  function changeWidth($input, mouseX, padding){
+    var rect = $input[0].getBoundingClientRect();    
+    var newWidth = rect.width + mouseX - rect.right - padding;
+    $input.css('width', newWidth.toString() + 'px');
+  }
+
+  function changeHeight($input, mouseY, padding){
+    var rect = $input[0].getBoundingClientRect();
+    var newHeight = rect.height + mouseY - rect.bottom - padding;
+    $input.css('height', newHeight.toString() + 'px');
+  }
+
+
   // Text data type editor
   function pgTextEditor(args) {
     var $input, $wrapper, $buttons;
@@ -140,6 +187,7 @@
       $buttons.find('button:last').on('click', this.cancel);
       $input.bind('keydown', this.handleKeyDown);
 
+      resizeContentOnDrag($wrapper, $input);
       scope.position(args.position);
       $input.focus().select();
     };
@@ -297,6 +345,7 @@
       $buttons.find('button:last').on('click', this.cancel);
       $input.bind('keydown', this.handleKeyDown);
 
+      resizeContentOnDrag($wrapper, $input);
       scope.position(args.position);
       $input.focus().select();
     };
@@ -419,6 +468,7 @@
       $buttons.find('button:first').on('click', this.cancel);
       $input.bind('keydown', this.handleKeyDown);
 
+      resizeContentOnDrag($wrapper, $input);
       scope.position(args.position);
       $input.focus().select();
     };
@@ -518,6 +568,7 @@
       $buttons.find('button:first').on('click', this.cancel);
       $input.bind('keydown', this.handleKeyDown);
 
+      resizeContentOnDrag($wrapper, $input);
       scope.position(args.position);
       $input.focus().select();
     };
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css 
b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 1e29c3f..288e57f 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -505,6 +505,38 @@ input.editor-checkbox:focus {
   -moz-border-radius:10px;
   border-radius:10px;
 }
+
+.drag-border{
+  background: transparent;
+  position: absolute;
+}
+
+.drag-border[data=right]{
+  cursor: ew-resize;  
+  top: 0;
+  right: -10px;
+  bottom: 0;
+  width: 20px;
+}
+
+.drag-border[data=bottom]{
+  cursor: ns-resize;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -10px;
+  height: 20px; 
+}
+
+.drag-border[data=both]{
+  cursor: move;
+  position: absolute;
+  bottom: -10px;
+  right: -10px;
+  width: 20px;
+  height: 20px;
+}
+
 .pg_textarea {
   backround:#fff;
   width:250px;