最近積極的な利用をしているINTER-Mediatorのお話。
 
seezoo cmsの管理画面に統合して、利用しまくっています。
何かアプリケーションをつくるとき、エンドユーザーが見るフロント側はCMSに任せて、
運営側がつかう管理画面をINTER-Mediatorに任せるというやり方で、
工程数をかなり圧縮することができています。
 
seezoo cmsとINTER-Mediatorに感謝です。
 


 
さて、そんなINTER-Mediatorですが、
まったくもって十分といったら、そうでもなくて、
中でもページネーション機能は、もうちょっとどうにかしたいなぁと思うわけです。
 


 
INTER-Mediatorでは

<div id="IM_NAVIGATOR"></div>

というコードをHTML中にかいておけば、
ページめくり機能を実装してくれます。
 
とても便利です。
 
が、このページめくり機能、
まさに「ページめくり」で、本のページをめくるように1ページずつ移動するか、
あるいは、一番最初、一番最後のページにジャンプする機能しかありません。
考え方が一番近いのは「カード型DB」の感じです。
 


 
何かを管理させる機能をつくるとき、
検索結果のページが10ページくらいになることは、
ざらにあることでしょう。
 
そのページを1ページずつめくっていくのでは、
ちょっと面倒。
できれば、数字を入力して、そのページにジャンプできるようにしたほうが、
便利!!!
と思ったわけです。
つまり、
 


ページヘ


 
▲こんなものをページネーション機能の中に入れたいわけです。
移動のボタンを押すことなくonchangeで書き換えがおこるとなお良いわけです。
 


 
さて、実際にコレをつくっていきましょう。
INTER-Mediatorに同梱されている「INTER-Mediator.js」を編集します。
 
が、このファイルはminifyされているので、
そのままでは非常に編集しづらいです。
 
大事なおともだちまいぺーすたんのブログにminifyを元に戻すサイトが紹介されていますので、
これを参考に、minifyを元に戻して、作業を続けましょう。
 


 

node = document.createElement("SPAN");
navigation.appendChild(node);
node.appendChild(document.createTextNode((navLabel == null || navLabel[3] == null) ? ">>" : navLabel[3]));
node.setAttribute("class", "IM_NAV_button" + (start + pageSize >= allCount ? disableClass : ""));
endPageCount = allCount - pageSize;
INTERMediatorLib.addEvent(node, "click", function () {
INTERMediator.startFrom = (endPageCount > 0) ? endPageCount : 0;
INTERMediator.constructMain(true)
});

 
こんなところがあります。
このへんがページング機能を実装しているところで、
上記のコードの後ろに、
 

node = document.createElement("SPAN");
navigation.appendChild(node);
var c_node = document.createElement("INPUT");
c_node.setAttribute("class", 'IM_PAGE_JUMP');
c_node.setAttribute("type", 'text');
c_node.setAttribute("value", ( INTERMediator.startFrom / pageSize ) + 1 );
node.appendChild(c_node);
node.appendChild( document.createTextNode('ページ目へ') );
INTERMediatorLib.addEvent(
c_node,
"change",
function(){
if( this.value < 1){this.value = 1;}
var max_page = Math.ceil( allCount / pageSize );
if( max_page < this.value ){
this.value = max_page;
}
INTERMediator.startFrom = ( ~~this.value - 1 ) * pageSize;
INTERMediator.constructMain(true);
}
);

 
を追加します。
これで、意図したことができます。
 
再度、minifyして完了!
 


 
ここであることに気がつきます。
 

INTERMediator.startFrom = 0;

 
このプロパティが、DBから取得開始するインデックスを指定するプロパティです。
INTER-Mediatorを利用するページにこのプロパティを追加すれば、
意図したページ番号から表示を開始することができます。
 
この値をcookieか何かに保存しておけば、
一度別のページに移動して、戻ってきた時、
さっき見ていたページ番号を保存するということができます。
 


 
おまけ!
 
INTER-Mediatorでは、処理中INTER-Mediatorのロゴが
ページの左上に表示されます。
これを独自のロゴに変更可能です。
 

showProgress: function () {
}

 
というメソッドがあります。
この中にある

c.setAttribute("src", "data:image/gif;base64,xxxx");

が、画像データです。
ここを書換えてやれば、処理中に表示されるロゴデータを書き換えできます。