Initial commit.

1 files changed, 71 insertions, 0 deletions

diff --git a/nucleotide-selector.mjs b/nucleotide-selector.mjs
new file mode 100644
index 0000000..69a94ab
--- /dev/null
+++ b/nucleotide-selector.mjs
@@ -0,0 +1,71 @@
+class NucleotideSelector {
+    constructor(elt) {
+	this.elt = elt
+	for (const elt of this.elt.querySelectorAll('li')) {
+	    elt.addEventListener('click', this.select.bind(this))
+	}
+    }
+
+    get onItemSelected() {
+	if (this._onItemSelected !== undefined) {
+	    return this._onItemSelected
+	}
+	return () => {}
+    }
+
+    set onItemSelected(fn) {
+	this._onItemSelected = fn
+        this._boundWindowResizeHandler =
+            this.windowResizeHandler.bind(this)
+    }
+
+    attach(nucleotide) {
+	this.nucleotide = nucleotide
+
+	this.nucleotide.elt.appendChild(this.elt)
+	this.elt.classList.remove('hidden')
+
+        this.adjustPosition()
+        window.addEventListener('resize', this._boundWindowResizeHandler)
+    }
+
+    detach() {
+	this.elt.classList.add('hidden')
+        window.removeEventListener('resize',
+                                   this._boundWindowResizeHandler)
+    }
+
+    windowResizeHandler() {
+        this.adjustPosition()
+    }
+
+    adjustPosition() {
+	const top =
+	      this.nucleotide.elt.offsetTop +
+	      this.nucleotide.elt.offsetHeight
+	const myWidth =
+	      this.elt.getBoundingClientRect().width
+	const eltLeft =
+	      this.nucleotide.elt.offsetLeft
+	const parentWidth =
+	      this.nucleotide.elt.offsetParent.offsetWidth
+/*
+	this.elt.style.top = `${top}px`
+	if (eltLeft + myWidth > parentWidth) {
+	    this.elt.style.left = 'auto'
+	    this.elt.style.right = '0'
+	} else {
+            this.elt.style.left = `${eltLeft}px`
+	    this.elt.style.right = 'auto'
+	}
+*/
+
+	this.elt.scrollIntoView(false)
+    }
+
+    select(evt) {
+	this.onItemSelected(evt.currentTarget.innerText)
+    }
+}
+
+export default NucleotideSelector