Jonas Kress (WMDE) has uploaded a new change for review. https://gerrit.wikimedia.org/r/271475
Change subject: [WIP] Image result browser ...................................................................... [WIP] Image result browser Do not merge work in progress Change-Id: I729680f72baca9b0344f006f3cea20275cc23aab --- M index.html M style.css M wikibase/queryService/api/Sparql.js M wikibase/queryService/ui/App.js A wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js A wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js 6 files changed, 253 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui refs/changes/75/271475/1 diff --git a/index.html b/index.html index 0a28bd6..42e0d97 100644 --- a/index.html +++ b/index.html @@ -83,6 +83,12 @@ </div> </div> <ul class="nav navbar-nav navbar-right query-total"> + <li><a href="#" data-toggle="dropdown" class="dropdown-toggle"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true">View</span><span class="caret"></span> + </a> + <ul class="dropdown-menu" role="menu"> + <li><a class="resultBrowserGallery glyphicon glyphicon-picture" href="#"> Image Grid</a></li> + </ul></li> + <li> <li><a href="#" data-toggle="dropdown" class="dropdown-toggle"> <span class="glyphicon glyphicon-download-alt" aria-hidden="true">Download</span><span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> @@ -159,6 +165,7 @@ </div> <!-- JS files --> + <script src="vendor/jquery/jquery-1.11.3.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <script src="vendor/codemirror/lib/codemirror.js"></script> @@ -176,6 +183,8 @@ <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/ui/resultBrowser/ImageResultBrowser.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> diff --git a/style.css b/style.css index 5f54b42..a2baea3 100644 --- a/style.css +++ b/style.css @@ -95,6 +95,7 @@ left: 0; text-align: center; margin: auto; + z-index: 1; } .navbar-toggle { @@ -157,4 +158,71 @@ div.jqcloud span.w4 { color: rgba(51,122,183,0.5); } div.jqcloud span.w3 { color: rgba(51,122,183,0.55); } div.jqcloud span.w2 { color: rgba(51,122,183,0.4); } -div.jqcloud span.w1 { color: rgba(51,122,183,0.45); } \ No newline at end of file +div.jqcloud span.w1 { color: rgba(51,122,183,0.45); } + + +/* masonry */ +.masonry { + width: 95%; + margin: 3em auto; + margin: 1.5em 0; + padding: 0; + -moz-column-gap: 1.5em; + -webkit-column-gap: 1.5em; + column-gap: 1.5em; + font-size: .85em; +} +.item > a > img { + width: 100%; + max-height: 500px; + display: inline-block;; +} +.item { + display: inline-block; + background: #fff; + padding: 1em; + margin: 0 0 1.5em; + width: 100%; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-shadow: 2px 2px 4px 0 #ccc; +} + +@media only screen and (min-width: 400px) { + .masonry { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + } +} + +@media only screen and (min-width: 700px) { + .masonry { + -moz-column-count: 3; + -webkit-column-count: 3; + column-count: 3; + } +} + +@media only screen and (min-width: 900px) { + .masonry { + -moz-column-count: 4; + -webkit-column-count: 4; + column-count: 4; + } +} + +@media only screen and (min-width: 1100px) { + .masonry { + -moz-column-count: 5; + -webkit-column-count: 5; + column-count: 5; + } +} + +@media only screen and (min-width: 1280px) { + .wrapper { + width: 1260px; + } +} \ No newline at end of file diff --git a/wikibase/queryService/api/Sparql.js b/wikibase/queryService/api/Sparql.js index 7211c19..a5aa241 100644 --- a/wikibase/queryService/api/Sparql.js +++ b/wikibase/queryService/api/Sparql.js @@ -5,7 +5,7 @@ wikibase.queryService.api.Sparql = (function($) { "use strict"; - var SERVICE = '/bigdata/namespace/wdq/sparql'; + var SERVICE = '//query.wikidata.org/bigdata/namespace/wdq/sparql'; /** * SPARQL API for the Wikibase query service @@ -305,6 +305,15 @@ }; /** + * Get the raw result + * + * @return {object} result + */ + SELF.prototype.getResultRawData= function() { + return this._rawData; + }; + + /** * Get the result of the submitted query as CSV * * @return {string} csv diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js index 8f0da79..778e469 100644 --- a/wikibase/queryService/ui/App.js +++ b/wikibase/queryService/ui/App.js @@ -312,6 +312,7 @@ this._handleQueryResultAddExploreLinks(); this._handleQueryResultAddGalleryLinks(); + this._handleQueryResultBrowsers(); }; /** @@ -349,6 +350,23 @@ } ); }; + + /** + * @private + */ + SELF.prototype._handleQueryResultBrowsers = function() { + $( ".resultBrowser" ).html( '' ); + + var imageBrowser = new wikibase.queryService.ui.resultBrowser.ImageResultBrowser( this._sparqlApi.getResultRawData() ); + imageBrowser.draw( $( '#query-result' ) ); + if( imageBrowser.isDrawable() ){ + $( "resultBrowserGallery" ).click( function(){ + return false; + } ); + } + + }; + /** * @private */ diff --git a/wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js b/wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js new file mode 100644 index 0000000..fd61c4a --- /dev/null +++ b/wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js @@ -0,0 +1,46 @@ +var wikibase = wikibase || {}; +wikibase.queryService = wikibase.queryService || {}; +wikibase.queryService.ui = wikibase.queryService.ui || {}; +wikibase.queryService.ui.resultBrowser = wikibase.queryService.ui.resultBrowser || {}; +window.mediaWiki = window.mediaWiki || {}; + +wikibase.queryService.ui.resultBrowser.AbstractResultBrowser= ( function( $ ) { + "use strict"; + + /** + * A result browser interface + * + * @class wikibase.queryService.ui.App + * @licence GNU GPL v2+ + * + * @author Jonas Kress + * @constructor + * + * @param {Object} result set + */ + function SELF( result ) { + this._result = result; + } + + /** + * @property {object} + * @private + **/ + SELF.prototype._result = null; + + /** + * Checks whether the result browser can draw the given result + * @return {bool} + **/ + SELF.prototype.isDrawable = function() { + }; + + /** + * Draws the result browser to the given element + * @param {jQuery} $element to draw at + **/ + SELF.prototype.draw = function( $element ) { + }; + + return SELF; +}( jQuery ) ); diff --git a/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js new file mode 100644 index 0000000..fa6348a --- /dev/null +++ b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js @@ -0,0 +1,101 @@ +var wikibase = wikibase || {}; +wikibase.queryService = wikibase.queryService || {}; +wikibase.queryService.ui = wikibase.queryService.ui || {}; +wikibase.queryService.ui.resultBrowser = wikibase.queryService.ui.resultBrowser || {}; +window.mediaWiki = window.mediaWiki || {}; + +wikibase.queryService.ui.resultBrowser.ImageResultBrowser = ( function( $ ) { + "use strict"; + + var COMMONS_FILE_PATH = "http://commons.wikimedia.org/wiki/Special:FilePath/"; + + /** + * A result browser for images + * + * @class wikibase.queryService.ui.resultBrowser.ImageResultBrowser + * @licence GNU GPL v2+ + * + * @author Jonas Kress + * @constructor + * + * @param {Object} result set + */ + function SELF( result ) { + this._result = result; + } + + /** + * @property {object} + * @private + **/ + SELF.prototype._result = null; + + /** + * @property {jQuery} + * @private + **/ + SELF.prototype._grid = null; + + /** + * Draw browser to the given element + * @param {jQuery} $element to draw at + **/ + SELF.prototype.draw = function( $element ) { + var self = this; + + this._grid = $( '<div class="masonry">' ); + + + $.each( this._result.results.bindings, function(){ + $.each( this, function( key, field ){ + if( field.value.startsWith( COMMONS_FILE_PATH ) ){ + self._grid.append( self._getItem( field.value ) ); + } + } ); + } ); + + $( 'body' ).append( this._grid ); + }; + + /** + * Checks whether the browser can draw the given result + * @return {bool} + **/ + SELF.prototype.isDrawable = function() { + + + return true; + var result = this._result.results.bindings[0] || {}, + isDrawable = false; + + $.each( result, function( key, field ){ + + if( field.value.startsWith( COMMONS_FILE_PATH ) ){ + isDrawable = true; + return false; + } + } ); + + return isDrawable; + }; + + /** + * @private + **/ + SELF.prototype._getItem = function( url ) { + + var triggerGallery = function(event) { + event.preventDefault(); + $(this).ekkoLightbox( { scale_height : true } ); + return false; + }; + + return $( '<div class="item">' ).append( + $( '<a href="' + url +'" data-gallery="g">' ) + .click( triggerGallery ) + .append( $( '<img src="' + url +'"></div>' ) ) ); + }; + + + return SELF; +}( jQuery ) ); -- To view, visit https://gerrit.wikimedia.org/r/271475 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I729680f72baca9b0344f006f3cea20275cc23aab Gerrit-PatchSet: 1 Gerrit-Project: wikidata/query/gui 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