GROWI カスタムスクリプト集

GROWI のカスタムスクリプトのメモ書きです。
他に何か思いついたら更新します。

スクリプトの読み込み

GROWI の管理画面からカスタマイズ画面（/admin/customize）にあるカスタムスクリプトに、以下のコードを入力します。

// 追加するスクリプトの定義を記述
// function something() {
//   ...
// }
$(function() {
  var functions = [
    // ここに関数の名前を列挙する
    // 以下は例
    addLangAttrToHtmlTag,
    openExternalPageInNewTab,
    applyLightBox,
  ];
  for (var i in functions) {
    functions[i]();
  }
});

スクリプト

HTML タグに lang 属性を付与する

ページの html タグには lang 属性が付与されておらず、Google Chrome などではページを翻訳するかどうかのダイアログが表示されることがあります。これを抑制できるようにします。

function addLangAttrToHtmlTag() {
  var language = window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage;
  $('html').attr('lang', language);
}

パーマリンク文字列のみコピーされるようにする

パーマリンクの右側にあるコピーボタンを押した際、ページタイトルとパーマリンクの両方がコピーされますが、ページタイトルのコピーは不要という状況で使用します。Issue #493 の対応策となります。

2019/5/16追記: v3.4.6 でコピーボタンが新しくなったので、これを使わなくてもできるようになります。

function copyPageUrlOnly() {
  var elem = $('#btnCopyRevisionUrl').attr('data-clipboard-text');
  if (elem !== undefined) {
    var url = elem.split('\n')[1];
    $('#btnCopyRevisionUrl').attr('data-clipboard-text', url);
  }
}

外部ドメインへのリンクを新しいタブで開かれるようにする

外部ドメインへのリンクは新しいタブで開かれるようにします。href に相対パス、もしくは接続先ドメインを含む絶対パスが記述されている a タグ以外に target="_blank" 属性を付与します。

function openExternalPageInNewTab() {
  $('a[href]').each((i, elem) => {
    var url = elem.href.match(/(?:https?:\/\/([\w:%#\$&\?\(\)~\.=\+\-]+))?(\/?[\w/:%#\$&\?\(\)~\.=\+\-]+)/);
    if (url[1] !== undefined && url[1] !== document.domain) {
      elem.target = '_blank';
    }
  });
}

画像をクリックして拡大する

LightBox を利用して、画像をクリックすると拡大表示されるようにします。

function applyLightBox() {
  $('head link:last').after('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightbox2@2.10.0/dist/css/lightbox.min.css" />');
  $('head script:last').after('<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.10.0/dist/js/lightbox.min.js"><\/script>');
  $('#page').find('img:not(.emojione)').each(function(i, elem) {
    var a = $('<a>').attr({'href': $(elem).attr('src'), 'data-lightbox': $(elem).attr('alt')||"nothing", 'data-title': $(elem).attr('alt')||"nothing"});
    $(elem).wrap(a);
  });
}