plagger のデータをbrowserで表示しまくる
iframe使いまくって、Publish::CSV出力されたデータをひたすら画面に表示。
キーバインドはemacs風＋vi風
AM05:15ころちょと修正@getnext,getprev
AM05:30ころpythonをやめてperlに移行
パーツは4つで、html*1,js*1,cgi(pl)*2
plaggerread.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> 4/1 </title> <script src="prototype.js"></script> <script src="sc/scriptaculous.js"></script> <script src="plaggerread.js"></script> </head> <body onload="pagestart();" onkeyup="readerkeyup(event);"> <span id="floatcontrol"> <span class="handle">DragHere</span> <input type="button" name="setaid" id="setaid" value="DBSearch" onclick="dodbsearch();"> <input type="button" name="prev" id="prev" value="(P)rev" onclick="getprev();"> <input type="button" name="next" id="next" value="(N)ext" onclick="getnext();"> <span id="info">INFOMATION</span> <br> <span id="dbinfo"></span> <br> <span id="dblist"></span> <br> <span id="enlist"></span> <br> <span id="logarea"> <br> <span id="aaaaaa"> キーバインド:<br> n,j,f:次を読む<br> p,k,b:前を読む<br> </span> </span> </span> </body> </html>
plaggerinfo.cgi
#!/usr/bin/perl
print "Content-type: text/xml ;charset=utf-8\n\n";
print "<response>";
my $csvdir = '/tmp/plagger';
opendir DH, $csvdir or die "$dir:$!";
$fnum=0;
while (my $file = readdir DH) {
next if $file =~ /^\.{1,2}$/
print "<filename>$file</filename>";
$fnum++;
}
closedir DH;
print "<filenum>$fnum</filenum>";
print "</response>";plaggerentry.cgi
#!/usr/bin/perl
use CGI;
print "Content-type: text/xml ;charset=utf-8\n\n";
print "<response>";
my $csvdir = '/tmp/plagger';
$q = new CGI();
$fn=$q->param("fn");
open(FILE, "$csvdir/$fn") or die;
@rec = <FILE>;
foreach(@rec){
print "<entry><![CDATA[$_]]></entry>";
}
close(FILE);
print "</response>";
plaggerread.js
var parentpath=''; //cgiのスクリプトの位置
var MAX_CACHE=5; // いくつ前まで保存するか
var disp=0;
var MAX_PAGE=MAX_CACHE*2+1; // iframeの数
var firsttime=0;
var initmode=0;
var newheight=0;
var menuinit = 0;
var elist=new Array(); // URLのリストをいれるところ
//キー入力関係
function readerkeyup(e)
{
datA=e.keyCode;
ch=String.fromCharCode(datA);
if( ch == 'N' || ch == 'J' || ch == 'F'){
getnext();
}else if( ch == 'P' || ch == 'K' || ch == 'B'){
getprev();
}else if( ch == 'V' ){
movebottom();
}else if( ch == 'U' ){
moveupper();
}else if( ch == 'I' ){
initload();
}else if( ch == 'D' ){
// debug
str="";
for( i = 0 ; i < MAX_PAGE ; i++){
str=str+"["+$('aaa'+i).siteid+"]";
}
alert(str);
return;
}
return;
}
// メニューを下へ
function movebottom()
{
$('floatcontrol').style.top=($('aaa'+disp).height-0)+10;
}
// メニューを上へ
function moveupper()
{
$('floatcontrol').style.top=0;
}
// 次の記事を読む
function getnext()
{
latestid='';
for( i = 0 ; i < MAX_PAGE ; i++ ){
latestid=$('aaa'+((disp+MAX_CACHE+MAX_PAGE+MAX_PAGE-i)%MAX_PAGE)).siteid;
if( !latestid ){
// ここのエラー処理適当すぎ。。。
// undefinedになるべきなのかなぁとおもいつつ。。。
//alert("ERROR! at getnext");
//return;
break;
}else{
break;
}
}
$("aaa"+disp).style.display = "none";
disp=(disp+1) % MAX_PAGE;
$("aaa"+disp).style.display = "";
if( $("aaa"+disp).siteid == -1){
if( confirm( "Back to Search?\nor Click DBSearch later" ) ){
$("aaa"+disp).style.display="none";
moveupper();
return;
}else{
$("aaa"+disp).style.display = "none";
disp=(disp-1+MAX_PAGE) % MAX_PAGE;
$("aaa"+disp).style.display = "";
return;
}
}
if( latestid!=-1){
setpage((disp+MAX_CACHE)%MAX_PAGE,latestid+1);
}
$("info").innerHTML=$("aaa"+disp).siteid;
return;
}
// 前の記事を読む
function getprev()
{
if( $("aaa"+disp).siteid == 0 ){
alert("no previous article");
return;
}
for( i = 0 ; i < MAX_PAGE ; i++ ){
lastid=$('aaa'+((disp+MAX_CACHE+MAX_PAGE+MAX_PAGE+i+1)%MAX_PAGE)).siteid;
if( !lastid ){
// ここのエラー処理適当すぎ。。。
// undefinedになるべきなのかなぁとおもいつつ。。。
//alert("ERROR at getprev: not find siteid");
//return;
break;
}else{
break;
}
}
$("aaa"+disp).style.display = "none";
disp=(disp-1+MAX_PAGE) % MAX_PAGE;
$("aaa"+disp).style.display = "";
if( lastid>0 ){
setpage((disp-MAX_CACHE+MAX_PAGE)%MAX_PAGE,lastid-1);
}else{
setpage((disp-MAX_CACHE+MAX_PAGE)%MAX_PAGE,-1);
}
$("info").innerHTML=$("aaa"+disp).siteid;
return;
}
function dodbsearch()
{
var ifr=document.getElementsByTagName("iframe");
for(i = 0 ; i < ifr.length ; i++ ){
if( ifr[i].id ){
if( ifr[i].id.substring(0,3)=="aaa" ){
ifr[i].parentNode.removeChild(ifr[i]);
}
}
}
getplaggerinfo();
moveupper();
}
function pagestart()
{
// draggableにする
new Draggable('floatcontrol',{revert:false,handle:'handle'});
// iframeの大きさをウィンドウにあわせる
if( document.body.innerHeight ){
newheight = document.body.innerHeight*0.95;
}else{
newheight = document.body.clientHeight*0.95;
}
}
function initload()
{
if( !firsttime ){
$('floatcontrol').style.display="none";
for( i = 0 ; i < MAX_PAGE ; i++){
newiframe=document.createElement('iframe');
newiframe.id="aaa"+i;
newiframe.width="100%";
newiframe.height=newheight;
newiframe.style.postion="absolute";
newiframe.top="0";
//勝手にプロパティつくっていいのかな
//newiframe.frameBorder=0;
if( i!=MAX_CACHE ){
newiframe.style.display="none";
}
$('floatcontrol').parentNode.insertBefore(newiframe,$('floatcontrol'));
newiframe.siteid=-1;
}
// menuを上にもってくる
if( !menuinit ){
floatmenudrag();
menuinit++;
}
$('floatcontrol').style.display="";
}else{
$("aaa"+disp).style.display="none";
$("aaa"+MAX_CACHE).style.display="";
}
movebottom();
disp=MAX_CACHE;
__k=MAX_CACHE;
initmode=1;
initpageload();
}
// 受け取ったURLのリストをもとにバッファをうめる
function initpageload()
{
for( i = 0 ; i < MAX_CACHE+1 ; i++){
setpage(MAX_CACHE+i,i);
}
$("info").innerHTML=$("aaa"+MAX_CACHE).siteid;
}
// 指定された番号のiframeに,URLなどを書き込む
function setpage(framenum,elistnum)
{
if( elist.length > elistnum && elistnum >=0){
$("aaa"+framenum).siteid=elist[elistnum][0];
$("aaa"+framenum).title=elist[elistnum][1];
$("aaa"+framenum).src=elist[elistnum][2];
}else{
$("aaa"+framenum).siteid=-1;
$("aaa"+framenum).title="non";
$("aaa"+framenum).src="";
}
}
// Publish::CSVでできたファイルの一覧の取得
function getplaggerinfo()
{
var url = parentpath+'plaggerinfo.cgi';
var pars="";
var myAjax = new Ajax.Request( url, {method: 'post', parameters:pars, onComplete: getplaggerinfoResponse} );
return ;
}
// 一覧を画面に書き込む
function getplaggerinfoResponse(originalRequest)
{
//alert(originalRequest.responseText);
//return;
var response = originalRequest.responseXML.documentElement;
var filenum = response.getElementsByTagName('filenum')[0].firstChild.nodeValue;
$('dbinfo').innerHTML=filenum+"個のファイルがみつかりました";
var filenames = response.getElementsByTagName('filename');
var str='';
for( i = 0 ; i < filenum ; i++ ){
fn=filenames[i].firstChild.nodeValue;
str=str+"<B onclick='getentry(\""+fn+"\");'>"+fn+"</B><BR>";
}
$("dblist").innerHTML=str;
return;
}
// fnで指定されたCSVのファイルを
function getentry(fn)
{
var url = parentpath+'plaggerentry.cgi';
var pars="fn="+fn;
var myAjax = new Ajax.Request( url, {method: 'post', parameters:pars, onComplete: getplaggerentryResponse} );
return ;
}
// エントリのリストを表示しつつ、配列elistにため込む
function getplaggerentryResponse(originalRequest)
{
//alert(originalRequest.responseText);
//return;
var response = originalRequest.responseXML.documentElement;
var entries = response.getElementsByTagName('entry');
var str='';
delete elist;
elist = new Array();
for( i = 0 ; i < entries.length ; i++ ){
// TODO: "title","http://"の形式にも対応すること
en=entries[i].firstChild.nodeValue;
pos=en.lastIndexOf('",http://');
entitle="notitle";
if( pos != -1 ){
entitle = en.substring(1,pos);
enurl = en.substring(pos+2,en.length-1);
str=str+"<a href=\""+enurl+"\">"+entitle+"</a><BR>";
elist.push( [ elist.length,entitle,enurl ]);
}else{
pos=en.lastIndexOf(',http://');
if( pos != -1 ){
entitle = en.substring(0,pos);
enurl = en.substring(pos+1,en.length-1);
str=str+"<a href=\""+enurl+"\">"+entitle+"</a><BR>";
elist.push( [ elist.length,entitle,enurl ]);
}
}
}
$("enlist").innerHTML=str;
initload();
return;
}
//メニュー関連、あまりいみなし
function floatmenudrag()
{
$('floatcontrol').style.zIndex=3;
$('floatcontrol').style.position='fixed';
$('floatcontrol').style.top=0;
$('floatcontrol').style.left=0;
}
