elf
/
dominoclock
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed the clock to its own controller, according to the tutorial.

This commit is contained in:
Elf M. Sternberg 2023-02-15 15:04:52 -08:00
parent 55e425dd85
commit c849032741
5 changed files with 88 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
package-lock.json generated
View File

@ -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": {

1
package.json
View File

@ -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='./'",

21
src/DominoClock.ts
View File

@ -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() {

4
src/DominoFace.ts
View File

@ -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;

46
src/PulseController.ts Normal file
View File

@ -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;