pixivのスタックフィードのAutoPagerizeみたいなのを作ってみた - その2
AutoPagerizeみたいにアイコンを出すようにしてみた。
あとボタンをクリックすると読み込みをストップできるようにした
（本家みたいな丁寧なメニューは出て来ません）。
userscripts.orgが落ちてるみたいなのでここに公開。
userscripts.org復活次第そちらにも転載します。
jQueryの練習がてらに作っています。
2010/07/30
少し修正してuserscripts.orgに載せました。
こちらは使わないで下さい。
jQueryは学び始めたばかり（JavaScritp自体特異というわけではありませんが）
// ==UserScript==
// @name Pixiv Stacc AutoPager
// @namespace http://d.hatena.ne.jp/kiyo_hoge/
// @include http://www.pixiv.net/stacc/*
// @version 0.2.20100730
// ==/UserScript==(function() {
var setAutoPager = function() {
var BASE_REMAIN_HEIGHT = 400;
var state = 'off';
var loadedPage = 0;
var loading = false;
var iconColor = {
on : '#00ff00',
off : '#cccccc',
loading : '#00ffff',
terminated : '#0000ff',
error : '#ff00ff'
};
var changeIconColor = function(newState) {
state = newState;
return $j('#autopagerize_icon').css({
backgroundColor: iconColor[newState]
});
};
var pageLoad = function(pageElmContainer, continueButton, callback) {
loading = true;
$j(pageElmContainer).get(0).addEventListener('DOMNodeInserted', function() {
if (!loading) {
return;
}
loading = false;
loadedPage++;
setTimeout(function() {
if (!$j(continueButton).length) {
changeIconColor('terminated');
setTimeout(function() {
$j('#autopagerize_icon').remove();
}, 1500);
$j(window).unbind('scroll');
return;
}
changeIconColor('on');
}, 0);
if (typeof callback == 'function') {
callback();
}
$j(pageElmContainer).get(0).removeEventListener('DOMNodeInserted', arguments.callee);
}, false);
changeIconColor('loading');
$j(continueButton).eq(0).click();
};
var initAutoPager = function() {
if (!$j('.next_comment_open, .bt_more').length) {
return;
}
$j('<div />').attr({
id : 'autopagerize_icon'
}).css({
fontSize : '12px',
position : 'fixed',
top : '3px',
right : '3px',
color : '#ffffff',
width : '10px',
height : '10px',
zIndex : '255'
}).click(function() {
if (state == 'on' || state == 'loading') {
changeIconColor('off');
}
else if (state == 'off') {
changeIconColor('on');
}
}).appendTo(document.body);
changeIconColor('on');
$j(window).scroll(function() {
if (!loading && state != 'off' &&
document.documentElement.scrollHeight - window.innerHeight - window.scrollY <=
BASE_REMAIN_HEIGHT) {
if ($j('#insert_comment').length) {
$j("#swap_comm_btn_top, #swap_comm_btn_bottom").hide();
$j('#insert_comment').attr('id', 'insert_comment_' + loadedPage)
.after($j('<div id="insert_comment"></div>'));
$j('.message_simple').removeClass('message_simple');
pageLoad('#insert_comment', '.next_comment_open', function() {
$j('#insert_comment').prepend('<p class="autopagerize_page_info">page: ' + loadedPage + '</p>');
});
}
else if ($j('#insert_status').length) {
pageLoad('#insert_status', '.bt_more');
}
}
});
};
if (!$j('.next_comment_open, .bt_more').length) {
$j('#insert_status, #insert_comment').get(0).addEventListener('DOMNodeInserted', function(){
if (loadedPage == 0) {
loadedPage++;
setTimeout(initAutoPager, 0);
$j('#insert_status, #insert_comment').get(0).removeEventListener('DOMNodeInserted', arguments.callee);
}
}, false);
}
else {
loadedPage++;
initAutoPager();
}
};
location.href = 'javascript:(' + setAutoPager.toString() + ')();';
})();
なのでなにかこうした方がjQueryとしては良い書き方だという所がありましたら
ご指摘お願いします。
はじめFirefoxで作って動いたのはいい物のOperaとGoogle Chromeで動かず
理由が分からなかった。
試行錯誤するうちにどうやらOperaとChromeはJavaScriptの処理が高速なため
GreaseMonkeyスクリプトが実行される時点で１番目のページ内容をAjaxで
読み込んでそれを編集し、書き込むのが完了していたのが原因だった
（Firefox用ではページの書き込みが完了するのを確認してから実行するよう
に処理を書いていた）。
なんだか情けない理由だ。
