feat: Re-implement much simpler tag filter (#9)

assets/index.ts

@@ -5,7 +5,7 @@
 /// <reference lib="deno.ns" />
 
 import "./deps.ts";
-import { bootComponents, Component } from "./ts/components/component.ts";
+import { bootComponents, BaseComponent } from "./ts/components/component.ts";
 import { Observer } from "./ts/components/observer.ts";
 import { NavbarDarkModeSwitcher } from "./ts/global/_navbar_dark_mode_switcher.ts";
 import { removeUrlFlashParameter } from "./ts/global/_remove_url_flash_parameter.ts";
@@ -14,7 +14,7 @@ import { RecipeEditPage } from "./ts/page/recipe_edit_page/recipe_edit_page.ts";
 import { RecipeListPage } from "./ts/page/recipe_list_page/recipe_list_page.ts";
 
 // components
-Component.register("Observer", Observer);
+console.assert(Boolean(Observer));
 bootComponents();
 
 const globals = [

assets/scss/_bootstrap/_index.scss

@@ -38,7 +38,7 @@ $list-group-active-border-color: $secondary;
 @import "../../node_modules/bootstrap/scss/buttons";
 @import "../../node_modules/bootstrap/scss/transitions";
 @import "../../node_modules/bootstrap/scss/dropdown";
-//@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/button-group";
 @import "../../node_modules/bootstrap/scss/nav";
 @import "../../node_modules/bootstrap/scss/navbar";
 @import "../../node_modules/bootstrap/scss/card";

assets/scss/_linked_cards.scss

@@ -5,7 +5,14 @@
     color: inherit;
     transition: bootstrap.$transition-base;
 
-    &:hover {
-        border-color: bootstrap.$primary;
+    &:not(.disabled) {
+        &:hover {
+            border-color: bootstrap.$primary;
+        }
+    }
+
+    .disabled {
+        pointer-events: none;
+        cursor: default;
     }
 }

assets/scss/recipe_list.scss

@@ -23,34 +23,18 @@
 }
 
 #tag-filter {
-    width: 100%;
+    max-height: 300px;
+    padding-right: .75rem;
 
-    .list-group {
-        max-height: calc(100vh - 200px);
-
-        &-item {
-            transition: bootstrap.$transition-base;
-
-            &.active {
-                // fix weird shift when transitioning
-                margin-top: 0;
-                border-top-width: 0;
-            }
-
-            &.disabled {
-                pointer-events: unset;
-                cursor: unset;
-            }
-        }
+    @include bootstrap.media-breakpoint-down('md') {
+        max-height: 600px;
     }
 
-    @include bootstrap.media-breakpoint-up("lg") {
-        & {
-            width: 350px;
-        }
+    .active {
+        background: bootstrap.$primary;
 
-        .list-group {
-            height: 500px;
+        &:hover {
+            color: #fff;
         }
     }
 }

assets/ts/components/component.ts

@@ -1,23 +1,24 @@
 // deno-lint-ignore no-explicit-any
 type Class<S> = new (...args: any[]) => S;
 
-const registry: { [name: string]: Class<Component> } = {};
+const registry: { [name: string]: Class<BaseComponent> } = {};
 const registeredElements: HTMLElement[] = [];
 
-export abstract class Component {
-  protected readonly ctx!: HTMLElement;
-
-  constructor(ctx: HTMLElement) {
-    this.ctx = ctx;
+export function Component(name: string) {
+  return (ctor: Class<BaseComponent>) => {
+    registry[name] = ctor;
   }
+}
 
-  static register(name: string, cmp: Class<Component>) {
-    registry[name] = cmp;
-  }
+export abstract class BaseComponent {
+  static readonly _name: string;
+  protected readonly ctx: HTMLElement;
 
-  abstract mount(): void;
+  protected constructor(ctx: HTMLElement) {
+    this.ctx = ctx;
+  }
 
-  unmount(): void {
+  destructor(): void {
   }
 }
 
@@ -31,13 +32,13 @@ export function bootComponents() {
           throw new Error(`No component with the name ${ctx.dataset.cmp} found.`);
         }
         registeredElements.push(ctx);
-        new cmp(ctx).mount();
+        new cmp(ctx);
       }
     });
   }
 
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initializeComponents);
+    document.addEventListener("DOMContentLoaded", initializeComponents, false);
   } else {
     initializeComponents();
   }

assets/ts/components/observer.ts

@@ -1,24 +1,26 @@
-import { Component } from "./component.ts";
+import { BaseComponent, Component } from "./component.ts";
 
 export const Events = {
   Intersecting: "ObserverIntersecting"
 } as const;
 
-export class Observer extends Component {
+@Component("Observer")
+export class Observer extends BaseComponent {
   private observer?: IntersectionObserver;
 
-  mount() {
+  constructor(ctx: HTMLElement) {
+    super(ctx);
     this.observer = new IntersectionObserver(([entry]) => {
       if (entry && entry.isIntersecting) {
         window.dispatchEvent(new CustomEvent(Events.Intersecting));
-        this.unmount();
+        this.destructor();
       }
     });
 
     this.observer.observe(this.ctx);
   }
 
-  unmount() {
+  destructor() {
     this.observer?.disconnect();
     this.ctx.remove();
   }

assets/ts/page/recipe_list_page/recipe_list_page.ts

@@ -53,7 +53,7 @@ function registerInfiniteScrolling($recipeList: HTMLElement) {
 
 export const RecipeListPage = () => {
   registerOrderByControl();
-  new TagFilter();
+  console.assert(Boolean(TagFilter));
 
   const $recipeList = document.querySelector<HTMLElement>(Selectors.RecipeList);
   if ($recipeList && $recipeList.dataset[Data.InfiniteScrolling] === "true") {