2020-06-09 10:10:14 +00:00
|
|
|
import Component from '@ember/component';
|
2020-06-23 09:12:04 +00:00
|
|
|
import { inject as service } from '@ember/service';
|
2020-06-09 10:10:14 +00:00
|
|
|
|
|
|
|
import Slotted from 'block-slots';
|
|
|
|
|
|
|
|
export default Component.extend(Slotted, {
|
|
|
|
tagName: '',
|
2020-06-23 09:12:04 +00:00
|
|
|
dom: service('dom'),
|
|
|
|
actions: {
|
|
|
|
change: function(e) {
|
|
|
|
const id = e.target.getAttribute('id');
|
|
|
|
const $trigger = this.dom.element(`[for='${id}']`);
|
|
|
|
const $panel = this.dom.element('[role=menu]', $trigger.parentElement);
|
|
|
|
const $menuPanel = this.dom.closest('.menu-panel', $panel);
|
|
|
|
if (e.target.checked) {
|
|
|
|
$panel.style.display = 'block';
|
|
|
|
const height = $panel.offsetHeight + 2;
|
|
|
|
$menuPanel.style.maxHeight = $menuPanel.style.minHeight = `${height}px`;
|
|
|
|
} else {
|
|
|
|
$panel.style.display = null;
|
|
|
|
$menuPanel.style.maxHeight = null;
|
|
|
|
$menuPanel.style.minHeight = '0';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2020-06-09 10:10:14 +00:00
|
|
|
});
|