こんばんは。この週末は時間が取れそうなので、マイナーアップデートを予定しています。さて、自分のブログを書いていて、不便に思ったところを改善してみたのでメモ。

　この旅日記 のようにページ数が10ページとかなると、記事の編集時には、テキストエリアが縦にずらっと10個並ぶわけです。で、修正したいページのテキストエリアにたどり着くのに、ちょっと間を取られるので、(ログインモードで表示される)編集アイコンをクリックしたら、直接、表示しているページのテキストエリアにフォーカスが行き、かつ、その他のテキストエリアは、縮めた状態で表示させるようにしてみました。修正は、jsファイルのみで済みます。

　記事の各ページはAjaxを利用して、該当ページの部分のみ動的に読み込んでいるので、ログイン中に記事タイトルの右横に表示される編集アイコンのリンクは、最初のページのままで変わりません。なので、記事ページを読み込んだタイミングで、この編集アイコンのリンクも書き換えるようにします。これはlib.jsのloadPage()をいじります。簡単でして、

if(o('a[href*=edit]', ownerDiv)){
 o('a[href*=edit]', ownerDiv).each(function(a){a.href = (a.href.replace(/&?page=¥d+$/, '') + "&page=" + page);});
}

というのを追加するだけです。やってることは、記事DIV要素の中で、リンク先にeditを含むA要素を探し出して(これは２つあります)、それぞれのリンクhrefに表示しているページを追加してあげる、という単純なものです。

　次に、editor.jsの方をいじります。この中のInitEditor()関数の最後の方に、以下のやつを追加。

var targetPage = /page=(¥d+)$/.exec(location.href);
if(targetPage){
 o('textarea[id^=Page]').each(function(page, index){
  if(index + 1 == targetPage[1]){
   resizeTextArea(page);
   ed = page; ed.focus(); o('#Page'+targetPage[1]+'Tab').view(1);
  } else o(page).css('height: 20px;');
 });
}

やってることは、記事編集画面でのリンク先がpage=3とかで終わっていたら、該当する3番目のテキストエリアのみを適切な縦幅で表示させて(フォーカスも合わせる)、他のテキストエリアは縦幅20ピクセルに縮めておく、ということです。

　尚、各テキストエリアの高さは、それぞれのリサイズバーをマウスでドラッグすることで自由に変えることが出来ますが、昔のマックのウィンドウシェード(MacOSXでも残っているのかな？)みたいに、ダブルクリックでトグルさせるようにするには、やはりInitEditor()関数の中に、次の記述を追加します。

o('.textareaHandler').on('dblclick', function(){
 var tar = oParts.target().sib(-1);  /* リサイズバーのひとつ前の要素、つまりテキストエリア要素を取得 */
 if(tar.css('height') == 20) resizeTextArea(tar.$); else tar.css('height: 20px');
});

　自分でいじりながら、JSファイルの修正だけで実現できたのは、ちょっと意外だったり　この修正を施したjsファイルを添付しておきます。特に問題がなければ、次回アップデートに反映されるでしょう。

JavaScript