slide out event to trigger on page change

[jbyrley]

Hi,

Apparently there isn't an option for a page change trigger in the element javascript section (at least I haven't found it yet).

So I guess I have to add code to the form_X.js file to make this happen (where "X" is the form id).

I've added this code to that file:

requirejs(['fab/fabrik'], function() {
Fabrik.addEvent('fabrik.form.page.change.end', function (form, dir) {
Fabrik.getBlock(\'form_9\').doElementFX(\'fabrik_trigger_group_group21\', \'slide out\', this)}');
});
});

Unfortunately it doesn't work to slide out group 21 as hoped.

Where am I going wrong?

 

[cheesegrits]

Couple of things ...

You can only doElementFx() on things that have been added with addElementFx(), which happens automagically for stuff you've added in the element FX options.

And if it's been added, you can only apply the "same" effect type. For instance, if using a slide effect, the addElementFx has to have been added with a slide effect, as that creates the slide prototype for it.

So it should work if (say) you add an onLoad event that does a "slide in" for that group.

Or you could do the addElementFx() in your requirejs function, before adding the page change event. See the source for the syntax for addElementFx, same place you copied that doElementFX.

And get rid of the \ on the quotes.

-- hugh

 

[jbyrley]

Thanks Hugh. I got this code to work:

requirejs(['fab/fabrik'], function() {               
    Fabrik.addEvent('fabrik.form.page.change.end', function (form, dir) {
        Fabrik.getBlock('form_9').addElementFX('fabrik_trigger_group_group21', 'slide out');
        Fabrik.getBlock('form_9').doElementFX('fabrik_trigger_group_group21', 'slide out', this);
   });
});

I tried to add the addElementFX event before the page change event, but I could not get it to work. So I added it inside the page change event and it works. Is there a reason why it would be better to put it before the page change event?

 

[cheesegrits]

It might not hurt that much to do it that way, but really you only want to add the FX once, as it does have an overhead.

And the reason it wasn't working the way I suggested is probably that the block doesn't exist yet. The 'fab/fabrik' require runs when the main Fabrik object gets created, before any blocks get set up. So you'd need to wait for that to happen ...

requirejs(['fab/fabrik'], function() {  
    Fabrik.addEvent('fabrik.form.loaded', function (form) {
        form.addElementFX('fabrik_trigger_group_group21', 'slide out');
    });            
    Fabrik.addEvent('fabrik.form.page.change.end', function (form, dir) {
        form.doElementFX('fabrik_trigger_group_group21', 'slide out', this);
   });
});

Also note that in any of these event function where 'form' is passed as an arg, you can just use that rather than an explicit Fabrik.getBlock().

-- hugh

 

[jbyrley]

Unfortunately that code is not working Is there somewhere I'm supposed to be specify the form name (form_9)? This requirejs syntax is tying my brain into knots.

 

[jbyrley]

Okay, my fault. It does work, thanks!

 

[cheesegrits]

Unfortunately that code is not working Is there somewhere I'm supposed to be specify the form name (form_9)? This requirejs syntax is tying my brain into knots.

It's not too hard. Bottom line, if you want to do anything with the Fabrik object on page load, you have to wait until it is created, eg the main fabrik.js init has run. We use requirejs (one of the standard Javascript AMD loader modules) to handle dependencies. So you just wrap any code that references Fabrik in that standard requirejs(['fab/fabrik'] ....) wrapper, so it doesn't run until that dependency is met.

Everything within that is just normal Javascript asyncronous event handling. If you want to use the form object, you need to wait until the event fires that says it's ready.

-- hugh