jenkins-bot has submitted this change and it was merged.
Change subject: Image result browser
......................................................................
Image result browser
Displays commons images from the query result as an masonry.
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, 295 insertions(+), 2 deletions(-)
Approvals:
Smalyshev: Looks good to me, approved
jenkins-bot: Verified
diff --git a/index.html b/index.html
index 972e87d..d6c865d 100644
--- a/index.html
+++ b/index.html
@@ -86,6 +86,13 @@
</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">Display</span><span class="caret"></span>
+ </a>
+ <ul
class="dropdown-menu" role="menu">
+ <li><a
class="result-browser default" href="#"><span class="glyphicon
glyphicon-th"></span> Table</a></li>
+ <li><a
class="result-browser gallery" href="#"><span class="glyphicon
glyphicon-picture"></span> 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">
@@ -185,6 +192,9 @@
<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/AbstractResultBrowser.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 9b13963..a178eea 100644
--- a/style.css
+++ b/style.css
@@ -169,4 +169,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;
+ }
+}
diff --git a/wikibase/queryService/api/Sparql.js
b/wikibase/queryService/api/Sparql.js
index cab06fa..b04f64f 100644
--- a/wikibase/queryService/api/Sparql.js
+++ b/wikibase/queryService/api/Sparql.js
@@ -304,6 +304,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 c7f4521..41a949e 100644
--- a/wikibase/queryService/ui/App.js
+++ b/wikibase/queryService/ui/App.js
@@ -350,12 +350,15 @@
$( '#total-results' ).text( api.getResultLength() );
$( '#query-time' ).text( api.getExecutionTime() );
$( '.query-total' ).show();
- $( '#query-result' ).append( api.getResultAsTable() ).show();
+ $( '#query-result' ).html( api.getResultAsTable() ).show();
$( '.actionMessage' ).hide();
$( '#query-error' ).hide();
this._handleQueryResultAddExploreLinks();
this._handleQueryResultAddGalleryLinks();
+ this._handleQueryResultBrowsers();
+
+ return false;
};
/**
@@ -398,6 +401,30 @@
} );
};
+
+ /**
+ * @private
+ */
+ SELF.prototype._handleQueryResultBrowsers = function() {
+ $( '.result-browser' ).click( function(){ $(this).closest(
'.open' ).removeClass('open'); } );
+
+ //table
+ $( '.result-browser.default' ).click( $.proxy(
this._handleQueryResult, this ) );
+
+ //image
+ var imageBrowser = new
wikibase.queryService.ui.resultBrowser.ImageResultBrowser();
+ imageBrowser.setResult( this._sparqlApi.getResultRawData() );
+ if( imageBrowser.isDrawable() ){
+ $( '.result-browser.gallery' ).css( 'opacity', 1
).attr( 'href', '#' );
+ $( '.result-browser.gallery' ).click( function(){
+ imageBrowser.draw( $( '#query-result' ) );
+ return false;
+ } );
+ }else{
+ $( '.result-browser.gallery' ).css( 'opacity', 0.5
).removeAttr( 'href' );
+ }
+ };
+
/**
* @private
*/
diff --git a/wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js
b/wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js
new file mode 100644
index 0000000..0b1aee3
--- /dev/null
+++ b/wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js
@@ -0,0 +1,53 @@
+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";
+
+ /**
+ * Abstract result browser
+ *
+ * @class wikibase.queryService.ui.App
+ * @licence GNU GPL v2+
+ *
+ * @author Jonas Kress
+ * @constructor
+ */
+ function SELF() {
+ }
+
+ /**
+ * @property {object}
+ * @private
+ **/
+ SELF.prototype._result = null;
+
+ /**
+ * Sets the result to be browsed
+ * @param {Object} result set
+ **/
+ SELF.prototype.setResult = function( result ) {
+ this._result = result;
+ };
+
+ /**
+ * Checks whether the result browser can draw the given result
+ * @return {bool}
+ **/
+ SELF.prototype.isDrawable = function() {
+ jQuery.error( 'Method isDrawable() needs to be implemented!' );
+ };
+
+ /**
+ * Draws the result browser to the given element
+ * @param {jQuery} $element to draw at
+ **/
+ SELF.prototype.draw = function( $element ) {
+ jQuery.error( 'Method draw() needs to be implemented!' );
+ };
+
+ 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..6cb17b9
--- /dev/null
+++ b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
@@ -0,0 +1,127 @@
+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/";;
+ var COMMONS_SPECIAL_RESIZE =
"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() {
+ }
+
+ SELF.prototype = new
wikibase.queryService.ui.resultBrowser.AbstractResultBrowser();
+
+ /**
+ * @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( self._isCommonsRessource( field.value ) ){
+ var url = field.value,
+ regEx = new RegExp(
COMMONS_FILE_PATH, "ig" ),
+ fileName = decodeURIComponent(
url.replace( regEx, '' ) );
+
+ self._grid.append( self._getItem(
self._getThumbnail( url ), fileName ) );
+ }
+ } );
+ } );
+
+ $( $element ).html( this._grid );
+ };
+
+ /**
+ * Checks whether the browser can draw the given result
+ * @return {bool}
+ **/
+ SELF.prototype.isDrawable = function() {
+
+ 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, title ) {
+
+ var triggerGallery = function(event) {
+ event.preventDefault();
+ $(this).ekkoLightbox( { 'scale_height' : true } );
+ return false;
+ },
+ heading = $( '<div>' ).text( title ),
+ image = $( '<a href="' + url +'" data-gallery="g">' )
+ .click( triggerGallery )
+ .attr( 'data-title', title )
+ .append( $( '<img src="' + url +'"></div>' ) );
+
+ return $( '<div class="item">' ).append( heading, image );
+
+ };
+
+ /**
+ * @private
+ **/
+ SELF.prototype._isCommonsRessource = function( url ) {
+ return url.toLowerCase().startsWith(
COMMONS_FILE_PATH.toLowerCase() );
+
+ };
+
+ /**
+ * @private
+ **/
+ SELF.prototype._getThumbnail = function( url, width ) {
+ if( !this._isCommonsRessource(url) ){
+ return url;
+ }
+ if( !width ){
+ width = 400;
+ }
+
+ var regEx = new RegExp( COMMONS_FILE_PATH, "ig" ),
+ fileName = url.replace( regEx, '' ),
+ thumbnail = COMMONS_SPECIAL_RESIZE + fileName + '?width=' +
width;
+
+ return thumbnail;
+ };
+
+ return SELF;
+}( jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/271475
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I729680f72baca9b0344f006f3cea20275cc23aab
Gerrit-PatchSet: 8
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Jonas Kress (WMDE) <[email protected]>
Gerrit-Reviewer: Jonas Kress (WMDE) <[email protected]>
Gerrit-Reviewer: Smalyshev <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
