Updated UI. Added examples and moved them to playground-examples.js
--- a/playground/index.html Thu Jul 07 18:24:37 2011 -0400
+++ b/playground/index.html Fri Jul 08 13:01:09 2011 -0400
@@ -24,9 +24,10 @@
<script type="text/javascript" src="lang-jsonld.js"></script>
<script type="text/javascript" src="jsonld.js"></script>
<script type="text/javascript" src="playground.js"></script>
+ <script type="text/javascript" src="playground-examples.js"></script>
</head>
- <body onload="sandbox.init();">
+ <body onload="playground.init();">
<div id="container">
<div id="header">
<div class="col">
@@ -44,40 +45,38 @@
<ul id="examples">
<li class="button-list">Simple Examples:</li>
<li class="button">
- <span onclick="sandbox.populate('Person')">Person</span>
- </li>
- <li class="button">
- <span onclick="sandbox.populate('Place')">Place</span>
+ <span onmousedown="playground.populate('Person')">Person</span>
</li>
<li class="button">
- <span onclick="sandbox.populate('Event')">Event</span>
+ <span onmousedown="playground.populate('Event')">Event</span>
</li>
<li class="button">
- <span onclick="sandbox.populate('Product')">Product</span>
+ <span onmousedown="playground.populate('Place')">Place</span>
</li>
<li class="button">
- <span onclick="sandbox.populate('Recipe')">Recipe</span>
+ <span onmousedown="playground.populate('Product')">Product</span>
+ </li>
+ <li class="button">
+ <span onmousedown="playground.populate('Recipe')">Recipe</span>
</li>
<li class="button-list">Framing Examples:</li>
<li class="button">
- <span onclick="sandbox.populate('Library')">Library</span>
+ <span onmousedown="playground.populate('Library')">Library</span>
</li>
</ul>
-
+ <div id="errors"></div>
<textarea id="markup"
placeholder="Enter your JSON-LD markup here..."
- onkeyup="sandbox.process()"></textarea>
+ onkeyup="playground.process()"></textarea>
<div id="tabs">
<ul>
- <li><a href="#turtle"><span>TURTLE</span></a></li>
<li><a href="#compacted"><span>Compacted</span></a></li>
<li><a href="#expanded"><span>Expanded</span></a></li>
<li><a href="#normalized"><span>Normalized</span></a></li>
<li><a href="#framed"><span>Framed</span></a></li>
+ <li><a href="#turtle"><span>TURTLE</span></a></li>
</ul>
- <pre id="turtle" class="prettyprint language-ttl">
- </pre>
<pre id="compacted" class="prettyprint language-jsonld">
</pre>
<pre id="expanded" class="prettyprint language-jsonld">
@@ -86,6 +85,8 @@
</pre>
<pre id="framed" class="prettyprint language-jsonld">
</pre>
+ <pre id="turtle" class="prettyprint language-ttl">
+ </pre>
</div>
</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/playground/playground-examples.js Fri Jul 08 13:01:09 2011 -0400
@@ -0,0 +1,167 @@
+/**
+ * The JSON-LD Sandbox is used to test out JavaScript
+ */
+(function($)
+{
+ window.playground = window.playground || {};
+ var playground = window.playground;
+ playground.examples = {};
+
+ // Add the example of a Person
+ playground.examples["Person"] =
+ {
+ "name": "Manu Sporny",
+ "homepage": "http://manu.sporny.org/",
+ "@context":
+ {
+ "name": "http://xmlns.com/0.1/foaf/name",
+ "homepage": "http://xmlns.com/0.1/foaf/homepage",
+ "xsd": "http://www.w3.org/2001/XMLSchema#",
+ "@coerce":
+ {
+ "xsd:anyURI": ["homepage"]
+ }
+ }
+ };
+
+ // Add the example of a Place
+ playground.examples["Place"] =
+ {
+ "name": "The Empire State Building",
+ "description": "The Empire State Building is a 102-story landmark in New York City.",
+ "image": "http://www.civil.usherbrooke.ca/cours/gci215a/empire-state-building.jpg",
+ "geo":
+ {
+ "latitude": "40.75",
+ "longitude": "73.98"
+ },
+ "@context":
+ {
+ "name": "http://schema.org/name",
+ "description": "http://schema.org/description",
+ "image": "http://schema.org/image",
+ "geo": "http://schema.org/geo",
+ "latitude": "http://schema.org/latitude",
+ "longitude": "http://schema.org/longitude",
+ "xsd": "http://www.w3.org/2001/XMLSchema#",
+ "@coerce":
+ {
+ "xsd:anyURI": ["image"],
+ "xsd:float": ["latitude", "longitude"]
+ }
+ }
+ };
+
+ // Add the example of a Event
+ playground.examples["Event"] =
+ {
+ "ical:summary": "Lady Gaga Concert",
+ "ical:location": "New Orleans Arena, New Orleans, Louisiana, USA",
+ "ical:dtstart": "2011-04-09T20:00Z",
+ "@context":
+ {
+ "ical": "http://www.w3.org/2002/12/cal/ical#",
+ "xsd": "http://www.w3.org/2001/XMLSchema#",
+ "@coerce":
+ {
+ "xsd:dateTime": ["ical:dtstart"]
+ }
+ }
+ };
+
+ // Add the example of a Product
+ playground.examples["Product"] =
+ {
+ "@subject": "http://example.org/cars/for-sale#tesla",
+ "@type": "gr:Offering",
+ "gr:name": "Used Tesla Roadster",
+ "gr:description": "Need to sell fast and furiously",
+ "gr:hasBusinessFunction": "gr:Sell",
+ "gr:acceptedPaymentMethods": "gr:Cash",
+ "gr:hasPriceSpecification":
+ {
+ "gr:hasCurrencyValue": "85000",
+ "gr:hasCurrency": "USD",
+ },
+ "gr:includes":
+ {
+ "@type": ["gr:Individual", "pto:Vehicle"],
+ "gr:name": "Tesla Roadster",
+ "foaf:page": "http://www.teslamotors.com/roadster"
+ },
+ "@context":
+ {
+ "gr": "http://purl.org/goodrelations/v1#",
+ "foaf": "http://xmlns.com/foaf/0.1/",
+ "xsd": "http://www.w3.org/2001/XMLSchema#",
+ "@coerce":
+ {
+ "xsd:anyURI": ["foaf:page"],
+ "xsd:float": ["gr:hasCurrencyValue"]
+ }
+ }
+ };
+
+ // Add the example of a Recipe
+ playground.examples["Recipe"] =
+ {
+ "name": "Mojito",
+ "ingredient": ["12 fresh mint leaves", "1/2 lime, juiced with pulp",
+ "1 tablespoons white sugar", "1 cup ice cubes",
+ "2 fluid ounces white rum", "1/2 cup club soda"],
+ "yield": "1 cocktail",
+ "instructions" :
+ [
+ {
+ "step": 1,
+ "description": "Crush lime juice, mint and sugar together in glass."
+ },
+ {
+ "step": 2,
+ "description": "Fill glass to top with ice cubes."
+ },
+ {
+ "step": 3,
+ "description": "Pour white rum over ice."
+ },
+ {
+ "step": 4,
+ "description": "Fill the rest of glass with club soda, stir."
+ },
+ {
+ "step": 5,
+ "description": "Garnish with a lime wedge."
+ }
+ ],
+ "@context":
+ {
+ "name": "http://rdf.data-vocabulary.org/#name",
+ "ingredient": "http://rdf.data-vocabulary.org/#ingredients",
+ "yield": "http://rdf.data-vocabulary.org/#yield",
+ "instructions": "http://rdf.data-vocabulary.org/#instructions",
+ "step": "http://rdf.data-vocabulary.org/#step",
+ "description": "http://rdf.data-vocabulary.org/#description",
+ "xsd": "http://www.w3.org/2001/XMLSchema#",
+ "@coerce":
+ {
+ "xsd:integer": ["step"]
+ }
+ }
+ };
+
+ // Add the example of a Library
+ playground.examples["Library"] =
+ {
+ "name": "The Long Library",
+ "@context":
+ {
+ "xsd": "http://www.w3.org/2001/XMLSchema#",
+ "@coerce":
+ {
+ "xsd:anyURI": ["image"]
+ }
+ }
+ };
+
+})(jQuery);
+
--- a/playground/playground.js Thu Jul 07 18:24:37 2011 -0400
+++ b/playground/playground.js Fri Jul 08 13:01:09 2011 -0400
@@ -1,145 +1,53 @@
/**
- * The JSON-LD Sandbox is used to test out JavaScript
+ * The JSON-LD playground is used to test out JavaScript Object Notation
+ * for Linked Data.
*/
(function($)
{
- window.sandbox = window.sandbox || {};
- var sandbox = window.sandbox;
-
- var examples = {};
-
- sandbox.init = function()
- {
- $('#tabs').tabs();
-
- // Add the example of a Person
- examples["Person"] =
- {
- "name": "Manu Sporny",
- "homepage": "http://manu.sporny.org/",
- "@context":
- {
- "name": "http://xmlns.com/0.1/foaf/name",
- "homepage": "http://xmlns.com/0.1/foaf/homepage",
- "xsd": "http://www.w3.org/2001/XMLSchema#",
- "@coerce":
- {
- "xsd:anyURI": ["homepage"]
- }
- }
- };
+ window.playground = window.playground || {};
+ var playground = window.playground;
- // Add the example of a Place
- examples["Place"] =
- {
- "name": "The Empire State Building",
- "description": "The Empire State Building is a 102-story landmark in New York City.",
- "image": "http://www.civil.usherbrooke.ca/cours/gci215a/empire-state-building.jpg",
- "geo":
- {
- "latitude": 40.75,
- "longitude": 73.98
- },
- "@context":
- {
- "name": "http://schema.org/name",
- "description": "http://schema.org/description",
- "image": "http://schema.org/image",
- "geo": "http://schema.org/geo",
- "latitude": "http://schema.org/latitude",
- "longitude": "http://schema.org/longitude",
- "xsd": "http://www.w3.org/2001/XMLSchema#",
- "@coerce":
- {
- "xsd:anyURI": ["image"]
- }
- }
- };
+ playground.init = function()
+ {
+ $("#tabs").tabs();
+ };
- // Add the example of a Event
- examples["Event"] =
+ playground.process = function()
+ {
+ try
{
- "name": "Rock Show",
- "@context":
- {
- "xsd": "http://www.w3.org/2001/XMLSchema#",
- "@coerce":
- {
- "xsd:anyURI": ["image"]
- }
- }
- };
+ var input = JSON.parse($("#markup").val());
+ var normalized = forge.jsonld.normalize(input);
+ var expanded = forge.jsonld.removeContext(input);
+ var compacted = forge.jsonld.changeContext(
+ input["@context"] || {}, input);
+ var framed = forge.jsonld.frame({}, input);
- // Add the example of a Product
- examples["Product"] =
- {
- "name": "Tesla Roadster",
- "@context":
- {
- "xsd": "http://www.w3.org/2001/XMLSchema#",
- "@coerce":
- {
- "xsd:anyURI": ["image"]
- }
- }
- };
+ $("#normalized").html(js_beautify(JSON.stringify(normalized)),
+ { "indent_size": 3, "brace_style": "expand" });
+ $("#compacted").html(js_beautify(JSON.stringify(compacted)),
+ { "indent_size": 3, "brace_style": "expand" });
+ $("#expanded").html(js_beautify(JSON.stringify(expanded)),
+ { "indent_size": 3, "brace_style": "expand" });
- // Add the example of a Recipe
- examples["Recipe"] =
+ prettyPrint();
+ }
+ catch(e)
{
- "name": "Mojito",
- "@context":
- {
- "xsd": "http://www.w3.org/2001/XMLSchema#",
- "@coerce":
- {
- "xsd:anyURI": ["image"]
- }
- }
- };
-
- // Add the example of a Library
- examples["Library"] =
- {
- "name": "The Long Library",
- "@context":
- {
- "xsd": "http://www.w3.org/2001/XMLSchema#",
- "@coerce":
- {
- "xsd:anyURI": ["image"]
- }
- }
- };
-
- };
-
- sandbox.process = function()
- {
- var input = JSON.parse($("#markup").val());
- var normalized = forge.jsonld.normalize(input);
- var expanded = forge.jsonld.removeContext(input);
- var compacted = forge.jsonld.changeContext(input["@context"] || {}, input);
-
- $("#normalized").html(js_beautify(JSON.stringify(normalized)),
- { "indent_size": 3, "brace_style": "expand" });
- $("#compacted").html(js_beautify(JSON.stringify(compacted)),
- { "indent_size": 3, "brace_style": "expand" });
- $("#expanded").html(js_beautify(JSON.stringify(expanded)),
- { "indent_size": 3, "brace_style": "expand" });
-
- prettyPrint();
+ console.log(e);
+ $("#errors").html(e);
+ }
}
- sandbox.populate = function(type)
+ playground.populate = function(type)
{
- if(type in examples)
+ if(type in playground.examples)
{
- $("#markup").val(js_beautify(JSON.stringify(examples[type]),
+ $("#markup").val(js_beautify(JSON.stringify(playground.examples[type]),
{ "indent_size": 3, "brace_style": "expand" }));
}
- sandbox.process();
+ playground.process();
};
})(jQuery);
--- a/playground/prettify.css Thu Jul 07 18:24:37 2011 -0400
+++ b/playground/prettify.css Fri Jul 08 13:01:09 2011 -0400
@@ -68,7 +68,11 @@
}
.prettyprint {
+ font: monospace;
+ font-size: 0.8em;
+ font-weight: bold;
background: #000;
+ overflow: auto;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{