82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
class Akordeon extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this._internals = this.attachInternals();
|
|
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
|
|
this.przycisk = document.createElement("button");
|
|
this.przycisk.onclick = () => {
|
|
this.otwarte = !this.otwarte;
|
|
};
|
|
|
|
this.contents = document.createElement("slot");
|
|
}
|
|
|
|
get otwarte() {
|
|
return this._internals.states.has("otwarte");
|
|
}
|
|
|
|
set otwarte(flag) {
|
|
if (flag) {
|
|
this._internals.states.add("otwarte");
|
|
this.przycisk.className = "otwarte";
|
|
this.contents.className = "otwarte";
|
|
} else {
|
|
this._internals.states.delete("otwarte");
|
|
this.przycisk.className = "";
|
|
this.contents.className = "";
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon";
|
|
this.otwarte = this.getAttribute("otwarte") == "true";
|
|
|
|
const styl = document.createElement("style");
|
|
styl.textContent = `
|
|
@import url('/assets/css/baza.css');
|
|
|
|
:host {
|
|
border-radius: 1rem;
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
:host(:state(otwarte)) {
|
|
background-color: var(--colorSurface0);
|
|
border: .2rem solid var(--colorOverlay1);
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
button {
|
|
border: .2rem solid var(--colorOverlay2);
|
|
position: relative;
|
|
margin: 0%;
|
|
text-align: left;
|
|
}
|
|
|
|
button.otwarte {
|
|
border-bottom-color: var(--colorSurface2);
|
|
scale: 1.006;
|
|
}
|
|
|
|
slot {
|
|
display: none;
|
|
}
|
|
|
|
slot.otwarte {
|
|
display: inline;
|
|
padding: .5rem;
|
|
}
|
|
`;
|
|
this.shadow.appendChild(styl);
|
|
this.shadow.appendChild(this.przycisk);
|
|
this.shadow.appendChild(this.contents);
|
|
}
|
|
}
|
|
|
|
customElements.define("akordeon-comp", Akordeon); |