Removed the clock to its own controller, according to the tutorial.
This commit is contained in:
parent
55e425dd85
commit
c849032741
|
@ -2659,18 +2659,6 @@
|
||||||
"fsevents": "~2.3.2"
|
"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": {
|
"node_modules/ci-info": {
|
||||||
"version": "3.8.0",
|
"version": "3.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
|
||||||
|
@ -3109,9 +3097,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/electron-to-chromium": {
|
"node_modules/electron-to-chromium": {
|
||||||
"version": "1.4.295",
|
"version": "1.4.297",
|
||||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz",
|
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.297.tgz",
|
||||||
"integrity": "sha512-lEO94zqf1bDA3aepxwnWoHUjA8sZ+2owgcSZjYQy0+uOSEclJX0VieZC+r+wLpSxUHRd6gG32znTWmr+5iGzFw==",
|
"integrity": "sha512-dTXLXBdzfDYnZYq+bLer21HrFsEkzlR2OSIOsR+qroDmhmQU3i4T4KdY0Lcp83ZId3HnWTpPAEfhaJtVxmS/dQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/emittery": {
|
"node_modules/emittery": {
|
||||||
|
@ -4205,6 +4193,18 @@
|
||||||
"node": ">=4.0"
|
"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": {
|
"node_modules/eslint/node_modules/globals": {
|
||||||
"version": "13.20.0",
|
"version": "13.20.0",
|
||||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
|
"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
|
||||||
|
@ -4433,18 +4433,6 @@
|
||||||
"node": ">=8.6.0"
|
"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": {
|
"node_modules/fast-json-stable-stringify": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
|
"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": {
|
"node_modules/glob-parent": {
|
||||||
"version": "6.0.2",
|
"version": "5.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||||
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
|
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-glob": "^4.0.3"
|
"is-glob": "^4.0.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10.13.0"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/globals": {
|
"node_modules/globals": {
|
||||||
|
@ -11522,17 +11510,6 @@
|
||||||
"is-glob": "~4.0.1",
|
"is-glob": "~4.0.1",
|
||||||
"normalize-path": "~3.0.0",
|
"normalize-path": "~3.0.0",
|
||||||
"readdirp": "~3.6.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": {
|
"ci-info": {
|
||||||
|
@ -11880,9 +11857,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"electron-to-chromium": {
|
"electron-to-chromium": {
|
||||||
"version": "1.4.295",
|
"version": "1.4.297",
|
||||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz",
|
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.297.tgz",
|
||||||
"integrity": "sha512-lEO94zqf1bDA3aepxwnWoHUjA8sZ+2owgcSZjYQy0+uOSEclJX0VieZC+r+wLpSxUHRd6gG32znTWmr+5iGzFw==",
|
"integrity": "sha512-dTXLXBdzfDYnZYq+bLer21HrFsEkzlR2OSIOsR+qroDmhmQU3i4T4KdY0Lcp83ZId3HnWTpPAEfhaJtVxmS/dQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"emittery": {
|
"emittery": {
|
||||||
|
@ -12351,6 +12328,15 @@
|
||||||
"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
|
"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
|
||||||
"dev": true
|
"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": {
|
"globals": {
|
||||||
"version": "13.20.0",
|
"version": "13.20.0",
|
||||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
|
"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
|
||||||
|
@ -12759,17 +12745,6 @@
|
||||||
"glob-parent": "^5.1.2",
|
"glob-parent": "^5.1.2",
|
||||||
"merge2": "^1.3.0",
|
"merge2": "^1.3.0",
|
||||||
"micromatch": "^4.0.4"
|
"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": {
|
"fast-json-stable-stringify": {
|
||||||
|
@ -13020,12 +12995,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"glob-parent": {
|
"glob-parent": {
|
||||||
"version": "6.0.2",
|
"version": "5.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||||
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
|
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"is-glob": "^4.0.3"
|
"is-glob": "^4.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "The Domino Clock",
|
"description": "The Domino Clock",
|
||||||
"main": "build/index.js",
|
"main": "build/index.js",
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"analyze": "cem analyze --litelement",
|
"analyze": "cem analyze --litelement",
|
||||||
"build": "vite build --base='./'",
|
"build": "vite build --base='./'",
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { LitElement, css, html } from "lit";
|
import { LitElement, css, html } from "lit";
|
||||||
import { customElement, queryAll } from "lit/decorators.js";
|
import { customElement, queryAll } from "lit/decorators.js";
|
||||||
|
import PulseController from "./PulseController.ts";
|
||||||
import "./DominoFace.ts";
|
import "./DominoFace.ts";
|
||||||
|
|
||||||
function times() {
|
function times() {
|
||||||
|
@ -29,12 +30,11 @@ export class DominoClock extends LitElement {
|
||||||
|
|
||||||
@queryAll("domino-face") faces: HTMLCollection;
|
@queryAll("domino-face") faces: HTMLCollection;
|
||||||
|
|
||||||
timer: number;
|
timer: PulseController;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.timer = 0;
|
this.timer = new PulseController(this, 250, this.paint);
|
||||||
this.paint = this.paint.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
paint() {
|
paint() {
|
||||||
|
@ -43,21 +43,6 @@ export class DominoClock extends LitElement {
|
||||||
const name = face.getAttribute("name");
|
const name = face.getAttribute("name");
|
||||||
face.setAttribute("time", `${update[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() {
|
render() {
|
||||||
|
|
|
@ -51,8 +51,8 @@ export class DominoClockface extends LitElement {
|
||||||
|
|
||||||
.dot > div {
|
.dot > div {
|
||||||
transition: opacity 0.6s ease;
|
transition: opacity 0.6s ease;
|
||||||
width: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
|
width: var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem));
|
||||||
height: var(--dominoclock-date-size, var(--dominoclock-default-date-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));
|
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);
|
border-radius: calc(var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)) / 2);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue