Hello world

First open source release of Campfire 🎉

app/javascript/lib/autocomplete/custom_elements/suggestion_option.js

@@ -0,0 +1,59 @@
+import { generateUUID, synchronize } from "lib/autocomplete/helpers"
+
+export default class extends HTMLElement {
+  constructor() {
+    super(...arguments)
+    this.flash = synchronize(this.flash)
+  }
+
+  connectedCallback() {
+    this.id ||= `option-${generateUUID()}`
+  }
+
+  get selectElement() {
+    return this.closest("suggestion-select")
+  }
+
+  get index() {
+    if (this.selectElement) {
+      return Array.from(this.selectElement.optionElements).indexOf(this)
+    } else {
+      return null
+    }
+  }
+
+  get selected() {
+    return this.hasAttribute("selected")
+  }
+
+  set selected(value) {
+    if (value) {
+      this.setAttribute("selected", "")
+    } else {
+      this.removeAttribute("selected")
+    }
+  }
+
+  get value() {
+    return this.getAttribute("value")
+  }
+
+  flash(callback) {
+    const drawFrame = (frame = 0) => {
+      requestAnimationFrame(() => {
+        if (frame == 0) {
+          this.classList.add("flashing-off")
+        } else if (frame == 4) {
+          this.classList.remove("flashing-off")
+        }
+
+        if (frame == 7) {
+          callback()
+        } else {
+          drawFrame(frame + 1)
+        }
+      })
+    }
+    drawFrame(0)
+  }
+}

app/javascript/lib/autocomplete/custom_elements/suggestion_select.js

@@ -0,0 +1,44 @@
+export default class extends HTMLElement {
+  connectedCallback() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "listbox")
+  }
+
+  get optionElements() {
+    return this.querySelectorAll("suggestion-option")
+  }
+
+  get selectedIndex() {
+    const selected = this.querySelector("suggestion-option[selected]")
+    return selected?.index
+  }
+
+  set selectedIndex(value) {
+    const optionElements = this.optionElements
+    const optionCount = optionElements.length
+
+    if (!optionElements.length) return
+
+    Array.from(optionElements).forEach(option => {
+      option.selected = false
+    })
+
+    if (value === null || typeof value === "undefined") return
+
+    const index = Math.max(0, Math.min(optionCount - 1, parseInt(value, 10)))
+    optionElements[index].selected = true
+  }
+
+  get selectedOption() {
+    return this.optionElements[this.selectedIndex]
+  }
+
+  set selectedOption(option) {
+    if (option.selectElement === this) {
+      this.selectedIndex = option.index
+    }
+  }
+
+  get value() {
+    return this.selectedOption?.value
+  }
+}