StudentSydney has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/399808 )
Change subject: Implement masonry and lazy loading on image results
......................................................................
Implement masonry and lazy loading on image results
-Use masonry to create vertical columns with horizontal numbering.
-Lazy image loading allows fast loading even with large results.
-Using lazysizes allows lazy images with unknown dimensions.
-Load iages shortly before user scrolls to them.
-Need to redo layout every time an img loads.
Bug: T166216
Change-Id: I6bd213078f58d9f1738995a179aca96386d9683e
---
M index.html
M package.json
M style.less
M wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
4 files changed, 35 insertions(+), 27 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui
refs/changes/08/399808/1
diff --git a/index.html b/index.html
index e2170ab..3d744d0 100644
--- a/index.html
+++ b/index.html
@@ -408,5 +408,11 @@
<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 dd50fad..8644198 100644
--- a/package.json
+++ b/package.json
@@ -36,10 +36,12 @@
"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",
"leaflet.markercluster": "^1.2.0",
+ "masonry-layout": "^4.2.0",
"moment": "^2.19.2",
"select2": "^4.0.5",
"underscore": "^1.8.3",
diff --git a/style.less b/style.less
index c17cba7..6317d0a 100644
--- a/style.less
+++ b/style.less
@@ -408,11 +408,8 @@
.masonry {
width: 95%;
margin: 3em auto;
- margin: 1.5em 0;
+ margin: 1.5em auto;
padding: 0;
- -moz-column-gap: 1.5em;
- -webkit-column-gap: 1.5em;
- column-gap: 1.5em;
font-size: 0.85em;
}
.item > a > img {
@@ -424,45 +421,35 @@
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
- width: 100%;
+ width: 20%;
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;
+ .item {
+ width: ~"calc( 50% - 10px )";
}
}
@media only screen and ( min-width: 700px ) {
- .masonry {
- -moz-column-count: 3;
- -webkit-column-count: 3;
- column-count: 3;
+ .item {
+ width: ~"calc( 33.33% - 10px )";
}
}
@media only screen and ( min-width: 900px ) {
- .masonry {
- -moz-column-count: 4;
- -webkit-column-count: 4;
- column-count: 4;
+ .item {
+ width: ~"calc( 25% - 10px )";
}
}
@media only screen and ( min-width: 1100px ) {
- .masonry {
- -moz-column-count: 5;
- -webkit-column-count: 5;
- column-count: 5;
+ .item {
+ width: ~"calc( 20% - 10px )";
}
}
-
@media only screen and ( min-width: 1280px ) {
.wrapper {
width: 1260px;
diff --git a/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
index 0fcd2b7..a02101c 100644
--- a/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
+++ b/wikibase/queryService/ui/resultBrowser/ImageResultBrowser.js
@@ -34,18 +34,31 @@
SELF.prototype.draw = function( $element ) {
var self = this;
this._grid = $( '<div class="masonry">' );
-
this._iterateResult( function( field, key, row ) {
if ( field && self._isCommonsResource( field.value ) ) {
var url = field.value,
fileName =
self._getFormatter().getCommonsResourceFileName( url );
- self._grid.append( self._getItem(
self._getThumbnail( url ), self._getThumbnail(
- url, 1000 ), fileName, row ) );
+ var mainImg = self._getThumbnail(
+ url, 1000 );
+ self._grid.append( self._getItem(
self._getThumbnail( url ), mainImg, fileName, row ) );
}
} );
$element.html( this._grid );
+
+ $('.masonry').masonry({
+ itemSelector: '.item',
+ columnWidth: '.item',
+ gutter: 10,
+ horizontalOrder: true,
+
+ });
+
+ $(document).on('lazyloaded', function(){
+ $('.masonry').masonry();
+ });
+
};
/**
@@ -55,7 +68,7 @@
var $image = $( '<a>' )
.click(
this._getFormatter().handleCommonResourceItem )
.attr( { href: url, 'data-gallery': 'g',
'data-title': title } )
- .append( $( '<img>' ).attr( 'src', thumbnailUrl
) ),
+ .append( $( '<img>' ).attr( 'data-src',
thumbnailUrl ).addClass("lazyload") ),
$summary = this._getFormatter().formatRow( row );
return $( '<div class="item">' ).append( $image, $summary );
--
To view, visit https://gerrit.wikimedia.org/r/399808
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6bd213078f58d9f1738995a179aca96386d9683e
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
