fix: picker element highlight during mousemove
All checks were successful
Deploy to dev.bl.pixeldev.eu / deploy (push) Successful in 2s
All checks were successful
Deploy to dev.bl.pixeldev.eu / deploy (push) Successful in 2s
The picker shield overlay was blocking elementFromPoint during mousemove, so the highlight class never got applied to actual page elements. Fix: temporarily set shield visibility:hidden during the elementFromPoint call so the cursor position resolves to the real element underneath. Also enhanced the highlight with a subtle background tint for better visual feedback. Closes #3
This commit is contained in:
parent
838e8dbcb7
commit
9712705f5a
@ -169,7 +169,7 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
|
||||
padding:.6rem 1.1rem; color:#e0e0e0; font-size:.85rem; z-index:200000;
|
||||
font-family:'Segoe UI',system-ui,sans-serif; display:none; box-shadow:0 4px 16px rgba(0,0,0,.5); }
|
||||
#_fb-picker-toast.active { display:block; }
|
||||
._fb-hover-highlight { outline:2px solid #7c9ef5 !important; outline-offset:2px !important; }
|
||||
._fb-hover-highlight { outline:2px solid #7c9ef5 !important; outline-offset:2px !important; background-color:rgba(124,158,245,.08) !important; }
|
||||
\`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
@ -310,9 +310,12 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
|
||||
// Mousemove on page during picker: highlight hovered element
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (!pickerActive) return;
|
||||
// Temporarily hide the shield so elementFromPoint reaches actual page elements
|
||||
shield.style.visibility = 'hidden';
|
||||
var el = document.elementFromPoint(e.clientX, e.clientY);
|
||||
shield.style.visibility = 'visible';
|
||||
// Skip our own UI elements
|
||||
if (!el || el.closest('#_fb-picker-shield') || el.closest('#_fb-picker-toast')) return;
|
||||
if (!el || el.closest('#_fb-picker-toast')) return;
|
||||
if (pickerHighlighted && pickerHighlighted !== el) {
|
||||
pickerHighlighted.classList.remove('_fb-hover-highlight');
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user