add resizable panes closes #29

Author: Justin Martin

css/main.css

@@ -14,17 +14,82 @@ textarea {
   resize: none;
 }
 .json-diff-input {
-  width: 50%;
   height: 100%;
   box-sizing: border-box;
   display: inline-block;
   float: left;
+  position: relative;
 }
 
 .json-diff-input .CodeMirror {
   height: 100%;
 }
 
+.json-diff-input:hover .input-buttons {
+  opacity: 1;
+}
+
+.json-diff-input.collapse .input-buttons {
+  display: none;
+}
+
+.input-buttons a:hover {
+  opacity: .7;
+}
+
+.json-diff-input .input-buttons {
+  transition: opacity .2s;
+  opacity: 0;
+  position: absolute;
+  right: 8px;
+  top: 0;
+  z-index: 4;
+}
+
+.json-diff-input .input-buttons a {
+  color: white;
+  text-decoration: none;
+  font-size: 26px;
+}
+
+.lighttheme .json-diff-input .input-buttons a {
+  color: #1D1F21;
+}
+
+.json-diff-input .input-buttons a.input-split {
+  font-size: 33px;
+  position: relative;
+  top: 5px;
+}
+
+.json-diff-input {
+  transition: width .3s;
+}
+
+.json-diff-input.split {
+  width: 50%;
+}
+
+.json-diff-input.collapse {
+  width: 0%;
+}
+
+.json-diff-input.expand {
+  width: 100%;
+}
+
+.json-diff-input.split .input-split {
+  display: none;
+}
+
+.json-diff-input.collapse .input-collapse {
+  display: none;
+}
+
+.json-diff-input.expand .input-expand {
+  display: none;
+}
+
 #header {
   height: 48px;
   background-color: #181A1B;

index.html

@@ -53,11 +53,21 @@ <h2 class="left">Online JSON Compare</h2>
       </div>
     </div>
     <div class="diff-inputs">
-      <div class="json-diff-input">
+      <div id="left-input" class="json-diff-input split">
         <textarea id="json-diff-left"></textarea>
+        <span class="input-buttons">
+          <a class="input-collapse" href="#">–</a>
+          <a class="input-split" href="#">◫</a>
+          <a class="input-expand" href="#">☐</a>
+        </span>
       </div>
-      <div class="json-diff-input">
+      <div id="right-input" class="json-diff-input split">
         <textarea id="json-diff-right"></textarea>
+        <span class="input-buttons">
+          <a class="input-collapse" href="#">–</a>
+          <a class="input-split" href="#">◫</a>
+          <a class="input-expand" href="#">☐</a>
+        </span>
       </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
@@ -104,6 +114,8 @@ <h2 class="left">Online JSON Compare</h2>
       });
 
       $('#download-diff-button').on('click', onClickDownloadDiff);
+      $('#left-input').on('click', '.input-collapse,.input-split,.input-expand', onPaneResizeLeftClick);
+      $('#right-input').on('click', '.input-collapse,.input-split,.input-expand', onPaneResizeRightClick);
 
       function toggleLightTheme() {
         var isLightTheme = localStorage.getItem('lighttheme');
@@ -149,6 +161,34 @@ <h2 class="left">Online JSON Compare</h2>
 
         document.body.removeChild(element);
       }
+
+      function onPaneResizeLeftClick(e) {
+        onResize(e, 'left');
+      }
+
+      function onPaneResizeRightClick(e) {
+        onResize(e, 'right');
+      }
+
+      function onResize(e, side) {
+        e.preventDefault();
+        var otherSide = side === 'left' ? 'right' : 'left';
+        var clickClass = e.currentTarget.className;
+        $('.json-diff-input').removeClass('split');
+        $('.json-diff-input').removeClass('expand');
+        $('.json-diff-input').removeClass('collapse');
+        var sideClass = 'split';
+        var otherSideClass = 'split';
+        if (clickClass === 'input-collapse') {
+          sideClass = 'collapse';
+          otherSideClass = 'expand';
+        } else if (clickClass === 'input-expand') {
+          sideClass = 'expand';
+          otherSideClass = 'collapse';
+        }
+        $('#' + side + '-input').addClass(sideClass);
+        $('#' + otherSide + '-input').addClass(otherSideClass);
+      }
     </script>
   </body>
 </html>