Resizable

lib/Editor.js

@@ -175,7 +175,11 @@ Editor.prototype.init = function() {
                                 
   </div>
 </div>
+<div class="ide" id="editor_wrapper">
+
     <div class="ide" id="editor"></div>
+    <div id="editor_dragbar" class="app_editor_dragbar"></div>
+    </div>
   </div>`
   ;
   const local_dom = new DOMParser()
@@ -216,6 +220,8 @@ Editor.prototype.open = function() {
 
   // ? There should be some way to pass the closed editor to ace
   this._ide = ace.edit('editor');
+  this._ide.setAutoScrollEditorIntoView(true);
+  makeAceEditorResizable(this._ide);
 
   // this._ide.setTheme("ace/theme/monokai");
   this._ide.session.setMode('ace/mode/python');
@@ -311,4 +317,66 @@ var triggerEvent = function(element, eventType) {
   return element.dispatchEvent(evt);
 };
 
+// https://ourcodeworld.com/articles/read/994/how-to-make-an-ace-editor-instance-resizable-by-the-user-dinamically-with-a-drag-and-drop-bar
+/**
+ * * Global variable to store the ids of the status of the current dragged ace editor.
+ */
+window.draggingAceEditor = {};
+
+let makeAceEditorResizable = function (editor){
+  let id_editor = editor.container.id;
+  let id_dragbar = '#' + id_editor + '_dragbar';
+  let id_wrapper = '#' + id_editor + '_wrapper';
+  let wpoffset = 0;
+window.draggingAceEditor[id_editor] = false;
+
+$(id_dragbar).mousedown(function(e) {
+e.preventDefault();
+
+window.draggingAceEditor[id_editor] = true;
+
+var _editor = $('#' + id_editor);
+var top_offset = _editor.offset().top - wpoffset;
+
+// Set editor opacity to 0 to make transparent so our wrapper div shows
+_editor.css('opacity', 0);
+
+// handle mouse movement
+$(document).mousemove(function(e){
+var actualY = e.pageY - wpoffset;
+// editor height
+var eheight = actualY - top_offset;
+
+// Set wrapper height
+$(id_wrapper).css('height', eheight);
+
+// Set dragbar opacity while dragging (set to 0 to not show)
+$(id_dragbar).css('opacity', 0.15);
+});
+});
+
+    $(document).mouseup(function(e){
+        if (window.draggingAceEditor[id_editor])
+        {
+            var ctx_editor = $('#' + id_editor);
+
+            var actualY = e.pageY - wpoffset;
+            var top_offset = ctx_editor.offset().top - wpoffset;
+            var eheight = actualY - top_offset;
+
+            $( document ).unbind('mousemove');
+
+            // Set dragbar opacity back to 1
+            $(id_dragbar).css('opacity', 1);
+
+            // Set height on actual editor element, and opacity back to 1
+            ctx_editor.css('height', eheight).css('opacity', 1);
+
+            // Trigger ace editor resize()
+            editor.resize();
+
+            window.draggingAceEditor[id_editor] = false;
+        }
+    });
+}