blob: 69a94abb6d4370518837c6ff94a15726390109e8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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
|
