71 lines
1.8 KiB
JavaScript
Executable File
71 lines
1.8 KiB
JavaScript
Executable File
class Navigation extends HTMLElement {
|
|
|
|
activeview = '';
|
|
|
|
getMobileView(){
|
|
var sr = this.shadowRoot;
|
|
|
|
// I don't like this being hard coded, but have stuggled to find a dynamic way for exampe: .childNodes.item("mobileview");
|
|
|
|
var mobileview = sr.host.parentElement.childNodes[3];
|
|
return mobileview;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
let template = document.getElementById('navigationview');
|
|
let templateContent = template.content;
|
|
|
|
const shadow = this.attachShadow({
|
|
mode: 'open'
|
|
})
|
|
.appendChild(templateContent.cloneNode(true));
|
|
}
|
|
|
|
setAllButtonsDisabled(){
|
|
var sr = this.shadowRoot;
|
|
this.buttonRow = sr.getElementById('buttonrow');
|
|
|
|
const buttonlist = Array.from(this.buttonRow.children);
|
|
|
|
|
|
buttonlist.forEach(function(node){
|
|
node.setDisabled();
|
|
})
|
|
}
|
|
|
|
connectedCallback(){
|
|
var sr = this.shadowRoot;
|
|
this.buttonRow = sr.getElementById('buttonrow');
|
|
|
|
var navelement = this;
|
|
|
|
this.buttonRow.addEventListener('NAV', e => {
|
|
|
|
console.log(e)
|
|
|
|
var id = e.detail.eventData.id;
|
|
|
|
// console.log('HOMESCREEN RECIEVED EVENT FROM NAV BUTTON: ' + id.toLocaleUpperCase());
|
|
|
|
this.setAllButtonsDisabled();
|
|
|
|
var button = sr.getElementById(id);
|
|
button.setEnabled();
|
|
navelement.activeview = id;
|
|
|
|
var mobileview = this.getMobileView();
|
|
mobileview.innerHTML = "<" + id + "-element></" + id +"-element>";
|
|
});
|
|
}
|
|
}
|
|
|
|
try {
|
|
customElements.define('navigation-element', Navigation);
|
|
} catch (err) {
|
|
const h3 = document.createElement('h3')
|
|
h3.innerHTML = err
|
|
document.body.appendChild(h3)
|
|
}
|