Jonas Kress (WMDE) has uploaded a new change for review.
https://gerrit.wikimedia.org/r/256198
Change subject: [WIP] Query Example Dialog
......................................................................
[WIP] Query Example Dialog
Query Example Dialog which allows filtering and hierarchy of example
queries.
Change-Id: I9ca27d3eb25f9e20f7409d02ad27c517d295c7de
---
M gui/index.html
M gui/wikibase/queryService/ui/App.js
A gui/wikibase/queryService/ui/QueryExampleDialog.js
3 files changed, 146 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/rdf
refs/changes/98/256198/1
diff --git a/gui/index.html b/gui/index.html
index 802435e..18b1f3a 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -13,6 +13,7 @@
<script src="wikibase/queryService/ui/App.js"></script>
<script src="wikibase/queryService/ui/Editor.js"></script>
+<script src="wikibase/queryService/ui/QueryExampleDialog.js"></script>
<script src="wikibase/queryService/api/Sparql.js"></script>
<script src="wikibase/queryService/api/QuerySamples.js"></script>
<script src="wikibase/queryService/RdfNamespaces.js"></script>
@@ -66,6 +67,12 @@
</ul></li>
<li><select
class="exampleQueries form-control navbar-btn"><option value="">Query
Examples</option></select></li>
</ul>
+
+ <ul class="nav navbar-nav navbar-right">
+ <li>
+ <button type="button"
class="btn btn-primary navbar-btn" data-toggle="modal"
data-target="#QueryExamples">Query Examples</button>
+ </li>
+ </ul>
</div>
</nav>
@@ -119,5 +126,34 @@
<div id="query-error" class="panel-heading">Test
error</div>
</div>
</div>
+
+
+ <!-- Query Example Modal -->
+ <div class="modal fade" id="QueryExamples" tabindex="-1" role="dialog"
aria-labelledby="QueryExamplesModalLabel">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close"
data-dismiss="modal" aria-label="Close">
+ <span
aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title"
id="QueryExamplesModalLabel">Query Examples
+
+ </h4>
+ </div>
+ <div class="modal-body">
+ <div class="input-group"> <span
class="input-group-addon">Filter</span>
+
+ <input type="text"
class="tableFilter form-control" placeholder="Type here...">
+ </div>
+ <div style="height:500px;
overflow-y:scroll; overflow-x:hidden;">
+ <table class="table
table-striped">
+ <tbody class="searchable">
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</body>
</html>
diff --git a/gui/wikibase/queryService/ui/App.js
b/gui/wikibase/queryService/ui/App.js
index e9b83e1..9709829 100644
--- a/gui/wikibase/queryService/ui/App.js
+++ b/gui/wikibase/queryService/ui/App.js
@@ -105,6 +105,11 @@
self._$element.find( '.exampleQueries'
).append( $(new Option( title, query ) ) );
});
} );
+
+
+ new wikibase.queryService.ui.QueryExampleDialog( $(
'#QueryExamples' ), this._querySamplesApi, function( query ){
+ alert(query);
+ } );
};
/**
diff --git a/gui/wikibase/queryService/ui/QueryExampleDialog.js
b/gui/wikibase/queryService/ui/QueryExampleDialog.js
new file mode 100644
index 0000000..10ec635
--- /dev/null
+++ b/gui/wikibase/queryService/ui/QueryExampleDialog.js
@@ -0,0 +1,105 @@
+var wikibase = wikibase || {};
+wikibase.queryService = wikibase.queryService || {};
+wikibase.queryService.ui = wikibase.queryService.ui || {};
+window.mediaWiki = window.mediaWiki || {};
+
+wikibase.queryService.ui.QueryExampleDialog = ( function( $ ) {
+ "use strict";
+
+ /**
+ * A ui dialog for selecting a query example
+ *
+ * @class wikibase.queryService.ui.App
+ * @licence GNU GPL v2+
+ *
+ * @author Jonas Kress
+ * @constructor
+ *
+ * @param {jQuery} $element
+ * @param {ikibase.queryService.api.QuerySamples}
+ */
+ function SELF( $element, querySamplesApi, callback ) {
+
+ this._$element = $element;
+ this._querySamplesApi = querySamplesApi;
+
+ this._init();
+ }
+
+ /**
+ * @property {wikibase.queryService.api.QuerySamplesApi}
+ * @private
+ **/
+ SELF.prototype._querySamplesApi = null;
+
+ /**
+ * @property {function}
+ * @private
+ **/
+ SELF.prototype._callback = null;
+
+ /**
+ * Initialize private members and call delegate to specific init methods
+ * @private
+ **/
+ SELF.prototype._init = function() {
+
+ if( !this._querySamplesApi ){
+ this._querySamplesApi = new
wikibase.queryService.api.QuerySamples();
+ }
+
+
+ this._initFilter();
+ this._initExamples();
+ };
+
+ /**
+ * @private
+ **/
+ SELF.prototype._initFilter = function() {
+ var self = this;
+
+ this._$element.find( '.tableFilter' ).keyup(function () {
+ var rex = new RegExp($(this).val(), 'i');
+ self._$element.find( '.searchable tr' ).hide();
+ self._$element.find( '.searchable tr' ).filter( function () {
+ return rex.test( $(this).text() );
+ }).show();
+
+ });
+ };
+
+ /**
+ * @private
+ **/
+ SELF.prototype._initExamples = function() {
+ var self = this;
+
+ this._querySamplesApi.getExamples().done( function( examples ){
+ $.each( examples, function( title, query ) {
+ self._addExample( title, query );
+ });
+ } );
+
+ };
+
+ /**
+ * @private
+ **/
+ SELF.prototype._addExample = function( title, query ) {
+
+ var example = $( '<tr/>' ).append( $( '<td/>' ).text(title) );
+
+
+ if( query ){
+ example.append( $( '<td/>' ).append( $( '<button/>'
).text('select') ) );
+ }else{
+ example.append( $( '<td/>' ) );
+ }
+
+ this._$element.find( '.searchable' ).append( example );
+
+ };
+
+ return SELF;
+}( jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/256198
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9ca27d3eb25f9e20f7409d02ad27c517d295c7de
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/rdf
Gerrit-Branch: master
Gerrit-Owner: Jonas Kress (WMDE) <jonas.kr...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
