StudentSydney has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/400407 )
Change subject: Implement infinite-scroll style lazy loading
......................................................................
Implement infinite-scroll style lazy loading
Lazily loads query result elements and arranges them in a masonry
layout. Prevents scrolling to elements which have not yet been loaded.
Bug: T166216
Change-Id: Ie078bea5a456fc6b3fb0384c46703a82ebc402c3
---
M index.html
M package.json
M style.less
M wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
4 files changed, 88 insertions(+), 36 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui
refs/changes/07/400407/1
diff --git a/index.html b/index.html
index 3d744d0..a225c81 100644
--- a/index.html
+++ b/index.html
@@ -253,6 +253,12 @@
<div class="row">
<div id="query-error" class="panel-heading">Test
error</div>
</div>
+ <div class="row">
+ <div id="loading-spinner">
+ <i class="fa fa-spinner fa-pulse fa-3x
fa-fw"></i>
+ <span class="sr-only">Loading...</span>
+ </div>
+ </div>
<div class="explorer-panel panel panel-default">
<div class="panel-heading clearfix">
@@ -362,6 +368,7 @@
<script src="vendor/bootstrap-tags/js/bootstrap-tags.min.js"></script>
<script src="vendor/sparqljs/dist/sparqljs-browser-min.js"></script>
<script
src="vendor/bootstrapx-clickover/bootstrapx-clickover.js"></script>
+ <script
src="node_modules/masonry-layout/dist/masonry.pkgd.min.js"></script>
<!-- endbuild -->
<!-- build:js js/wdqs.min.js -->
@@ -407,12 +414,6 @@
<script src="wikibase/queryService/api/Tracking.js"></script>
<script src="wikibase/queryService/RdfNamespaces.js"></script>
<script src="wikibase/init.js"></script>
- <!-- endbuild -->
- <!-- build:js masonry.js -->
- <script
src="node_modules/masonry-layout/dist/masonry.pkgd.min.js"></script>
- <!-- endbuild -->
- <!-- build:js lazy sizes -->
- <script src="node_modules/lazysizes/lazysizes.min.js" async=""></script>
<!-- endbuild -->
</body>
</html>
diff --git a/package.json b/package.json
index 8644198..ab75898 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
"jquery.uls": "git+https://github.com/wikimedia/jquery.uls.git";,
"js-cookie": "^2.2.0",
"jstree": "^3.3.4",
- "lazysizes": "^4.0.1",
"leaflet": "^1.2.0",
"leaflet-fullscreen": "^1.0.2",
"leaflet-zoombox": "^0.5.0",
diff --git a/style.less b/style.less
index 6317d0a..ce694b3 100644
--- a/style.less
+++ b/style.less
@@ -412,9 +412,13 @@
padding: 0;
font-size: 0.85em;
}
-.item > a > img {
- width: 100%;
- display: inline-block;
+#loading-spinner {
+ display: none;
+ color: #777;
+}
+#loading-spinner>.fa-spinner {
+ margin: 0 auto 20px;
+ display: block;
}
.item {
display: inline-block;
@@ -426,7 +430,12 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
+ visibility: hidden;
}
+.item>a>img {
+ width: 100%;
+}
+
@media only screen and ( min-width: 400px ) {
.item {
width: ~"calc( 50% - 10px )";
@@ -455,7 +464,6 @@
width: 1260px;
}
}
-
/*
ActionBar
*/
diff --git a/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
index a02101c..670815d 100644
--- a/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
+++ b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
@@ -5,7 +5,6 @@
wikibase.queryService.ui.resultBrowser.ImageResultBrowser = ( function( $ ) {
'use strict';
-
/**
* A result browser for images
*
@@ -30,35 +29,80 @@
* 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">' );
+ SELF.prototype._grid = $( '<div class="masonry">' );
+ $element.html( this._grid );
+ SELF.prototype._grid.masonry( {
+ itemSelector: '.item',
+ columnWidth: '.item',
+ gutter: 10,
+ horizontalOrder: true
+ } );
+
+ var urls=[];
+ var rows=[];
this._iterateResult( function( field, key, row ) {
if ( field && self._isCommonsResource( field.value ) ) {
- var url = field.value,
- fileName =
self._getFormatter().getCommonsResourceFileName( url );
-
- var mainImg = self._getThumbnail(
- url, 1000 );
- self._grid.append( self._getItem(
self._getThumbnail( url ), mainImg, fileName, row ) );
+ urls.push( field.value );
+ rows.push( row );
}
} );
-
- $element.html( this._grid );
-
- $('.masonry').masonry({
- itemSelector: '.item',
- columnWidth: '.item',
- gutter: 10,
- horizontalOrder: true,
-
- });
-
- $(document).on('lazyloaded', function(){
- $('.masonry').masonry();
- });
-
+ SELF.prototype.lazyLoad( urls, rows );
+ };
+
+ /**
+ * @private
+ */
+ SELF.prototype.lazyLoad = function( urls, rows ) {
+ var count = 1,
+ $spinner = $( '#loading-spinner' ),
+ lazyLoadCheck,
+ loadMore = function() {
+ clearInterval( lazyLoadCheck );
+ if( count < urls.length ) {
+ var posFromTop = $( '.item'
).last().offset().top - $( window ).scrollTop();
+ if( posFromTop <
window.innerHeight + 200 ) {
+ $spinner.show();
+ appendItem();
+ }
+ else {
+ $spinner.hide();
+ setLazyLoad();
+ }
+ }
+ else { $spinner.hide(); }
+ },
+ appendItem = function() {
+ var currentItem =
SELF.prototype.createItem( urls[count], rows[count] );
+ count++;
+ $( currentItem ).find('img').one(
'load', function(){
+ currentItem.css( 'visibility',
'visible' );
+ SELF.prototype._grid.masonry(
'appended', currentItem );
+ loadMore();
+ } );
+ SELF.prototype._grid.append(
currentItem ) ;
+ },
+ // simpler than throttling a scroll event
+ setLazyLoad = function() { lazyLoadCheck =
setInterval( loadMore, 100 ); },
+ // need to do 1st item sightly differentlty so masonry
can learn how wide to make columns
+ firstItem = SELF.prototype.createItem( urls[0],
rows[0] );
+ $(firstItem).find('img').one( 'load', function(){
+ SELF.prototype._grid.masonry();
+ loadMore();
+ } );
+ firstItem.css( 'visibility', 'visible' );
+ SELF.prototype._grid.append(firstItem).masonry(
'appended', firstItem );
+ };
+
+ /**
+ * @private
+ */
+ SELF.prototype.createItem = function ( url, row ){
+ var fileName = this._getFormatter().getCommonsResourceFileName(
url ),
+ mainImg = this._getThumbnail( url, 1000 );
+ return( this._getItem( this._getThumbnail( url ), mainImg,
fileName, row ) );
};
/**
@@ -68,7 +112,7 @@
var $image = $( '<a>' )
.click(
this._getFormatter().handleCommonResourceItem )
.attr( { href: url, 'data-gallery': 'g',
'data-title': title } )
- .append( $( '<img>' ).attr( 'data-src',
thumbnailUrl ).addClass("lazyload") ),
+ .append( $( '<img>' ).attr( { 'src':
thumbnailUrl } ) ),
$summary = this._getFormatter().formatRow( row );
return $( '<div class="item">' ).append( $image, $summary );
--
To view, visit https://gerrit.wikimedia.org/r/400407
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie078bea5a456fc6b3fb0384c46703a82ebc402c3
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: StudentSydney <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
