tactile-odometer 1.0.1 → 1.1.0

package/README.md

@@ -11,7 +11,7 @@ Vanilla ES module and CSS, no dependencies, no build step. MIT.
 
 **[Play with it →](https://tactile-ui.me/objects/odometer)**
 
-<!-- demo gif: 1,099 → 1,100, then +37 -->
+![1,099 rolling to 1,100: the last three drums carry together](demo.gif)
 
 ## Install
 
@@ -51,6 +51,20 @@ Or straight from a CDN:
 It works in React, Vue, Svelte or anything else that can hand it an element:
 create it in an effect or `onMount`, call `destroy()` on unmount.
 
+### As a custom element
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tactile-odometer/odometer.css">
+<script type="module" src="https://cdn.jsdelivr.net/npm/tactile-odometer/element.mjs"></script>
+
+<tactile-odometer value="1099" digits="4" finish="brass" style="width:480px;height:160px"></tactile-odometer>
+```
+
+Every option below is an attribute of the same name (`maxSpin` is `max-spin`).
+Set `el.value = 1100` or the `value` attribute to roll it; `el.odometer` is the
+Odometer itself. It's made when the element joins the page and destroyed when
+it leaves.
+
 ### Options
 
 | Option | Default | What it does |

package/element.mjs

@@ -0,0 +1,60 @@
+/**
+ * <tactile-odometer>: the Odometer as a custom element, for plain HTML,
+ * Angular, Astro, Rails or anything else that renders elements.
+ *
+ *   <script type="module" src="tactile-odometer/element.mjs"></script>
+ *   <tactile-odometer value="1099" digits="4" style="width:480px;height:160px"></tactile-odometer>
+ *
+ *   el.value = 1100;          // or el.setAttribute('value', 1100): rolls, and carries
+ *   el.odometer.count(1);     // the Odometer itself, for anything else
+ *
+ * Every option is an attribute of the same name (see the README). Numbers are
+ * read as numbers; grouping, zeros, sound and announce are true unless set to
+ * "false". The counter is made when the element joins the page and destroyed
+ * when it leaves. The stylesheet is still yours to load.
+ */
+import Odometer from './odometer.mjs';
+
+const NUMBERS = ['decimals', 'digits', 'stiffness', 'damping', 'maxSpin', 'count', 'wear', 'light', 'size'];
+const STRINGS = ['prefix', 'suffix', 'locale', 'finish', 'red', 'bezel', 'label'];
+const BOOLEANS = ['grouping', 'zeros', 'sound', 'announce'];
+// Attributes are lower-cased by HTML, so maxSpin is written max-spin.
+const attr = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+export class TactileOdometer extends HTMLElement {
+  static observedAttributes = ['value', ...[...NUMBERS, ...STRINGS, ...BOOLEANS].map(attr)];
+  #odometer = null;
+
+  /** The Odometer inside, once the element is on the page. */
+  get odometer() { return this.#odometer; }
+  get value() { return this.#odometer?.value ?? Number(this.getAttribute('value') ?? 0); }
+  set value(v) { this.setAttribute('value', String(v)); }
+
+  #options() {
+    const o = {};
+    for (const k of NUMBERS) if (this.hasAttribute(attr(k))) o[k] = k === 'size' && this.getAttribute('size') === 'fit' ? 'fit' : Number(this.getAttribute(attr(k)));
+    for (const k of STRINGS) if (this.hasAttribute(attr(k))) o[k] = this.getAttribute(attr(k));
+    for (const k of BOOLEANS) if (this.hasAttribute(attr(k))) o[k] = this.getAttribute(attr(k)) !== 'false';
+    return o;
+  }
+
+  connectedCallback() {
+    if (this.#odometer) return;
+    if (!this.style.display) this.style.display = 'block';
+    this.#odometer = new Odometer(this, { ...this.#options(), value: Number(this.getAttribute('value') ?? 0) });
+  }
+
+  disconnectedCallback() {
+    this.#odometer?.destroy();
+    this.#odometer = null;
+  }
+
+  attributeChangedCallback(name, old, value) {
+    if (!this.#odometer || old === value) return;
+    if (name === 'value') this.#odometer.setValue(Number(value));
+    else this.#odometer.update(this.#options());
+  }
+}
+
+if (!customElements.get('tactile-odometer')) customElements.define('tactile-odometer', TactileOdometer);
+export default TactileOdometer;

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "tactile-odometer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A mechanical drum counter for the web that carries like the real thing: 1,099 to 1,100 rolls three drums together. Vanilla JS, no dependencies.",
   "type": "module",
   "main": "./odometer.mjs",
   "exports": {
     ".": "./odometer.mjs",
     "./odometer.css": "./odometer.css",
-    "./big-shoulders-bold.woff2": "./big-shoulders-bold.woff2"
+    "./big-shoulders-bold.woff2": "./big-shoulders-bold.woff2",
+    "./element": "./element.mjs"
   },
   "files": [
     "odometer.mjs",
+    "element.mjs",
     "odometer.css",
     "big-shoulders-bold.woff2",
     "BigShoulders-OFL.txt",
@@ -30,7 +32,9 @@
     "ticker",
     "drum-counter",
     "vanilla-js",
-    "no-dependencies"
+    "no-dependencies",
+    "custom-element",
+    "web-component"
   ],
   "license": "MIT",
   "author": "Ciprian Titire (https://titi.re)",