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
72
73
74
75
|
import { Controller } from "@hotwired/stimulus"
import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom"
export default class extends Controller {
static targets = ["origin", "floatable"]
static values = {
placement: {
type: String,
default: "bottom-start"
},
offset: {
type: Number,
default: 2
},
padding: {
type: Number,
default: 16
}
}
connect() {
this.cleanup = null
if (this.hasFloatableTarget) {
Object.assign(this.floatableTarget.style, {
position: "fixed",
left: "0",
top: "0",
})
}
}
disconnect() {
if (this.cleanup) {
this.cleanup()
this.cleanup = null
}
}
originTargetConnected() {
this.arrange()
}
floatableTargetConnected() {
this.arrange()
}
arrange() {
if (this.hasOriginTarget && this.hasFloatableTarget) {
if (this.cleanup) {
this.cleanup()
this.cleanup = null
return
}
this.cleanup = autoUpdate(this.originTarget, this.floatableTarget, () => {
computePosition(this.originTarget, this.floatableTarget, {
strategy: "fixed",
placement: this.placementValue,
middleware: [
offset(this.offsetValue),
flip(),
shift({ padding: this.paddingValue }),
]
}).then(({x, y }) => {
Object.assign(this.floatableTarget.style, {
left: `${x}px`,
top: `${y}px`,
})
})
})
}
}
}
|
