Add a close button

rails · Jun 21, 2015 · b354089 · b354089
1 parent c72376d
commit b354089
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 20 deletions.
diff --git a/lib/web_console/templates/_inner_console_markup.html.erb b/lib/web_console/templates/_inner_console_markup.html.erb
@@ -1,3 +1,8 @@
-<div class='resizer'></div>
-<div class='console-inner'></div>
+<div class='resizer layer'></div>
+<div class='console-outer layer'>
+  <div class='console-actions'>
+    <div class='close-button button' title='close'>x</div>
+  </div>
+  <div class='console-inner'></div>
+</div>
 <input class='clipboard' type='text'>
diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb
@@ -89,17 +89,25 @@ REPLConsole.prototype.install = function(container) {
   // Render the console.
   container.innerHTML = consoleInnerHtml;
 
+  var consoleOuter = findChild(container, 'console-outer');
+  var consoleActions = findChild(consoleOuter, 'console-actions');
+
+  addClass(container, 'console');
+  addClass(container.getElementsByClassName('layer'), 'pos-absolute border-box');
+  addClass(container.getElementsByClassName('button'), 'border-box');
+  addClass(consoleActions, 'pos-fixed pos-right');
+
   // Make the console resizable.
-  findChild(container, 'resizer').addEventListener('mousedown', function(ev) {
+  function resizeContainer(ev) {
     var startY                   = ev.clientY;
     var startHeight              = parseInt(document.defaultView.getComputedStyle(container).height, 10);
-    var consoleInner             = _this.inner;
-    var innerScrollTopStart      = consoleInner.scrollTop;
-    var innerClientHeightStart   = consoleInner.clientHeight;
+    var scrollTopStart      = consoleOuter.scrollTop;
+    var clientHeightStart   = consoleOuter.clientHeight;
 
     var doDrag = function(e) {
       container.style.height = (startHeight + startY - e.clientY) + 'px';
-      consoleInner.scrollTop = innerScrollTopStart + (innerClientHeightStart - consoleInner.clientHeight);
+      consoleOuter.scrollTop = scrollTopStart + (clientHeightStart - consoleOuter.clientHeight);
+      shiftConsoleActions();
     };
 
     var stopDrag = function(e) {
@@ -109,14 +117,36 @@ REPLConsole.prototype.install = function(container) {
 
     document.documentElement.addEventListener('mousemove', doDrag, false);
     document.documentElement.addEventListener('mouseup', stopDrag, false);
-  });
+  }
+
+  function closeContainer(ev) {
+    container.parentNode.removeChild(container);
+  }
+
+  var shifted = false;
+  function shiftConsoleActions() {
+    if (consoleOuter.scrollHeight > consoleOuter.clientHeight) {
+      var widthDiff = document.documentElement.clientWidth - consoleOuter.clientWidth;
+      if (shifted || ! widthDiff) return;
+      shifted = true;
+      consoleActions.style.marginRight = widthDiff + 'px';
+    } else if (shifted) {
+      shifted = false;
+      consoleActions.style.marginRight = '0px';
+    }
+  }
 
   // Initialize
-  this.inner = findChild(container, 'console-inner');
+  this.outer = consoleOuter;
+  this.inner = findChild(this.outer, 'console-inner');
   this.clipboard = findChild(container, 'clipboard');
   this.remotePath = container.dataset.remotePath;
   this.newPromptBox();
   this.insertCss();
+
+  findChild(container, 'resizer').addEventListener('mousedown', resizeContainer);
+  findChild(consoleActions, 'close-button').addEventListener('click', closeContainer);
+  consoleOuter.addEventListener('DOMNodeInserted', shiftConsoleActions);
 };
 
 // Add CSS styles dynamically. This probably doesnt work for IE <8.
@@ -348,7 +378,7 @@ REPLConsole.prototype.insertAtCurrent = function(char) {
 };
 
 REPLConsole.prototype.scrollToBottom = function() {
-  this.inner.scrollTop = this.inner.scrollHeight;
+  this.outer.scrollTop = this.outer.scrollHeight;
 };
 
 // Change the binding of the console
@@ -392,8 +422,19 @@ function hasClass(el, className) {
   return el.className && el.className.match(regex);
 }
 
+function isNodeList(el) {
+  return typeof el.length === 'number' &&
+    typeof el.item === 'function';
+}
+
 function addClass(el, className) {
-  el.className += " " + className;
+  if (isNodeList(el)) {
+    for (var i = 0; i < el.length; ++ i) {
+      addClass(el[i], className);
+    }
+  } else {
+    el.className += " " + className;
+  }
 }
 
 function removeClass(el, className) {

diff --git a/lib/web_console/templates/style.css.erb b/lib/web_console/templates/style.css.erb
@@ -1,9 +1,22 @@
-#console { position: fixed; left: 0; bottom: 0; width: 100%; height: 148px; border: 1px solid; padding: 0 0 4px 0; overflow: none; margin: 0; background: none repeat scroll 0% 0% #333; z-index: 9999; }
-#console div.console-inner { font-family: monospace; font-size: 11px; height: 100%; overflow: auto; background: #333; border: 0; padding: 0; margin: 0; }
-#console div.console-prompt-box { color: #FFF; }
-#console pre.console-message { color: #1AD027; margin: 0; border: 0; white-space: pre-wrap; background-color: #333; padding: 0; }
-#console div.console-focus span.console-cursor { background: #FEFEFE; color: #333; font-weight: bold; }
-#console div.resizer { width: 100%; height: 4px; cursor: ns-resize; }
-#console input.clipboard { height: 0px; padding: 0px; margin: 0px; width: 0px; margin-left: -1000px; }
-#console span.console-prompt-label { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }
-#console pre.console-prompt-display { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }
+.console .pos-absolute { position: absolute; }
+.console .pos-fixed { position: fixed; }
+.console .pos-right { right: 0; }
+.console .border-box { box-sizing: border-box; }
+.console .layer { width: 100%; height: 100%; }
+.console .layer.console-outer { z-index: 1; }
+.console .layer.resizer { z-index: 2; }
+.console { position: fixed; left: 0; bottom: 0; width: 100%; height: 148px; padding: 0; margin: 0; background: none repeat scroll 0% 0% #333; z-index: 9999; }
+.console .console-outer { overflow: auto; padding-top: 4px; }
+.console .console-inner { font-family: monospace; font-size: 11px; width: 100%; height: 100%; overflow: none; background: #333; }
+.console .console-prompt-box { color: #FFF; }
+.console .console-message { color: #1AD027; margin: 0; border: 0; white-space: pre-wrap; background-color: #333; padding: 0; }
+.console .console-focus .console-cursor { background: #FEFEFE; color: #333; font-weight: bold; }
+.console .resizer { background: #333; width: 100%; height: 4px; cursor: ns-resize; }
+.console .console-actions { padding-right: 3px; }
+.console .console-actions .button { float: left; }
+.console .button { cursor: pointer; border-radius: 1px; font-family: monospace; font-size: 13px; width: 14px; height: 14px; line-height: 14px; text-align: center; color: #ccc; }
+.console .button:hover { background: #666; color: #fff; }
+.console .button.close-button:hover { background: #966; }
+.console .clipboard { height: 0px; padding: 0px; margin: 0px; width: 0px; margin-left: -1000px; }
+.console .console-prompt-label { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }
+.console .console-prompt-display { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }