「MediaWiki:Forum.js」の版間の差分

546行目:

});

}

// ========== レスホバープレビュー ==========

// >>>N のリンクにマウスを乗せると該当投稿をポップアップ表示する

(() => {

// ポップアップ用の浮動div（ページに1つだけ作成）

const popup = document.createElement('div');

popup.id = 'f-hover-popup';

popup.style.cssText = [

'position:fixed',

'z-index:9999',

'max-width:480px',

'min-width:200px',

'background:#fff',

'border:2px solid #BBBBBB',

'border-radius:3px',

'box-shadow:2px 4px 12px rgba(0,0,0,.2)',

'pointer-events:none', // ポップアップ自体はマウスイベントを無視

'display:none',

'font-size:.9em',

'line-height:1.4',

].join(';');

document.body.appendChild(popup);

let hideTimer = null;

const showPopup = (anchorEl, postId) => {

const target = document.querySelector(`#post-${postId}`);

if (!target) return;

// 対象投稿をクローンしてポップアップに表示

// 編集・削除リンクは除いてすっきり見せる

const clone = target.cloneNode(true);

clone.querySelectorAll('a[href*="fedit"], span[style*="#d33"]').forEach(el => el.remove());

popup.innerHTML = '';

popup.appendChild(clone);

// ポップアップの位置をリンクの近くに配置

const rect = anchorEl.getBoundingClientRect();

const popupHeight = 200; // 表示前は高さ不明なので仮値

const spaceBelow = window.innerHeight - rect.bottom;

const top = spaceBelow > popupHeight

? rect.bottom + 4 // 下に余裕あり → リンクの下

: rect.top - popupHeight; // 余裕なし → リンクの上

popup.style.left = Math.min(rect.left, window.innerWidth - 500) + 'px';

popup.style.top = Math.max(4, top) + 'px';

popup.style.display = 'block';

};

const hidePopup = () => {

popup.style.display = 'none';

};

// >>>N リンクにホバーイベントを設定

document.querySelectorAll('.f-content a[href^="#post-"]').forEach(link => {

const postId = link.getAttribute('href').replace('#post-', '');

link.addEventListener('mouseenter', () => {

clearTimeout(hideTimer);

showPopup(link, postId);

});

link.addEventListener('mouseleave', () => {

// 少し遅延させてチラつきを防ぐ

hideTimer = setTimeout(hidePopup, 100);

});

})();

// ==========================================

}

} // end startForum

@@ 546行目: / 546行目: @@
                          });
                      }
+                    // ========== レスホバープレビュー ==========
+                    // >>>N のリンクにマウスを乗せると該当投稿をポップアップ表示する
+                    (() => {
+                        // ポップアップ用の浮動div（ページに1つだけ作成）
+                        const popup = document.createElement('div');
+                        popup.id = 'f-hover-popup';
+                        popup.style.cssText = [
+                            'position:fixed',
+                            'z-index:9999',
+                            'max-width:480px',
+                            'min-width:200px',
+                            'background:#fff',
+                            'border:2px solid #BBBBBB',
+                            'border-radius:3px',
+                            'box-shadow:2px 4px 12px rgba(0,0,0,.2)',
+                            'pointer-events:none',   // ポップアップ自体はマウスイベントを無視
+                            'display:none',
+                            'font-size:.9em',
+                            'line-height:1.4',
+                        ].join(';');
+                        document.body.appendChild(popup);
+                        let hideTimer = null;
+                        const showPopup = (anchorEl, postId) => {
+                            const target = document.querySelector(`#post-${postId}`);
+                            if (!target) return;
+                            // 対象投稿をクローンしてポップアップに表示
+                            // 編集・削除リンクは除いてすっきり見せる
+                            const clone = target.cloneNode(true);
+                            clone.querySelectorAll('a[href*="fedit"], span[style*="#d33"]').forEach(el => el.remove());
+                            popup.innerHTML = '';
+                            popup.appendChild(clone);
+                            // ポップアップの位置をリンクの近くに配置
+                            const rect = anchorEl.getBoundingClientRect();
+                            const popupHeight = 200; // 表示前は高さ不明なので仮値
+                            const spaceBelow = window.innerHeight - rect.bottom;
+                            const top = spaceBelow > popupHeight
+                                ? rect.bottom + 4          // 下に余裕あり → リンクの下
+                                : rect.top - popupHeight;  // 余裕なし → リンクの上
+                            popup.style.left = Math.min(rect.left, window.innerWidth - 500) + 'px';
+                            popup.style.top  = Math.max(4, top) + 'px';
+                            popup.style.display = 'block';
+                        };
+                        const hidePopup = () => {
+                            popup.style.display = 'none';
+                        };
+                        // >>>N リンクにホバーイベントを設定
+                        document.querySelectorAll('.f-content a[href^="#post-"]').forEach(link => {
+                            const postId = link.getAttribute('href').replace('#post-', '');
+                            link.addEventListener('mouseenter', () => {
+                                clearTimeout(hideTimer);
+                                showPopup(link, postId);
+                            });
+                            link.addEventListener('mouseleave', () => {
+                                // 少し遅延させてチラつきを防ぐ
+                                hideTimer = setTimeout(hidePopup, 100);
+                            });
+                        });
+                    })();
+                    // ==========================================
                  }
              } // end startForum