adjusted the way the editor resizes

- removed the "min-width" of the output, so that if the window is small it will adapt and allow the user to scroll the output (when wrap is disabled) - adjusted the styles of the resizer - revamped the positioning of the editor actions a bit while working out z-index issues - the top of the editors will always below the header closes elastic#54 closes elastic#51
spalger · Jan 23, 2014 · 7a12d81 · 7a12d81
1 parent 22e22a8
commit 7a12d81
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 90 deletions.
diff --git a/sense/app/app.js b/sense/app/app.js
@@ -162,25 +162,43 @@ define([
       input.focus();
     };
 
-    /**
-     * Make the editor resizeable
-     */
-    input.$el.resizable({
-      autoHide: false,
-      handles: 'e',
-      start: function (e, ui) {
-        $(".ui-resizable-e").addClass("active");
-      },
-      stop: function (e, ui) {
-        $(".ui-resizable-e").removeClass("active");
-        var parent = ui.element.parent();
-        var editorSize = ui.element.outerWidth();
-        output.$el.css("left", editorSize + 20);
-        input.$actions.css("margin-right", -editorSize + 3);
-        input.resize(true);
-        output.resize(true);
+    (function stuffThatsTooHardWithCSS() {
+      var $editors = input.$el.parent().add(output.$el.parent());
+      var $resizer = miscInputs.$resizer;
+      var $header = miscInputs.$header;
+
+      var delay;
+      var headerHeight;
+      var resizerHeight;
+
+      $resizer
+        .html('&#xFE19;') // vertical elipses
+        .css('vertical-align', 'middle');
+
+      function update() {
+        var newHeight;
+
+        delay = clearTimeout(delay);
+
+        newHeight = $header.outerHeight();
+        if (headerHeight != newHeight) {
+          headerHeight = newHeight;
+          $editors.css('top', newHeight + 10);
+        }
+
+        newHeight = $resizer.height();
+        if (resizerHeight != newHeight) {
+          resizerHeight = newHeight;
+          $resizer.css('line-height', newHeight + 'px');
+        }
       }
-    });
+
+      $(window).resize(function () {
+        if (!delay) delay = setTimeout(update, 25);
+      });
+
+      update();
+    }());
 
     /**
      * Setup the "send" shortcut
@@ -206,7 +224,6 @@ define([
     /*
      * initialize navigation menu
      */
-
     $.get('../common/marvelLinks.json', function (marvelLinks) {
       var linkMenu = $("#nav_btn ul");
       _.map(marvelLinks.links, function (link) {

diff --git a/sense/app/misc_inputs.js b/sense/app/misc_inputs.js
@@ -3,10 +3,11 @@ define([
   'history',
   'input',
   'mappings',
-
+  'output',
+
   'bootstrap',
   'jquery-ui'
-], function ($, history, input, mappings) {
+], function ($, history, input, mappings, output) {
   'use strict';
 
   var $esServer = $("#es_server");
@@ -32,9 +33,36 @@ define([
     e.preventDefault();
   });
 
+  var $header = $('.navbar.navbar-static-top');
+
+  // containers for the two editors
+  var $left = input.$el.parent();
+  var $right = output.$el.parent();
+
+  $left.resizable({
+    autoHide: false,
+    handles: 'e',
+    start: function () {
+      $resizer.addClass('active');
+    },
+    resize: function () {
+      $right.css('left', $left.outerWidth() + 20);
+    },
+    stop: function () {
+      $resizer.removeClass('active');
+      $left.css('height', 'auto'); // $.resizeable sets the height which prevents it from reshaping later
+      input.resize(true);
+      output.resize(true);
+    }
+  });
+
+  var $resizer = input.$el.siblings('.ui-resizable-e');
+
   return {
     $esServer: $esServer,
     $send: $send,
-    $autoIndent: $autoIndent
+    $autoIndent: $autoIndent,
+    $header: $header,
+    $resizer: $resizer
   };
 })
diff --git a/sense/app/sense_editor/editor.js b/sense/app/sense_editor/editor.js
@@ -354,39 +354,51 @@ define([
       editor.highlightCurrentRequestAndUpdateActionBar();
     });
 
-    editor.updateActionsBar = function () {
-      var editor_actions = $("#editor_actions");
-
-      if (CURRENT_REQ_RANGE) {
-        var row = CURRENT_REQ_RANGE.start.row;
-        var column = CURRENT_REQ_RANGE.start.column;
-        var session = editor.session;
-        var firstLine = session.getLine(row);
-        var offset = 0;
-        if (firstLine.length > session.getScreenWidth() - 5) {
-          // overlap first row
-          if (row > 0) row--; else row++;
+    editor.updateActionsBar = (function () {
+      var set = function (top) {
+        if (top == null) {
+          editor.$actions.css('visibility', 'hidden');
+        } else {
+          editor.$actions.css({
+            top: top,
+            visibility: 'visible'
+          });
         }
-        var screen_pos = editor.renderer.textToScreenCoordinates(row, column);
-        offset += screen_pos.pageY;
-        var end_offset = editor.renderer.textToScreenCoordinates(CURRENT_REQ_RANGE.end.row,
-          CURRENT_REQ_RANGE.end.column).pageY;
-
-        offset = Math.min(end_offset, Math.max(offset, 47));
-        if (offset >= 47) {
-          editor_actions.css("top", Math.max(offset, 47));
-          editor_actions.css('visibility', 'visible');
-        }
-        else {
-          editor_actions.css("top", 0);
-          editor_actions.css('visibility', 'hidden');
+      };
+
+      var hide = function () {
+        set();
+      };
+
+      return function () {
+        if (CURRENT_REQ_RANGE) {
+          // elements are positioned relative to the editor's container
+          // pageY is relative to page, so subtract the offset
+          // from pageY to get the new top value
+          var offsetFromPage = editor.$el.offset().top;
+
+          var topOfReq = editor.renderer.textToScreenCoordinates(
+            CURRENT_REQ_RANGE.start.row,
+            CURRENT_REQ_RANGE.start.column
+          ).pageY - offsetFromPage;
+
+          if (topOfReq >= 0) {
+            return set(topOfReq);
+          }
+
+          var bottomOfReq = editor.renderer.textToScreenCoordinates(
+            CURRENT_REQ_RANGE.end.row,
+            CURRENT_REQ_RANGE.end.column
+          ).pageY - offsetFromPage;
+
+          if (bottomOfReq >= 0) {
+            return set(0);
+          }
         }
+
+        hide();
       }
-      else {
-        editor_actions.css("top", 0);
-        editor_actions.css('visibility', 'hidden');
-      }
-    };
+    }());
 
     editor.getSession().on("changeScrollTop", editor.updateActionsBar);
 

diff --git a/sense/css/sense.css b/sense/css/sense.css
@@ -20,13 +20,28 @@ body.fouc {
   width: 100px;
 }
 
+#editor_container {
+  position: absolute;
+  top: 50px;
+  bottom: 5px;
+  left: 5px;
+  width: 468px;
+}
+
+#output_container {
+  position: absolute;
+  top: 50px;
+  bottom: 5px;
+  left: 488px;
+  right: 5px;
+}
+
 #editor_actions {
   position: absolute;
-  top: 47px;
-  right: 100%;
+  top: 0;
+  right: 0;
   line-height: 1;
-  margin-right: -468px;
-  z-index: 100;
+  padding: 1px 3px 0 0;
 }
 
 #editor_actions > .btn-group > a {
@@ -44,25 +59,9 @@ body.fouc {
   z-index: 100;
 }
 
-#editor_container {
-  position: absolute;
-  top: 50px;
-  bottom: 5px;
-  left: 5px;
-  width: 468px;
-}
-
-#output_container {
-  position: absolute;
-  top: 50px;
-  bottom: 5px;
-  left: 488px;
-  right: 5px;
-  min-width: 700px;
-}
-
 #output, #editor {
   height: 100%;
+  width: 100%;
 }
 
 .ace_gutter {
@@ -217,17 +216,16 @@ body.fouc {
 
 .ui-resizable-e {
   cursor: ew-resize;
-  width: 10px;
-  right: -5px;
-  top: 0;
-  bottom: 0;
+  width: 13px;
+  right: -14px;
+  top: -1px;
+  bottom: -2px;
   background-color: transparent;
   position: absolute;
-  z-index: 50 !important;
 }
 
 .ui-resizable-e:hover {
-  background-color: rgba(194, 193, 208, 0.80);
+  background-color: #DCDCDC;
 }
 
 .ui-resizable-e.active {

diff --git a/sense/index.html b/sense/index.html
@@ -46,22 +46,21 @@
     <div id="editor">GET _search
       {
   "query": { "match_all": {} }
-}
+}</div>
+    <div id="editor_actions">
+      <a id="send" href="#" data-toggle="tooltip" title="click to send request"><i
+          class="fa fa-play"></i></a>
+      <a id="request_wrench" data-toggle="dropdown" href="#"><i
+          class="fa fa-wrench"></i></a>
+      <ul class="dropdown-menu">
+        <li><a id="copy_as_curl" tabindex="-1" href="#">Copy as cURL</a></li>
+        <li><a id="auto_indent" tabindex="-1" href="#">Auto indent</a></li>
+      </ul>
     </div>
   </div>
   <div id="output_container">
     <div id="output">{}</div>
   </div>
-  <div id="editor_actions">
-    <a id="send" href="#" data-toggle="tooltip" title="click to send request"><i
-        class="fa fa-play"></i></a>
-    <a id="request_wrench" data-toggle="dropdown" href="#"><i
-        class="fa fa-wrench"></i></a>
-    <ul class="dropdown-menu">
-      <li><a id="copy_as_curl" tabindex="-1" href="#">Copy as cURL</a></li>
-      <li><a id="auto_indent" tabindex="-1" href="#">Auto indent</a></li>
-    </ul>
-  </div>
   <ul id="autocomplete" style="left: -1000px;"></ul>
 </div>