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