Skip to content

Instantly share code, notes, and snippets.

@bollwyvl

bollwyvl/index.html

Created July 1, 2014 22:09
Show Gist options
  • Save bollwyvl/a9e04d9e2740b052a537 to your computer and use it in GitHub Desktop.
Save bollwyvl/a9e04d9e2740b052a537 to your computer and use it in GitHub Desktop.
Download ZIP
JSON Hyperground
Raw
index.html
<!DOCTYPE html>
<link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.css"></link>
<link rel="stylesheet" href="./lib/fontawesome/css/font-awesome.css"></link>
<link rel="stylesheet" href="./lib/bootswatch/cyborg/bootstrap.css"></link>
<link rel="stylesheet" href="./lib/codemirror/lib/codemirror.css"></link>
<link rel="stylesheet" href="./lib/codemirror/theme/monokai.css"></link>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-image: linear-gradient(#434343, #282828);
}
.panel{
-webkit-box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.5);
box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.5);
opacity: .6;
}
.panel:hover{
opacity: 1.0;
}
.piece{
position: relative;
}
.logo{
float:right;
}
.overlays{
top: 16px;
right: 16px;
position:fixed;
z-index: 9999;
}
.app{
position: relative;
background-color: transparent;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:50px 50px;
}
</style>
<div class="app">
<div class="overlays col-lg-3">
<div class="overlay about">
<div class="panel panel-default">
<div class="panel-body">
<h1 class="logo">
<span class="fa-stack fa-lg">
<i class="fa fa-rocket fa-stack-2x text-muted"></i>
<i class="fa fa-wrench fa-stack-1x text-primary"></i>
</span>
</h1>
<p class="marked">
# JSON Hyperground
Build and share reactive flows of JSON data. Featuring:
- [JSON-LD](http://json-ld.org)
- [JSON Schema](http://json-schema.org)
- [JSON Patch](http://tools.ietf.org/html/draft-ietf-appsawg-json-patch-10)
</p>
<h1 class="logo">
<span class="fa-stack fa-lg">
<i class="fa fa-cube fa-stack-2x text-muted"></i>
<i class="fa fa-cog fa-stack-1x text-primary"></i>
</span>
</h1>
<p class="marked">
## Get Involved!
Don't see your favorite JSON-related technology here? Hyperground uses:
- [Backbone models](http://backbonejs.org#Model) for managing data flows
- [RequireJS](http://requirejs.org) for in-browser dependency management
- [cdnjs](http://cdnjs.com) for snappy file delivery
To get started, check out the [hyperground piece generator](http://github.com/bollwyvl/generator-hyperground).
</p>
</div>
</div>
</div>
<div class="overlay create-piece">
<div class="panel panel-default">
<div class="panel-body">
<h1>Pieces</h1>
<div class="well pieceTypes">
</div>
</div>
</div>
</div>
</div>
<div class="pieces container-fluid"></div>
</div>
<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/d3/d3.js"></script>
<script src="./lib/underscore/underscore.js"></script>
<script src="./lib/guid/guid.js"></script>
<script src="./lib/backbone/backbone.js"></script>
<script src="./lib/jsonld.js/js/jsonld.js"></script>
<script src="./lib/marked/lib/marked.js"></script>
<script src="./lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="./lib/codemirror/lib/codemirror.js"></script>
<script src="./lib/codemirror/mode/javascript/javascript.js"></script>
<script src="./lib/codemirror/addon/edit/matchbrackets.js"></script>
<script src="./lib/codemirror/addon/edit/closebrackets.js"></script>
<script type="text/template" class="template panel">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
<a class="drag"><i class="fa fa-arrows"></i></a>
<span></span>
</h3>
</div>
</div>
</script>
<script type="text/template" class="template jsonld">
<div class="panel-body">
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Document</label>
<div class="col-sm-10">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Remote Document</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Feature</label>
<div class="col-sm-10">
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-info active">
<input type="radio" name="feature" class="expand" checked>
Expand
</button>
<button type="button" class="btn btn-info">
<input type="radio" name="feature" class="compact" checked>
Compact</button>
<button type="button" class="btn btn-info">
<input type="radio" name="feature" class="flatten" checked>
Flatten</button>
<button type="button" class="btn btn-info">
<input type="radio" name="feature" class="frame" checked>
Frame</button>
</div>
</div>
</div>
</div>
</div>
</script>
<script>
var bowerdot = {
"name": "json-hyperground",
"version": "0.0.0",
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"lib",
"test",
"tests"
],
"dependencies": {
"backbone": "~1.1.2",
"bootstrap": "~3.2.0",
"bootswatch": "~3.2.0",
"marked": "~0.3.2",
"guid": "https://github.com/dandean/guid.git",
"d3": "~3.4.9",
"fontawesome": "~4.1.0",
"uuid-lib": "https://github.com/dandean/uuid-lib.git",
"codemirror": "~4.3.0",
"jsonld.js": "https://github.com/digitalbazaar/jsonld.js.git#~0.2.13"
}
};
</script>
<script>
;(function(){
'use strict';
var PieceTypeModel = Backbone.Model.extend({});
var PieceTypeCollection = Backbone.Collection.extend({
model: PieceTypeModel
});
var PieceModel = Backbone.Model.extend({});
var PieceCollection = Backbone.Collection.extend({
model: PieceModel
});
var PieceView = Backbone.View.extend({
drag: d3.behavior.drag()
.origin(function(d){ return d.attributes; })
.on("drag", function(d){
var x = parseFloat(d.get("x")),
y = parseFloat(d.get("y"));
d.set({
x: (_.isNaN(x) ? 0 : x) + d3.event.dx,
y: (_.isNaN(y) ? 0 : y) + d3.event.dy
});
}),
initialize: function(){
this.$el.html($('script.template.panel').text());
this.d3 = d3.select(this.el).datum(this.model)
.attr("class", "piece col-lg-4");
this.d3.select(".drag")
.call(this.drag);
this.listenTo(this.model, {
"change:x": this.positionChanged,
"change:y": this.positionChanged
});
},
positionChanged: function(){
this.d3.style({
left: this.model.get("x") + "px",
top: this.model.get("y") + "px"
});
}
});
var CodeMirrorView = PieceView.extend({
initialize: function(){
PieceView.prototype.initialize.call(this);
var textarea = $("<textarea/>");
this.$(".panel").append(textarea);
this.editor = CodeMirror.fromTextArea(textarea[0], {
mode: "application/ld+json",
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
theme: "monokai"
});
this.editor.on("change", this.editorChange);
this.model.on("change:text", this.textChange);
},
editorChange: function(cm, delta){
if(!delta.origin){ return; }
model.set({text: editor.getValue()}, {source: this.cid});
},
textChange: function(model, value, options){
if(options.source === this.cid){ return; }
this.editor.setValue(model.get("text"));
}
});
var JsonLdView = PieceView.extend({
initialize: function(){
PieceView.prototype.initialize.call(this);
this.$(".panel").append($("script.template.jsonld").text())
}
});
var PieceTypeButton = Backbone.View.extend({
tag: "button",
className: "btn btn-primary",
initialize: function(){
this.$el.text(this.model.get("label"));
},
events: {
click: "onClick"
},
onClick: function(){
this.trigger("create", this.model);
}
});
var AppView = Backbone.View.extend({
initialize: function(){
this.d3 = d3.select(this.el);
this.pieceTypes = new PieceTypeCollection();
this.listenTo(this.pieceTypes, "add", this.onAddPieceType);
this.pieces = new PieceCollection();
this.listenTo(this.pieces, "add", this.onAddPiece);
this.children = {
pieces: [],
pieceTypes: []
};
},
onAddPieceType: function(pieceType){
var btn = new PieceTypeButton({model: pieceType});
this.$(".pieceTypes").append(btn.el);
this.children.pieceTypes.push(btn);
this.listenTo(btn, "create", this.addPiece);
},
addPiece: function(pieceType){
this.pieces.add({
label: pieceType.get("label"),
handler: pieceType.get("id"),
id: Guid.raw()
});
},
onAddPiece: function(piece){
var panel = this.d3.select(".pieces").append("div").node(),
handlers = {
codemirror: CodeMirrorView,
jsonld: JsonLdView
},
Handler = handlers[piece.get("handler")];
this.children.pieces.push(new Handler({
model: piece,
el: panel
}));
}
});
var app = new AppView({el: $(".app")});
app.pieceTypes.add({
label: "CodeMirror",
id: "codemirror"
});
app.pieceTypes.add({
label: "JSON-LD",
id: "jsonld"
});
d3.selectAll(".marked").each(function(){
var container = d3.select(this),
txt = container.text().split("\n").slice(1).join("\n"),
indent = new RegExp("^" + txt.match(/^(\s+)/)[1], "gm");
container.html(marked(txt.replace(indent, "")));
});
}).call(this);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment