Add accordion and fix minor issues (#742)

* Add docs v0.0.1 * Add icon size warning * Fix sourcenover caution * Fix semver descriptions * Filters fix * Quickfix quickstart * Add icon warning v2 * Fix typos * Add NovelItem * Update plugins host * Update plugins host * Remove unnecesarry .js and .dist * Update plugins host * Add host.ps1 * Fix readme.txt * Fix READNE.txt, again * Remove .js and .dist * Add accordion * Working pagination * readme update with ost * Add linux/windows hosting functions * Add tswatch * Fix fetch function * Change plugin versions * Fix chrome * Fix workflows * Fix search not showing results * remove unnecesarry code * Revert novelupdates changes * Reverted NobleMTL instead of novelupdates, fixing that * Revert nobleMTL to e346c7d0 * WTF NobleMTL?
2024-02-04 17:39:07 +01:00
parent fc52a6e665
commit e1207c172a
16 changed files with 4339 additions and 1872 deletions
@@ -0,0 +1,92 @@
+/** @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() {
+        console.log("I AM ON THE SCREEN, DO YOUR FUCKING JOB");
+        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,
+};
@@ -1,4 +1,5 @@
 interface Window {
    themes: Record<string, ThemeType>;
    sanitizeChapterText(html: string, options?: Options);
+    encodeHTML5(html: string, options?: Options);
 }