Added support of resizable editor

public/css/index.css

@@ -42,15 +42,23 @@ body {
     cursor: pointer;
     margin: 2px;
 }
-.row {
+.ui-content {
+    height: 100%;
     margin-left: 0;
     margin-right: 0;
 }
 .ui-edit-area {
+    height: 100%;
     /*padding-left: 15px;*/
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
+.ui-edit-area .ui-resizable-handle.ui-resizable-e {
+    cursor: col-resize;
+    width: 5px;
+    background-color: white;
+    box-shadow: 5px 0px 10px #e7e7e7;
+}
 .ui-view-area {
     /*overflow-y: scroll;*/
     -webkit-overflow-scrolling: touch;

public/js/index.js

@@ -511,6 +511,8 @@ function checkResponsive() {
     emitUserStatus();
 }
 
+var lastEditorWidth = 0;
+
 function checkEditorStyle() {
     var scrollbarStyle = editor.getOption('scrollbarStyle');
     if (scrollbarStyle == 'overlay' || currentMode == modeType.both) {
@@ -531,6 +533,15 @@ function checkEditorStyle() {
     //set sizer height to make it at least height as editor
     var editorSizerHeight = ui.area.edit.height() - (statusBar ? statusBar.outerHeight() : 0);
     $('.CodeMirror-sizer').css('height', editorSizerHeight + 'px');
+    //make editor resizable
+    ui.area.edit.resizable({
+        handles: 'e',
+        maxWidth: $(window).width() * 0.7,
+        minWidth: $(window).width() * 0.2,
+        stop: function (e) {
+            lastEditorWidth = ui.area.edit.width();
+        }
+    });
 }
 
 function checkTocStyle() {
@@ -657,7 +668,7 @@ function changeMode(type) {
         ui.area.codemirror.addClass(scrollClass);
         ui.area.edit.addClass(responsiveClass).show();
         ui.area.view.addClass(scrollClass);
-        ui.area.view.addClass(responsiveClass).show();
+        ui.area.view.show();
         break;
     }
     if (currentMode != modeType.view && visibleLG) {
@@ -685,6 +696,17 @@ function changeMode(type) {
     } else {
         $(document.body).css('background-color', ui.area.codemirror.css('background-color'));
     }
+    //check resizable editor style
+    if (currentMode == modeType.both) {
+        if (lastEditorWidth > 0)
+            ui.area.edit.css('width', lastEditorWidth + 'px');
+        else
+            ui.area.edit.css('width', '');
+        ui.area.edit.find('.ui-resizable-handle').show();
+    } else {
+        ui.area.edit.css('width', '');
+        ui.area.edit.find('.ui-resizable-handle').hide();
+    }
 
     windowResizeInner();
 

public/views/foot.ejs

@@ -13,6 +13,7 @@
 <script src="/vendor/greensock-js/TweenMax.min.js" defer></script>
 <script src="/vendor/greensock-js/jquery.gsap.min.js" defer></script>
 <% } %>
+<script src="/vendor/jquery-ui/jquery-ui.min.js" defer></script>
 <!--codemirror-->
 <script src="/vendor/codemirror/codemirror.min.js" defer></script>
 <script src="/vendor/inlineAttachment/inline-attachment.js" defer></script>

public/views/head.ejs

@@ -16,6 +16,7 @@
 <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="/css/bootstrap-social.css">
 <% } %>
+<link rel="stylesheet" href="/vendor/jquery-ui/jquery-ui.min.css">
 <link rel="stylesheet" href="/vendor/codemirror/lib/codemirror.css">
 <link rel="stylesheet" href="/vendor/codemirror/addon/fold/foldgutter.css">
 <link rel="stylesheet" href="/vendor/codemirror/addon/dialog/dialog.css">