79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
class Akordeon extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._internals = this.attachInternals();
|
|
this.otwarte = this.getAttribute("otwarte") == "true";
|
|
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
this.shadow.onslotchange = ev => {
|
|
console.log(ev);
|
|
};
|
|
}
|
|
|
|
get otwarte() {
|
|
return this._internals.states.has("otwarte");
|
|
}
|
|
|
|
set otwarte(flag) {
|
|
if (flag) {
|
|
this._internals.states.add("otwarte");
|
|
} else {
|
|
this._internals.states.delete("otwarte");
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
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;
|
|
}
|
|
|
|
::part(button)(:state(otwarte)) {
|
|
border-bottom-color: var(--colorSurface2);
|
|
scale: 1.005;
|
|
}
|
|
|
|
slot {
|
|
display: inline;
|
|
padding: .5rem;
|
|
}
|
|
`;
|
|
this.shadow.appendChild(styl);
|
|
|
|
const przycisk = document.createElement("button");
|
|
przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon";
|
|
przycisk.onclick = () => {
|
|
this.otwarte = !this.otwarte;
|
|
};
|
|
this.shadow.appendChild(przycisk);
|
|
|
|
this.contents = document.createElement("slot");
|
|
this.shadow.appendChild(this.contents);
|
|
}
|
|
|
|
attributeChangedCallback(atrybut, poprzednio, obecnie) {
|
|
|
|
}
|
|
}
|
|
|
|
customElements.define("akordeon-comp", Akordeon); |