Redmine wikiのサイドバーに開閉ボタンをつけてみた

はじめに

• 現在、弊社では、JIRAやConfluenceが利用されていますが、数年ほど前まではRedmineやGoogleサイトを利用していました。
• Redmineは主に無料のプロジェクト管理ツールとしては国内のエンジニアには多く利用されており、私もサーバを立ててはよくプラグインを作成したりカスタマイズしたりしていました。
• 今回は、Redmineの機能の一つとして、wikiのちょっとしたカスタマイズをしていたので、ご紹介します。

Redmine wikiとサイドバー

• Redmine wikiはTextile記法で記述することでページを作成することができます。
• ページを作っていくにつれて、メニューのようなサイドバーが必要になってくるかと思います。
• サイドバーはこちらに記載の通り簡単に作成することができます。
• ただ、サイドバーが常時表示状態のため、ページ表示領域が狭くなってしまうデメリットがあります。
• その為、サイドバーは常時表示せずボタンによる開閉させるようカスタマイズしてみました。

開閉ボタンの作成

HTML

• sidebarの上部に差し込みます。

<div class="redmineMenu">
    <span class="bar1"></span>
    <span class="bar2"></span><span class="bar3"></span>
</div>

CSS

• 無駄に凝ってますが、CSS3を少し試してみたいのがあったので...。

.redmineMenu {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid silver;
    z-index: 100;
    cursor: pointer;
    background: #FF2D24;
}

.redmineMenu.open {
	background: #000;
}

.redmineMenu span {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    display: block;
    height: 2px;
    width: 10px;
    background: #fff;
    opacity: 0.8;
    margin-bottom: 2px;
}

.redmineMenu .bar3 {
	margin-bottom: 0px;
}

.redmineMenu.open .bar1 {
    -webkit-transform: rotate(405deg) translate(2px,2px);
    -ms-transform: rotate(405deg) translate(2px,2px);
    -o-transform: rotate(405deg) translate(2px,2px);
    /* transform: rotate(405deg) translate(2px,2px); */
    background: #ff0000;
}

.redmineMenu.open .bar2 {
    -webkit-transform: rotate(-405deg) translate(1px,-1px);
    -ms-transform: rotate(-405deg) translate(1px,-1px);
    -o-transform: rotate(-405deg) translate(1px,-1px);
    transform: rotate(-405deg) translate(1px,-1px);
    background: #ff0000;
    margin-bottom: 0px;
}

.redmineMenu.open .bar3 {
    opacity: 0;
}

JavaScript

• テーマとか使っているといろいろ事情があると思いますが、$(window).loadの中に記載すると良いでしょう。

var is_tree = false;
var tree_open  = '<p style="color:#005782; cursor:pointer;">(+)</p>';
var tree_close = '<p style="color:#005782; cursor:pointer;">(-)</p>';

$("#sidebar > ol").each(function(){
  $(this).prev("h3").append(tree_open);
  $(this).css("display","none");
  is_tree = false; 
});

$("#sidebar > h3 > p").click(function(){
  if (is_tree == true) {
    if ($(this).parent().next("ol") !== undefined) {
      $(this).parent().next("ol").css("display","none");
      $(this).parent().find("p").html(tree_open);
      is_tree = false;
    }
  } else {
    if ($(this).parent().next("ol") !== undefined) {
      $(this).parent().next("ol").show();
      $(this).parent().find("p").html(tree_close);
      is_tree = true;
    }
  }
});

実行

まとめ

• Redmineのプラグインで同じようなのあったりしますが、Redmineはバージョンの互換性に悩まされることが多いため、これくらいならちゃちゃっと作ってしまったほうが良さげかもしれません。