zenn-embed-elements 0.4.9-alpha.0 → 0.4.9-alpha.1

package/lib/classes/footnote-tooltip.d.ts

@@ -0,0 +1,2 @@
+export declare function initFootnoteTooltip(): void;
+export declare function _resetFootnoteTooltipStateForTest(): void;

package/lib/classes/footnote-tooltip.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initFootnoteTooltip = initFootnoteTooltip;
+exports._resetFootnoteTooltipStateForTest = _resetFootnoteTooltipStateForTest;
+const TOOLTIP_ID = 'zenn-footnote-tooltip';
+const SHOW_DELAY_MS = 150;
+const HIDE_DELAY_MS = 300;
+let initialized = false;
+let tooltip = null;
+let currentRef = null;
+let showTimerId;
+let hideTimerId;
+function cancelShowTimer() {
+    if (showTimerId !== undefined) {
+        window.clearTimeout(showTimerId);
+        showTimerId = undefined;
+    }
+}
+function cancelHideTimer() {
+    if (hideTimerId !== undefined) {
+        window.clearTimeout(hideTimerId);
+        hideTimerId = undefined;
+    }
+}
+function getTooltip() {
+    // SPA のページ遷移等で body ごと差し替えられた場合は作り直す
+    if (tooltip && tooltip.isConnected)
+        return tooltip;
+    tooltip = document.createElement('div');
+    tooltip.id = TOOLTIP_ID;
+    // znc クラスを付けることで CSS 変数とコンテンツスタイルを継承する
+    tooltip.className = 'znc zenn-footnote-tooltip';
+    tooltip.setAttribute('role', 'tooltip');
+    tooltip.hidden = true;
+    tooltip.addEventListener('mouseenter', () => cancelHideTimer());
+    tooltip.addEventListener('mouseleave', () => scheduleHide());
+    document.body.appendChild(tooltip);
+    return tooltip;
+}
+function findFootnoteRef(target) {
+    if (!(target instanceof Element))
+        return null;
+    const ref = target.closest('sup.footnote-ref > a');
+    if (!(ref instanceof HTMLAnchorElement))
+        return null;
+    // ツールチップ内の入れ子の参照は対象外（ポップアップは連鎖させない）
+    if (tooltip && tooltip.contains(ref))
+        return null;
+    // コンテンツ領域（.znc）内の脚注参照のみ対象にする
+    if (!ref.closest('.znc'))
+        return null;
+    return ref;
+}
+function isHttpUrl(str) {
+    try {
+        const url = new URL(str);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+}
+// 埋め込み要素（iframe）はツールチップ内では機能しないため、リンクに置き換える
+function replaceEmbedsWithLinks(fragment, refHref) {
+    fragment.querySelectorAll('.embed-block').forEach((embed) => {
+        var _a;
+        const dataContent = (_a = embed
+            .querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-content');
+        const decoded = (() => {
+            if (!dataContent)
+                return null;
+            try {
+                return decodeURIComponent(dataContent);
+            }
+            catch (_a) {
+                return null;
+            }
+        })();
+        const link = document.createElement('a');
+        if (decoded && isHttpUrl(decoded)) {
+            // card 等の embed-server 系は data-content に元の URL を保持している
+            link.href = decoded;
+            link.textContent = decoded;
+            link.rel = 'noreferrer noopener nofollow';
+            link.target = '_blank';
+        }
+        else {
+            // 元の URL を復元できない埋め込みは脚注へのリンクにする
+            link.href = refHref;
+            link.textContent = '埋め込みコンテンツ';
+        }
+        embed.replaceWith(link);
+    });
+}
+function getFootnoteContent(ref) {
+    var _a, _b;
+    const id = (() => {
+        try {
+            return decodeURIComponent(ref.hash.slice(1));
+        }
+        catch (_a) {
+            // 不正なパーセントエンコードを含む hash は対象外
+            return null;
+        }
+    })();
+    if (!id)
+        return null;
+    const item = document.getElementById(id);
+    if (!item || !item.classList.contains('footnote-item'))
+        return null;
+    const fragment = document.createDocumentFragment();
+    item.childNodes.forEach((node) => {
+        fragment.appendChild(node.cloneNode(true));
+    });
+    // 「↩︎」戻りリンクはツールチップ内では不要
+    fragment.querySelectorAll('.footnote-backref').forEach((el) => el.remove());
+    replaceEmbedsWithLinks(fragment, (_a = ref.getAttribute('href')) !== null && _a !== void 0 ? _a : '');
+    if (!((_b = fragment.textContent) === null || _b === void 0 ? void 0 : _b.trim()))
+        return null;
+    return fragment;
+}
+function positionTooltip(tip, refRect) {
+    const margin = 8;
+    const tipRect = tip.getBoundingClientRect();
+    let left = refRect.left + refRect.width / 2 - tipRect.width / 2;
+    left = Math.min(Math.max(margin, left), window.innerWidth - tipRect.width - margin);
+    // 基本は参照リンクの上側。収まらない場合は下側に反転する
+    let top = refRect.top - tipRect.height - margin;
+    if (top < margin) {
+        top = refRect.bottom + margin;
+    }
+    // 下側でも収まらない場合はビューポート内にクランプする（参照リンクとの重なりを許容）
+    top = Math.max(Math.min(top, window.innerHeight - tipRect.height - margin), margin);
+    tip.style.left = `${left + window.scrollX}px`;
+    tip.style.top = `${top + window.scrollY}px`;
+}
+function show(ref) {
+    const content = getFootnoteContent(ref);
+    if (!content)
+        return;
+    // ツールチップの内容差し替えで ref の位置が影響を受けないよう、先に測っておく
+    const refRect = ref.getBoundingClientRect();
+    hideNow();
+    const tip = getTooltip();
+    tip.replaceChildren(content);
+    tip.hidden = false;
+    positionTooltip(tip, refRect);
+    ref.setAttribute('aria-describedby', TOOLTIP_ID);
+    currentRef = ref;
+}
+function hideNow() {
+    cancelShowTimer();
+    cancelHideTimer();
+    if (currentRef) {
+        currentRef.removeAttribute('aria-describedby');
+        currentRef = null;
+    }
+    if (tooltip) {
+        tooltip.hidden = true;
+    }
+}
+function scheduleHide() {
+    cancelHideTimer();
+    hideTimerId = window.setTimeout(hideNow, HIDE_DELAY_MS);
+}
+function onMouseOver(event) {
+    const ref = findFootnoteRef(event.target);
+    if (!ref)
+        return;
+    // タッチのみのデバイスでは従来のジャンプ動作のままにする
+    if (!window.matchMedia('(hover: hover)').matches)
+        return;
+    cancelHideTimer();
+    if (ref === currentRef)
+        return;
+    cancelShowTimer();
+    showTimerId = window.setTimeout(() => show(ref), SHOW_DELAY_MS);
+}
+function onMouseOut(event) {
+    const ref = findFootnoteRef(event.target);
+    if (!ref)
+        return;
+    cancelShowTimer();
+    if (ref === currentRef)
+        scheduleHide();
+}
+function onFocusIn(event) {
+    const ref = findFootnoteRef(event.target);
+    if (!ref)
+        return;
+    cancelHideTimer();
+    if (ref === currentRef)
+        return;
+    // キーボード利用者には遅延なしで表示する
+    show(ref);
+}
+function onFocusOut(event) {
+    // 参照リンクまたはツールチップ内からのフォーカス喪失のみ対象にする
+    const fromRef = findFootnoteRef(event.target) !== null;
+    const fromTooltip = event.target instanceof Node && !!tooltip && tooltip.contains(event.target);
+    if (!fromRef && !fromTooltip)
+        return;
+    const next = event.relatedTarget;
+    // フォーカス移動先がツールチップ内または参照リンクなら表示を維持する
+    if (next instanceof Node && tooltip && tooltip.contains(next))
+        return;
+    if (findFootnoteRef(next))
+        return;
+    hideNow();
+}
+function onKeyDown(event) {
+    if (event.key !== 'Escape')
+        return;
+    // 表示遅延中なら表示の予約ごと取り消す
+    cancelShowTimer();
+    if (tooltip && !tooltip.hidden)
+        hideNow();
+}
+function initFootnoteTooltip() {
+    if (initialized)
+        return;
+    if (typeof document === 'undefined')
+        return;
+    initialized = true;
+    document.addEventListener('mouseover', onMouseOver);
+    document.addEventListener('mouseout', onMouseOut);
+    document.addEventListener('focusin', onFocusIn);
+    document.addEventListener('focusout', onFocusOut);
+    document.addEventListener('keydown', onKeyDown);
+}
+// テスト用: モジュール内部の状態をリセットする（リスナーの登録は維持される）
+function _resetFootnoteTooltipStateForTest() {
+    hideNow();
+    tooltip = null;
+}

package/lib/index.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const katex_1 = require("./classes/katex");
+const footnote_tooltip_1 = require("./classes/footnote-tooltip");
 customElements.define('embed-katex', katex_1.EmbedKatex);
+(0, footnote_tooltip_1.initFootnoteTooltip)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-embed-elements",
-  "version": "0.4.9-alpha.0",
+  "version": "0.4.9-alpha.1",
   "license": "MIT",
   "description": "Web components for embedded contents.",
   "repository": {
@@ -25,18 +25,20 @@
     "fix": "run-s fix:*",
     "fix:eslint": "eslint . --fix",
     "fix:prettier": "prettier -w .",
-    "test": "echo 'no test yet'"
+    "test": "vitest run"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^25.4.0",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
+    "jsdom": "^29.1.1",
     "rimraf": "^6.0.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2"
+    "typescript-eslint": "^8.46.2",
+    "vitest": "^4.0.6"
   },
-  "gitHead": "735c70321b4c2d139f5512dd19de393a1acfb0e0",
+  "gitHead": "27acfe07149647d15352fe860a931aa781c3a4c1",
   "publishConfig": {
     "access": "public"
   }