diff --git a/src/content.js b/src/content.js index c3003d2..39b7ba7 100644 --- a/src/content.js +++ b/src/content.js @@ -8,7 +8,7 @@ const DEFAULT_SETTINGS = { const MAX_CONTEXT_LENGTH = 6000; -// State +// States (for later in the code) let overlay = null; let isVisible = false; let lastKnownSelection = null; @@ -16,7 +16,7 @@ let lastKnownRange = null; let scrollTimeout = null; let resizeRAF = null; -// Utility Functions +// helper Functions const getPageContext = () => { const bodyText = document.body.innerText; return bodyText.length > MAX_CONTEXT_LENGTH @@ -34,7 +34,7 @@ const loadSettings = async () => { } }; -// API Functions +// API funcs const queryLLM = async (text) => { const settings = await loadSettings(); const pageContext = getPageContext(); @@ -66,7 +66,7 @@ const queryLLM = async (text) => { return data.choices[0].message.content; }; -// UI Functions +// Overlay/input fields const createOverlay = (text) => { if (overlay) overlay.remove(); @@ -129,13 +129,12 @@ const positionOverlay = () => { top = rect.bottom + scrollY + 5; } - // Keep overlay within horizontal bounds left = Math.max( scrollX + 5, Math.min(left, scrollX + viewportWidth - overlayWidth - 10), ); - // Apply positions + // apply overlay.style.top = `${top}px`; overlay.style.left = `${left}px`; } catch (error) { @@ -143,7 +142,7 @@ const positionOverlay = () => { } }; -// Event Handlers +// Handlers const handleScroll = () => { if (!isVisible) return; @@ -164,9 +163,9 @@ const handleResize = () => { resizeRAF = requestAnimationFrame(positionOverlay); }; -// Initialize Event Listeners window.addEventListener("resize", handleResize, { passive: true }); +// Shitty fix for microsoft forms (they use containers) const attachScrollListeners = () => { // Listen to window scroll window.addEventListener("scroll", handleScroll, { passive: true }); @@ -195,7 +194,7 @@ const attachScrollListeners = () => { element.addEventListener("scroll", handleScroll, { passive: true }); }); - // Handle dynamic content changes + // Handle dynamic content changes (needed for forms after page load) const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.addedNodes.length) { @@ -228,7 +227,6 @@ const attachScrollListeners = () => { }); }; -// Initialize scroll listeners attachScrollListeners(); // Message Handler @@ -274,25 +272,27 @@ function findNearestInput(selectionNode) { ); if (!inputs.length) return null; - + // yes i know this is overkill const selection = window.getSelection(); const range = selection.getRangeAt(0); const rect = range.getBoundingClientRect(); + // calc center point of users selection const selectionX = rect.left + rect.width / 2; const selectionY = rect.top + rect.height / 2; let nearestInput = null; let shortestDistance = Infinity; - + // loop through all available inputs and figure out the shortest one inputs.forEach((input) => { const inputRect = input.getBoundingClientRect(); const inputX = inputRect.left + inputRect.width / 2; const inputY = inputRect.top + inputRect.height / 2; const distance = Math.sqrt( + // do pythagora Math.pow(selectionX - inputX, 2) + Math.pow(selectionY - inputY, 2), ); - + // this could be cleaner but it works as-is if (distance < shortestDistance) { shortestDistance = distance; nearestInput = input; @@ -301,7 +301,7 @@ function findNearestInput(selectionNode) { return nearestInput; } - +// moved to seperate function for cleaner code (it is still a mess) const modifyNearestInput = async () => { const selection = window.getSelection(); const selectedText = selection.toString().trim(); @@ -318,6 +318,7 @@ const modifyNearestInput = async () => { nearestInput.placeholder = "Processing..."; const llmResponse = await queryLLM(selectedText); nearestInput.value = llmResponse; + // replace the placeholder again so we do not interefere with the users ability to solve nearestInput.placeholder = oldPlaceholder; } catch (error) { console.error("Error:", error);