QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 03:54:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

PWA: DS::Menu - Place below button and center (#291)

Browse Source 
* PWA: Floating Menu - Place below button and center

* PWA: menu_controller.js: null safety checks
This commit is contained in:
Dylan Corrales
2025-11-08 07:50:42 -05:00
committed by GitHub
parent e065c98396
commit b533a9b9b7
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/DS/menu_controller.js
View File

@@ -1,7 +1,6 @@
import {
autoUpdate,
computePosition,
flip,
offset,
shift,
} from "@floating-ui/dom";
@@ -103,15 +102,30 @@ export default class extends Controller {
}
update() {
if (!this.buttonTarget || !this.contentTarget) return;
const isSmallScreen = !window.matchMedia("(min-width: 768px)").matches;
computePosition(this.buttonTarget, this.contentTarget, {
placement: this.placementValue,
middleware: [offset(this.offsetValue), flip(), shift({ padding: 5 })],
placement: isSmallScreen ? "bottom" : this.placementValue,
middleware: [offset(this.offsetValue), shift({ padding: 5 })],
strategy: "fixed",
}).then(({ x, y }) => {
Object.assign(this.contentTarget.style, {
position: "fixed",
left: `${x}px`,
top: `${y}px`,
});
if (isSmallScreen) {
Object.assign(this.contentTarget.style, {
position: "fixed",
left: "0px",
width: "100vw",
top: `${y}px`,
});
} else {
Object.assign(this.contentTarget.style, {
position: "fixed",
left: `${x}px`,
top: `${y}px`,
width: "",
});
}
});
}
}