From 21e033b45df705aaf3ed5d2cf71a7a838ca04d2b Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Sat, 12 Oct 2024 15:51:37 +0800 Subject: feat: highlight targets when hovering DocLink --- src/dumbyUtils.mjs | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs index 24699b3..a350ee3 100644 --- a/src/dumbyUtils.mjs +++ b/src/dumbyUtils.mjs @@ -198,15 +198,26 @@ export const createGeoLink = (link) => { export const createDocLink = link => { link.classList.add('with-leader-line', 'doclink') link.lines = [] + const label = decodeURIComponent(link.href.split('#')[1]) + const selector = link.title.split('=>')[1] ?? '#' + label link.onmouseover = () => { - const label = decodeURIComponent(link.href.split('#')[1]) - const selector = link.title.split('=>')[1] ?? '#' + label const targets = document.querySelectorAll(selector) targets.forEach(target => { if (!target?.checkVisibility()) return + // highlight selected target + target.dataset.style = target.style.cssText + const rect = target.getBoundingClientRect() + const isTiny = rect.width < 100 || rect.height < 100 + if (isTiny) { + target.style.background = 'lightPink' + } else { + target.style.outline = 'lightPink 6px dashed' + } + + // point to selected target const line = new LeaderLine({ start: link, end: target, @@ -224,6 +235,13 @@ export const createDocLink = link => { link.onmouseout = () => { link.lines.forEach(line => line.remove()) link.lines.length = 0 + + // resume targets from highlight + const targets = document.querySelectorAll(selector) + targets.forEach(target => { + target.style.cssText = target.dataset.style + delete target.dataset.style + }) } } -- cgit v1.2.3-70-g09d2