Draft

katydecorah · Apr 23, 2024 · fecd305 · fecd305
1 parent 9e136fd
commit fecd305
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 94 deletions.
diff --git a/components/clear-button.ts b/components/clear-button.ts
@@ -1,15 +1,21 @@
 import customEvent from "./custom-event";
 
+const CLICK = "click";
+const CLEAR_FILTER = "clear-filter";
+
 class ClearButton extends HTMLButtonElement {
-  public constructor() {
-    super();
-    this.addEventListener("click", this.onClick);
+  public connectedCallback(): void {
+    this.addEventListener(CLICK, this.onClick);
     this.classList.add("clear-button");
   }
 
+  public disconnectedCallback(): void {
+    this.removeEventListener(CLICK, this.onClick);
+  }
+
   private onClick(): void {
     this.dispatchEvent(
-      customEvent("clear-filter", {
+      customEvent(CLEAR_FILTER, {
         value: this.value,
       }),
     );

diff --git a/components/filter-checkbox.ts b/components/filter-checkbox.ts
@@ -1,21 +1,33 @@
 import customEvent from "./custom-event";
 
+const HANDLE_FILTER = "handle-filter";
+const VARIABLE = "variable";
+
 class FilterCheckbox extends HTMLInputElement {
   public constructor() {
     super();
     this.addEventListener("change", this.onChange);
+  }
+
+  public connectedCallback(): void {
     this.handleInitialValue();
 
     // Listen for events to clear filter
-    window.addEventListener("remove-checkbox", () => {
-      this.checked = false;
-      this.onChange();
-    });
+    window.addEventListener("remove-checkbox", this.removeCheckbox);
   }
 
+  public disconnectedCallback(): void {
+    window.removeEventListener("remove-checkbox", this.removeCheckbox);
+  }
+
+  private removeCheckbox = (): void => {
+    this.checked = false;
+    this.onChange();
+  };
+
   private onChange(): void {
     this.dispatchEvent(
-      customEvent("handle-filter", {
+      customEvent(HANDLE_FILTER, {
         value: this.checked,
         id: this.id,
       }),
@@ -27,9 +39,9 @@ class FilterCheckbox extends HTMLInputElement {
     const urlParameters = new URLSearchParams(window.location.search);
     // only set variable if it's true
     if (this.checked === false) {
-      urlParameters.delete("variable");
+      urlParameters.delete(VARIABLE);
     } else {
-      urlParameters.set("variable", "true");
+      urlParameters.set(VARIABLE, "true");
     }
     window.history.replaceState(
       {},
@@ -40,16 +52,19 @@ class FilterCheckbox extends HTMLInputElement {
 
   private handleInitialValue(): void {
     const urlParameters = new URLSearchParams(window.location.search);
-    const initialValue = urlParameters.get("variable");
+    const initialValue = urlParameters.get(VARIABLE);
     if (initialValue === "true") {
       this.checked = true;
 
       // Wait for main-app to load before dispatching event
-      window.addEventListener("main-app-loaded", () => {
-        this.onChange();
-      });
+      window.addEventListener("main-app-loaded", this.mainAppLoaded);
     }
   }
+
+  private mainAppLoaded = (): void => {
+    this.onChange();
+    window.removeEventListener("main-app-loaded", this.mainAppLoaded);
+  };
 }
 
 customElements.define("filter-checkbox", FilterCheckbox, { extends: "input" });
diff --git a/components/filter-select.ts b/components/filter-select.ts
@@ -1,37 +1,49 @@
 import customEvent from "./custom-event";
 
+const HANDLE_FILTER = "handle-filter";
+const TAG_BUTTON_SELECTED = "tag-button-selected";
+
 class FilterSelect extends HTMLSelectElement {
   public constructor() {
     super();
     this.addEventListener("change", this.onChange);
+  }
+
+  public connectedCallback(): void {
     this.handleInitialValue();
 
     // Listen for events to clear filter
-    window.addEventListener("remove-select", (event: CustomEvent) => {
-      if (event.detail.value === this.id) {
-        this.value = "";
-        this.onChange();
-      }
-    });
+    window.addEventListener("remove-select", this.removeSelect);
 
     // Listen for changes by other tag elements
-    window.addEventListener("tag-button-selected", (event: CustomEvent) => {
-      if (this.id === "selectedTag" && this.value !== event.detail.value) {
-        this.value = event.detail.value;
-      }
-    });
+    window.addEventListener(TAG_BUTTON_SELECTED, this.tagButtonSelected);
+  }
+
+  public disconnectedCallback(): void {
+    window.removeEventListener("remove-select", this.removeSelect);
+    window.removeEventListener(TAG_BUTTON_SELECTED, this.tagButtonSelected);
   }
 
+  private removeSelect = (event: CustomEvent): void => {
+    if (event.detail.value === this.id) {
+      this.value = "";
+      this.onChange();
+    }
+  };
+
+  private tagButtonSelected = (event: CustomEvent): void => {
+    if (this.id === "selectedTag" && this.value !== event.detail.value) {
+      this.value = event.detail.value;
+    }
+  };
+
   private onChange(): void {
     const { id, value } = this;
     this.dispatchEvent(
-      customEvent(
-        id === "selectedTag" ? "tag-button-selected" : "handle-filter",
-        {
-          value,
-          id,
-        },
-      ),
+      customEvent(id === "selectedTag" ? TAG_BUTTON_SELECTED : HANDLE_FILTER, {
+        value,
+        id,
+      }),
     );
 
     this.setUrlParam();
@@ -60,11 +72,14 @@ class FilterSelect extends HTMLSelectElement {
       this.value = initialValue;
 
       // Wait for main-app to load before dispatching event
-      window.addEventListener("main-app-loaded", () => {
-        this.onChange();
-      });
+      window.addEventListener("main-app-loaded", this.mainAppLoaded);
     }
   }
+
+  private mainAppLoaded = (): void => {
+    this.onChange();
+    window.removeEventListener("main-app-loaded", this.mainAppLoaded);
+  };
 }
 
 customElements.define("filter-select", FilterSelect, { extends: "select" });
diff --git a/components/font-item.ts b/components/font-item.ts
@@ -61,12 +61,19 @@ class FontItem extends HTMLLIElement {
   }
 
   public connectedCallback(): void {
-    const { family, category, variants, subsets, lineNumber, tags, variable } =
-      this.font;
     this.subset = this.selectedSubset;
-
     this.addFontToHead();
+    this.render();
+  }
 
+  public disconnectedCallback(): void {
+    this.removeFontFromHead();
+  }
+
+  private render(): void {
+    const { family, category, variants, subsets, lineNumber, tags, variable } =
+      this.font;
+    this.subset = this.selectedSubset;
     const tagButtons = tags
       .map(
         (tag: string) =>
@@ -130,7 +137,7 @@ class FontItem extends HTMLLIElement {
     document.head.append(linkElement);
   }
 
-  public disconnectedCallback(): void {
+  public removeFontFromHead(): void {
     const linkElement = document.querySelector(
       `link[data-family="${this.font.family}"]`,
     );

diff --git a/components/font-list.ts b/components/font-list.ts
@@ -1,32 +1,24 @@
 import { setAttributes } from "./set-attributes";
 
+const SELECTED_VARIANT = "selected-variant";
+const SELECTED_SUBSET = "selected-subset";
+const FONTS = "fonts";
+
 class FontList extends HTMLUListElement {
   public get selectedVariant(): string {
-    return this.getAttribute("selected-variant");
+    return this.getAttribute(SELECTED_VARIANT);
   }
 
   public get selectedSubset(): string {
-    return this.getAttribute("selected-subset");
+    return this.getAttribute(SELECTED_SUBSET);
   }
 
   public get fonts(): string[] {
-    return JSON.parse(this.getAttribute("fonts")) as string[];
+    return JSON.parse(this.getAttribute(FONTS)) as string[];
   }
 
   public connectedCallback(): void {
-    if (!this.fonts) return;
-    const items = [];
-    for (const font of this.fonts) {
-      const fontItem = document.createElement("li");
-      setAttributes(fontItem, {
-        is: "font-item",
-        font: JSON.stringify(font),
-        "selected-variant": this.selectedVariant,
-        "selected-subset": this.selectedSubset,
-      });
-      items.push(fontItem.outerHTML);
-    }
-    this.innerHTML = items.join("\n");
+    this.render();
   }
 
   public attributeChangedCallback(
@@ -35,11 +27,27 @@ class FontList extends HTMLUListElement {
     nextValue: string,
   ): void {
     if (oldValue === nextValue) return;
-    this.connectedCallback();
+    this.render();
   }
 
   public static get observedAttributes(): string[] {
-    return ["selected-variant", "selected-subset", "fonts"];
+    return [SELECTED_VARIANT, SELECTED_SUBSET, FONTS];
+  }
+
+  private render(): void {
+    if (!this.fonts) return;
+    const items = [];
+    for (const font of this.fonts) {
+      const fontItem = document.createElement("li");
+      setAttributes(fontItem, {
+        is: "font-item",
+        font: JSON.stringify(font),
+        [SELECTED_VARIANT]: this.selectedVariant,
+        [SELECTED_SUBSET]: this.selectedSubset,
+      });
+      items.push(fontItem.outerHTML);
+    }
+    this.innerHTML = items.join("\n");
   }
 }
 

diff --git a/components/pagination-buttons.ts b/components/pagination-buttons.ts
@@ -1,5 +1,8 @@
 export type ButtonType = MouseEvent & { target: HTMLButtonElement };
 
+const NEXT_PAGE = "next-page";
+const PREVIOUS_PAGE = "previous-page";
+
 class PaginationButtons extends HTMLElement {
   private mainApp = document.querySelector("main-app");
 
@@ -8,6 +11,9 @@ class PaginationButtons extends HTMLElement {
   public constructor() {
     super();
     this.handlePage = this.handlePage.bind(this);
+  }
+
+  public connectedCallback(): void {
     this.handleInitialValue();
   }
 
@@ -55,9 +61,9 @@ class PaginationButtons extends HTMLElement {
       return;
     }
 
-    this.innerHTML = `<button data-event="previous-page" class="btn" id="btn-prev" ${prevPageDisabledState}>Previous page</button>
+    this.innerHTML = `<button data-event="${PREVIOUS_PAGE}" class="btn" id="btn-prev" ${prevPageDisabledState}>Previous page</button>
 <div class="page-count" id="page-count">${currentPage} of ${totalPages}</div>
-<button data-event="next-page" class="btn" id="btn-next" ${nextPageDisabledState}>Next page</button>`;
+<button data-event="${NEXT_PAGE}" class="btn" id="btn-next" ${nextPageDisabledState}>Next page</button>`;
 
     for (const button of this.querySelectorAll("[data-event]")) {
       button.addEventListener("click", handlePage);
@@ -70,13 +76,13 @@ class PaginationButtons extends HTMLElement {
     },
   }: ButtonType): void {
     if (
-      event === "next-page" &&
+      event === NEXT_PAGE &&
       this.currentPage * this.pageSize < this.resultsLength
     ) {
       this.currentPage += 1;
       return;
     }
-    if (event === "previous-page" && this.currentPage > 1) {
+    if (event === PREVIOUS_PAGE && this.currentPage > 1) {
       this.currentPage -= 1;
     }
   }