From f9e2bdfd8285107572a356646b0a70d5a03136e7 Mon Sep 17 00:00:00 2001 From: Tommaso Negri Date: Fri, 5 Dec 2025 17:50:04 +0100 Subject: Add test files --- tests/javascript.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 tests/javascript.js (limited to 'tests/javascript.js') diff --git a/tests/javascript.js b/tests/javascript.js new file mode 100644 index 0000000..8a3e8a8 --- /dev/null +++ b/tests/javascript.js @@ -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`, + }) + }) + }) + } + } +} -- cgit v1.2.3