利用者:Yuukin0248/interLanguageLinkPopup.js

お知らせ: 保存した後、ブラウザのキャッシュをクリアしてページを再読み込みする必要があります。

多くの Windows や Linux のブラウザ

Ctrl を押しながら F5 を押す。

Mac における Safari

⇧ Shift を押しながら、更新ボタンをクリックする。

Mac における Chrome や Firefox

⌘ Cmd と ⇧ Shift を押しながら R を押す。

/**
 * interLanguageLinkPopup.js
 * 左サイドバーの「他言語版」の各リンクに0.5秒以上カーソルを合わせるとそのページ名をポップアップ表示
 */

{
  /** @param {JQuery<HTMLElement>} links */
  const addPopup = function (links) {
    links.each(function () {
      // 中身を span で囲む
      const parent = $(this).wrapInner('<span></span>');

      const [language, ...title] = parent.find('a.interlanguage-link-target').attr('title').split(': ');

      const copyWidget = new mw.widgets.CopyTextLayout({
        copyText: title.join(': '),
        label: language,
        align: 'top',
      });

      const popup = new OO.ui.PopupWidget({
        $content: copyWidget.$element,
        padded: true,
        autoClose: true,
        position: 'above',
      }).toggle(false);

      // 中間の span タグにポップアップを追加
      parent
        .children('span')
        .append(popup.$element)
        .on({
          // 0.5秒以上ホバーするとポップアップを表示する
          mouseover: function () {
            const t = setTimeout(() => {
              popup.toggle(true);
              $(this).data('timeout', null);
            }, 500);
            $(this).data('timeout', t);
          },

          // 0.5秒経つ前にホバー状態が解除された場合はタイマーをクリア
          mouseout: function () {
            const data = $(this).data('timeout');
            if (!data) return;
            clearTimeout(data);
            $(this).data('timeout', null);
          },
        });
    });
  };

  $(function () {
    // 表示中の言語間リンクを取得
    const interLanguageLinks = $('.interlanguage-link:visible');

    // 言語間リンクが存在すれば
    if (interLanguageLinks.length) {
      // 依存関係を読み込んで、ポップアップを追加する関数を呼ぶ
      mw.loader.using(['oojs-ui', 'mediawiki.widgets']).then(() => addPopup(interLanguageLinks));
    }
  });
}