contentfry

Appearance

Autorefresh ​

You can enable boilerplate transition on displays by adding autorefresh-transition class to display's root html element.

html
<html class="autorefresh-transition"></html>

Boilerplate autorefresh Transition

WARNING

Please note that, autorefresh is not triggered inside display editor to prevent user update conflicts.

autorefresh event is triggered in three different states for shared displays. Those states are enter, leave, end.

Developers can listen events with:

js
$cf.listen('autorefresh', (response) => {
    // Triggered three times per autorefresh (with different status).     
    // Response: { status : "enter" } 
    /* Possible autorefresh status values: ["enter", "leave", "end"] */
}, {"leave-duration" : 500 } ); // optional "leave-duration" in miliseconds

autorefresh - enter ​

autorefresh event is fired with status enter value, when autorefresh timer ticks and before data refreshing starts.

autorefresh-active class is added to root HTML element on this state.

Developers can utilize autorefresh-active for customizing autorefresh transitions. Set preffered leave duration (in miliseconds) in the listen options leave-duration.

Boilerplate autorefresh Transition

autorefresh - leave ​

autorefresh event is fired with status leave value, when data is fetched and delivered with broadcasts event.

autorefresh - end ​

autorefresh event is fired with status end value, when leave event (and leave-duration) is completed.

autorefresh-active class is removed from root HTML element.