AutoPagerize

*WordPressプラグインもあります

Greasemonkeyで有名なAutoPagerize、最近ははてなブックマークでも取り入れられて
機能としてサイト側でやるものかどうかっていう話も聞いたりしました。

AutoPagerizeは一度使ったらもう手放せないくらい便利ですけど
これを自分でやってみました。

使い方は簡単、
5509内 ホーム・カテゴリ・タグ・検索のいずれかのページで、ページナビゲーションがある場合
ページナビゲーションにカーソルが近付くと自動で次のページを読み込んで下に追加表示します。

ひとつだけ出来なかったところがあって
AutoPagerizeで読み込んだ部分はSyntaxhighlighterが適用できてないです。。解決、追記しました

ソース（ログ）

// AutoPagerize
if($("div.wp-pagenavi","#main").length>0){
// WP-PageNaviで生成される div.wp-pagenavi を取得して基準にする
var pageNav = $("div.wp-pagenavi","#main");

// 後でフラグエリアを決めるためドキュメントとウィンドウの高さを得る
var dE = document.documentElement;
var h = dE.clientHeight;
var maxH = dE.scrollHeight;

// 初期ページ
var page = 1;

// URIに page/\d+ を含んでいる場合は \d+ に +1 したものを返す
var loc = function(page){
return this.uri = location.href.match(/(\w+:\/\/[\w-.]+[\/\w\d-_]*)(\/*page\/)(\d+)/) ? RegExp.$1+RegExp.$2+(parseInt(RegExp.$3)+page) : (location.href.match(/\/$/) ? location.href : location.href+"/")+"page/"+(page+1);
}

// ローディング画像を表示するためにDivを生成して非表示にしておく
$("body").append("<div id='pageLoading'></div>");
var pageLoading = $("#pageLoading");
pageLoading.hide();

// PageRize
var pageRize = function(){
pageLoading.show();

// 次のページを取得して 追加する
$.ajax({
url: loc(page),
success: function(html){

// #notFound がある場合はエラーなので何もしない
if($("#notFound",html).length<1){
page++;

// Page: 2 みたいなのを追加
pageNav.before("<p id='page-"+page+"'>Page: <a href='"+loc(page-1)+"'>"+page+"</a></p>");

// 取得したページの #main直下の要素(div.entryのみ)を追加する
pageNav.before($("#main>*",html).filter(function(){return !$(this).hasClass("wp-pagenavi")}));

// 追加したdiv.entryを含めたすべてのdiv.entryにSBMボタンと左のガイドを追加する
$("div.entry").each(function(){
$("ul.entryGuide>li",this).remove();
$(this).addEntryGuide();
$(this).addBookmarksInit();
});

// Opera以外にslideScrollを適用する - 調査中
if(!$.browser.opera) $("a[href*='#']").slideScroll();

// ドキュメントの高さを更新する
maxH = dE.scrollHeight;

// SyntaxHighlighterを実行
dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swfへのパス/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll("code");

// addPageRizeを実行して ドキュメント下にフラグエリアを作る
addPageRize();
}

pageLoading.hide();
},
// エラーの場合はローディングを非表示にして何もしない
error: function(){
pageLoading.hide();
}
});
}

// ドキュメント下にフラグエリアを作る
function addPageRize(){

// マウスカーソルが maxH-h の位置にきたらpageRize()を実行する
$(document).mousemove(function(e){
if(e.pageY<(maxH-h)) return false;
pageRize();

// 何度も実行しないように一度実行したらイベントを解除する
$(this).unbind("mousemove");
});
}
addPageRize(); // initialize;
}

dp.SyntaxHighlighter.HighlightAll(“code”)実行時の注意

pre[name='code'], textarea[name='code']にSyntaxHighlighterを適用するのが

dp.SyntaxHighlighter.HighlightAll(“code”)

なんですが、このまま実行するとHTML中に存在する
pre[name='code'], textarea[name='code']全てに適用してしまってAutoPagerizeで追加する前の
すでに適用されてる要素にまで適用されてソースコードが2つ並んでしまいます。

SyntaxHighlighterの仕様は元のpre, textareaをdisplay:noneにしてからその前に追加する
ので、すでに適用されたdisplay: noneのコードには追加しないようにする必要があります。

SyntaxHighlighterのソースコードは圧縮されていて修正もしにくいので
Online Beautifier for JavaScriptなどで読みやすい形にすれば修正しやすくなります。

function FindTagsByName(list, name, tagName) {
var tags = document.getElementsByTagName(tagName);
for (var i = 0; i < tags.length; i++)
if (tags[i].getAttribute('name') == name) list.push(tags[i]);
}

というところを探して

function FindTagsByName(list, name, tagName) {
var tags = document.getElementsByTagName(tagName);
for (var i = 0; i < tags.length; i++)
if (tags[i].getAttribute('name') == name && tags[i].style.display != "none") list.push(tags[i]);
}

にすればうまくいくようになります。（4行目を修正）