Permalink
Browse files

Added simple terminal i/o panel.

  • Loading branch information...
toddsundsted committed Mar 18, 2012
1 parent 521be58 commit a93534ea4902be15dafd1d01a288eb6cdea20c9d
@@ -7,3 +7,44 @@
white-space: nowrap;
text-overflow: ellipsis;
}
+
+#JavascriptSocket {
+ position: absolute;
+ top: -1000px;
+}
+
+.command-panel {
+}
+
+.command-panel .top, .command-panel .bottom {
+ font-family: monospace;
+ line-height: 1.25em;
+ width: 100%;
+ clear: both;
+}
+
+.command-panel .input, .command-panel .output {
+ white-space: pre;
+}
+
+.command-panel .input {
+ background-color: #eee;
+}
+
+.command-panel .output {
+ background-color: #fff;
+}
+
+.command-panel .bottom {
+ height: 2em;
+ background-color: #ddd;
+}
+
+.command-panel .bottom input {
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -10,26 +10,40 @@
<script type="text/javascript" src="/js/jquery.ui.widget-1.8.18.min.js"></script>
<script type="text/javascript" src="/js/underscore-1.3.1.min.js"></script>
<script type="text/javascript" src="/js/backbone-0.9.1.min.js"></script>
-<script type="text/javascript" src="/js/moo-0.0.0.min.js"></script>
+<script type="text/javascript" src="/js/swfobject-2.1.min.js"></script>
+<script type="text/javascript" src="/js/moo-0.0.1.min.js"></script>
+<script type="text/javascript" src="/js/Socket.js"></script>
+<script type="text/javascript">
+var flashvars = {};
+var params = {menu: 'false', scale: 'noScale', allowFullscreen: 'true', allowScriptAccess: 'always', bgcolor: '#FFFFFF'};
+var attributes = {id: 'JavascriptSocket', name: 'JavascriptSocket'};
+swfobject.embedSWF('/flash/javascriptsocket.swf', 'flash-content', '100%', '100%', '9.0.0', null, flashvars, params, attributes);
+</script>
</head>
<body>
<div class="container">
- <div id="browser"></div>
- <hr>
+ &nbsp;
<div class="row">
<div class="span12">
<ul>
<li><a rel="object" data-object-number="0" href="/objects/0">#0</a></li>
- <li><a rel="object" data-object-number="2" href="/objects/2">#2</a></li>
- <li><a rel="object" data-object-number="10" href="/objects/10">#10</a></li>
</ul>
</div>
</div>
+ <hr>
+ <div id="browser"></div>
+ <hr>
+ <div id="terminal"></div>
+ <hr>
+ <div id="flash-content"></div>
</div>
<script type="text/javascript">
$(function() {
Moo.Object.prototype.urlRoot = window.location.href + '//objects';
+ var $terminal = $('#terminal');
+ $terminal.commandPanel({host: window.location.hostname, port: window.location.port});
+
var $browser = $('#browser');
$browser.simpleObjectPanel();
@@ -1,4 +1,4 @@
-/* global $ _ Backbone */
+/* global $ _ Backbone SocketManager Socket */
var Moo = {};
@@ -520,11 +520,100 @@ var Moo = {};
},
_create: function() {
- //this.options.originalContent = this.element.html();
},
destroy: function() {
- //this.element.html(this.options.originalContent);
+ this.element.html('');
+ }
+ });
+
+ $.widget('moo.commandPanel', {
+
+ options: {
+ host: 'localhost',
+ port: 8888
+ },
+
+ _setOption: function(key, value) {
+ },
+
+ _create: function() {
+ var widget = this;
+
+ widget.output = $('<div class="top"></div>');
+ widget.input = $('<div class="bottom"><input type="text"></div>');
+ var panel = $('<div class="command-panel"></div>');
+ panel.append(widget.output);
+ panel.append(widget.input);
+ widget.element.append(panel);
+
+ var groove = function(type, text) {
+ var $this = widget.output;
+ var $last = $this.children(':last');
+ if (!$last.hasClass(type)) {
+ $last = $("<div class='" + type + "'></div>");
+ $this.append($last);
+ }
+ $last.text($last.text() + text);
+ widget.input.get(0).scrollIntoView(false);
+ };
+
+ var history = [];
+ var position = -1;
+
+ $('input', widget.input).keypress(function(event) {
+ var text;
+ if (event.which == 13) {
+ if ((text = $(this).val())) {
+ event.preventDefault();
+ history.unshift(text);
+ position = -1;
+ text = text + '\n';
+ groove('input', text);
+ widget.socket.send(text);
+ $(this).val('');
+ }
+ }
+ });
+ $('input', widget.input).keyup(function(event) {
+ var text;
+ if (event.which == 38) {
+ if ((text = history[position + 1])) {
+ $(this).val(text);
+ position++;
+ }
+ }
+ else if (event.which == 40) {
+ if ((text = history[position - 1])) {
+ $(this).val(text);
+ position--;
+ }
+ }
+ });
+
+ SocketManager.observe('loaded', function() {
+ widget.socket = new Socket({
+ ready: function() {
+ widget.socket.connect(widget.options.host, widget.options.port);
+ },
+ connected: function() {
+ widget.socket.send('GET /... HTTP/1.1\n');
+ widget.socket.send('Host: ' + widget.options.host + ':' + widget.options.port + '\n');
+ widget.socket.send('Cookie: ' + document.cookie + '\n');
+ widget.socket.send('Upgrade: moo\n');
+ widget.socket.send('\n\n');
+ },
+ receive: function(data) {
+ groove('output', data);
+ }
+ }, true);
+ });
+ },
+
+ _init: function() {
+ },
+
+ destroy: function() {
this.element.html('');
}
});

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit a93534e

Please sign in to comment.