PanelFlip Component Documentation

Updated: 02/04/2019. Version: 2.0

Examples of a PanelFlip component

Examples of a PanelFlip component: Flipbook

FlipBook Template in Adform HTML STUDIO

Examples of a PanelFlip component: AdTiles

AdTiles Template in Adform HTML STUDIO

Examples of a PanelFlip component: Cascade Expandable

Cascade Template in Adform HTML STUDIO

Description

This component allows to set up different types of flip animations easily (examples above). Follow the guidelines below in order to change available parameters or add/remove other externally used components.

Requirements

In order to work properly, a PanelFlip component requires a specific HTML structure:

    <div id="adf-wrapper">
        <!-- Panel -->
        <div class="adf-Flip-panel">
            <div class="adf-Flip-Card">
                <div class="adf-Flip-Card--face back">
                    <!-- YOUR HTML CONTENT -->
                </div>
            </div>
        </div>

        <!-- Panel -->
        <div class="adf-Flip-panel">
            <div class="adf-Flip-Card">
                <div class="adf-Flip-Card--face back">
                    <!-- YOUR HTML CONTENT -->
                </div>
            </div>
        </div>

        ... More Panels
    </div>

Initialization

To start with a PanelFlip component, you have to load it in a <head></head> tag inside your index.html document.

<head>

...
<script src="//s1.adform.net/banners/scripts/components/Adform.PanelFlip.js"></script>
...

</head>

See the example of initialization:

// 1. Create new instance
var panelFlip = new Adf.PanelFlip({
     wrapper: document.getElementById('adf-wrapper'),
     columns: 1,
     rows: 4,
     animationDuration: 0.4
 });

// 2. Initialize PanelFlip
panelFlip.init();

Mandatory Settings

Name Type Default Description
wrapper DOM element none Element containing PanelFlip panels
columns number 3 Number of panels to display in each row
rows number 3 Number of panels to display in each column
panelWidth number dhtml.collapsedWidth Width of each single panel in pixels (optional for SingleExpanding templates)
panelHeight number dhtml.collapsedHeight Height of each single panel in pixels (optional for SingleExpanding templates)

Optional Settings

Name Type Default Description
animationDuration number 0.5 Flipping animation duration in seconds (float, greater than 0)
perspective number 800 Flipping animation perspective value (int, greater than 500)
inside boolean false Direction of animation rotation
easing string 'ease-out' Animation easing
expandDirection string right-down Direction of animation expansion (right, left, up, down, and their combination separated by hyphen)
className string adf-Flip Class name used to identify PanelFlip elements
singleBackground string none URL of the image to be used, adequately trimmed, as background for all panels

Note: If you are using a PanelFlip component together with a SingleExpanding component, then you need to load the SingleExpanding component in a <head></head> tag, too.
Furthermore, in this case, there is no need to define an expandDirection property as it can be set in the Banner Settings panel by using the Advanced Settings drop-down menu.

Methods

panelFlip.expand()

Expands all panels at once.

Example:

document.getElementById('expand-panels').addEventListener('click', function () {
    panelFlip.expand();
});

panelFlip.collapse()

Collapses all panels at once.

Example:

videoPlayer.video.node().addEventListener('ended', function () {
    panelFlip.collapse(); // Collapse all panels when video ends
});

panelFlip.expandOne()

Expands the next panel.

Example:

document.getElementById('show-more').addEventListener('click', function () {
    panelFlip.expandOne();
});

panelFlip.collapseOne()

Collapses the last panel.

Example:

document.getElementById('close-me').addEventListener('click', function () {
    panelFlip.collapseOne();
});

panelFlip.getPanel(elem)

Returns a panel containing the selected element.

Example:

var videoPanel = panelFlip.getPanel('video'); // use querySelector notation

panelFlip.flippedCount()

Returns the number of currently flipped panels.

Example:

[].forEach.call(document.querySelectorAll('.collapse-button'), function (button) {
    button.addEventListener('click', function () {
        adtiles.collapseOne();
        var eventVars = {bv1: 'Panel' + (adtiles.flippedCount())}; // sets event's dynamic value according to the number of collapsed panel 
        dhtml.sendEvent('2', 'Panel Collapsed', eventVars);
    });
});

panelFlip.on(eventName, listener)

Registers an event listener for the provided event name.

Parameter Type
eventName string
listener function

Example:

panelFlip.on(panelFlip.UNFLIP_START, videoPlayer.pause); // Pause video when collapsing animation begins

Available events:

Name Description
FLIP_START Fires when PanelFlip begins expanding animation
FLIP_END Fires when PanelFlip completes expanding animation
UNFLIP_START Fires when PanelFlip begins collapsing animation
UNFLIP_END Fires when PanelFlip completes collapsing animation
FLIPPED_PANEL Fires when a specific panel completes expanding animation
UNFLIPPED_PANEL Fires when a specific panel begins collapsing animation

panelFlip.off(eventName, listener)

Removes the event listener. If a listener is null or undefined, removes all listeners associated with the provided event name.

Parameter Type
eventName string
listener function