consul/ui-v2/app/components/menu-panel/index.js

27 lines
859 B
JavaScript

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import Slotted from 'block-slots';
export default Component.extend(Slotted, {
tagName: '',
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';
}
},
},
});