How to override ContentFlow configuration in Primefaces

Question

I want to override onclickActiveItem function and need to retrieve current active item index or call something with onMakeActive in Primefaces, what best way to do ?

I was able to call function with the following way :

<p:contentFlow value="#{imagesView.images}" var="image" widgetVar="img">
            <p:graphicImage value="/images/imgs/img#{image}.jpg" styleClass="content" onclick="select(#{image})" />
        </p:contentFlow>

then in javascript :

function setImageIndex(i){
        return;
    }
function select(i) {
        ContentFlowGlobal.Flows[0].setConfig({onclickActiveItem:setImageIndex});
    }

But if I tried this way : ContentFlowGlobal.Flows[0].setConfig({onclickActiveItem:setImageIndex(i)}); it works but many console errors records, like "onclickActiveItem is not a function" !

So in this way I removed default action that open image itself, and I can do my call using onclick, I want better way to override ContentFlow js, I still think I do thing wrongly.

Any idea what the correct way to override ContentFlow javascript configuration in primefaces?

Answer 1

I found better and cleaner way from my previous first way I used and guaranteed way and clearer, by using AddOn, like this :

if (typeof ContentFlowGlobal != 'undefined') {
    new ContentFlowAddOn('ImageSelectAddOn', {
        ContentFlowConf : {
            // onclickInactiveItem: function (item) {
            // this.conf.onclickActiveItem(item);
            // },
            onclickActiveItem : function(item) {
                var content = item.content;
                var i = item.index;
                // console.log("index : "+item.index);
                imageId = i + 1;
                // console.log("select called image id : " + imageId);
                ma([ {
                    name : 'id',
                    value : imageId
                } ]);
            },
            onReachTarget : function(item) {
                this.conf.onclickActiveItem(item);
            }
        }
    });
    ContentFlowGlobal.setAddOnConf("ImageSelectAddOn");
}

Full documentation of ContentFlow can be found in this link: http://www.jacksasylum.eu/ContentFlow/docu.php , you can do alot of customization then.

P.S.: ma() is the name of p:remoteCommad so I can pass variables to backbean.

My issue solved like this, and I'm satisfied with this way, I hope I share something helpful for someone else later.

Answer 2

ContentFlow is a pure jQuery plugin, and PrimeFaces treats it as so, no extra flavours added to the widget, so you can use normal jQuery to achieve this, no need to complicate things or even dive deep into the plugin's events.

For example, you could use onclick, if the item is click normally it's active:

$(document).on('click', '.flow .item', function(){
   var imageIndex = $(this).index();// the image index
   $(this).find('canvas').attr('src');// the image src
   // then you could call a remoteCommand from here passing the index
})

Edit: To prevent the image from opening if it's already selected, you can take this approach...

<p:contentFlow value="#{mainBean.batImages}" var="image">
   <p:graphicImage name="images/list/#{image}" styleClass="content" onclick="clickFlow(this, event)" />                        
 </p:contentFlow> 

Now the javascript is very simple:

function clickFlow(item ,e) {  
   //prevents image opening...                                                                     
   if ($(item).parent().hasClass('active')) {
      e.stopImmediatePropagation();                                                              
   }
}

Basically you check if the user has clicked the active image, if so you call stopImmediatePropagation() which keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

Here's a working demo