Only load fifty top-level messages per request, add links to load all/more

Anyone who knows CSS and HTML should help out with this!

Demo is available at http://nix.synchro.net/sajax-forum/

web/root/sajax-forum/client_functions.xjs

@@ -137,6 +137,20 @@ function toggle_body(sub_code, message_number)
 	}
 }
 
+function load_more_messages(sub_code, offset, count)
+{
+	var containerid='message-list-'+clean_id(sub_code);
+	var container=document.getElementById(containerid);
+	var m=container.innerHTML.match(/^([\u0000-\uffff]*?)<[Aa] href="javascript:load_more_messages[\u0000-\uffff]*$/);
+
+	if(m!=null) {
+		ajaxpage(messages_url+"?sub_code="+sub_code+'&msg_count='+count+'&msg_offset='+offset+'&user='+user,containerid, undefined, undefined, false, m[1]);
+	}
+	else {
+		alert("No match!");
+	}
+}
+
 function toggle_messages(sub_code)
 {
 	var containerid='message-list-'+clean_id(sub_code);
@@ -179,9 +193,13 @@ function reload_groups()
 	ajaxpage(groups_url+'?user='+user,containerid);
 }
 
-function ajaxpage(url, containerid, buttonid, buttonurl, is_script)
+function ajaxpage(url, containerid, buttonid, buttonurl, is_script, prefix, suffix)
 {
 	var page_request = false;
+	if(prefix==undefined)
+		prefix='';
+	if(suffix==undefined)
+		suffix='';
 	if (window.XMLHttpRequest) // if Mozilla, Safari etc
 		page_request = new XMLHttpRequest();
 	else if (window.ActiveXObject){ // if IE
@@ -200,12 +218,12 @@ function ajaxpage(url, containerid, buttonid, buttonurl, is_script)
 	if(containerid != undefined) {
 		if(is_script) {
 			page_request.onreadystatechange=function() {
-				evalpage(page_request, containerid);
+				evalpage(page_request, containerid, prefix, suffix);
 			}
 		}
 		else {
 			page_request.onreadystatechange=function(){
-				loadpage(page_request, containerid, buttonid, buttonurl);
+				loadpage(page_request, containerid, buttonid, buttonurl, prefix, suffix);
 			}
 		}
 		document.body.style.cursor="progress";
@@ -230,35 +248,35 @@ function spin(current)
 	}
 }
 
-function evalpage(page_request, containerid)
+function evalpage(page_request, containerid, prefix, suffix)
 {
 	if(page_request.readyState==4) {
 		document.body.style.cursor="auto";
 		if ((page_request.status==200 || window.location.href.indexOf("http")==-1)) {
-			document.getElementById(containerid).innerHTML=eval(page_request.responseText);
+			document.getElementById(containerid).innerHTML=prefix+eval(page_request.responseText)+suffix;
 		}
 		else
-			document.getElementById(containerid).innerHTML='ERROR!';
+			document.getElementById(containerid).innerHTML=prefix+'ERROR!'+suffix;
 	}
 	else {
-		document.getElementById(containerid).innerHTML=spin(document.getElementById(containerid).innerHTML);
+		document.getElementById(containerid).innerHTML=prefix+spin(document.getElementById(containerid).innerHTML)+suffix;
 	}
 }
 
-function loadpage(page_request, containerid, buttonid, buttonurl)
+function loadpage(page_request, containerid, buttonid, buttonurl, prefix, suffix)
 {
 	if(page_request.readyState==4) {
 		document.body.style.cursor="auto";
 		if ((page_request.status==200 || window.location.href.indexOf("http")==-1)) {
-			document.getElementById(containerid).innerHTML=page_request.responseText;
+			document.getElementById(containerid).innerHTML=prefix+page_request.responseText+suffix;
 			if(buttonid != undefined && buttonurl != undefined)
 				document.getElementById(buttonid).src=buttonurl;
 		}
 		else
-			document.getElementById(containerid).innerHTML='';
+			document.getElementById(containerid).innerHTML=prefix+suffix;
 	}
 	else {
-		document.getElementById(containerid).innerHTML=spin(document.getElementById(containerid).innerHTML);
+		document.getElementById(containerid).innerHTML=prefix+spin(document.getElementById(containerid).innerHTML)+suffix;
 	}
 }
 

web/root/sajax-forum/messages.xjs

 <?xjs
 load("sbbsdefs.js");
 load(cwd+"functions.js");
+var messages_start = system.timer;
+var total_time=0;
 var sub_code=http_request.query.sub_code[0];
 var msg_number=NaN;
 if(http_request.query.msg_number!=undefined)
 	msg_number=parseInt(http_request.query.msg_number[0]);
+var msgs_per_request = 50;	// TODO - make this configurable (cookie?)
+var msg_count=msgs_per_request;
+if(http_request.query.msg_count!=undefined) {
+	if(http_request.query.msg_count[0]=='all')
+		msg_count=Infinity;
+	else
+		msg_count=parseInt(http_request.query.msg_count[0]);
+}
+var msg_offset=0;
+if(http_request.query.msg_offset!=undefined)
+	msg_offset=parseInt(http_request.query.msg_offset[0]);
+
 // Load the index
 var moderated=msg_area.sub[sub_code].is_moderated;
 
@@ -31,18 +45,6 @@ if(http_request.header['If-Modified-Since'] != undefined) {
 	}
 }
 
-function SmallHeader(hdr) {
-	this.thread_first=hdr.thread_first;
-	this.thread_next=hdr.thread_next;
-	this.thread_back=hdr.thread_back;
-	this.number=hdr.number;
-	this.when_written_time=hdr.when_written_time;
-	this.when_imported_time=hdr.when_imported_time;
-	this.subject=hdr.subject;
-	this.from=hdr.from;
-	this.to=hdr.to;
-}
-
 /* First, read ALL headers that may be affect this display */
 if(isNaN(msg_number)) {
 	for(i=0; i<msgbase.total_msgs; i++) {
@@ -53,7 +55,7 @@ if(isNaN(msg_number)) {
 			continue;
 		if(hdr.attr & (MSG_PRIVATE|MSG_DELETE))
 			continue;
-		headers[hdr.number]=new SmallHeader(hdr);
+		headers[hdr.number]=hdr;
 		if(hdr.thread_back==0)
 			top_level.push(hdr.number);
 		else {
@@ -62,7 +64,6 @@ if(isNaN(msg_number)) {
 				top_level.push(hdr.number);
 		}
 	}
-
 }
 else {
 	var top_msg=msg_number;
@@ -83,7 +84,7 @@ else {
 				continue;
 			if(hdr.thread_back==top_msg)
 				top_level.push(hdr.number);
-			headers[hdr.number]=new SmallHeader(hdr);
+			headers[hdr.number]=hdr;
 			if(hdr.thread_first) {
 				msg_number=hdr.thread_first;
 				continue;
@@ -95,6 +96,7 @@ else {
 			msg_number=hdr.thread_back;
 	}
 }
+log("PERFORMANCE: All headers: "+(system.timer-messages_start));
 
 /* Now, do a reply count and new flag for every header */
 var reply_count=new Object();
@@ -164,6 +166,7 @@ for(i in top_level) {
 		moved_back=true;
 	}
 }
+log("PERFORMANCE: Reply and new: "+(system.timer-messages_start));
 
 // If the If-Modified-Since is greater or equal to last import time, we're done!
 last_mod.setTime(last_mod_time*1000);
@@ -178,13 +181,20 @@ http_reply.header['Last-Modified']=strftime("%a, %d %b %Y %H:%M:%S GMT",last_mod
 top_level=top_level.sort(function(a,b) {
 	return(new_stats[b].date_sort - new_stats[a].date_sort);
 });
+log("PERFORMANCE: Sorted: "+(system.timer-messages_start));
 
 // Output messages... 
-for(i in top_level) {
+for(i=msg_offset; i<top_level.length; i++) {
+	if(msg_count<=0) {
+		write('<a href="javascript:load_more_messages(\''+sub_code+'\','+i+','+msgs_per_request+')">Load more messages</a> - <a href="javascript:load_more_messages(\''+sub_code+'\','+i+',\'all\')">Load all messages</a>');
+		break;
+	}
 	msg_number=top_level[i];
 	/* This xjs_load() is recursive!  Whee! */
 	xjs_load('message_display.xjs');
+	msg_count--;
 }
+log("PERFORMANCE: Messages: "+(system.timer-messages_start));
 ?>
 <?xjs
 // Close the message base