Phonon Framework

Phonon

Popovers

Popovers allow users to take an action by selecting from a list of choices revealed upon opening a temporary, new sheet of material. They are located on the .header-bar or on the .btn-popover button. They are fired from button actions and from the title.


Live Example


Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="popovers.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="popovers.js"></script>

RequireJS Compatible

require(['popovers'], function(popover)) {
    popover('#id').open();
});

Popover instance

Phonon creates your popover:

var popover = phonon.popover()

If you have a custom HTML for you popover, you need to pass its id: Please read the section custom popover.

var popover = phonon.popover('#popover-id')

Set the list

popover.setList(array, function)

With a simple array:

popover.setList(['a', 'b', 'c'])

With an array of objects:

popover.setList([
    {
        text: 'a',
        value: 'a'
    },
    {
        text: 'b',
        value: 'tg'
    }
])

With a custom list item builder:

popover.setList(['a', 'b', 'c'], function (item) {
    var text = typeof item === 'string' ? item : item.text;
    var value = typeof item === 'string' ? item : item.value;
    return '<li><a class="padded-list" data-value="' + value + '">' + text + '</a></li>';
})

Set a trigger button

The first argument is the button. It can be a string selector or a DOM object.
The second argument permits to set the selected value from the popover in the target (button).

popover.attachButton('.button-trigger-popover', true)

Open in header bar

You can open the popover in a given direction.

popover.open('left') // in header-bar
popover.open('title-left') // below the title (left-aligned) in header-bar
popover.open('right') // in header-bar
popover.open('title') // below the title in header-bar

Open from a given target (button)

You can open the popover above a given button. This is particularly useful if you use the same popover in different locations.

popover.openFrom('.button-for-popover')
popover.openFrom(document.querySelector('.button-for-popover'))

You can pass optional options:

popover.openFrom('.button-for-popover', {direction: 'top right', margin: 0, width: 200})

getActiveItem()

Returns the active item such as { text: string, value: string, target: PopoverElement }

phonon.popover('#my-popover').getActiveItem()

setActiveItem(value, text)

Defines the active item of the popover.

phonon.popover('#my-popover').setActiveItem('A', 'AA')

Close

popover.close()

Events

JavaScript callback:

popover.onItemChanged(function (data) {
    console.log('onItemChanged')
    console.error(data)
})

DOM callback:

document.querySelector('#my-popover').on('itemchanged', function (event) {
    console.log(event.detail)
})

Complete example

var popover = phonon.popover()
    .setList(['a', 'b', 'c'])
    .attachButton('.my-button', true)
    .onItemChanged(function (data) {
        console.log(data);
    }).openFrom('.my-button')

Custom popovers

Popover

Place the .popover code right after your <body> tag.


<div class="popover" id="my-popover">
    <ul class="list">
        <li><a class="padded-list">Item 1</a></li>
        <li><a class="padded-list">Item 2</a></li>
        <li><a class="padded-list">Item 3</a></li>
        <li><a class="padded-list">Item 4</a></li>
    </ul>
</div>

Button - popover trigger

Set the popover's id with the following attribute data-popover-id.

<header class="header-bar">
    <button class="btn pull-left icon icon-menu" data-popover-id="my-popover"></button>
    <button class="btn pull-right icon icon-menu" data-popover-id="my-popover"></button>
    <h1 class="title pull-left arrow" data-popover-id="my-popover">Title</h1>
</header>

<div class="content padded-full">
    <button class="btn fit-parent primary" data-autobind="true" data-popover-id="">Select</button>
</div>