Prettier (#852)
* add prettier * lint-staged * prettier * upgrade husky
This commit is contained in:
@@ -1,91 +1,91 @@
|
||||
/** @ts-check */
|
||||
|
||||
class AccordionContent extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.gridElement = document.createElement("div");
|
||||
}
|
||||
get content() {
|
||||
return this.gridElement;
|
||||
}
|
||||
connectedCallback() {
|
||||
// create a div that'll animate the collapsing
|
||||
this.gridElement.append(...Array.from(this.childNodes));
|
||||
this.gridElement.classList.add("accordion-animation-content");
|
||||
this.innerHTML = "";
|
||||
this.append(this.gridElement);
|
||||
}
|
||||
}
|
||||
|
||||
class AccordionHeader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
console.log("contructor?");
|
||||
this.btn = document.createElement("button");
|
||||
}
|
||||
get html() {
|
||||
return this.btn.innerHTML;
|
||||
}
|
||||
set html(val) {
|
||||
this.btn.innerHTML = val;
|
||||
}
|
||||
get text() {
|
||||
return this.btn.innerText;
|
||||
}
|
||||
set text(val) {
|
||||
this.btn.innerText = val;
|
||||
}
|
||||
get parentBox() {
|
||||
return this.parentElement;
|
||||
}
|
||||
connectedCallback() {
|
||||
const childNodes = Array.from(this.childNodes);
|
||||
this.innerHTML = "";
|
||||
this.btn.append(...childNodes);
|
||||
this.append(this.btn);
|
||||
this.btn.addEventListener("click", this._btnClicked.bind(this));
|
||||
}
|
||||
_btnClicked() {
|
||||
this.parentBox?.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
class AccordionBox extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
get collapsed() {
|
||||
return this.hasAttribute("collapsed");
|
||||
}
|
||||
set collapsed(val) {
|
||||
if (val) {
|
||||
this.setAttribute("collapsed", "");
|
||||
} else {
|
||||
this.removeAttribute("collapsed");
|
||||
}
|
||||
}
|
||||
toggle() {
|
||||
this.collapsed = !this.collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
class Accordion extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define("main-accordion", Accordion);
|
||||
window.customElements.define("accordion-box", AccordionBox);
|
||||
window.customElements.define("accordion-header", AccordionHeader);
|
||||
window.customElements.define("accordion-content", AccordionContent);
|
||||
|
||||
// Export types for use in index.js
|
||||
const module = {};
|
||||
|
||||
module.exports = {
|
||||
AccordionBox,
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionHeader,
|
||||
};
|
||||
/** @ts-check */
|
||||
|
||||
class AccordionContent extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.gridElement = document.createElement('div');
|
||||
}
|
||||
get content() {
|
||||
return this.gridElement;
|
||||
}
|
||||
connectedCallback() {
|
||||
// create a div that'll animate the collapsing
|
||||
this.gridElement.append(...Array.from(this.childNodes));
|
||||
this.gridElement.classList.add('accordion-animation-content');
|
||||
this.innerHTML = '';
|
||||
this.append(this.gridElement);
|
||||
}
|
||||
}
|
||||
|
||||
class AccordionHeader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
console.log('contructor?');
|
||||
this.btn = document.createElement('button');
|
||||
}
|
||||
get html() {
|
||||
return this.btn.innerHTML;
|
||||
}
|
||||
set html(val) {
|
||||
this.btn.innerHTML = val;
|
||||
}
|
||||
get text() {
|
||||
return this.btn.innerText;
|
||||
}
|
||||
set text(val) {
|
||||
this.btn.innerText = val;
|
||||
}
|
||||
get parentBox() {
|
||||
return this.parentElement;
|
||||
}
|
||||
connectedCallback() {
|
||||
const childNodes = Array.from(this.childNodes);
|
||||
this.innerHTML = '';
|
||||
this.btn.append(...childNodes);
|
||||
this.append(this.btn);
|
||||
this.btn.addEventListener('click', this._btnClicked.bind(this));
|
||||
}
|
||||
_btnClicked() {
|
||||
this.parentBox?.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
class AccordionBox extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
get collapsed() {
|
||||
return this.hasAttribute('collapsed');
|
||||
}
|
||||
set collapsed(val) {
|
||||
if (val) {
|
||||
this.setAttribute('collapsed', '');
|
||||
} else {
|
||||
this.removeAttribute('collapsed');
|
||||
}
|
||||
}
|
||||
toggle() {
|
||||
this.collapsed = !this.collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
class Accordion extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('main-accordion', Accordion);
|
||||
window.customElements.define('accordion-box', AccordionBox);
|
||||
window.customElements.define('accordion-header', AccordionHeader);
|
||||
window.customElements.define('accordion-content', AccordionContent);
|
||||
|
||||
// Export types for use in index.js
|
||||
const module = {};
|
||||
|
||||
module.exports = {
|
||||
AccordionBox,
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionHeader,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user