ほげほげノート(3)

http://konbu.s13.xrea.com/lib/ajax/page3/page.html
一歩前進複数ページを扱えるようになった。textareaがちゃんと更新されないことがあった問題を解決。
IEFirefoxの改行コードの違いで挙動が違ったのが、ふと気付けば同じ挙動になってた。理由がよくわからない。
textareaの更新は、

document.getElementById(id).innerHTML = hoge;

な部分を

document.getElementById(id).value = hoge;

にすることで、ちゃんとすぐ更新されるようになった。が、読み込んだ内容が古いことがあった。

Firebugの情報(読み込みにかかっている時間が15ms。速過ぎる)より、キャッシュから読み込んでいることがわかる。.htaccessでデータフォルダのキャッシュ利用不可にすることで解決。

page.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
<title>
めもちょう。
</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript"><!--
function loadpage(page_name){
  http = new HttpRequest();
  http.onreadystatechange = function(){
    if(http.readyState == 4){
      id("page").value = http.responseText;
      print("page_name", page_name);
      document.title = page_name+" - メモ帳";
      print_flush("status", "loaded.");
    } else {
      print("status", "Wait...");
    }
  };
  if(http){
    http.open("GET", encodeURI(encodeURI(datadir+page_name)), false);
    http.send("");
  }
}
function savepage(page_name){
  var txtdata = id("page").value;
  http = new HttpRequest();
  http.onreadystatechange = function(){
    if(http.readyState == 4){
      print_flush("status", "saved.");
    } else {
      print("status", "Wait...");
    }
  };
  if(http){
    http.open("POST", "savepage.cgi", false);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    http.send("datadir="+datadir+"&page_name="+encodeURI(encodeURI(page_name))+"&txtdata="+encodeURI(txtdata));
  }
}
function editevent(event, tid){
  var page_name = document.getElementById("page_name").innerHTML;
  print("status", "text edited...");
  clearTimeout(tid);
  return window.setTimeout('savepage("'+page_name+'")',2000);
}
function openindexbox(){
  var indexboxhtml;
  http = new HttpRequest();
  http.onreadystatechange = function(){
    if(http.readyState == 4){
      indexboxhtml = decodeURI(http.responseText);
      indexboxhtml = indexboxhtml.replace(/(.+)\n/g, "<a href='javascript:selectpage(\"$1\");'>$1</a><br>");
      indexboxhtml += '<input type="submit" onclick="closeindexbox();" value="やっぱやめる">';
      id("indexbox").innerHTML = indexboxhtml;
      id("indexbox").style["display"] = "block";
      print("status", "");
    } else {
      print("status", "Wait...");
    }
  };
  if(http){
    http.open("POST", "showindex.cgi", true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    http.send("datadir="+datadir);
  }
}
function selectpage(page_name){
  print("page_name", page_name);
  loadpage(page_name);
  closeindexbox();
}
function closeindexbox(){
  id("indexbox").style["display"] = "none";
}
function opensavebox(){
  id("savebox").style["display"] = "block";
}
function savepageas(){
  var page_name = id("savepagename").value;
  savepage(page_name);
  print("page_name", page_name);
  document.title = page_name;
  id("savepagename").value = "";
  closesavebox();
}
function closesavebox(){
  id("savebox").style["display"] = "none";
}
// -->
</script>
</head>
<body>
<table class="note">
<tr class="titlebar">
<td class="titlebar_title">
<span id="page_name">無題</span> - メモ帳
</td>
<td class="titlebar_button">
<input type="submit" value="_">
<input type="submit" value="□">
<input type="submit" value="×">
</td>
</tr>
<tr class="note_menu"><td colspan="2">
<a class="menu_item" id="openindexbox" href="javascript:openindexbox();">他のページ開く</a>
<div class="childbox" id="indexbox"></div>
<a class="menu_item" id="savepage" href="javascript:opensavebox();">別名で保存</a>
<div class="childbox" id="savebox">
<input type="text" id="savepagename">
<input type="submit" onclick="savepageas()" value="保存"><br>
<input type="submit" onclick="closesavebox();" value="やっぱやめる">
</div>
</td></tr>
<tr class="note_txt"><td colspan="2">
<textarea id="page" rows="15" cols="80" onkeypress="tid=editevent(event, tid);"></textarea>
</td></tr>
<tr class="note_status"><td colspan="2"><span id="status"></span></td></tr>
</table>

<script type="text/javascript"><!--
var tid;
var datadir = "data/";
var page_name = document.getElementById("page_name").innerHTML;
loadpage(page_name);
// -->
</script>
</body>
</html>

ajax.js

function HttpRequest(){
  if(window.ActiveXObject){
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        return null;
      }
    }
  } else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  } else {
    return null;
  }
}
function id(id){
  return document.getElementById(id);
}
function print(id, str){
  document.getElementById(id).innerHTML = str;
}
function print_flush(id, str){
  document.getElementById(id).innerHTML = str;
  window.setTimeout('document.getElementById("'+id+'").innerHTML = ""', 2000);
}

page.css

@charset "utf-8";

/*
  ほげほげ
*/

body{
    background-color:#efeff0;
	color:#004624;
}
#page{
}
#pageindex{
}
#status{
}
.note{
	background:#c9c9c9;
	border:solid 1px;
	width:42em;
}
.childbox{
	position:absolute;
	z-index:1;
	border:solid 1px;
	background:#c9c9c9;
	display:none;
	padding:2px 2em 5px 2px;
	left: 2em;
}
.titlebar{
	background:#3939a0;
	color:white;
	width:42em;
	text-align:left;
	border: 0px;
}
.titlebar_title{
	width:38em;
}
.titlebar_button{
	color:black;
	font:bold;
	text-align:right;
	width:70px;
	background:#c9c9c9;
}
.titlebar_button input{
	width:20px;
	height:20px;
}
.note_status{
	height:1.5em;

savepage.cgi

#!/usr/bin/perl -w

use strict;
use CGI;

my $cgi = new CGI;

print $cgi->header(-type=>'text/plain', -charset=>'utf-8');

my $datadir = $cgi->param('datadir');
my $page_name = $cgi->param('page_name');
my $txtdata = $cgi->param('txtdata');

open PAGE, ">$datadir$page_name";
print PAGE $txtdata;
close PAGE;
print "saved.";

showindex.cgi

#!/usr/bin/perl -w

use strict;
use CGI;

my $cgi = new CGI;

print $cgi->header(-type=>'text/plain', -charset=>'utf-8');

my $datadir = $cgi->param('datadir');

mkdir $datadir if(!(-e $datadir));
chdir $datadir;

opendir DIR, ".";
for(readdir DIR){
  print "$_\n" if(-T $_ && $_ ne ".htaccess");
}
closedir DIR;

cgiはたぶんそのうちまとめる。Javascriptをかなり適当に書いているのが。C言語に無いような、try, catchとかの意味を理解せずに書いている、とかもなんとか。次はコードを綺麗にしたりしようと思う。

[追記] loadpageされない場合が

Firefoxで非アクティブのタブで開いたとき、デフォルトの「無題」ページが読み込まれない。これはどうしたもんだろうね。Sleipnirで試したら、そっちは普通に大丈夫だった。うーん。

test