AssetBar

import AssetBar from '@bbc/front-end-kit/js/showpad/components/AssetBar';

A component used in most Showpad applications to list page-related assets in an off-canvas panel. Its contents are determined by the app's config.json. Clicking a list item closes the panel before the Highway page change.

Extends Popup.

Getting started

<nav>
    <button data-popup-trigger="assetbar-1">Trigger asset bar</button>
</nav>

<dialog class="popup --oc-top --asset-bar" data-popup="assetbar-1">
    <div class="popup__container">
        <div class="asset-bar__list">
            <script type="text/x-handlebars-template">
                <li>
                    <a href="{{applink}}">
                        <div class="label">{{name}}</div>
                    </a>
                </li>
            </script>
        </div>
        <button class="popup__close-btn">Close</button>
    </div>
</dialog>

import AssetBar from '@bbc/front-end-kit/js/showpad/components/AssetBar';

const assetBar = new AssetBar({
    $el: document.querySelector('[data-popup="assetbar-1"]'),
    count: 5,
});

API

`constructor(args = {})`

Initialises the AssetBar instance. All args are forwarded to Popup. Additionally:

Parameters

$el (Element): The root popup element.
count (number, optional): The number to display in the asset count badge inside each trigger's <span>. Values less than 1 are ignored.

Known bug

setCounter is called as setCounter.call(args.count) — the count value is passed as this instead of as an argument. This means the badge update and GSAP animation do not run as intended. Pass count in the constructor args but be aware the badge will not update until this is fixed in the source.

All other methods, events, and CSS classes are inherited from Popup.

External dependencies

Popup: Base class providing off-canvas/popup behaviour.
GSAP: Used for the badge show animation (opacity + scale tween).