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?

Hatem Alimam · Answer 1 · 2014-09-08T09:58:26.967

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

Yeah I solved my issue with something like that, but my issue then how to configure `onMakeActive` or `onReachTarget` ! anyway I solved my issue finally with new `ContentFlowAddOn` but still need best way, like what I have done in jqplot. — Al-Mothafar, Sep 08 '14 at 08:42
Issue with your way is that I'll get click function to work but then will continue open image, if I added alert as example I'll get alert when I click ok in alert box it will continue to open image. that's the main problem, so the solution is with override `onclickActiveItem`. — Al-Mothafar, Sep 08 '14 at 09:13
I'm sorry maybe I didn't get your question correctly in the first time. I have updated the answer.. it might fit your requirements. — Hatem Alimam, Sep 08 '14 at 09:59

score 1 · Accepted Answer · answered Sep 16 '14 at 06:03

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.

How to override ContentFlow configuration in Primefaces

2 Answers2

Linked