-
-
Notifications
You must be signed in to change notification settings - Fork 1
Fix/toolbar audit highlighting #169
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
cbc4305
feat: add highlight helpers and improve audit highlighting logic
dermatz 5c4b656
fix: update toolbar active state styling for better visibility
dermatz fd4fd38
fix: enhance audit highlighting for image elements and parent containers
dermatz 4bf3177
fix: replace image parent background with fixed overlay for visibility
dermatz 0ea5140
fix: improve overlay cleanup for disconnected image elements
dermatz 4d02bf3
fix: improve overlay management for image elements in audits
dermatz cb5c9b7
fix: optimize overlay management and event handling for audits
dermatz File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| /** | ||
| * MageForge Toolbar – Shared highlight helpers | ||
| * | ||
| * Audits that mark elements by adding a CSS class use these two helpers | ||
| * instead of duplicating the same logic. The CSS class is derived from the | ||
| * audit key: `mageforge-audit-<key>`. | ||
| */ | ||
|
|
||
| const OVERLAY_CLASS = 'mageforge-audit-img-overlay'; | ||
|
|
||
| /** | ||
| * Module-level registry: tracks one overlay cleanup function per <img> | ||
| * element and the set of audit keys currently relying on that overlay. | ||
| * Using a WeakMap means entries are automatically eligible for GC once | ||
| * the image node itself is collected. | ||
| * | ||
| * @type {WeakMap<HTMLImageElement, { cleanup: function, keys: Set<string> }>} | ||
| */ | ||
| const imgOverlayRegistry = new WeakMap(); | ||
|
|
||
| /** | ||
| * Creates a fixed-position overlay <span> that tracks an <img> element's | ||
| * position in the viewport. Updates on scroll (all containers) and resize. | ||
| * Returns a cleanup function that removes the overlay and all listeners. | ||
| * | ||
| * @param {HTMLImageElement} img | ||
| * @returns {function} cleanup | ||
| */ | ||
| function createImgOverlay(img) { | ||
| const overlay = document.createElement('span'); | ||
| overlay.className = OVERLAY_CLASS; | ||
| document.body.appendChild(overlay); | ||
|
|
||
| function update() { | ||
| if (!img.isConnected) { | ||
| cleanup(); | ||
| imgOverlayRegistry.delete(img); | ||
| return; | ||
| } | ||
| const rect = img.getBoundingClientRect(); | ||
| overlay.style.top = `${rect.top}px`; | ||
| overlay.style.left = `${rect.left}px`; | ||
| overlay.style.width = `${rect.width}px`; | ||
| overlay.style.height = `${rect.height}px`; | ||
| } | ||
|
dermatz marked this conversation as resolved.
|
||
|
|
||
| update(); | ||
|
|
||
| // ResizeObserver on <html> catches both window resize and layout shifts | ||
| const ro = new ResizeObserver(update); | ||
| ro.observe(document.documentElement); | ||
|
|
||
| // capture: true catches scroll events from any scrollable container | ||
| window.addEventListener('scroll', update, { passive: true, capture: true }); | ||
|
|
||
|
dermatz marked this conversation as resolved.
Outdated
dermatz marked this conversation as resolved.
Outdated
|
||
| // Named function so update() can reference it via hoisting. | ||
| // ro is always assigned before cleanup() is ever invoked (the initial | ||
| // update() call only triggers cleanup() when img.isConnected is false, | ||
| // which cannot happen at construction time). | ||
| function cleanup() { | ||
| ro.disconnect(); | ||
| window.removeEventListener('scroll', update, { capture: true }); | ||
| overlay.remove(); | ||
| } | ||
|
|
||
| return cleanup; | ||
| } | ||
|
|
||
| /** | ||
| * Removes the highlight class from all previously marked elements and | ||
| * destroys any associated image overlays. | ||
| * | ||
| * @param {string} key - Audit key (e.g. 'images-without-alt') | ||
| */ | ||
| export function clearHighlight(key) { | ||
| const cls = `mageforge-audit-${key}`; | ||
| document.querySelectorAll(`.${cls}`).forEach(el => { | ||
| el.classList.remove(cls); | ||
| if (el.tagName === 'IMG') { | ||
| const entry = imgOverlayRegistry.get(el); | ||
| if (entry) { | ||
| entry.keys.delete(key); | ||
| if (entry.keys.size === 0) { | ||
| entry.cleanup(); | ||
| imgOverlayRegistry.delete(el); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Highlights a set of elements by adding the audit CSS class, scrolls to the | ||
| * first result, and updates the counter badge on the toolbar menu item. | ||
| * | ||
| * For <img> elements a fixed-position overlay is injected so the red | ||
| * background is visible regardless of parent overflow or border-radius. | ||
| * | ||
| * @param {Element[]} elements - Elements to mark | ||
| * @param {string} key - Audit key (e.g. 'images-without-alt') | ||
| * @param {object} context - Alpine toolbar component instance | ||
| */ | ||
| export function applyHighlight(elements, key, context) { | ||
| if (elements.length === 0) { | ||
| context.setAuditCounterBadge(key, '0', 'success'); | ||
| return; | ||
| } | ||
| const cls = `mageforge-audit-${key}`; | ||
| elements.forEach(el => { | ||
| el.classList.add(cls); | ||
| if (el.tagName === 'IMG') { | ||
| const existing = imgOverlayRegistry.get(el); | ||
| if (existing) { | ||
| existing.keys.add(key); | ||
| } else { | ||
| imgOverlayRegistry.set(el, { | ||
| cleanup: createImgOverlay(el), | ||
| keys: new Set([key]), | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
|
dermatz marked this conversation as resolved.
|
||
| elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' }); | ||
| context.setAuditCounterBadge(key, `${elements.length}`, 'error'); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.