[refactor] Try out some client-side UI librariesHEADmain

1 files changed, 102 insertions, 0 deletions

diff --git a/app/public/note-ponys.html b/app/public/note-ponys.html
new file mode 100644
index 0000000..bcbe7ed
--- /dev/null
+++ b/app/public/note-ponys.html
@@ -0,0 +1,102 @@
+<div class="card-shadow">
+  <div class="card">
+    <!--h3>${note.id}</h3-->
+    <textarea rows=1></textarea>
+  </div>
+</div>
+
+<script setup>
+import { debounce } from "./utils.js";
+import { saveNote } from "./api.js";
+export default class extends HTMLElement {
+  #resizeFn;
+
+  connectedCallback() {
+    const ta = this.$("textarea");
+    ta.value = this.textContent;
+
+    ta.addEventListener("input", debounce(() => { // TODO ensure good debounce behavior
+      saveNote(this.dataset.id, ta.value);
+    }, 500));
+
+    //ta.addEventListener("input", () => this.dispatchEvent(new Event("edit")));
+
+    this.#resizeFn = () => this.resizeTextarea();
+    ta.addEventListener("input", this.#resizeFn);
+    ta.addEventListener("focus", this.#resizeFn);
+    window.addEventListener("resize", this.#resizeFn);
+    setTimeout(this.#resizeFn);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.#resizeFn);
+  }
+
+  resizeTextarea() { // TODO simplify?
+    const cs = this.$(".card-shadow");
+    const ta = this.$("textarea");
+    cs.style.height = (cs.scrollHeight) + "px";
+    ta.style.height = "";
+    ta.style.height = (ta.scrollHeight) + "px";
+    cs.style.height = "";
+  }
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+textarea {
+  font-family: inherit;
+}
+/* TODO :target? */
+.card-shadow {
+  position: relative;
+  margin: 16px auto;
+  max-width: 5.5in;
+  border-radius: 24px;
+  box-shadow: 0 2px 16px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.1);
+  transition: box-shadow .2s;
+}
+.card-shadow:hover,
+.card-shadow:focus-within {
+  box-shadow: 0 2px 16px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15);
+}
+.card-shadow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset;
+  border-radius: 24px;
+  pointer-events: none;
+  transition: box-shadow .2s;
+}
+.card-shadow:hover::after,
+.card-shadow:focus-within::after {
+  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
+}
+.card {
+  /*padding-bottom: 16px;*/
+  border-radius: 24px;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  overflow: hidden;
+}
+
+.card > textarea { /* TODO */
+  display: block;
+  width: 100%;
+  padding: 16px 24px;
+  border: none;
+  resize: none;
+  outline: none;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: .3px;
+  background: transparent;
+  color: inherit;
+}
+</style>