Author: ijd
Date: Thu Jun 5 09:59:32 2014
New Revision: 1600578
URL: http://svn.apache.org/r1600578
Log:
Added tab manager component, so that active tab can be set via 'tab=tabname'
query param
Added:
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/tabbed-view-manager.js
Modified:
jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css
jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css
URL:
http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css?rev=1600578&r1=1600577&r2=1600578&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/css/fui.css Thu Jun 5
09:59:32 2014
@@ -113,3 +113,15 @@ a.navbar-brand img {
vertical-align: middle;
display: inline-block;
}
+
+.content-frame {
+ background-color: #eee;
+ border: 1px solid #aaa;
+ border-radius: 5px;
+ padding: 5px;
+}
+
+.tab-pane > div {
+ background-color: white;
+ border-radius: 3px;
+}
\ No newline at end of file
Modified: jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html
URL:
http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html?rev=1600578&r1=1600577&r2=1600578&view=diff
==============================================================================
--- jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html (original)
+++ jena/Experimental/jena-fuseki2/src/main/webapp/dataset.html Thu Jun 5
09:59:32 2014
@@ -68,6 +68,196 @@
</div>
</div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="content-frame">
+ <ul class="nav nav-tabs">
+ <li><a href="#query" data-toggle="tab">query</a></li>
+ <li><a href="#upload" data-toggle="tab">upload file</a></li>
+ <li><a href="#edit" data-toggle="tab">edit</a></li>
+ <li><a href="#config" data-toggle="tab">view config</a></li>
+ <li><a href="#stats" data-toggle="tab">stats</a></li>
+ </ul>
+
+ <!-- Tab panes -->
+ <div class="tab-content">
+ <div class="tab-pane" id="query">
+ <div class="no-dataset">Please select a dataset.</div>
+ <div class="with-dataset hidden">
+ <div class="row">
+ <h1>SPARQL query form</h1>
+ <p>To try out some SPARQL queries against the data in this
Fuseki instance, enter your
+ query below. You can select one of the active datasets to
run the query against using the
+ <span class="btn btn-custom-2">Select endpoint</span>
button.</p>
+
+ <div class="qonsole">
+ <div class="col-md-12 well">
+ <h2 class="">Example queries</h2>
+ <ul class="list-inline examples">
+ </ul>
+ </div>
+
+ <div class="col-md-12 well vertical">
+ <h2 class="">Prefixes</h2>
+ <ul class="list-inline prefixes">
+ <li class="keep">
+ <a data-toggle="modal" href="#prefixEditor"
class="button" title="Add a SPARQL prefix">
+ <i class="fa fa-plus-circle"></i>
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <div class="col-md-12 well">
+ <div class="query-edit">
+ <div id="query-edit-cm" class=""></div>
+ </div>
+ <div class="query-chrome">
+ <form class="form-inline" role="form">
+ <div class="form-group">
+ <label>SPARQL endpoint</label>
+ <div class="dropdown ">
+ <a data-toggle="dropdown" class="btn
btn-custom2" href="#">
+ Select endpoint <i class="icon-collapse"></i>
+ </a>
+ <ul class="dropdown-menu endpoints"
role="menu" aria-labelledby="dropdownMenu1">
+ </ul>
+ </div>
+ </div>
+ <div class="form-group">
+ <label></label>
+ <div>
+ <input type="text" class="form-control"
id="sparqlEndpoint" />
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label>Results</label>
+ <div class="dropdown ">
+ <a data-toggle="dropdown" class="btn
btn-custom2 display-format" href="#" data-value="tsv">
+ <span>table</span> <i
class="icon-collapse"></i>
+ </a>
+ <ul class="dropdown-menu formats "
role="menu" aria-labelledby="dropdownMenu2">
+ <li role='presentation' class="" ><a
data-value="tsv" role='menuitem' tabindex='-1' href='#'>table</a></li>
+ <li role='presentation' class="" ><a
data-value="text"role='menuitem' tabindex='-1' href='#'>plain text</a></li>
+ <li role='presentation' class="" ><a
data-value="json"role='menuitem' tabindex='-1' href='#'>JSON</a></li>
+ <li role='presentation' class="" ><a
data-value="xml"role='menuitem' tabindex='-1' href='#'>XML</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label></label>
+ <div>
+ <a id="perform-btn" href="#" class="btn
btn-success run-query form-control">perform query</a>
+ </div>
+ </div>
+
+ </form>
+ </div>
+ </div>
+
+ <!-- results -->
+ <div id="results-block" class="row sparql
sparql-results">
+ <div class="col-md-12">
+ <div class="well">
+ <div class="row">
+ <div class="col-md-12">
+ <span class="loadingSpinner hidden">
+ <img src="images/wait30.gif" alt="waiting
for server action to complete" />
+ </span>
+ <span class="timeTaken hidden"></span>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12" id="results">
+ <h2 class="col-md-12">Query results</h2>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row clearfix"></div>
+
+ <footer>
+ </footer>
+ </div><!-- /.qonsole-->
+
+ <!-- modal dialogue -->
+ <div class="modal fade" id="prefixEditor" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title">Add a SPARQL prefix</h4>
+ </div>
+ <div class="modal-body">
+ <form class="form-horizontal" role="form">
+ <div class="form-group">
+ <label for="inputPrefix" class="col-lg-2
control-label">Prefix</label>
+ <div class="col-lg-10">
+ <input type="text" class="form-control"
id="inputPrefix" placeholder="Prefix" autofocus>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-lg-offset-2 col-lg-10">
+ <button class="btn btn-sm btn-primary"
id="lookupPrefix">Lookup <span></span> on prefix.cc</button>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="inputURI" class="col-lg-2
control-label">URI</label>
+ <div class="col-lg-10">
+ <input type="text" class="form-control"
id="inputURI" placeholder="URI">
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default"
data-dismiss="modal">cancel</button>
+ <button type="button" class="btn btn-primary"
data-dismiss="modal" id="addPrefix">add prefix</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ </div>
+
+ </div> <!-- /.with-dataset -->
+ </div>
+
+ <div class="tab-pane" id="upload">
+ <div class="no-dataset">Please select a dataset.</div>
+ <div class="with-dataset hidden">
+ upload
+ </div>
+ </div>
+
+ <div class="tab-pane" id="edit">
+ <div class="no-dataset">Please select a dataset.</div>
+ <div class="with-dataset hidden">
+ edit
+ </div>
+ </div>
+
+ <div class="tab-pane" id="config">
+ <div class="no-dataset">Please select a dataset.</div>
+ <div class="with-dataset hidden">
+ config
+ </div>
+ </div>
+
+ <div class="tab-pane" id="stats">
+ <div class="no-dataset">Please select a dataset.</div>
+ <div class="with-dataset hidden">
+ stats
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
</div>
</body>
Modified:
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js
URL:
http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js?rev=1600578&r1=1600577&r2=1600578&view=diff
==============================================================================
---
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js
(original)
+++
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/controllers/dataset-controller.js
Thu Jun 5 09:59:32 2014
@@ -7,7 +7,8 @@ define(
Backbone = require( "backbone" ),
_ = require( "underscore" ),
fui = require( "fui" ),
- DatasetSelectorView = require( "views/dataset-selector" );
+ DatasetSelectorView = require( "views/dataset-selector" ),
+ TabbedViewManagerView = require( "views/tabbed-view-manager" );
var DatasetController = function() {
this.initEvents();
@@ -22,7 +23,11 @@ define(
/** When the fuseki server is ready, we can list the initial datasets */
onServerModelReady: function( event ) {
- new DatasetSelectorView( {model: fui.models.fusekiServer} ).render();
+ fui.views.datasetSelectorView = new DatasetSelectorView( {model:
fui.models.fusekiServer} )
+ fui.views.datasetSelectorView.render();
+
+ fui.views.tabbedViewManagerView = new TabbedViewManagerView();
+ fui.views.tabbedViewManagerView.render();
}
} );
Added:
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/tabbed-view-manager.js
URL:
http://svn.apache.org/viewvc/jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/tabbed-view-manager.js?rev=1600578&view=auto
==============================================================================
---
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/tabbed-view-manager.js
(added)
+++
jena/Experimental/jena-fuseki2/src/main/webapp/js/app/views/tabbed-view-manager.js
Thu Jun 5 09:59:32 2014
@@ -0,0 +1,59 @@
+/**
+ * Reusable component that encapsulates managing a collection of sub-views as
+ * tabs, with the active tab being selected via the URL query param `tab`.
+ **/
+
+define(
+ function( require ) {
+ "use strict";
+
+ var Marionette = require( "marionette" ),
+ Backbone = require( "backbone" ),
+ _ = require( "underscore" ),
+ fui = require( "fui" ),
+ sprintf = require( "sprintf" ),
+ PageUtils = require( "util/page-utils" );
+
+ var TabbedViewManagerView = Backbone.View.extend( {
+
+ initialize: function(){
+ this._tab = PageUtils.queryParam( "tab" );
+ this._firstRender = false;
+ },
+
+ render: function() {
+ if (!this._firstRender) {
+ this._firstRender = true;
+ this.activateCurrentTab();
+ }
+ },
+
+ /**
+ * Make the tab named as the current tab active. If no named tab, make
+ * the first tab active by default.
+ */
+ activateCurrentTab: function() {
+ var tabs = $(".nav-tabs");
+ var tab = tabs.children().first();
+
+ if (this._tab) {
+ tab = tabs.find( sprintf( "a[href=#%s]", this._tab ) )
+ .parent();
+ }
+
+ if (!tab.is(".active")) {
+ tabs.children( "li" ).removeClass( "active" );
+ tabs.parent().children(".tab-pane").removeClass("active");
+
+ tab.addClass( "active" );
+ $( tab.children( "a" ).attr( "href" ) ).addClass("active");
+ }
+ }
+
+
+ });
+
+
+ return TabbedViewManagerView;
+ }
+);
