Skip to content

Instantly share code, notes, and snippets.

@p--q

p--q/pagenavi.js Secret

Last active July 24, 2016 17:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save p--q/0ee1e91bd74968116ab8f6c2969e1dd2 to your computer and use it in GitHub Desktop.
Save p--q/0ee1e91bd74968116ab8f6c2969e1dd2 to your computer and use it in GitHub Desktop.
// paginavi_bloggerモジュール
if (typeof(PageNavi_Blogger) == 'undefined') var PageNavi_Blogger = function() {
var pg = { // グローバルスコープに出すオブジェクト。グローバルスコープから呼び出すときはPageNavi_Bloggerになる。
defaults : { // 設定値。
"perPage" : 5, //1ページあたりの投稿数。
"numPages" : 5, // ページナビに表示するページ数。
"prevText" : '«', // 左向きスキップのための矢印。
"nextText" : '»', // 右向きスキップのための矢印。
},
buttuns : { // ボタンから起動する関数。
paginavi_redirect : function(noPage, perPage, postLabel) { // ページ番号のボタンをクリックされた時に呼び出される関数。
if (postLabel == "undefined") {postLabel = false} // undefinedが文字列と解釈されているのを修正。
pg.finddatepost = paginavi_finddatepost_outside(noPage, perPage, postLabel) // コールバック関数に渡しておきたい変数をクロージャで渡しておく。
var jsonstart = (noPage - 1) * perPage; // 新たに表示する先頭ページの先頭になる投稿番号を取得。
var code;
if (postLabel) { //
code = "/feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=PageNavi_Blogger.finddatepost";
} else {
code = "/feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=PageNavi_Blogger.finddatepost";
}
write_script(code);
}
},
all: function() { // ここから開始する。
pagecurrentg();
}
}; // end of pg
function totalcountdata_outside(postLabel, currentPageNo) { // 取得したフィードから投稿総数を得る関数を返す関数。
function inside(root) {
var total_posts = parseInt(root.feed.openSearch$totalResults.$t, 10) // 取得したフィードから総投稿総数を得る。
looppagecurrentg(total_posts, postLabel, currentPageNo);
}
return inside
};
function paginavi_finddatepost_outside(noPage, perPage, postLabel) { // フィードから表示させるページのURL得てそこに移動させる関数を返す関数。
function inside(root) {
var post = root.feed.entry[0]; // フィードから先頭の投稿を取得。
var timestamp = encodeURIComponent( post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29)); // 先頭の投稿からタイプスタンプを取得。
var addr_label = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage;
var addr_page = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage;
location.href =(postLabel)?addr_label:addr_page // ラベルインデックスページとそれ以外でURLが異なる。
}
return inside
};
function looppagecurrentg(total_posts, postLabel, currentPageNo) { // ページナビのボタンを作成。
var perPage = pg.defaults.perPage; //1ページあたりの投稿数。
var numPages = pg.defaults.numPages; // ページナビに表示するページ数。
var prevText = pg.defaults.prevText; // 左向きスキップのための矢印。
var nextText = pg.defaults.nextText; // 右向きスキップのための矢印。
var array_html = []; // 出力するhtmlを入れる配列。
// ページナビのボタンの中央にするページ番号を計算する。
var pageNumber = parseInt(numPages / 2);
if (pageNumber == numPages - pageNumber) {numPages = pageNumber * 2 + 1;}
// ページナビに表示する先頭のページ番号を計算する。
var pageStart = currentPageNo - pageNumber;
if (pageStart < 1) {pageStart = 1;} // ページナビに表示する先頭のページ番号が1より小さい時は1にする。
var lastPageNo = Math.ceil(total_posts / perPage); // 総ページ数。
// ページナビに表示する最後のページ番号を計算する。
var pageEnd=pageStart+numPages-1;
if (pageEnd > lastPageNo) {pageEnd = lastPageNo;} // ページナビに表示する最後のページ番号が総ページ番号より大きい時は総ページ番号にする。
if (pageStart > 1) {paginavi_start_button(array_html, perPage, postLabel, '1');} // 表示する先頭ページ番号が2以上のときは1ページ目のボタンを左端に作成。
if (pageStart > 2) { // 表示する先頭ページ番号が3以上のときは左向きスキップのためのボタンの作成。
var prevNumber = parseInt(currentPageNo) - perPage; // スキップしたときに表示する先頭になるページ番号。表示ページ番号を総入れ替えする。
(prevNumber < 2)?paginavi_start_button(array_html, perPage, postLabel, prevText):array_html.push(paginavi_button(prevNumber, perPage, postLabel, prevText)); // 表示ページ番号の先頭ページ番号が1のときだけボタンの作り方が異なるための場合分け。
}
for (var jj = pageStart; jj <= pageEnd; jj++) {(currentPageNo == jj)?array_html.push('<span class="pagecurrent">' + jj + '</span>'):((jj == 1)?paginavi_start_button(array_html, perPage, postLabel, '1'):array_html.push(paginavi_button(jj, perPage, postLabel, jj)));} // 表示ページナビ番号ボタン作成。
if (pageEnd< lastPageNo - 1) { // 右向きスキップのためのボタンの作成。
if (currentPageNo < (lastPageNo - 1)) { // 表示するページ番号の最後の番号が総ページ数より2より小さい時だけ作成。
var nextnumber = parseInt(currentPageNo) + perPage; // スキップしたときに表示する先頭になるページ番号。表示ページ番号を総入れ替えする。
if (nextnumber > lastPageNo) {nextnumber = lastPageNo;} // 表示するページ番号の最後の番号が総ページ数になるときは総ページ数の番号にする。
array_html.push(paginavi_button(nextnumber, perPage, postLabel, nextText)); // 右向きスキップのためのボタンの作成。
}
}
if (pageEnd < lastPageNo) {array_html.push(paginavi_button(lastPageNo, perPage, postLabel, lastPageNo));} // 総ページ番号ボタンの作成。
var html = array_html.join(''); // 配列の要素をすべて結合する。
var blogPager = document.getElementById("blog-pager"); // id="blog-pager"の要素の取得。
if (blogPager) {blogPager.innerHTML = html;} // id = "blog-pager"の要素を書き換え。
};
function pagecurrentg() { // フィードを取得する。
var postLabel; // ラベルインデックスページのときのラベル。
var currentPageNo; // 現在のページ番号。
var code; // フィードを取得するためのコード。
var thisUrl = location.href; // 現在表示しているURL。
if (thisUrl.indexOf("/search/label/") != -1) { // URLからラベルの取得。
var text = (thisUrl.indexOf("?updated-max") == -1)?"?max":"?updated-max"
postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf(text));
}
if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) { // 検索結果や固定ページではないとき。
currentPageNo = (thisUrl.indexOf("#PageNo=") == -1)?1:thisUrl.substring(thisUrl.indexOf("#PageNo=") + 8, thisUrl.length); // 現在のページ番号の取得。
pg.totalcountdata = totalcountdata_outside(postLabel, currentPageNo) // コールバック関数に渡しておきたい変数をクロージャで渡しておく。
if (postLabel) { // 総投稿数取得のためにフィードを取得。ラベルインデックスのときはそのラベルの総投稿数。
code = '/feeds/posts/summary/-/' + postLabel + "?alt=json-in-script&callback=PageNavi_Blogger.totalcountdata&max-results=1";
} else {
code = "/feeds/posts/summary?max-results=1&alt=json-in-script&callback=PageNavi_Blogger.totalcountdata";
}
write_script(code);
}
};
function paginavi_button(noPage, perPage, postLabel, text) { // redirectするボタンの作成。
//ボタンから起動する関数はグローバルスコープから呼ばれるのでpgではなくPageNavi_Bloggerで呼び出す。
return '<span class="displaypageNum"><a href="#" onclick="PageNavi_Blogger.buttuns.paginavi_redirect(' + noPage + ',' + perPage + ',\'' + postLabel + '\');return false">' + text + '</a></span>'; // postLabelは文字列なので、クオーテーションが必要。undefinedも文字列として解釈される。
}
function paginavi_start_button(array_html, perPage, postLabel, text){ // 表示するページ番号ん先頭のボタンの作成。array_htmlは参照渡し。
if (postLabel) {
array_html.push('<span class="displaypageNum"><a href="/search/label/' + postLabel + '?max-results=' + perPage + '">' + text + '</a></span>');
} else {
array_html.push('<span class="displaypageNum"><a href="/">' + text + '</a></span>');
}
}
function write_script(code) { // スクリプトの挿入。document.write()の代替。
var newInclude = document.createElement('script');
newInclude.type = 'text/javascript';
newInclude.setAttribute("src", code);
document.getElementsByTagName('head')[0].appendChild(newInclude);
};
return pg;
}();
//デフォルト値を変更したいときは以下のコメントアウトをはずして設定する。
//PageNavi_Blogger.defaults["perPage"] = 5 //1ページあたりの投稿数。
//PageNavi_Blogger.defaults["numPages"] = 5 // ページナビに表示するページ数。
//PageNavi_Blogger.defaults["prevText"] = '«' // 左向きスキップのための矢印。
//PageNavi_Blogger.defaults["nextText"] = '»' // 右向きスキップのための矢印。
PageNavi_Blogger.all() // ページナビの起動。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment