Add test files
This commit is contained in:
75
tests/javascript.js
Normal file
75
tests/javascript.js
Normal file
@@ -0,0 +1,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`,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user