129 lines
2.8 KiB
JavaScript
129 lines
2.8 KiB
JavaScript
/* eslint-disable node/no-unpublished-import */
|
|
import 'elix/define/MenuButton.js';
|
|
import 'elix/define/MenuItem.js';
|
|
|
|
const template = document.createElement('template');
|
|
template.innerHTML = `
|
|
<style>
|
|
:host {
|
|
padding: 0px;
|
|
}
|
|
elix-menu-button::part(menu) {
|
|
background-color: var(--icon-bg-color) !important;
|
|
color: #fff;
|
|
}
|
|
elix-menu-button::part(popup-toggle) {
|
|
padding: 0.25em 0.60em !important
|
|
}
|
|
:host ::slotted([current]){
|
|
background-color: var(--icon-bg-color-hover) !important;
|
|
color: #fff;
|
|
}
|
|
:host ::slotted(*){
|
|
padding: 0.25em 1.25em 0.25em 0.25em !important;
|
|
margin: 2px;
|
|
}
|
|
</style>
|
|
|
|
<elix-menu-button id="MenuButton" aria-label="Main Menu">
|
|
<slot></slot>
|
|
</elix-menu-button>
|
|
|
|
`;
|
|
/**
|
|
* @class SeMenu
|
|
*/
|
|
export class SeMenu extends HTMLElement {
|
|
/**
|
|
* @function constructor
|
|
*/
|
|
constructor () {
|
|
super();
|
|
// create the shadowDom and insert the template
|
|
this._shadowRoot = this.attachShadow({mode: 'open'});
|
|
this._shadowRoot.append(template.content.cloneNode(true));
|
|
this.$menu = this._shadowRoot.querySelector('elix-menu-button');
|
|
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
|
|
}
|
|
/**
|
|
* @function observedAttributes
|
|
* @returns {any} observed
|
|
*/
|
|
static get observedAttributes () {
|
|
return ['label', 'src'];
|
|
}
|
|
|
|
/**
|
|
* @function attributeChangedCallback
|
|
* @param {string} name
|
|
* @param {string} oldValue
|
|
* @param {string} newValue
|
|
* @returns {void}
|
|
*/
|
|
attributeChangedCallback (name, oldValue, newValue) {
|
|
const image = new Image();
|
|
if (oldValue === newValue) return;
|
|
switch (name) {
|
|
case 'src':
|
|
image.src = newValue;
|
|
image.width = 24;
|
|
image.height = 24;
|
|
this.$label.prepend(image);
|
|
break;
|
|
case 'label':
|
|
this.$label.prepend(newValue);
|
|
break;
|
|
default:
|
|
// eslint-disable-next-line no-console
|
|
console.error(`unknown attribute: ${name}`);
|
|
break;
|
|
}
|
|
}
|
|
/**
|
|
* @function get
|
|
* @returns {any}
|
|
*/
|
|
get label () {
|
|
return this.getAttribute('label');
|
|
}
|
|
|
|
/**
|
|
* @function set
|
|
* @returns {void}
|
|
*/
|
|
set label (value) {
|
|
this.setAttribute('label', value);
|
|
}
|
|
/**
|
|
* @function get
|
|
* @returns {any}
|
|
*/
|
|
get src () {
|
|
return this.getAttribute('src');
|
|
}
|
|
|
|
/**
|
|
* @function set
|
|
* @returns {void}
|
|
*/
|
|
set src (value) {
|
|
this.setAttribute('src', value);
|
|
}
|
|
/**
|
|
* @function connectedCallback
|
|
* @returns {void}
|
|
*/
|
|
/* connectedCallback () {
|
|
this.$menu.addEventListener('openedchange', (e) => {
|
|
e.preventDefault();
|
|
const selectedItem = e?.detail?.closeResult;
|
|
if (selectedItem !== undefined && selectedItem?.id !== undefined) {
|
|
document.getElementById(selectedItem.id).click();
|
|
}
|
|
});
|
|
} */
|
|
}
|
|
|
|
// Register
|
|
customElements.define('se-menu', SeMenu);
|