vertical and horizontal split of ide/terminal at runtime

Author: vickeykumar

src/resources/css/scribbler-landing.css

@@ -71,8 +71,8 @@ nav {
 }
 
 .ide {
-  width: 0%;
-  height: inherit;
+  width: 100%;
+  height: 100%;
   position: inherit;
   margin: initial;
   text-align: left;
@@ -97,7 +97,7 @@ nav {
 
 .terminal {
   width: 100%;
-  height: inherit;
+  height: 100%;
   position: inherit;
   margin: initial;
   text-align: left;
@@ -308,12 +308,6 @@ nav {
 }
 
 @media (max-width: 750px) {
-  .terminal {
-    width: 70%;
-  }
-  .demo__terminal {
-    width: 70%;
-  }
   .tab__container > ul {
     right: auto;
     left: 0;
@@ -677,6 +671,12 @@ display: block;
     float: left;
     cursor: ew-resize;
 }
+
+.gutter.gutter-vertical {
+    float: left;
+    cursor: ew-resize;
+}
+
 /* Add arrow indicator to the gutter */
 .gutter::after {
     content: '';
@@ -702,7 +702,7 @@ display: block;
     opacity: 0.2;
 }
 
-.gutter.gutter-horizontal:hover::after {
+.gutter.gutter-vertical:hover::after {
   opacity: 0.8;
 }
 

src/resources/index.html

@@ -294,6 +294,7 @@ <h4 class="mb-1">
         <div class="fullscreen-toggle tooltip" id="debug-play-button" onclick="RunandDebug();"><i class="fa fas" style="font-size:12px;">debug</i><span class="tooltiptext">Debug Editor Code</span></div>
         <div class="fullscreen-toggle tooltip" id="download-button" onclick="DownloadEditor();"><i class="fa fa-download"></i><span class="tooltiptext">Download Editor Code</span></div>
         <div class="fullscreen-toggle tooltip" id="upload-button" onclick="document.getElementById('fileToLoad').click();"><i class="fa fa-upload"><input type="file" id="fileToLoad" oninput="uploadFile();" style="display: none;"></i><span class="tooltiptext">Upload Files to OpenREPL Server</span></div>
+        <div class="fullscreen-toggle rotate-fa tooltip" id="rotate-button" onclick="ToggleRotateEditor();"><i class="fa fa-mobile"></i><span class="tooltiptext revrotate-fa">Flip/Rotate Editor and REPL</span></div>
       </div>
       <div class="ide" id="ide" >
         <h2>Welcome to <span class="go__color">Open</span>REPL</h2>
@@ -493,7 +494,6 @@ <h2>Welcome to <span class="go__color">Open</span>REPL</h2>
 
         <!-- ends here -->
       </div>
-      <div class="gutter gutter-horizontal" id="gutter-div"></div>
       <div class="terminal-div" id="terminal-div">
         <div class="terminal-tabs" id="terminal-tabs">
             <div class="tab active"><span class="tab-title">Terminal</span></div>
@@ -655,16 +655,8 @@ <h3 class="section__title">Share/Collaborate</h3>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/jstree.min.js"></script>
     <script src="./js/scribbler.js"></script>
     <script>
-          /*var inst = Split(['.ide', '.terminal'], {
-            gutterSize: 3,
-            sizes: [50,50]
-          });*/
-          if (ismob()) {
-            $("#gutter-div").toggleClass("hide-tag");
-          } else {
-            ToggleEditor();
-          }
-	  LoadOptionFromUrl();
+      ToggleEditor();
+      LoadOptionFromUrl();
       var demo_done = localStorage.getItem("OpenREPL_Demo");
       if (demo_done !== "done") {
         // demo not done

src/resources/js/scribbler.js

@@ -169,6 +169,7 @@ function ToggleFunction() {
 }
 
 var einst = null;
+var direction = null;
 
 // updates editor content by ID
 function updateEditorContent(cmd="", content="/* Welcome to openrepl! */", forceupdate=false) {
@@ -244,7 +245,16 @@ function SaveSelectedNodeToFile(oldSelectedNodeId, errcallback=null) {
     }
 }
 
-function ToggleEditor() {
+function ToggleEditor(direction=null) {
+    if (direction===null) {
+      // first time
+      if (ismob()) {
+        direction = 'vertical';
+      } else {
+        direction = 'horizontal'
+      }
+      
+    }
     TermElement = get("#terminal-div");
     ideElement =  get("#ide");
     editorbtn = get("#editor-button");
@@ -257,6 +267,7 @@ function ToggleEditor() {
       einst = Split(['#ide', '#terminal-div'], {
         gutterSize: 3,
         sizes: [55,45],
+        direction: direction,
         onDrag: function(event) {
           let currentMouseX = event[0] || 0;
           let prevMouseX = default_prevMouseX;
@@ -294,6 +305,27 @@ function ToggleEditor() {
       einst = null;
     }
 }
+/* rotates direction of editor/REPL vertical <-> horizontal */
+function ToggleRotateEditor() {
+  if (direction===null) {
+    // first time
+    if (ismob()) {
+      direction = 'vertical';
+    } else {
+      direction = 'horizontal';
+    }
+  } else {
+    //toggle direction
+    if (direction=='vertical') {
+      direction = 'horizontal';
+    } else if (direction=='horizontal') {
+      direction = 'vertical';
+    }
+  }
+  einst.destroy();
+  einst = null; // destroy and reset splitter
+  ToggleEditor(direction);
+}
 
 function ToggleReconnect() {
     const optionMenu = get("#optionMenu");