Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

HMILayout via slotchange #41

Draft
wants to merge 3 commits into
base: feature/add-tmplits-hmilayout
Choose a base branch
from
Draft

HMILayout via slotchange #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ecccf79
Refactor main.handlebars with footer and divs instead of templates
Jan 24, 2024
a0ce02c
Remove default slot from component
Jan 24, 2024
7def7cf
Demonstrate how changing the slot attribute can show or hide content
Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 15 additions & 16 deletions example/HMI/app/views/main.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
<lui-basic-layout navBar="left">
<div id="contentArea">
<template title="Button 1">
{{>OpenBridge }}
{{!-- <h1>Content 1</h1> --}}
</template>

<template title="Button 2">
<div slot="list" title="Button 1">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some downsides to using divs here instead of templates (harder to of select only visible things)

{{>OpenBridge }}
{{!-- <h1>Content 1</h1> --}}
</div>

<div slot="list" title="Button 2">
{{>testComponents }}
{{!-- <h1>Content 2</h1> --}}
</template>
{{!-- <h1>Content 2</h1> --}}
</div>

<template title="Button 3">
<div slot="list" title="Button 3">
{{>nav}}
{{!-- <h1>Cosntent 3</h1> --}}
</template>
</div>

<div slot="footer">
Copyright
</div>
{{!-- <h1>Cosntent 3</h1> --}}
</div>

<footer slot="footer">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using footer tag here for readability, and convenience of selection

Copyright
</footer>

</lui-basic-layout>
74 changes: 37 additions & 37 deletions src/tmplits/tmplits-hmilayout/module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import * as util from "../tmplits-utilities/module.js"

//Style Template
const styleTemplate = document.createElement('template');
styleTemplate.innerHTML =
`
styleTemplate.innerHTML =
`
<style>
/* Parent grid */
.tmplit-layout-grid{
Expand Down Expand Up @@ -117,17 +117,17 @@ class basicLayout extends HTMLElement {

noChange = false;
constructor() {
super()
//Find the template tags and move them to the shadow dom
let nodes = this.querySelectorAll('template')
super()
//Find the div list tags
let nodes = this.querySelectorAll('div[slot=list]')
let labels = []

for (let i in nodes) {
let el = nodes[i]
switch (el.tagName) {
case undefined:
break;
case 'TEMPLATE':
case 'DIV':
labels.push(el.getAttribute("title"))
break;
default:
Expand All @@ -136,23 +136,23 @@ class basicLayout extends HTMLElement {
}

let navBarLoc = this.getAttribute('navBar')
this.attachShadow({mode: 'open'})
this.attachShadow({ mode: 'open' })
this.shadowRoot.innerHTML = `
<div class="tmplit-layout-grid">
<div class="tmplit-main-container
${navBarLoc ==='left' || navBarLoc ==='right' ? 'tmplit-main-container-left-right' :
navBarLoc ==='top' || navBarLoc ==='bottom' ? 'tmplit-main-container-top-bottom' :'mplit-main-container-left-right'}">
${navBarLoc === 'left' || navBarLoc === 'right' ? 'tmplit-main-container-left-right' :
navBarLoc === 'top' || navBarLoc === 'bottom' ? 'tmplit-main-container-top-bottom' : 'mplit-main-container-left-right'}">
<div class="tmplit-navBar-container
${navBarLoc ==='left' ? 'tmplit-navBar-container-left tmplit-navBar-container-width-size' :
navBarLoc ==='right' ? 'tmplit-navBar-container-right tmplit-navBar-container-width-size' :
navBarLoc ==='top' ? 'tmplit-navBar-container-top tmplit-navBar-container-height-size' :
navBarLoc ==='bottom' ? 'tmplit-navBar-container-bottom tmplit-navBar-container-height-size' :
${navBarLoc === 'left' ? 'tmplit-navBar-container-left tmplit-navBar-container-width-size' :
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These lines are my auto-formatter's doing, sorry.

navBarLoc === 'right' ? 'tmplit-navBar-container-right tmplit-navBar-container-width-size' :
navBarLoc === 'top' ? 'tmplit-navBar-container-top tmplit-navBar-container-height-size' :
navBarLoc === 'bottom' ? 'tmplit-navBar-container-bottom tmplit-navBar-container-height-size' :
'tmplit-navBar-container-left tmplit-navBar-container-width-size'}">
</div>

<div class="tmplit-main-content">
<slot>
DEFAULT SLOT
<slot name="content">
DEFAULT CONTENT
</slot>
</div>
</div>
Expand All @@ -167,19 +167,20 @@ class basicLayout extends HTMLElement {
this.shadowRoot.appendChild(styleTemplate.content.cloneNode(true));
this.shadowRoot.innerHTML += this.innerHTML;
let navbar = this.shadowRoot.querySelector(".tmplit-navBar-container");
for(let i in labels){
for (let i in labels) {
let button = document.createElement(`div`);
button.classList.add('tmplit-navBar-button')
button.innerHTML = labels[i] ? labels[i] : +i + 1;
button.addEventListener('click', ()=>{this.setAttribute('value',i)})
navbar.appendChild( button )
button.addEventListener('click', () => { this.setAttribute('value', i) })
navbar.appendChild(button)
}
if(!this.hasAttribute('value')){
if (!this.hasAttribute('value')) {
this.setAttribute('value', 0)
this.selectPage(this.getAttribute('value'))
}

}

//Tell the DOM to observe 'value' attribute for changes
static get observedAttributes() {
return ['value']
Expand All @@ -191,38 +192,37 @@ class basicLayout extends HTMLElement {
case 'value':
this.selectPage(newValue)
//Raise an event
if(!this.noChange){
if (!this.noChange) {
this.dispatchEvent(new Event("change", {
"bubbles": true,
"cancelable": true
}));
}));
}
break;
default:
break;
}
}

selectPage(templatesIndex){
let templates = this.shadowRoot.querySelectorAll('template')
let content = this.shadowRoot.querySelector('slot:not([name])')
// let footer = this.querySelector('[slot="footer"]')

if(+templatesIndex < templates.length){
let contentArea = this.querySelector('#contentArea')
contentArea.innerHTML = templates[templatesIndex].innerHTML
// content.innerHTML = templates[templatesIndex].innerHTML
// this.innerHTML = content.innerHTML
// this.append(footer)
selectPage(templatesIndex) {
let divs = this.querySelectorAll('div[slot]')
divs.forEach(div => {
// set every other slot div back to list slot
div.setAttribute('slot', 'list')
// TODO could do this more elegantly
});

if (+templatesIndex < divs.length) {
divs[templatesIndex].setAttribute('slot', 'content')
Copy link
Contributor Author

@shanereetz shanereetz Jan 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The crux of this approach: setting this attribute causes this div to be displayed inside <div class="tmplit-main-content">, because that div contains the content slot.

}
else{
this.innerHTML = "Not Found"
else {
this.innerHTML = "Not Found"
}
}
get value(){
get value() {
return this.getAttribute('value');
}
set value(val){
set value(val) {
this.noChange = true;
this.setAttribute('value', val)
this.noChange = false;
Expand Down