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) <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
