IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Add placement: center option to float-kit (#26830)

Browse Source 
Implements this custom placement strategy: https://floating-ui.com/docs/offset#creating-custom-placements
This commit is contained in:
Jarek Radosz 2024-05-01 12:12:00 +02:00 committed by GitHub
parent b39736a167
commit c97d58f377
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/javascripts/float-kit/addon/lib/update-position.js
View File

@ -12,6 +12,10 @@ import domFromString from "discourse-common/lib/dom-from-string";
import { iconHTML } from "discourse-common/lib/icon-library";
import { FLOAT_UI_PLACEMENTS } from "float-kit/lib/constants";
const centerOffset = offset(({ rects }) => {
return -rects.reference.height / 2 - rects.floating.height / 2;
});
export async function updatePosition(trigger, content, options) {
let padding = 0;
if (!isTesting()) {
@ -28,17 +32,22 @@ export async function updatePosition(trigger, content, options) {
padding,
};
const middleware = [
offset(options.offset ? parseInt(options.offset, 10) : 10),
];
const middleware = [];
const isCentered = options.placement === "center";
if (options.inline) {
middleware.push(inline());
if (isCentered) {
middleware.push(centerOffset);
} else {
middleware.push(offset(options.offset ? parseInt(options.offset, 10) : 10));
if (options.inline) {
middleware.push(inline());
}
middleware.push(flip(flipOptions));
middleware.push(shift({ padding }));
}
middleware.push(flip(flipOptions));
middleware.push(shift({ padding }));
let arrowElement;
if (options.arrow) {
arrowElement = content.querySelector(".arrow");
@ -59,7 +68,7 @@ export async function updatePosition(trigger, content, options) {
trigger,
content,
{
placement: options.placement,
placement: isCentered ? "bottom" : options.placement,
strategy: options.strategy || "absolute",
middleware,
}