I am trying to implement infinite scrolling by using Primefaces with the assistance of jQuery Waypoint and Masonry API.
Here is what I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions">
<f:view>
<h:head>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript name="js/global.js"/>
<h:outputScript name="js/masonry.pkgd.js"/>
<h:outputScript name="js/imagesloaded.pkgd.js"/>
<h:outputStylesheet name="css/global.css" />
<title>Gallery</title>
</h:head>
<h:body>
<h:form prependId="false">
<h:panelGroup id="galleryPanel" layout="block">
<p:outputPanel autoUpdate="true">
<h:panelGroup layout="block" styleClass="galleryContainer">
<ui:repeat id="gallery" value="#{galleryController.images}" var="image">
<h:panelGroup layout="block" styleClass="item">
<h:graphicImage library="images" name="demo/#{image}.jpg" />
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</p:outputPanel>
<pe:waypoint id="waypoint" widgetVar="waypointWidget" offset="function(){return $.waypoints('viewportHeight') - $(this).outerHeight()}">
<pe:javascript event="reached" execute="handleLoadStart(ext);"/>
</pe:waypoint>
<h:outputScript target="body">
var layout = function(){
var container = $('.galleryContainer');
$(container).imagesLoaded(function(){
$(container).masonry({
itemSelector : '.item',
columnWidth : 240
});
});
};
var handleLoadStart = function(ext) {
if (ext.direction == "down") {
PF('waypointWidget').remove();
moreMedia();
}
};
var handleLoadStop = function(){
layout();
PF('waypointWidget').register();
};
$(document).ready(function(){
layout();
});
</h:outputScript>
<p:remoteCommand name="moreMedia" update="gallery" actionListener="#{galleryController.loadMore}" oncomplete="handleLoadStop()"/>
</h:panelGroup>
</h:form>
</h:body>
</f:view>
</html>
The Managed Bean is:
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.IntStream;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
@ManagedBean(name="galleryController")
@ViewScoped
public class GalleryController implements Serializable {
private static final long serialVersionUID = 563439107531288284L;
private List<String> images;
@PostConstruct
public void initialize() {
images = new ArrayList<>();
IntStream.range(1, 16).forEach(i->images.add(new String("image" + i)));
}
public void loadMore(ActionEvent event){
IntStream.range(1, 16).forEach(i->images.add(new String("image" + i)));
}
public List<String> getImages() {
return images;
}
public void setImages(List<String> images) {
this.images = images;
}
}
It is partially working, as it has issues.
The major issue is, as I am adding new images to the existing image list, the ui:repeat is rendering completely. I don't want to do this. Because by this way the existing images also get loaded. Modern browser like FF or Chome caches images, so it would not be a problem for them, but in the browser like IE I can see in Network console that it is sending GET to fetch those images. From the performance perspective the images which has already been loaded should not get fetched, only the newly added images.
But I don't know how can I make it in JSF!
Also as a side effect, the Masonry is not working as desired. Every time when the onComplete of p:remoteCommand is triggering the layout() method, the scrollbar is getting set to the top. From the functional perspective it should stay at that location from where the Waypoint triggered the next load.
Any suggestion would be very helpful.
PrimeFaces Extensions has pe:fluidGrid based on Masonry by the way. Check the showcase http://primeext.mooo.com:8080/primeext-showcase/views/fluidGrid.jsf