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.
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>require(['popovers'], function(popover)) {
popover('#id').open();
});
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')
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>';
})
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)
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
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})
Returns the active item such as { text: string, value: string, target: PopoverElement }
phonon.popover('#my-popover').getActiveItem()
Defines the active item of the popover.
phonon.popover('#my-popover').setActiveItem('A', 'AA')
popover.close()
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)
})
var popover = phonon.popover()
.setList(['a', 'b', 'c'])
.attachButton('.my-button', true)
.onItemChanged(function (data) {
console.log(data);
}).openFrom('.my-button')
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>