fix overflowing ops lists and popup positioning

This commit is contained in:
Stewart Allen 2025-10-12 19:23:28 -04:00
commit d7acc93872
3 changed files with 26 additions and 19 deletions

View file

@ -320,6 +320,7 @@ export function opRender() {
el.classList.add("disabled");
}
bounds.push(el);
let parent = $('camops');
let timer = null;
let inside = true;
let popped = false;
@ -329,14 +330,14 @@ export function opRender() {
}
el.rec = rec;
el.unpop = () => {
let pos = [...el.childNodes].indexOf(poprec.div);
let pos = [...parent.childNodes].indexOf(poprec.div);
if (pos >= 0) {
el.removeChild(poprec.div);
parent.removeChild(poprec.div);
}
popped = false;
};
function onEnter(ev) {
if ((surfaceOn || traceOn) && env.poppedRec != rec) {
if ((clock || surfaceOn || traceOn) && env.poppedRec != rec) {
return;
}
if (popped && env.poppedRec != rec) {
@ -351,22 +352,24 @@ export function opRender() {
popped = true;
poprec.use(rec);
env.hoveredOp = el;
if (!clock) {
// offset Y position of pop div by % of Y screen location of button
el.appendChild(poprec.div);
poprec.addNote();
const { innerHeight } = window;
const brect = ev.target.getBoundingClientRect();
const prect = poprec.div.getBoundingClientRect();
const pcty = (brect.top / innerHeight) * 0.9;
const offpx = -pcty * prect.height;
poprec.div.style.transform = `translateY(${offpx}px)`;
}
// offset Y position of pop div by % of Y screen location of button
parent.appendChild(poprec.div);
poprec.addNote();
const { innerHeight } = window;
const brect = ev.target.getBoundingClientRect();
const prect = parent.getBoundingClientRect();
const Prect = poprec.div.getBoundingClientRect();
const tdiff = prect.top - brect.top;
const botoff = innerHeight - (brect.top + Prect.height);
const offpx = -tdiff + (botoff < 0 ? botoff : -Prect.height/3);
poprec.div.style.transform = `translateY(${offpx}px)`;
poprec.div.onmouseenter = () => { inside = true };
poprec.div.onmouseleave = onLeave;
// option click event appears latent
// and overides the sticky settings
setTimeout(() => {
UC.setSticky(false);
}, 0);
}, 10);
}
function onLeave(ev) {
inside = false;

View file

@ -1375,12 +1375,16 @@ details[open] summary::after {
}
#camops {
display: flex;
padding: 5px 0 0 0;
padding: 0 0 0 0;
}
#oplist {
max-height: 70vh;
/* overflow-y: auto; */
min-height: 0;
overflow-y: auto;
padding-top: 1px;
}
.cam-pop-op {
top: 50%;
top: 0;
right: calc(100% + 4px);
text-align: left;
position: absolute;

View file

@ -420,7 +420,7 @@
<div class="set2-group f-col mode-cam">
<div class="set-header mode-cam"><a>operation list</a></div>
<div id="camops" class="f-col a-stretch grow">
<div id="oplist" class="f-col j-center"></div>
<div id="oplist" class="f-col"></div>
<div id="op-add" class="opdiv">
<i class="fas fa-plus"></i>
<div id="op-add-pop" class="f-col">