From 9ef6bc302b30ba4fca25d9983ebede4d89112681 Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Mon, 2 Dec 2024 19:28:31 -0500 Subject: [PATCH] quick and dirty space morph thing --- demo/space-morph.html | 60 ++++++++++++++++++++++++++++++++++++ src/folk-space.ts | 72 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+) create mode 100644 demo/space-morph.html create mode 100644 src/folk-space.ts diff --git a/demo/space-morph.html b/demo/space-morph.html new file mode 100644 index 0000000..1a5b3b5 --- /dev/null +++ b/demo/space-morph.html @@ -0,0 +1,60 @@ + + + + + Folk Space Demo + + + + +
+ + + + + + + +
+
+ + + + + + + +
+ + + + + diff --git a/src/folk-space.ts b/src/folk-space.ts new file mode 100644 index 0000000..3d399dc --- /dev/null +++ b/src/folk-space.ts @@ -0,0 +1,72 @@ +import { html } from './common/tags'; + +declare global { + interface HTMLElementTagNameMap { + 'folk-space': FolkSpace; + } +} + +export class FolkSpace extends HTMLElement { + static tagName = 'folk-space'; + + static define() { + customElements.define(this.tagName, this); + } + + constructor() { + super(); + const shadowRoot = this.attachShadow({ mode: 'open' }); + shadowRoot.innerHTML = html` + +
+
+ +
+
+ +
+
+ `; + } + + transition() { + const space = this.shadowRoot?.querySelector('.space'); + space?.classList.toggle('rotate'); + } +}