Permalink
Browse files

Improved console.

  • Loading branch information...
1 parent 5ca3a47 commit 5d7f746e427b06bd88cdd76cf71715e32d9666ca @michael michael committed Oct 20, 2012
Showing with 65 additions and 62 deletions.
  1. +2 −1 .gitignore
  2. +21 −31 console.css
  3. +24 −15 console.js
  4. +3 −0 data/empty_doc.json
  5. +1 −3 documents/hello.json
  6. +14 −12 index.html
View
@@ -12,4 +12,5 @@ logs
results
node_modules
-npm-debug.log
+npm-debug.log
+/_site/
View
@@ -120,53 +120,32 @@ h2 { font-size: 160%; padding-bottom: 15px; }
#container {
- margin: 40px;
position:relative;
width: 800px;
- /*border: 1px solid #ccc;*/
}
/* Testsuites
-------------------------------------------------------------------------------*/
+
.testsuites {
position: relative;
}
-.testsuites .current {
- padding: 10px;
- width: 300px;
- background: rgba(0,0,0, 0.2);
- border-radius: 3px;
- font-weight: bold;
-}
-
-.testsuites .options {
- position: absolute;
- top: 41px;
- display: none;
- background: rgba(0,0,0, 0.2);
- width: 300px;
-}
-
-.testsuites a {
- padding: 10px;
- display: block;
-}
-
/* History
-------------------------------------------------------------------------------*/
.operations {
- margin-top: 30px;
+ margin-top: 10px;
+ height: 17px;
overflow: auto;
}
.operations .operation {
display: block;
width: 10px;
- height: 40px;
+ height: 15px;
float: left;
margin-right: 1px;
margin-bottom: 1px;
@@ -213,23 +192,34 @@ textarea {
padding: 10px;
width: 370px;
- height: 400px;
+ height: 450px;
+ margin: 0;
+}
+
+.console textarea.inactive {
+ background: #ccc;
}
.console .apply-operation {
display: block;
- padding-left: 5px;
width: 370px;
border-radius: 3px;
- line-height: 50px;
- height: 50px;
+ line-height: 45px;
+ height: 45px;
text-align: center;
font-weight: bold;
background: rgba(0,0,0, 0.1);
+ color: #aaa;
}
-.console .apply-operation:hover {
- background: #69CA14;
+.console .apply-operation.active {
+ cursor: pointer;
+ color: white;
+ background: #444;
+}
+
+.console .apply-operation.active:hover {
+ background: #333;
}
/* Select Output
View
@@ -111,16 +111,12 @@ $(function() {
var Application = Backbone.View.extend({
events: {
- 'click .current': '_toggleOptions',
- 'click .load-testsuite': '_loadDocument'
- },
-
- _toggleOptions: function() {
- this.$('.options').toggle();
+ 'change #file': '_loadDocument'
},
_loadDocument: function(e) {
- this.document($(e.currentTarget).attr('data-file'));
+ var file = $('#file').val();
+ this.document(file);
},
initialize: function (options) {
@@ -159,7 +155,13 @@ $(function() {
'click .apply-operation': '_applyOperation',
'change #select_scope': '_selectScope',
'change #select_example': '_selectExample',
- 'click .toggle-output': '_toggleOutput'
+ 'click .toggle-output': '_toggleOutput',
+ 'focus .console textarea': '_makeEditable'
+ },
+
+ _makeEditable: function() {
+ this.$('#command').removeClass('inactive');
+ this.$('.apply-operation').addClass('active');
},
_toggleOutput: function(e) {
@@ -180,11 +182,12 @@ $(function() {
_selectScope: function() {
this.scope = $('#select_scope').val();
- this.render(); // rerender it
+ this.render();
return false;
},
_selectExample: function() {
+ this._makeEditable();
var index = $('#select_example').val();
if (index === "") {
$('#command').val('');
@@ -196,15 +199,16 @@ $(function() {
return false;
},
- _applyOperation: function() {
+ _applyOperation: function(e) {
+ if (!$(e.currentTarget).hasClass('active')) return;
var op = JSON.parse(this.$('#command').val());
this.model.apply(op, {
user: "demo",
scope: this.scope
});
- this.sha = 'master';
+ this.sha = this.model.model.refs['master'];
this.render();
return false;
},
@@ -218,25 +222,30 @@ $(function() {
},
initialize: function (options) {
- this.sha = 'master';
+ this.sha = this.model.model.refs['master'];
this.scope = 'document';
},
-
// Toggle Start view
start: function() {
},
// Render application template
render: function() {
+ var operations = this.model.operations('master');
+
this.$el.html(_.tpl('document', {
sha: this.sha,
- operations: this.model.operations('master'),
+ operations: operations,
nodes: this.model.nodes(),
document: this.model
}));
+ // Get current op
+ var op = this.model.model.operations[this.sha].op;
+
+ $('#command').val(JSON.stringify(op, null, ' '));
this.renderScope();
},
@@ -251,7 +260,7 @@ $(function() {
window.app = new Application({el: '#container'});
app.render();
- app.document('substance.json');
+ app.document('hello.json');
// Start responding to routes
window.router = new Router({});
View
@@ -0,0 +1,3 @@
+{
+ "id": "doc:substance"
+}
View
@@ -2,8 +2,6 @@
"refs": {
"master": "f7bd8120adb16d179c454ce57b57b50d"
},
- "head": null,
- "tail": null,
"operations": {
"1b6544d5f9724c33aa8dbb5becc51c0d": {
"op": [
@@ -61,6 +59,6 @@
"parent": "b0595f2d3863db5ecd82d43e7ec05da0"
}
},
- "annotations": {},
+ "additions": {},
"id": "doc:hello"
}
View
@@ -20,34 +20,37 @@
</script>
<script type="text/html" name="application">
- <div class="testsuites">
- <div class="current">Substance Test</div>
- <div class="options">
- <a href="#" class="load-testsuite" data-file="substance.json">Substance Test doc</a>
- <a href="#" class="load-testsuite" data-file="empty.json">Empty doc</a>
- </div>
- </div>
+ <div class="testsuites">
+ Document:
+ <select id="file" name="file">
+ <option value="hello.json">Hello World</option>
+ <option value="empty.json">Empty</option>
+ <option value="substance.json">Substance</option>
+ </select>
+ </div>
<div id="document"></div>
</script>
<script type="text/html" name="document">
+
<div class="operations">
<% applied = true %>
+ <% var width = parseInt((800 / operations.length) - 1, 10); %>
+ <% width = Math.min(width, 40); %>
<% _.each(operations, function(op) { %>
- <a href="#" class="operation<%= applied ? ' applied' : '' %>" data-sha="<%= op.sha %>"></a>
+ <a style="width: <%= width %>px;" href="#" class="operation<%= applied ? ' applied' : '' %>" data-sha="<%= op.sha %>"></a>
<% if (op.sha === sha) applied = false; %>
<% }); %>
</div>
-
<div class="console-wrapper">
<div class="console">
<div class="scope" id="scope">
</div>
<div class="action">
- <textarea id="command" class="command"></textarea>
- <a href="#" class="apply-operation disabled">Apply</a>
+ <textarea id="command" class="command inactive"></textarea>
+ <div class="apply-operation">Apply</div>
</div>
</div>
@@ -63,7 +66,6 @@
<div class="node <%= node.type %>" data-id="<%= node.id %>">
<%= node.content %>
<% annotations = document.getAnnotations(node.id); %>
-
<% _.each(annotations, function(a) { %>
<div class="annotation" data-id="<%= a.id %>"></div>
<% }); %>

0 comments on commit 5d7f746

Please sign in to comment.