52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
|
import {
|
||
|
|
computePosition,
|
||
|
|
offset,
|
||
|
|
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';
|
||
|
|
|
||
|
|
const centerOffset = offset(({rects}) => {
|
||
|
|
return -rects.reference.height / 2 - rects.floating.height / 2;
|
||
|
|
});
|
||
|
|
|
||
|
|
function open_new_transaction_pane() {
|
||
|
|
let center = document.querySelector("#main-body-content");
|
||
|
|
let new_tp = document.querySelector("#new_transaction_pane");
|
||
|
|
|
||
|
|
new_tp.style.opacity = "1";
|
||
|
|
|
||
|
|
let center_width = center.offsetWidth;
|
||
|
|
center_width = center_width - (center_width / 10);
|
||
|
|
new_tp.style.width = center_width + "px";
|
||
|
|
|
||
|
|
computePosition(center, new_tp, {
|
||
|
|
placement: "bottom",
|
||
|
|
middleware: [
|
||
|
|
centerOffset,
|
||
|
|
],
|
||
|
|
}).then(({x, y}) => {
|
||
|
|
Object.assign(new_tp.style, {
|
||
|
|
left: `${x}px`,
|
||
|
|
top: `${y}px`,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function close_new_transaction_pane() {
|
||
|
|
let right_column = document.querySelector("#right-col");
|
||
|
|
let new_tp = document.querySelector("#new_transaction_pane");
|
||
|
|
new_tp.style.opacity = "0";
|
||
|
|
computePosition(right_column, new_tp, {
|
||
|
|
placement: "right",
|
||
|
|
middleware: [
|
||
|
|
offset(40),
|
||
|
|
],
|
||
|
|
}).then(({x, y}) => {
|
||
|
|
Object.assign(new_tp.style, {
|
||
|
|
left: `${x}px`,
|
||
|
|
top: `${y}px`,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export {open_new_transaction_pane, close_new_transaction_pane}
|