메뉴보기
REDMINE

ブログ

Redmineの最新ニュースと役に立つ情報をお伝えします。

wikiを閉じたり展開する機能をJavaScriptで作ってみた

wikiを閉じたり展開する機能をJavaScriptで作ってみた

 

記事作成の背景

 

ANKOSOFTの山崎です。

「Redmine Advent Calendar 2022」の12/4の記事が12/4 1:00現在、まだ未登録のため、途切れないでバトンをつなぎたく、昨日に引き続き、「Redmine Advent Calendar 2022」の12/4の記事として作成しています。

 

１．開発の背景

Redmine 2.2からWikiでテキストの折り畳み機能が搭載されています。下記のような構文でテキストの折り畳みが可能です。

{{collapse(開く時の文言, 隠す時の文言)
}}

 

 

この機能のメリットは重要度が低い文章を非表示状態にして、文章全体の可読性を高めるところにあります。ただし、毎回「{{collapse}}」で囲む必要があり、面倒な点もあります。そこで、JavaScriptでwikiを閉じたり展開する機能を作ってみました。

 

２．完成イメージ

下図のように説明文、コメント文で、ある一定数以上の文字がある場合、全体の文章の一部だけを表示して、残りは「もっと見る」をクリックすると表示します。また、「折りたたむ」をクリックすると、表示されてる文章を最小化します。JavaScriptで実現しているため、wikiの本文には「{{collapse}}」で囲む必要がありません。また、「{{collapse}}」との共存も可能です。

 

 

３．解決方法

view_customizeで作成したJavaScriptを適用させました。

 

パスのパターン：.*

挿入位置：全ページのヘッダ

種別：JavaScript

 

$(function () {
  //最大文字数の定義（これを超えると折り畳みの対象になる）
  var count = 50;
  //各wikiクラスに対して処理をする
  $(".wiki").each(function () {
    var thisText = $(this).text();
    var textLength = thisText.length;
    if (textLength > count) {
      var showText = thisText.substring(0, count);
      var insertText ='<span class="hide">' + $(this).html() + '</span><span class="showText">' + showText + "</span>";
      insertText += '<span class="omit">…</span>';
      insertText += '<a href="" class="more">もっと見る</a>';
      insertText += '<a href="" class="close">折りたたむ</a>';
      $(this).html(insertText);
    }
  });

 
  //初期値の設定
  $(".hide").hide();
  $(".close").hide();
  //もっと見る/折りたたむをクリックした時の動作の定義
  $(".more").click(function () {
    $(this).parent().find(".hide").show();
    $(this).parent().find(".close").show();
    $(this).parent().find(".showText").hide();
    $(this).parent().find(".omit").hide();
    $(this).parent().find(".more").hide();
    return false;
  });

 
  $(".close").click(function () {
    $(this).parent().find(".hide").hide();
    $(this).parent().find(".close").hide();
    $(this).parent().find(".showText").show();
    $(this).parent().find(".omit").show();
    $(this).parent().find(".more").show();
    return false;
  });
});
リスト
合計 12件