Place tracker below sort row to avoid dropdown overlap

This commit is contained in:
2026-02-26 00:17:36 +01:00
parent 498616106c
commit c863716537

View File

@@ -299,6 +299,80 @@ function getDirectActionAnchorInPost(postElement, buttonBar) {
return getTrackerInsertionAnchorInPost(postElement, buttonBar);
}
function isNodeAfter(node, referenceNode) {
if (!node || !referenceNode || node === referenceNode) {
return false;
}
return Boolean(referenceNode.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING);
}
function getTopLevelAnchorWithinPost(postElement, element) {
if (!postElement || !element || !postElement.contains(element)) {
return null;
}
let anchor = element;
while (anchor.parentElement && anchor.parentElement !== postElement) {
anchor = anchor.parentElement;
}
return anchor && anchor.parentElement === postElement ? anchor : null;
}
function findCommentSortAnchorInPost(postElement, actionAnchor = null) {
if (!postElement) {
return null;
}
const keywords = ['relevantes zuerst', 'most relevant', 'neueste', 'newest'];
const selectorCandidates = postElement.querySelectorAll([
'[aria-label*="relevantes zuerst" i]',
'[aria-label*="most relevant" i]',
'[aria-label*="neueste" i]',
'[aria-label*="newest" i]'
].join(', '));
const candidates = new Set(selectorCandidates);
postElement.querySelectorAll('[role="button"], button').forEach((node) => {
const text = (node.textContent || '').trim().toLowerCase();
if (text && text.length <= 80 && keywords.some((keyword) => text.includes(keyword))) {
candidates.add(node);
}
});
const anchors = [];
candidates.forEach((candidate) => {
if (!candidate || !isElementVisible(candidate) || candidate.closest('.fb-tracker-ui')) {
return;
}
let anchor = getTopLevelAnchorWithinPost(postElement, candidate) || candidate;
if (anchor === actionAnchor) {
anchor = candidate;
}
if (!anchor || !anchor.parentElement) {
return;
}
if (actionAnchor && anchor !== actionAnchor && !isNodeAfter(anchor, actionAnchor)) {
return;
}
anchors.push(anchor);
});
if (!anchors.length) {
return null;
}
anchors.sort((a, b) => {
if (a === b) {
return 0;
}
return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
});
return anchors[0];
}
const AI_CREDENTIAL_CACHE_TTL = 60 * 1000; // 1 minute cache
const aiCredentialCache = {
data: null,
@@ -3233,8 +3307,6 @@ async function createTrackerUI(postElement, buttonBar, postNum = '?', options =
row-gap: 6px;
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 2;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
`;
@@ -3848,11 +3920,18 @@ async function createTrackerUI(postElement, buttonBar, postNum = '?', options =
}
const directActionAnchor = getDirectActionAnchorInPost(postElement, buttonBar);
const inPostActionAnchor = getTopLevelAnchorWithinPost(postElement, directActionAnchor) || directActionAnchor;
const commentSortAnchor = findCommentSortAnchorInPost(postElement, inPostActionAnchor);
const preferredAnchor = commentSortAnchor || inPostActionAnchor;
// Strategy 1: Insert directly below the actions row
if (!inserted && directActionAnchor && directActionAnchor.parentElement) {
directActionAnchor.parentElement.insertBefore(container, directActionAnchor.nextSibling);
// Strategy 1: Insert below actions; if present, place below the sort row
if (!inserted && preferredAnchor && preferredAnchor.parentElement) {
preferredAnchor.parentElement.insertBefore(container, preferredAnchor.nextSibling);
if (commentSortAnchor) {
console.log('[FB Tracker] Post #' + postNum + ' - UI inserted below comment sort row. ID: #' + container.id);
} else {
console.log('[FB Tracker] Post #' + postNum + ' - UI inserted directly below actions. ID: #' + container.id);
}
inserted = true;
}
// Strategy 2: Insert directly after the detected button bar if still inside the post container
@@ -3900,8 +3979,11 @@ async function createTrackerUI(postElement, buttonBar, postNum = '?', options =
observer.disconnect();
// Try to re-insert
const currentDirectActionAnchor = getDirectActionAnchorInPost(postElement, buttonBar);
if (currentDirectActionAnchor && currentDirectActionAnchor.parentElement) {
currentDirectActionAnchor.parentElement.insertBefore(container, currentDirectActionAnchor.nextSibling);
const currentInPostActionAnchor = getTopLevelAnchorWithinPost(postElement, currentDirectActionAnchor) || currentDirectActionAnchor;
const currentCommentSortAnchor = findCommentSortAnchorInPost(postElement, currentInPostActionAnchor);
const currentPreferredAnchor = currentCommentSortAnchor || currentInPostActionAnchor;
if (currentPreferredAnchor && currentPreferredAnchor.parentElement) {
currentPreferredAnchor.parentElement.insertBefore(container, currentPreferredAnchor.nextSibling);
} else if (buttonBar && buttonBar.parentElement && postElement.contains(buttonBar.parentElement)) {
buttonBar.parentElement.insertBefore(container, buttonBar.nextSibling);
} else if (buttonBar && buttonBar.parentElement && buttonBar.parentElement.parentElement && !postElement.contains(buttonBar.parentElement.parentElement)) {