From c8490327417e4ac517879961245266bb7e395afa Mon Sep 17 00:00:00 2001 From: "Elf M. Sternberg" Date: Wed, 15 Feb 2023 15:04:52 -0800 Subject: [PATCH] Removed the clock to its own controller, according to the tutorial. --- package-lock.json | 97 ++++++++++++++++-------------------------- package.json | 1 + src/DominoClock.ts | 21 ++------- src/DominoFace.ts | 4 +- src/PulseController.ts | 46 ++++++++++++++++++++ 5 files changed, 88 insertions(+), 81 deletions(-) create mode 100644 src/PulseController.ts diff --git a/package-lock.json b/package-lock.json index 0eda8dd..29a3a1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2659,18 +2659,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/chokidar/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/ci-info": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz", @@ -3109,9 +3097,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.295", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz", - "integrity": "sha512-lEO94zqf1bDA3aepxwnWoHUjA8sZ+2owgcSZjYQy0+uOSEclJX0VieZC+r+wLpSxUHRd6gG32znTWmr+5iGzFw==", + "version": "1.4.297", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.297.tgz", + "integrity": "sha512-dTXLXBdzfDYnZYq+bLer21HrFsEkzlR2OSIOsR+qroDmhmQU3i4T4KdY0Lcp83ZId3HnWTpPAEfhaJtVxmS/dQ==", "dev": true }, "node_modules/emittery": { @@ -4205,6 +4193,18 @@ "node": ">=4.0" } }, + "node_modules/eslint/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/eslint/node_modules/globals": { "version": "13.20.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", @@ -4433,18 +4433,6 @@ "node": ">=8.6.0" } }, - "node_modules/fast-glob/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -4765,15 +4753,15 @@ } }, "node_modules/glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, "dependencies": { - "is-glob": "^4.0.3" + "is-glob": "^4.0.1" }, "engines": { - "node": ">=10.13.0" + "node": ">= 6" } }, "node_modules/globals": { @@ -11522,17 +11510,6 @@ "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" - }, - "dependencies": { - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "requires": { - "is-glob": "^4.0.1" - } - } } }, "ci-info": { @@ -11880,9 +11857,9 @@ } }, "electron-to-chromium": { - "version": "1.4.295", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz", - "integrity": "sha512-lEO94zqf1bDA3aepxwnWoHUjA8sZ+2owgcSZjYQy0+uOSEclJX0VieZC+r+wLpSxUHRd6gG32znTWmr+5iGzFw==", + "version": "1.4.297", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.297.tgz", + "integrity": "sha512-dTXLXBdzfDYnZYq+bLer21HrFsEkzlR2OSIOsR+qroDmhmQU3i4T4KdY0Lcp83ZId3HnWTpPAEfhaJtVxmS/dQ==", "dev": true }, "emittery": { @@ -12351,6 +12328,15 @@ "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", "dev": true }, + "glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "requires": { + "is-glob": "^4.0.3" + } + }, "globals": { "version": "13.20.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", @@ -12759,17 +12745,6 @@ "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" - }, - "dependencies": { - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "requires": { - "is-glob": "^4.0.1" - } - } } }, "fast-json-stable-stringify": { @@ -13020,12 +12995,12 @@ } }, "glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, "requires": { - "is-glob": "^4.0.3" + "is-glob": "^4.0.1" } }, "globals": { diff --git a/package.json b/package.json index aab14c1..fcdec8f 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "description": "The Domino Clock", "main": "build/index.js", + "type": "module", "scripts": { "analyze": "cem analyze --litelement", "build": "vite build --base='./'", diff --git a/src/DominoClock.ts b/src/DominoClock.ts index ea25f8a..752f24e 100644 --- a/src/DominoClock.ts +++ b/src/DominoClock.ts @@ -1,5 +1,6 @@ import { LitElement, css, html } from "lit"; import { customElement, queryAll } from "lit/decorators.js"; +import PulseController from "./PulseController.ts"; import "./DominoFace.ts"; function times() { @@ -29,12 +30,11 @@ export class DominoClock extends LitElement { @queryAll("domino-face") faces: HTMLCollection; - timer: number; + timer: PulseController; constructor() { super(); - this.timer = 0; - this.paint = this.paint.bind(this); + this.timer = new PulseController(this, 250, this.paint); } paint() { @@ -43,21 +43,6 @@ export class DominoClock extends LitElement { const name = face.getAttribute("name"); face.setAttribute("time", `${update[name]}`); }); - this.timer = window.setTimeout(this.paint, 250); - } - - connectedCallback() { - if (super.connectedCallback) { - super.connectedCallback(); - } - this.timer = window.setTimeout(this.paint, 250); - } - - disconnectedCallback() { - window.clearTimeout(this.timer); - if (super.disconnectedCallback) { - super.disconnectedCallback(); - } } render() { diff --git a/src/DominoFace.ts b/src/DominoFace.ts index eaaf206..93db6df 100644 --- a/src/DominoFace.ts +++ b/src/DominoFace.ts @@ -51,8 +51,8 @@ export class DominoClockface extends LitElement { .dot > div { transition: opacity 0.6s ease; - width: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem)); - height: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem)); + width: var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)); + height: var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)); background-color: var(--dominoclock-dot-color, var(--dominoclock-default-dot-color, #2f4f4f)); border-radius: calc(var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)) / 2); opacity: 0; diff --git a/src/PulseController.ts b/src/PulseController.ts new file mode 100644 index 0000000..facca96 --- /dev/null +++ b/src/PulseController.ts @@ -0,0 +1,46 @@ +import type { ReactiveController, ReactiveControllerHost } from "lit"; + +type Pulse = () => void; + +export class PulseController implements ReactiveController { + host: ReactiveControllerHost; + + interval: number = 0; + + timer: number = 0; + + // eslint-disable-next-line + _onPulse: Pulse = () => undefined; + + constructor(host: ReactiveControllerHost, interval: number = 1000, pulse?: Pulse) { + this.host = host; + this.host.addController(this); + if (pulse) { + this._onPulse = pulse; + } + this.handle = this.handle.bind(this); + this.interval = interval; + } + + hostConnected() { + this.timer = window.setTimeout(this.handle, this.interval); + } + + hostDisconnected() { + if (this.timer !== 0) { + window.clearTimout(this.timer); + } + this.timer = 0; + } + + set onPulse(cb: Pulse) { + this._onPulse = cb; + } + + handle() { + this._onPulse.call(this.host); + this.timer = window.setTimeout(this.handle, this.interval); + } +} + +export default PulseController;