電子書籍 epub:しおり機能(ここチェック、あるいはここまで ってやつ) ・・・ 【epub viewer を創ろ #16】
このあたりから、また面白いことになってきますねぇ。
どうやった実現するか・・・いやその前に
どのような機能にするか。
◆しおり機能
こんな感じの機能かなぁ。
□画面で読んでいるとき、
・ここに "しおり" って時に
・ワンクリックで "しおり" が付けられて・・・
□次回
・同じ epub 開いたときに
・"しおり" があれば、それを示して
・クリックすれば そこに移動
・設定によっては、epub 開いたときに
自動的に移動
□"しおり" は複数付けられて・・・
・色が違ってつけられる、とか
※雑誌で気になったページの片隅を
折っておいたりするもんなぁ。
(個人的には、後でほとんど見ないけど)
とりあえず、実装。
ただし、今回は時間の関係で、
ひとつの "しおり"だけれど。
詳しくは、追記に ▼
************************************************
◎ しおり機能(ここチェック、あるいはここまで ってやつ)
:epub viewer を創ろ
************************************************
まずは・・・
◆初期変数の再整備
※本日現在
var thisfilename = ""; //filename
var thistitle = ""; //title
var thisversion = ""; //epub version
var thisdirdata = ""; //contents dir
var thistopurl = ""; //cover
var thisindex_max = 0; //max index
var thisnowurl = ""; //nowurl
var maxlimitindex = 99999; //limit index
var zip = "";
var nowpage_this = 0; //nowpage_this
var thisshioriVars = "";
var thisshioriid ="";
var nowshioriid ="";
関わる部分を用意しておいて・・・
◆ページ表示廻りの関数を改変
// ページナビ
var nowpage_this = maxlimitindex; // 表紙
function pageNavi(intnum){
if(intnum == maxlimitindex){ //表紙
if(thistopurl!=''){ nowpage_this = maxlimitindex; viewGo_epub(thistopurl,'img','imgView',thistitle,maxlimitindex); }
}else{
if((nowpage_this == maxlimitindex)&&(intnum == 1)){ nowpage_this = 0;
}else{
nowpage_this = parseInt(nowpage_this) + parseInt(intnum);
}
if(nowpage_this < 0){ nowpage_this = 0;
}else{if(nowpage_this >= thisindex_max){ nowpage_this = (thisindex_max - 1); }}
pageView(nowpage_this);
}
}
// ページ表示(by index)
function pageView(tarindex){
var v = document.getElementById('epubindex_'+tarindex);
if(v){ $(v).click(); }
}
// ページ表示(by index)
function pageShioriView(){
if(nowshioriid>0){ pageView(nowshioriid); }
}
◆epubファイルを読込・表示した際
しおりの記録は、Cookie利用して、
// しおりボタン
var shiori ="";
thisshioriVars = "shiori_"+thisfilename;
thisshioriid = getCookie(thisshioriVars);
nowshioriid =thisshioriid;
if((nowshioriid !='')&&(nowshioriid > 0)){
temp_shioriid = "shiori_"+nowshioriid;
shiori +="<li id='go_shioribt'><a href=\"javascript:void();\" onclick=\"javascript:pageShioriView();return false;\" title=\"しおりページを表示\"><img src=\"/images/epubviewer/ic_shiori1.gif\" width=\"16\" height=\"16\" alt=\"しおりページを表示\" /></a></li> ";
}
shiori +="<li id='set_shioribt'><a href=\"javascript:void();\" onclick=\"javascript:setShiori(1,-1,1);return false;\" title=\"このページにしおりを付ける\"><img src=\"/images/epubviewer/ic_shiori0.gif\" width=\"16\" height=\"16\" alt=\"このページにしおりを付ける\" /></a></li>";
outhtml += "<div id='area_btshiori' class='float_left clearfix' style='padding-top:6px;padding-right:6px;'>";
outhtml += shiori;
outhtml += "</div>";
◆各ページが表示された際
現在のINDEX値(num) を判断して
thisshioriVars = "shiori_"+thisfilename;
thisshioriid = getCookie(thisshioriVars);
temp_shioriid = "shiori_"+thisshioriid;
・・・・・
// しおりOnOff
if(thisshioriid!=''){
if(thisshioriid == intindex){ setShiori(1,intindex,0);
$("#"+temp_shioriid).css('display','block');
}else{ $("#"+temp_shioriid).css('display','none'); }
}
・・・・・
<div id='epub__cconts' class='clearfix'></div>
として用意し、cssで固定位置にしてある。
#epub__cconts {
width:100%;
height:30px;
padding:5px 20px 0 10px;
position:fixed;
top:32px;
width:60%;
}
#epub__cconts li{
list-style:none;
padding:10px;
}
#epub__cconts img{
cursor:pointer;
}
#area_btshiori li{
float:left;
list-style:none;
padding-right:2px;
}
そして 肝心のしおりのセットオンオフだけれど、
いづれ複数セットできることを考え、
単純な display onoff 的なやり方ではなく、
◆jQuery でオブジェクト追加と削除
これを利用させていただき、追加あるいは、削除する。
// しおり
function setShiori(intwork,intnum,opcookie){
var intDay = 365;
if(intwork == 1){ //set
if(intnum == -1){ intnum = nowpage_this; }
var exists0 = $.grep($("#area_btshiori li"), function(item){
var itemid = $(item).attr("id"); return (itemid == 'go_shioribt');
});
if (exists0.length == 0) { // 存在しない
// しおりGoボタン
var shioriimb0 ="<img src=\"/images/epubviewer/ic_shiori1.gif\" width=\"16\" height=\"16\" alt=\"しおりページを表示\" />";
var temp_id0 ='go_shioribt';
$("<li/>")
.attr({
id: temp_id0,
})
.addClass("float_left")
.append(shioriimb0)
.click(function(){
pageShioriView();
})
.prependTo("#area_btshiori");
}
var exists = $.grep($("#epub__cconts li"), function(item){
var itemid = $(item).attr("id"); return (itemid == 'shiori_'+intnum);
});
if (exists.length == 0) { // 存在しない
// しおりボタン
var shioriimb ="<img src=\"/images/epubviewer/shiori.png\" width=\"32\" height=\"32\" alt=\"しおり(クリックで解除)\" />";
var temp_id ='shiori_'+intnum;
$("<li/>")
.attr({
id: temp_id,
})
.addClass("float_left")
.append(shioriimb)
.click(function(){
setShiori(-1,intnum,1);
$(this).remove()
})
.prependTo("#epub__cconts");
}
nowshioriid = intnum;
if(opcookie == 1){ SetCookie(intDay, thisshioriVars, nowshioriid, 1, '', location.pathname); }
}else{
if(intwork == -1){ //del
$('#go_shioribt').remove();
thisshioriid = ""; nowshioriid = "";
if(opcookie == 1){ DelCookie(thisshioriVars); }
}else{ //view
}}
}
はっきりいってこれなかったら、大変だよなぁ。
個人的な癖で、jQuery と 通常のDOM操作が混じりこんでいるのは
スタンス的にあまり気にしない・・・です。
ともあれ、これで、
(単独だけれど)「しおりの機能」は組み込んだ。
●epub文書を表示した際・・・
◆先回 しおりを設定していれば・・・
赤い "しおりアイコン(ボタン)" が表示され、
クリックすれば、
▼
当該ページ(構造的には 当該ファイル)が表示される。
※しおりが付いている
◆付いているしおりをクリックすれば・・・
▼
しおりははずれ、上部の 赤いボタンアイコンもなくなる。
◆しおりを付けたい場合は・・・
黒いボタンアイコンをクリックすると
▼
現在見ているページにしおりが追加され、その情報が
クッキーに保存される。
ひとまずOK。
師走で忙しくなってきて、あまり時間がとれなくなってきた・・・
他に始めたこともあるし。