--- a/playground/index.html Thu Feb 06 16:08:51 2014 -0500
+++ b/playground/index.html Mon Feb 10 11:35:49 2014 +0100
@@ -184,7 +184,7 @@
</div>
<p id="processing-errors" class="text-error"></p>
- <div>
+ <div id="output-container">
<ul id="tabs" class="nav nav-tabs">
<li class="active"><a id="tab-compacted" href="#pane1" data-toggle="tab"><span>Compacted</span></a></li>
<li><a id="tab-expanded" href="#pane2" data-toggle="tab"><span>Expanded</span></a></li>
--- a/playground/playground.css Thu Feb 06 16:08:51 2014 -0500
+++ b/playground/playground.css Mon Feb 10 11:35:49 2014 +0100
@@ -1,2 +1,8 @@
#frame-div{ display: none; }
-#tabs{ margin-bottom: 0; }
\ No newline at end of file
+#tabs{ margin-bottom: 0; }
+.btn.resizer{
+ cursor: row-resize;
+ padding: .5px;
+ width: 100%;
+ display: block;
+}
\ No newline at end of file
--- a/playground/playground.js Thu Feb 06 16:08:51 2014 -0500
+++ b/playground/playground.js Mon Feb 10 11:35:49 2014 +0100
@@ -194,6 +194,8 @@
$(".codemirror-input").each(playground.init.editor);
$(".codemirror-output").each(playground.init.output);
+ playground.makeResizer($("#markup-container"), playground.editors);
+ playground.makeResizer($("#output-container"), playground.outputs);
if(window.location.search) {
playground.processQueryParameters();
@@ -253,7 +255,36 @@
theme: playground.theme
});
};
-
+
+ /**
+ * Make one or more CodeMirror editor resizeable.
+ *
+ * @param parent the dom element to which the button should be attached
+ * @param target the CodeMirror instances to be resized
+ */
+ playground.makeResizer = function(parent, targets){
+ targets = $.map(targets, function(val, key){ return val; });
+ var start_y,
+ start_height,
+ handlers = {},
+ btn = $("<button/>", {"class": "btn resizer"})
+ .mousedown(handlers.mousedown = function(evt){
+ start_y = evt.screenY;
+ start_height = targets[0].display.wrapper.clientHeight;
+ $(window)
+ .bind("mousemove.resizer", function(evt){
+ targets.map(function(tgt){
+ tgt.setSize(null, start_height - (start_y - evt.screenY));
+ });
+ })
+ .bind("mouseup.resizer", function(){
+ $(window).unbind(".resizer");
+ btn.blur();
+ });
+ })
+ .appendTo(parent);
+ };
+
/**
* Callback for when tabs are selected in the UI.
*