ほげほげノート(4)

Programmming Javascript Ajax

http://konbu.s13.xrea.com/lib/ajax/page4/page.html
前進したかどうか怪しいけど。jQueryを使ってみた。
追加した機能はウィンドウ移動とウィンドウの最小化機能。この機能に意味は無い。
jQueryを使ったせいかなんなのか、Firefoxで非アクティブのタブで開いたとき、ページが読み込まれない問題は発生しなくなった。よくわからない。

参考ページはこのへん。


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="jquery.js"></script>
<script type="text/javascript"><!--
function loadpage(page_name){
	if(!page_name) page_name = $("#page_name").text();
	$("#httpdump").load(datadir+encodeURI(encodeURI(page_name)),
		function(text, status){
			$("#page")[0].value = text;
			$("#page_name").text(page_name);
			document.title = page_name+" - メモ帳";
			print_flush("status", "loaded.");
		});
}
function savepage(page_name){
	var txtdata = $("#page")[0].value;
	$("#httpdump").load("page.cgi",
		{mode: "save", datadir: datadir, page_name: encodeURI(page_name), txtdata: txtdata},
		function(text, status){
			print_flush("status", "saved.");
		});
}
function editevent(event,tid){
	var page_name = $("#page_name").text();
	$("#status").text("text edited...");
	clearTimeout(tid);
	return window.setTimeout('savepage("'+page_name+'")',2000);
}
function openindexbox(){
	$("#httpdump").load("page.cgi",{mode: "index", datadir: datadir},
		function(text, status){
			indexboxhtml = decodeURI(text).replace(/(.+)\n/g,
				"<a onclick='selectpage(\"$1\");' href='#'>$1</a><br>");
			$("#indexlist").html(indexboxhtml);
			$("#indexbox").show();
			$("#status").text("");
		});
}
function selectpage(page_name){
	loadpage(page_name);
	$("#indexbox").hide();
}
function savepageas(){
	var page_name = $("#savepagename")[0].value;
	savepage(page_name);
	$("#page_name").text(page_name);
	document.title = page_name;
	$("#savepagename")[0].value = "";
	$("#savebox").hide();
}
function print_flush(id, str){
  document.getElementById(id).innerHTML = str;
  window.setTimeout('document.getElementById("'+id+'").innerHTML = ""', 2000);
}
var tid;
var datadir = "data/";
var xbegin, ybegin, xmove, ymove, moveflag;
var xpoint = 100, ypoint = 100, notex = 100, notey = 100;
$(function(){
	$("#openindexbox").click(function(){openindexbox()});
	$("#closeindexbox").click(function(){$("#indexbox").hide()});
	$("#opensavebox").click(function(){$("#savebox").show()});
	$("#closesavebox").click(function(){$("#savebox").hide()});
	$("#page").keypress(function(event){tid=editevent(event,tid)});
	$("#httpdump").ajaxStart(function(){$("#status").text("Wait...")});
	$(".closewindow").click(function(){
		$("#note").hide();
		$("#note_mini").show();
		notex = xpoint; notey = ypoint;
		xpoint = ypoint = 0;
		$("#note_mini")[0].style["left"] = "0px";
		$("#note_mini")[0].style["top"] = "0px";
	});
	$(".maxwindow").click(function(){
		$("#note").show();
		$("#note_mini").hide();
		xpoint = notex; ypoint = notey;
		$("#note")[0].style["left"] = xpoint+"px";
		$("#note")[0].style["top"] = ypoint+"px";
	});
	$(".titlebar").mousedown(function(event){
		xbegin=event.pageX;
		ybegin=event.pageY;
		movewindow=$(this).parent().parent();
		moveflag=true;
	});
	$().mousemove(function(event){if(moveflag){
		xmove = (event.pageX-xbegin);
		ymove = (event.pageY-ybegin);
		movewindow[0].style["left"] = xpoint+xmove+"px";
		movewindow[0].style["top"] = ypoint+ymove+"px";
	}});
	$().mouseup(function(event){if(moveflag){
		xmove = (event.pageX-xbegin);
		ymove = (event.pageY-ybegin);
		movewindow[0].style["left"] = xpoint+xmove+"px";
		movewindow[0].style["top"] = ypoint+ymove+"px";
		xpoint += xmove;
		ypoint += ymove;
		moveflag = false;
	}});
});
// -->
</script>
</head>
<body>
<table id="note">
<tr class="titlebar">
<td class="titlebar_title">
<span id="page_name">無題</span> - メモ帳
</td>
<td class="titlebar_button">
<input type="submit" value="□" class="maxwindow">
<input type="submit" value="×" class="closewindow">
</td>
</tr>
<tr class="note_menu"><td colspan="2">
<a class="menu_item" id="openindexbox" href="#">他のページ開く</a>
<div class="childbox" id="indexbox">
<div id="indexlist"></div>
<input type="submit" id="closeindexbox" value="やっぱやめる">
</div>
<a class="menu_item" id="opensavebox" href="#">別名で保存</a>
<div class="childbox" id="savebox">
<input type="text" id="savepagename">
<input type="submit" onclick="savepageas()" value="保存"><br>
<input type="submit" id="closesavebox" value="やっぱやめる">
</div>
</td></tr>
<tr class="note_txt"><td colspan="2">
<textarea id="page" rows="15" cols="80"></textarea>
</td></tr>
<tr class="note_status"><td colspan="2"><span id="status"></span></td></tr>
</table>
<table id="note_mini">
<tr class="titlebar">
<td class="minititlebar_title">メモ帳</td>
<td class="titlebar_button">
<input type="submit" value="□" class="maxwindow">
<input type="submit" value="×" class="closewindow">
</td>
</tr>
</table>
<pre id="httpdump"></pre>
<script type="text/javascript"><!--
$(document).ready(function(){
loadpage();
});
// -->
</script>
</body>
</html>

XMLHttpRequestまわりのコード量をだいぶ削れた。

page.css

@charset "utf-8";

/*
  ほげほげ
*/

body{
    background-color:#efeff0;
	color:#004624;
}
a:link,a:visited{
	color:#004624;
}
a:active,a:hover{
	font-weight:bold;
}
#page{
}
#pageindex{
}
#status{
}
#httpdump{
	display:none;
}
#note{
	background:#c9c9c9;
	border:solid 1px;
	width:42em;
	position:absolute;
	left:100px;
	top:100px;
}
#note_mini{
	background:#c9c9c9;
	border:solid 1px;
	width:10em;
	display:none;
	position:absolute;
	left:0px;
	top:0px;
}
.childbox{
	position:absolute;
	z-index:1;
	border:solid 1px;
	background:#c9c9c9;
	display:none;
	padding:2px 2em 5px 2px;
}
.titlebar{
	background:#3939a0;
	color:white;
	text-align:left;
	border: 0px;
}
.titlebar_title{
	width:39em;
}
.minititlebar_title{
	width:6em;
}
.titlebar_button{
	color:black;
	font:bold;
	text-align:right;
	width:45px;
	background:#c9c9c9;
}
.titlebar_button input{
	width:20px;
	height:20px;
}
.note_status{
	height:1.5em;
}

page.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 $mode = $cgi->param('mode');
my $page_name = $cgi->param('page_name');
my $txtdata = $cgi->param('txtdata');

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

if($mode eq 'save' && defined $page_name && defined $txtdata){
	open PAGE, ">$page_name";
	print PAGE $txtdata;
	close PAGE;
	print "saved.";
}
elsif($mode eq 'index'){
	opendir DIR, ".";
	for(readdir DIR){
		print "$_\n" if(-T $_ && $_ ne ".htaccess");
	}
	closedir DIR;
}

.htaccess

Header set Pragma no-cache
Header set Cache-Control no-cache

test