Add TodoMVC with indexedDB storage

experimental/javascript-wc-indexeddb/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules

experimental/javascript-wc-indexeddb/README.md

@@ -0,0 +1,37 @@
+# Speedometer 3.0: TodoMVC: Web Components
+
+## Description
+
+A todoMVC application implemented with native web components.
+It utilizes custom elements and html templates to build reusable components.
+
+In contrast to other workloads, this application uses an updated set of css rules and an optimized dom structure to ensure the application follows best practices in regards to accessibility.
+
+## Built steps
+
+A simple build script copies all necessary files to a `dist` folder.
+It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
+
+```
+npm run build
+```
+
+## Requirements
+
+The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
+
+```
+* Node (min version: 18.13.0)
+* NPM (min version: 8.19.3)
+```
+
+## Local preview
+
+```
+terminal:
+1. npm install
+2. npm run dev
+
+browser:
+1. http://localhost:7005/
+```

experimental/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js

@@ -0,0 +1,158 @@
+import template from "./todo-app.template.js";
+import { useRouter } from "../../hooks/useRouter.js";
+
+import globalStyles from "../../styles/global.constructable.js";
+import appStyles from "../../styles/app.constructable.js";
+import mainStyles from "../../styles/main.constructable.js";
+class TodoApp extends HTMLElement {
+    #isReady = false;
+    #numberOfItems = 0;
+    #numberOfCompletedItems = 0;
+    constructor() {
+        super();
+
+        const node = document.importNode(template.content, true);
+        this.topbar = node.querySelector("todo-topbar");
+        this.list = node.querySelector("todo-list");
+        this.bottombar = node.querySelector("todo-bottombar");
+
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.htmlDirection = document.dir || "ltr";
+        this.setAttribute("dir", this.htmlDirection);
+        this.shadow.adoptedStyleSheets = [globalStyles, appStyles, mainStyles];
+        this.shadow.append(node);
+
+        this.addItem = this.addItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
+        this.removeItem = this.removeItem.bind(this);
+        this.updateItem = this.updateItem.bind(this);
+        this.toggleItems = this.toggleItems.bind(this);
+        this.clearCompletedItems = this.clearCompletedItems.bind(this);
+        this.routeChange = this.routeChange.bind(this);
+        this.moveToNextPage = this.moveToNextPage.bind(this);
+        this.moveToPreviousPage = this.moveToPreviousPage.bind(this);
+
+        this.router = useRouter();
+    }
+
+    get isReady() {
+        return this.#isReady;
+    }
+
+    getInstance() {
+        return this;
+    }
+
+    addItem(event) {
+        const { detail: item } = event;
+        this.list.addItem(item, this.#numberOfItems++);
+        this.update("add-item", item.id);
+    }
+
+    toggleItem(event) {
+        if (event.detail.completed)
+            this.#numberOfCompletedItems++;
+        else
+            this.#numberOfCompletedItems--;
+
+        this.list.toggleItem(event.detail.itemNumber, event.detail.completed);
+        this.update("toggle-item", event.detail.id);
+    }
+
+    removeItem(event) {
+        if (event.detail.completed)
+            this.#numberOfCompletedItems--;
+
+        this.#numberOfItems--;
+        this.update("remove-item", event.detail.id);
+        this.list.removeItem(event.detail.itemNumber);
+    }
+
+    updateItem(event) {
+        this.update("update-item", event.detail.id);
+    }
+
+    toggleItems(event) {
+        this.list.toggleItems(event.detail.completed);
+    }
+
+    clearCompletedItems() {
+        this.list.removeCompletedItems();
+    }
+
+    moveToNextPage() {
+        this.list.moveToNextPage();
+    }
+
+    moveToPreviousPage() {
+        // Skeleton implementation of previous page navigation
+        this.list.moveToPreviousPage().then(() => {
+            this.bottombar.reenablePreviousPageButton();
+            window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
+        });
+    }
+
+    update() {
+        const totalItems = this.#numberOfItems;
+        const completedItems = this.#numberOfCompletedItems;
+        const activeItems = totalItems - completedItems;
+
+        this.list.setAttribute("total-items", totalItems);
+
+        this.topbar.setAttribute("total-items", totalItems);
+        this.topbar.setAttribute("active-items", activeItems);
+        this.topbar.setAttribute("completed-items", completedItems);
+
+        this.bottombar.setAttribute("total-items", totalItems);
+        this.bottombar.setAttribute("active-items", activeItems);
+    }
+
+    addListeners() {
+        this.topbar.addEventListener("toggle-all", this.toggleItems);
+        this.topbar.addEventListener("add-item", this.addItem);
+
+        this.list.listNode.addEventListener("toggle-item", this.toggleItem);
+        this.list.listNode.addEventListener("remove-item", this.removeItem);
+        this.list.listNode.addEventListener("update-item", this.updateItem);
+
+        this.bottombar.addEventListener("clear-completed-items", this.clearCompletedItems);
+        this.bottombar.addEventListener("next-page", this.moveToNextPage);
+        this.bottombar.addEventListener("previous-page", this.moveToPreviousPage);
+    }
+
+    removeListeners() {
+        this.topbar.removeEventListener("toggle-all", this.toggleItems);
+        this.topbar.removeEventListener("add-item", this.addItem);
+
+        this.list.listNode.removeEventListener("toggle-item", this.toggleItem);
+        this.list.listNode.removeEventListener("remove-item", this.removeItem);
+        this.list.listNode.removeEventListener("update-item", this.updateItem);
+
+        this.bottombar.removeEventListener("clear-completed-items", this.clearCompletedItems);
+        this.bottombar.removeEventListener("next-page", this.moveToNextPage);
+        this.bottombar.removeEventListener("previous-page", this.moveToPreviousPage);
+    }
+
+    routeChange(route) {
+        const routeName = route.split("/")[1] || "all";
+        this.list.updateRoute(routeName);
+        this.bottombar.updateRoute(routeName);
+        this.topbar.updateRoute(routeName);
+    }
+
+    connectedCallback() {
+        this.update("connected");
+        this.addListeners();
+        this.router.initRouter(this.routeChange);
+        this.#isReady = true;
+    }
+
+    disconnectedCallback() {
+        this.removeListeners();
+        this.#isReady = false;
+    }
+}
+
+customElements.define("todo-app", TodoApp);
+
+export default TodoApp;

experimental/javascript-wc-indexeddb/dist/components/todo-app/todo-app.template.js

@@ -0,0 +1,14 @@
+const template = document.createElement("template");
+
+template.id = "todo-app-template";
+template.innerHTML = `
+    <section class="app">
+        <todo-topbar></todo-topbar>
+        <main class="main">
+            <todo-list></todo-list>
+        </main>
+        <todo-bottombar></todo-bottombar>
+    </section>
+`;
+
+export default template;

experimental/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.component.js

@@ -0,0 +1,126 @@
+import template from "./todo-bottombar.template.js";
+
+import globalStyles from "../../styles/global.constructable.js";
+import bottombarStyles from "../../styles/bottombar.constructable.js";
+
+const customStyles = new CSSStyleSheet();
+customStyles.replaceSync(`
+
+    .clear-completed-button, .clear-completed-button:active,
+    .todo-status,
+    .filter-list
+     {
+        position: unset;
+        transform: unset;
+    }
+
+    .bottombar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: center;
+        justify-items: center;
+    }
+
+    .bottombar > * {
+        grid-column: span 1;
+    }
+
+    .filter-list {
+        grid-column: span 3;
+    }
+
+     :host([total-items="0"]) > .bottombar {
+        display: none;
+    }
+`);
+
+class TodoBottombar extends HTMLElement {
+    static get observedAttributes() {
+        return ["total-items", "active-items"];
+    }
+
+    constructor() {
+        super();
+
+        const node = document.importNode(template.content, true);
+        this.element = node.querySelector(".bottombar");
+        this.clearCompletedButton = node.querySelector(".clear-completed-button");
+        this.todoStatus = node.querySelector(".todo-status");
+        this.filterLinks = node.querySelectorAll(".filter-link");
+
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.htmlDirection = document.dir || "ltr";
+        this.setAttribute("dir", this.htmlDirection);
+        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, customStyles];
+        this.shadow.append(node);
+
+        this.clearCompletedItems = this.clearCompletedItems.bind(this);
+        this.MoveToNextPage = this.MoveToNextPage.bind(this);
+        this.MoveToPreviousPage = this.MoveToPreviousPage.bind(this);
+    }
+
+    updateDisplay() {
+        this.todoStatus.textContent = `${this["active-items"]} ${this["active-items"] === "1" ? "item" : "items"} left!`;
+    }
+
+    updateRoute(route) {
+        this.filterLinks.forEach((link) => {
+            if (link.dataset.route === route)
+                link.classList.add("selected");
+            else
+                link.classList.remove("selected");
+        });
+    }
+
+    clearCompletedItems() {
+        this.dispatchEvent(new CustomEvent("clear-completed-items"));
+    }
+
+    MoveToNextPage() {
+        this.dispatchEvent(new CustomEvent("next-page"));
+    }
+
+    MoveToPreviousPage() {
+        this.element.querySelector(".previous-page-button").disabled = true;
+        this.dispatchEvent(new CustomEvent("previous-page"));
+    }
+
+    addListeners() {
+        this.clearCompletedButton.addEventListener("click", this.clearCompletedItems);
+        this.element.querySelector(".next-page-button").addEventListener("click", this.MoveToNextPage);
+        this.element.querySelector(".previous-page-button").addEventListener("click", this.MoveToPreviousPage);
+    }
+
+    removeListeners() {
+        this.clearCompletedButton.removeEventListener("click", this.clearCompletedItems);
+        this.getElementById("next-page-button").removeEventListener("click", this.MoveToNextPage);
+        this.getElementById("previous-page-button").removeEventListener("click", this.MoveToPreviousPage);
+    }
+
+    attributeChangedCallback(property, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        this[property] = newValue;
+
+        if (this.isConnected)
+            this.updateDisplay();
+    }
+
+    reenablePreviousPageButton() {
+        this.element.querySelector(".previous-page-button").disabled = false;
+        window.dispatchEvent(new CustomEvent("previous-page-button-enabled", {}));
+    }
+
+    connectedCallback() {
+        this.updateDisplay();
+        this.addListeners();
+    }
+
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+}
+
+customElements.define("todo-bottombar", TodoBottombar);
+
+export default TodoBottombar;

experimental/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.template.js

@@ -0,0 +1,24 @@
+const template = document.createElement("template");
+
+template.id = "todo-bottombar-template";
+template.innerHTML = `
+    <footer class="bottombar">
+        <div class="todo-status"><span class="todo-count">0</span> item left</div>
+        <ul class="filter-list">
+            <li class="filter-item">
+                <a id="filter-link-all" class="filter-link selected" href="#/" data-route="all">All</a>
+            </li>
+            <li class="filter-item">
+                <a id="filter-link-active" class="filter-link" href="#/active" data-route="active">Active</a>
+            </li>
+            <li class="filter-item">
+                <a id="filter-link-completed" class="filter-link" href="#/completed" data-route="completed">Completed</a>
+            </li>
+        </ul>
+        <button id="clear-completed" class="clear-completed-button">Clear completed</button>
+        <button id="previous-page" class="previous-page-button"> Previous </button>
+        <button id="next-page" class="next-page-button"> Next </button>
+    </footer>
+`;
+
+export default template;