--- a/playground/index.html Fri Apr 20 15:26:39 2012 -0700
+++ b/playground/index.html Fri Apr 20 16:46:22 2012 -0700
@@ -62,8 +62,10 @@
</div>
<textarea id="markup" class="compressed process"
placeholder="Enter your JSON-LD markup here..."></textarea>
- <textarea id="param" class="compressed process"
- placeholder="Enter your JSON-LD context or frame here..."></textarea>
+ <textarea id="context" class="compressed process"
+ placeholder="Enter your JSON-LD context here..."></textarea>
+ <textarea id="frame" class="compressed process hidden"
+ placeholder="Enter your JSON-LD frame here..."></textarea>
</div>
<div id="permalink"></div>
--- a/playground/playground-examples.js Fri Apr 20 15:26:39 2012 -0700
+++ b/playground/playground-examples.js Fri Apr 20 16:46:22 2012 -0700
@@ -10,7 +10,8 @@
// setup the examples and params
playground.examples = {};
- playground.params = {};
+ playground.frames = {};
+ playground.contexts = {};
// add the example of a Person
playground.examples["Person"] = {
@@ -161,7 +162,7 @@
};
// add the frame example of a Library
- playground.params["Library"] = {
+ playground.frames["Library"] = {
"@context": {
"dc": "http://purl.org/dc/elements/1.1/",
"ex": "http://example.org/vocab#"
--- a/playground/playground.css Fri Apr 20 15:26:39 2012 -0700
+++ b/playground/playground.css Fri Apr 20 16:46:22 2012 -0700
@@ -95,3 +95,5 @@
font-size: 0.8em;
overflow: auto;
}
+
+#frame {display: none;}
--- a/playground/playground.js Fri Apr 20 15:26:39 2012 -0700
+++ b/playground/playground.js Fri Apr 20 16:46:22 2012 -0700
@@ -51,16 +51,19 @@
/**
* Handle URL query parameters.
*
- * Checks 'json-ld' and 'param' parameters. If they look like JSON then
- * interpret as JSON strings else interpret as URLs of remote resources.
- * Note: URLs must be CORS enabled to load due to browser same origin policy
- * issues.
+ * Checks 'json-ld', 'context', and 'frame' parameters. If they look like
+ * JSON then interpret as JSON strings else interpret as URLs of remote
+ * resources. Note: URLs must be CORS enabled to load due to browser same
+ * origin policy issues.
+ *
+ * If 'startTab' is present, select that tab automatically.
*/
playground.processQueryParameters = function() {
// data from the query
var queryData = {
markup: null,
- param: null
+ frame: null,
+ context: null
};
/**
@@ -108,13 +111,30 @@
// build deferreds
var jsonLdDeferred = handleParameter(
getParameterByName('json-ld'), 'markup', 'JSON-LD');
+
+ var frameDeferred = handleParameter(
+ getParameterByName('frame'), 'frame', 'frame');
+
+ var contextDeferred = handleParameter(
+ getParameterByName('context'), 'context', 'context');
+
var paramDeferred = handleParameter(
getParameterByName('param'), 'param', 'param');
+ var startTab = getParameterByName('startTab');
+ if (startTab) {
+ // strip 'tab-' to get the tab's panel's I D
+ $('#tabs').tabs("select", "#"+startTab.substr(4));
+ }
+
// wait for ajax if needed
// failures handled in AJAX calls
- $.when(jsonLdDeferred, paramDeferred)
+ $.when(jsonLdDeferred, frameDeferred, contextDeferred, paramDeferred)
.done(function() {
+ // Maintain backwards permalink compatability
+ if (queryData['param'] && !(queryData['frame'] || queryData['context'])) {
+ queryData['frame'] = queryData['context'] = queryData['param'];
+ }
// populate UI with data
playground.populateWithJSON(queryData);
});
@@ -138,21 +158,25 @@
playground.tabSelected = function(event, ui) {
playground.activeTab = ui.tab.id;
if(ui.tab.id === 'tab-compacted' || ui.tab.id === 'tab-framed') {
- // if the 'compact' or 'frame' tab is selected, display the param
- // input textarea
+ // if the 'compact' or 'frame' tab is selected, display the appropriate
+ // input textarea
$('#markup').addClass('compressed');
- $('#param').show();
if(ui.tab.id === 'tab-compacted') {
$('#param-type').html('JSON-LD Context');
+ $('#context').show();
+ $('#frame').hide();
}
else {
$('#param-type').html('JSON-LD Frame');
+ $('#frame').show();
+ $('#context').hide();
}
}
else {
- // else no param required, hide the param input area
- $('#param').hide();
+ // else no input textarea required
+ $('#context').hide();
+ $('#frame').hide();
$('#markup').removeClass('compressed');
$('#param-type').html('');
}
@@ -251,13 +275,26 @@
errors = true;
}
- // check to see if the JSON-LD param is valid JSON
- try {
- var param = JSON.parse($('#param').val());
+ // If we're using a param, check to see if it is valid JSON
+ var needParam = false, toValidate = null;
+
+ if (playground.activeTab === 'tab-compacted') {
+ toValidate = $('#context').val();
+ needParam = true;
}
- catch(e) {
- $('#param-errors').text('JSON-LD param - ' + e);
- errors = true;
+ else if (playground.activeTab === 'tab-framed') {
+ toValidate = $('#frame').val();
+ needParam = true;
+ }
+
+ if (needParam) {
+ try {
+ var param = JSON.parse(toValidate);
+ }
+ catch(e) {
+ $('#param-errors').text($('#param-type').text() + ' - ' + e);
+ errors = true;
+ }
}
// errors detected
@@ -279,9 +316,18 @@
// generate a link for current data
var link = '?json-ld=' + encodeURIComponent(JSON.stringify(input));
- if($('#param').val().length > 0) {
- link += '¶m=' + encodeURIComponent(JSON.stringify(param));
+ if($('#frame').val().length > 0) {
+ link += '&frame=' +
+ encodeURIComponent($("#frame").val());
}
+ if($('#context').val().length > 0) {
+ link += '&context=' +
+ encodeURIComponent($("#context").val());
+ }
+
+ // Start at the currently active tab
+ link += '&startTab=' + encodeURIComponent(playground.activeTab);
+
var permalink = '<a href="' + link + '">permalink</a>';
// size warning for huge links
if((window.location.protocol.length + 2 +
@@ -328,11 +374,11 @@
};
/**
- * Populate the UI with markup and param JSON. The data parameter should
- * have a 'markup' field and optional 'param' field that contain a
- * serialized JSON string.
+ * Populate the UI with markup, frame, and context JSON. The data parameter
+ * should have a 'markup' field and optional 'frame' and 'context' fields that
+ * contain a serialized JSON string.
*
- * @param data object with optional 'markup' and 'param' fields.
+ * @param data object with optional 'markup', 'frame' and 'context' fields.
*/
playground.populateWithJSON = function(data) {
var hasData = false;
@@ -344,14 +390,24 @@
data.markup, {'indent_size': 2, 'brace_style': 'expand'}));
}
- if('param' in data && data.param !== null) {
+ if('frame' in data && data.frame !== null) {
hasData = true;
- // fill the param input box with the example param
- $('#param').val(js_beautify(
- data.param, {'indent_size': 2, 'brace_style': 'expand'}));
+ // fill the frame input box with the given frame
+ $('#frame').val(js_beautify(
+ data.frame, {'indent_size': 2, 'brace_style': 'expand'}));
}
else {
- $('#param').val('{}');
+ $('#frame').val('{}');
+ }
+
+ if('context' in data && data.context !== null) {
+ hasData = true;
+ // fill the context input box with the given context
+ $('#context').val(js_beautify(
+ data.context, {'indent_size': 2, 'brace_style': 'expand'}));
+ }
+ else {
+ $('#context').val('{}');
}
if(hasData) {
@@ -371,23 +427,27 @@
playground.populateWithExample = function(name) {
var data = {
markup: null,
- param: null
+ context: null,
+ frame: null
};
if(name in playground.examples) {
// fill the markup with the example
data.markup = JSON.stringify(playground.examples[name]);
- if(name in playground.params) {
- // fill the param with the example param
- data.param = JSON.stringify(playground.params[name]);
+ if(name in playground.frames) {
+ // fill the frame with the example
+ data.frame = JSON.stringify(playground.frames[name]);
+ }
+
+ if(name in playground.contexts) {
+ // fill the context with the example
+ data.contexts = JSON.stringify(playground.contexts[name]);
}
else if('@context' in playground.examples[name]) {
// use context from markup as default
- var ctx = {
- '@context': playground.examples[name]['@context']
- };
- data.param = JSON.stringify(ctx);
+ var ctx = playground.examples[name]['@context']
+ data.context = JSON.stringify(ctx);
}
}