I'm trying to factor out some of the disparate functionality in my app.
This one seemed to peel out rather nicely, only I'm somehow not able
to successfully send it a custom "redraw" event. In my application I'm
having to trigger a redraw by peeking into the shadow dom and calling
.click() twice on the toggle.
A <more-panel></more-panel> works like a div that can be in either
of two states: a 'more' state where the clickable word says "(less)"
and the panel hides contents with the class of "less" and shows
contents with the class of "more; and a 'less' state where the clickable
word says "(more)" and the panel hides contents with the class of
"more" and shows contents with the class of "less". Contents without
either of these classes is simply passed through unmolested.
Contents with both classes will be shown in both states.
The more-panel itself can be instantiated with or without the "more"
class to specify its initial state.
Any critiques or comments welcome.
more.js:
const morePanelTemplate = document.createElement("template"); morePanelTemplate.innerHTML = `
<style>
.content{
border: 1px solid;
border-radius: 5px;
}
#toggle{
font-size: small;
text-decoration: underline;
cursor: pointer;
}
</style>
<div class="content">
<span id=toggle></span>
<slot></slot>
</div>
`;
class MorePanel extends HTMLElement {
constructor() {
super();
this.attachShadow( {mode:"open"} );
this.shadowRoot.appendChild( morePanelTemplate.content.cloneNode(true) );
let content = this.shadowRoot.querySelector(".content");
this.showStuff();
}
showStuff() {
if( this.classList.contains( "more" ) )
this.showMore();
else
this.showLess();
}
connectedCallback() {
this.shadowRoot.querySelector("#toggle").addEventListener( "click", ()=>{
this.classList.toggle( "more" );
this.showStuff();
});
self.addEventListener( "redraw", (event) => this.showStuff() );
}
disconnectedCallback() {
this.shadowRoot.querySelector("#toggle").removeEventListener();
}
showMore() {
this.shadowRoot.querySelector("#toggle").textContent="(less)";
this.querySelectorAll(".less").forEach( el => el.style.display = 'none' );
this.querySelectorAll(".more").forEach( el => el.style.display = '' );
}
showLess() {
this.shadowRoot.querySelector("#toggle").textContent="(more)";
this.querySelectorAll(".more").forEach( el => el.style.display = 'none' );
this.querySelectorAll(".less").forEach( el => el.style.display = '' );
}
}
window.customElements.define( "more-panel", MorePanel );
more.html:
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width">
<html>
<title></title>
<style>
</style>
<body>
<more-panel class="more">
<div class="more">This div</div>
<span>the span</span>
</more-panel>
</body>
<script src="more.js"></script>
<script>
</script>
</html>
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)