--- a/playground/index.html Thu Feb 06 14:48:00 2014 -0500
+++ b/playground/index.html Thu Feb 06 14:49:05 2014 -0500
@@ -23,12 +23,11 @@
<link rel="stylesheet" type="text/css" href="../common/prettify.css">
<!-- CodeMirror -->
- <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css">
- <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/lint.css">
- <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/hint/show-hint.css">
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.css">
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/lint/lint.css">
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/hint/show-hint.css">
- <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/theme/elegant.css" id="theme-stylesheet">
-
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/theme/neat.css" id="theme-stylesheet">
<link rel="stylesheet" type="text/css" href="./playground.css">
@@ -101,6 +100,7 @@
is a work in progress.
</blockquote>
<br/>
+
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn disabled btn-primary">Examples:</button>
<button id="btn-person" class="btn button"><span>Person</span></button>
@@ -112,69 +112,47 @@
</div>
<div class="pull-right">
- <span class="dropdown">
- <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
- <i class="icon-eye-open"></i> <b id="theme-name">elegant</b> <b class="caret"></b>
- </button>
- <ul id="theme-select" class="dropdown-menu">
- <li><a>3024-day</a></li>
- <li><a>3024-night</a></li>
- <li><a>ambiance</a></li>
- <li><a>base16-dark</a></li>
- <li><a>base16-light</a></li>
- <li><a>blackboard</a></li>
- <li><a>cobalt</a></li>
- <li><a>eclipse</a></li>
- <li><a>elegant</a></li>
- <li><a>erlang-dark</a></li>
- <li><a>lesser-dark</a></li>
- <li><a>mbo</a></li>
- <li><a>midnight</a></li>
- <li><a>monokai</a></li>
- <li><a>neat</a></li>
- <li><a>night</a></li>
- <li><a>paraiso-dark</a></li>
- <li><a>paraiso-light</a></li>
- <li><a>rubyblue</a></li>
- <li><a title="solarized">solarized dark</a></li>
- <li><a title="solarized">solarized light</a></li>
- <li><a>the-matrix</a></li>
- <li><a>tomorrow-night-eighties</a></li>
- <li><a>twilight</a></li>
- <li><a>vibrant-ink</a></li>
- <li><a>xq-dark</a></li>
- <li><a>xq-light</a></li>
- </ul>
- </span>
- <button class="btn popover-info" title="Keyboard Shortcuts">
- <i class="icon-question-sign"></i>
+ <button class="btn popover-info">
+ <i class="icon-magic"></i> Shortcuts
</button>
<div class="popover-info-content hide">
- <dl>
- <dt><label class="label">@</label></dt>
- <dd>all of the <b>@</b> keywords</dd>
- <dt><label class="label">Ctrl+Space</label></dt>
- <dd>available keys in <b>@context</b></dd>
- </dl>
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>Key</th>
+ <th>Autocomplete</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><label class="label">@</label></td>
+ <td>all of the <b>@</b> keywords</td>
+ </tr>
+ <tr>
+ <td><label class="label">Ctrl+Space</label></td>
+ <td>available keys in <b>@context</b></td>
+ </tr>
+ </tbody>
+ </table>
</div>
</div>
<br/><br/>
- <div id="markup-container">
+ <div class="container" id="markup-container">
<div class="row">
<div id="markup-div" class="span6">
<h3>JSON-LD Input</h3>
- <textarea id="markup" class="compressed process span6"
+ <textarea id="markup" class="compressed process span6 codemirror-input"
placeholder="Enter your JSON-LD markup here..." rows="10"></textarea>
</div>
<div id="context-div" class="span6">
<h3>New JSON-LD Context</h3>
- <textarea id="context" class="compressed process span6"
+ <textarea id="context" class="compressed process span6 codemirror-input"
placeholder="Enter the new JSON-LD context to compact to here..." rows="10">{}</textarea>
</div>
<div id="frame-div" class="span6">
<h3>JSON-LD Frame</h3>
- <textarea id="frame" class="compressed process span6"
+ <textarea id="frame" class="compressed process span6 codemirror-input"
placeholder="Enter your JSON-LD frame here..." rows="10">{}</textarea>
</div>
</div>
@@ -205,38 +183,38 @@
</table>
</div>
<p id="processing-errors" class="text-error"></p>
- <div id="tabs">
- <div class="tabbable">
- <ul class="nav nav-tabs">
- <li class="active"><a id="tab-compacted" href="#pane1" data-toggle="tab"><span>Compacted</span></a></li>
- <li><a id="tab-expanded" href="#pane2" data-toggle="tab"><span>Expanded</span></a></li>
- <li><a id="tab-flattened" href="#pane3" data-toggle="tab"><span>Flattened</span></a></li>
- <li><a id="tab-framed" href="#pane4" data-toggle="tab"><span>Framed</span></a></li>
- <li><a id="tab-nquads" href="#pane5" data-toggle="tab"><span>N-Quads</span></a></li>
- <li><a id="tab-normalized" href="#pane6" data-toggle="tab"><span>Normalized</span></a></li>
- </ul>
- <div class="tab-content">
- <div id="pane1" class="tab-pane active">
- <pre id="compacted" class="prettyprint lang-jsonld"></pre>
- </div>
- <div id="pane2" class="tab-pane">
- <pre id="expanded" class="prettyprint lang-jsonld"></pre>
- </div>
- <div id="pane3" class="tab-pane">
- <pre id="flattened" class="prettyprint lang-jsonld"></pre>
- </div>
- <div id="pane4" class="tab-pane">
- <pre id="framed" class="prettyprint lang-jsonld"></pre>
- </div>
- <div id="pane5" class="tab-pane">
- <pre id="nquads" class="prettyprint lang-nquads"></pre>
- </div>
- <div id="pane6" class="tab-pane">
- <pre id="normalized" class="prettyprint lang-jsonld"></pre>
- </div>
- </div><!-- /.tab-content -->
- </div><!-- /.tabbable -->
+
+ <div>
+ <ul id="tabs" class="nav nav-tabs">
+ <li class="active"><a id="tab-compacted" href="#pane1" data-toggle="tab"><span>Compacted</span></a></li>
+ <li><a id="tab-expanded" href="#pane2" data-toggle="tab"><span>Expanded</span></a></li>
+ <li><a id="tab-flattened" href="#pane3" data-toggle="tab"><span>Flattened</span></a></li>
+ <li><a id="tab-framed" href="#pane4" data-toggle="tab"><span>Framed</span></a></li>
+ <li><a id="tab-nquads" href="#pane5" data-toggle="tab"><span>N-Quads</span></a></li>
+ <li><a id="tab-normalized" href="#pane6" data-toggle="tab"><span>Normalized</span></a></li>
+ </ul>
+ <div class="tab-content">
+ <div id="pane1" class="tab-pane active">
+ <textarea id="compacted" class="codemirror-output"></textarea>
+ </div>
+ <div id="pane2" class="tab-pane">
+ <textarea id="expanded" class="codemirror-output"></textarea>
+ </div>
+ <div id="pane3" class="tab-pane">
+ <textarea id="flattened" class="codemirror-output"></textarea>
+ </div>
+ <div id="pane4" class="tab-pane">
+ <textarea id="framed" class="codemirror-output"></textarea>
+ </div>
+ <div id="pane5" class="tab-pane">
+ <textarea id="nquads" class="codemirror-output"></textarea>
+ </div>
+ <div id="pane6" class="tab-pane">
+ <textarea id="normalized" class="codemirror-output"></textarea>
+ </div>
+ </div><!-- /.tab-content -->
</div>
+
<hr>
<div id="footer">
<p id="copyright">
@@ -249,12 +227,7 @@
<!-- script tags -->
<script src="jquery-1.9.0.min.js"></script>
- <script type="text/javascript" src="jquery-ui-1.9.2.js"></script>
<script type="text/javascript" src="js_beautify.js"></script>
- <script type="text/javascript" src="../common/prettify.js"></script>
- <script type="text/javascript" src="../common/lang-jsonld.js"></script>
- <script type="text/javascript" src="../common/lang-nquads.js"></script>
- <script type="text/javascript" src="setImmediate.js"></script>
<script type="text/javascript" src="Promise.js"></script>
<script type="text/javascript" src="jsonld.js"></script>
@@ -273,13 +246,14 @@
<!-- codemirror -->
<script src="./jsonlint.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/lint.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/json-lint.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/edit/matchbrackets.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/edit/closebrackets.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/display/placeholder.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/hint/show-hint.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/lint/lint.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/lint/json-lint.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/edit/matchbrackets.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/edit/closebrackets.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/display/placeholder.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/addon/hint/show-hint.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/mode/ntriples/ntriples.min.js"></script>
<script src="./jsonld-hint.js"></script>
<script src="./codemirror.jsonld.js"></script>