Add "close button"

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'>

lib/web_console/templates/console.js.erb

@@ -89,22 +89,25 @@ REPLConsole.prototype.install = function(container) {
   // Render the console.
   container.innerHTML = consoleInnerHtml;
 
-  // Get a child element by class name
-  function findChild(className) {
-    return container.getElementsByClassName(className)[0];
-  }
+  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('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) {
@@ -114,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('console-inner');
-  this.clipboard = findChild('clipboard');
+  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.
@@ -353,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
@@ -394,11 +419,22 @@ REPLConsole.session = {};
 // DOM helpers
 function hasClass(el, className) {
   var regex = new RegExp('(?:^|\\s)' + className + '(?!\\S)', 'g');
-  return el.className.match(regex);
+  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) {
@@ -412,6 +448,14 @@ function removeAllChildren(el) {
   }
 }
 
+function findChild(el, className) {
+  for (var i = 0; i < el.childNodes.length; ++ i) {
+    if (hasClass(el.childNodes[i], className)) {
+      return el.childNodes[i];
+    }
+  }
+}
+
 function escapeHTML(html) {
   return html
     .replace(/&/g, '&amp;')

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; }

test/templates/html/spec_runner.html.erb

@@ -19,6 +19,7 @@
     <script src="/templates/console.js"></script>
 
     <!-- find and load test cases -->
+    <script src="/spec/spec_helper.js"></script>
     <% Pathname.glob(TEST_ROOT.join "spec/**/*_spec.js") do |spec| %>
     <script src="/<%= spec.relative_path_from TEST_ROOT %>"></script>
     <% end %>

test/templates/spec/dom_helpers_spec.js

@@ -1,5 +1,3 @@
-var assert = chai.assert;
-
 describe("DOM helpers", function() {
   describe("hasClass()", function() {
     context("create a <div>", function() {

test/templates/spec/repl_console_spec.js

@@ -0,0 +1,51 @@
+describe("REPLConsole", function() {
+  SpecHelper.prepareStageElement();
+
+  describe("#install()", function() {
+    beforeEach(function() {
+      this.elm = document.createElement("div");
+      this.stageElement.appendChild(this.elm);
+    });
+
+    context("install console", function() {
+      beforeEach(function() {
+        var replConsole = new REPLConsole;
+        replConsole.install(this.elm);
+      });
+      it("should have .console", function() {
+        assert.ok(hasClass(this.elm, "console"));
+      });
+      it("should have a inner", function() {
+        assert.equal(this.elm.getElementsByClassName("console-inner").length, 1);
+      });
+      it("should have a resizer", function() {
+        assert.equal(this.elm.getElementsByClassName("resizer").length, 1);
+      });
+      it("should have a close button", function() {
+        assert.equal(this.elm.getElementsByClassName("close-button").length, 1);
+      });
+    });
+  });
+
+  describe("console actions", function() {
+    describe("close action", function() {
+      beforeEach(function() {
+        this.elm = document.createElement("div");
+        this.elmId = this.elm.id = SpecHelper.randomString();
+        this.stageElement.appendChild(this.elm);
+        var replConsole = new REPLConsole;
+        replConsole.install(this.elm);
+      });
+
+      context("click close button", function() {
+        beforeEach(function() {
+          var closeButton = this.elm.getElementsByClassName("close-button")[0];
+          SpecHelper.triggerEvent(closeButton, "click");
+        });
+        it("should be removed from the parent node", function() {
+          assert.isNull(document.getElementById(this.elmId));
+        });
+      });
+    });
+  });
+});

test/templates/spec/spec_helper.js

@@ -0,0 +1,25 @@
+(function() {
+  var SpecHelper = {
+    triggerEvent: function(el, eventName) {
+      var event = document.createEvent("MouseEvents");
+      event.initEvent(eventName, true, true); // type, bubbles, cancelable
+      el.dispatchEvent(event);
+    },
+    randomString: function() {
+      Math.random().toString(36).substring(2);
+    },
+    prepareStageElement: function() {
+      before(function() {
+        this.stageElement = document.createElement("div");
+        this.stageElement.style.display = "none";
+        document.body.appendChild(this.stageElement);
+      });
+      afterEach(function() {
+        this.stageElement.innerHTML = "";
+      });
+    }
+  };
+
+  window.SpecHelper = SpecHelper;
+  window.assert = chai.assert;
+})();