/* A very simple client that shows a basic usage of the pz2.js
-** $Id: example_client.js,v 1.1 2007-05-18 11:36:39 jakub Exp $
+** $Id: example_client.js,v 1.2 2007-05-18 15:16:18 jakub Exp $
*/
// create a parameters array and pass it to the pz2's constructor
function domReady ()
{
document.search.onsubmit = onFormSubmitEventHandler;
+ my_paz.stat();
}
// when search button pressed
var body = document.getElementById("body");
body.innerHTML = "";
- body.innerHTML +='<div>Displaying: ' + data.start + ' to ' + (data.start + data.num) +
- ' of ' + data.merged + ' (total not merged hits: ' + data.total + ')</div><hr/>';
+ body.innerHTML +='<hr/><div style="float: right">Displaying: '
+ + data.start + ' to ' + (data.start + data.num) +
+ ' of ' + data.merged + ' (total not merged hits: '
+ + data.total + ')</div>';
- body.innerHTML += '<span id="prev" onclick="pagerPrev();" style="cursor: pointer;">Prev</span> <b>|</b> '
- + '<span id="next" onclick="pagerNext()" style="cursor: pointer;">Next</span><hr/>';
+ body.innerHTML += '<div style="float: clear"><span id="prev" onclick="pagerPrev();" style="cursor: pointer;">'
+ +'<< Prev</span> <b>|</b> '
+ +'<span id="next" onclick="pagerNext()" style="cursor: pointer;">'
+ +'Next >></span></div><hr/>';
for (var i = 0; i < data.hits.length; i++) {
var hit = data.hits[i];
- body.innerHTML += '<div id="rec_' + hit.recid + '" onclick="showDetails(this.id)">'
+ body.innerHTML += '<div class="record" id="rec_' + hit.recid + '" onclick="showDetails(this.id)">'
+'<span>' + (i + 1 + recPerPage * ( curPage - 1)) + '. </span>'
+'<span style="cursor: pointer;"><b>' + hit["md-title"] +
' </b></span> by <span><i>' + hit["md-author"] + '</i></span></div>';
function my_onterm(data) {
var termlist = document.getElementById("termlist");
- termlist.innerHTML = "";
- termlist.innerHTML += "<div><b> --Author </b></div>";
+ termlist.innerHTML = "<hr/><b>TERMLISTS:</b><hr/>";
+ termlist.innerHTML += "<div><b> --Author </b></div>";
for (var i = 0; i < data.author.length; i++ ) {
- termlist.innerHTML += '<div><span>' + data.author[i].name + ' </span><span> (' + data.author[i].freq + ')</span></div>';
+ termlist.innerHTML += '<div><span>'
+ + data.author[i].name
+ + ' </span><span> ('
+ + data.author[i].freq
+ + ')</span></div>';
}
termlist.innerHTML += "<hr/>";
termlist.innerHTML += "<div><b> --Subject </b></div>";
for (var i = 0; i < data.subject.length; i++ ) {
- termlist.innerHTML += '<div><span>' + data.subject[i].name + ' </span><span> (' + data.subject[i].freq + ')</span></div>';
+ termlist.innerHTML += '<div><span>'
+ + data.subject[i].name
+ + ' </span><span> ('
+ + data.subject[i].freq
+ + ')</span></div>';
}
}
function my_onbytarget(data) {
var targetDiv = document.getElementById("bytarget");
- targetDiv.innerHTML = '<thead><tr><td>ID</td><td>Hits</td><td>Diag</td><td>Rec</td><td>State</td></tr></thead>';
+ var table = '<thead><tr><td>Target ID</td><td>Hits</td><td>Diags</td>'
+ +'<td>Records</td><td>State</td></tr></thead><tbody>';
for (var i = 0; i < data.length; i++ ) {
- targetDiv.innerHTML += "<tr><td><b>" + data[i].id +
- "</b></td><td>" + data[i].hits +
- "</td><td>" + data[i].diagnostic +
- "</td><td>" + data[i].records +
- "</td><td>" + data[i].state + "</td></tr>";
+ table += "<tr><td>" + data[i].id +
+ "</td><td>" + data[i].hits +
+ "</td><td>" + data[i].diagnostic +
+ "</td><td>" + data[i].records +
+ "</td><td>" + data[i].state + "</td></tr>";
}
+
+ table += '</tbody>';
+ targetDiv.innerHTML = table;
+
}
// detailed record drawing
function showDetails ( prefixRecId ) {
var recId = Number(prefixRecId.replace('rec_', ''));
- // if the same clicked ignore
- if ( recId == curDetRecId )
- return;
-
- // if different remove the old one
+ // remove current detailed view if any
var detRecordDiv = document.getElementById('det_'+curDetRecId);
// lovin DOM!
if ( detRecordDiv )
detRecordDiv.parentNode.removeChild(detRecordDiv);
+ // if the same clicked do not redraw
+ if ( recId == curDetRecId ) {
+ curDetRecId = -1;
+ return;
+ }
+
curDetRecId = recId;
// request the record
{
var data = curDetRecData;
var recordDiv = document.getElementById('rec_'+data.recid);
- recordDiv.innerHTML += '<div id="det_'+data.recid+'"><table><tr><td><b>Ttle</b></td><td><b>:</b> ' + data["md-title"] +
+ recordDiv.innerHTML += '<div class="details" id="det_'+data.recid+
+ '"><table><tr><td><b>Ttle</b></td><td><b>:</b> '+data["md-title"] +
"</td></tr><tr><td><b>Date</b></td><td><b>:</b> " + data["md-date"] +
"</td></tr><tr><td><b>Author</b></td><td><b>:</b> " + data["md-author"] +
"</td></tr><tr><td><b>Subject</b></td><td><b>:</b> " + data["md-subject"] +
-<!-- $Id: index.html,v 1.2 2007-05-18 13:00:14 jakub Exp $ -->
+<!-- $Id: index.html,v 1.3 2007-05-18 15:16:18 jakub Exp $ -->
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<html>
<head>
overflow-y: scroll;
}
- html, body {
- color: #002863;
- font-family: verdana, arial, sans-serif;
+ body {
+ font-family: tahoma, arial, sans-serif;
font-size: small;
}
- input.search {
- background-color: #f0f0f0;
- color: #002863;
- border: 1px solid #a5acb2;
- width: 420px;
+ hr {
+ border: 0;
+ color: gray;
+ background-color: gray;
+ height: 1px;
+ }
+
+ .heading {
+ background-color: #ff8c71;
+ border-color: #ff8c71;
+ color: #ffffff;
+ font-size: large;
+ }
+
+ input#button {
+ border: 3px groove #3171f2;
+ background-color: #6b9bfd;
+ padding: 1px;
+ width: 5em;
+ color: #FFFFFF;
+ font-weight: bold;
+ font-size: 12px;
+ margin-left: 8px;
+ cursor: pointer;
+ }
+
+ input#query {
+ border: 2px inset #ff613c;
+ padding: 3px;
+ font-size: 12px;
+ }
+
+ div.record {
+ padding: 5px;
+ }
+
+ div.details {
+ border: 3px dashed gray;
+ padding: 5px;
+ margin: 4px;
}
</style>
<body onload="domReady();">
- <table width="100%" border="0" cellpadding="6" cellspacing="6">
+ <table width="100%" border="0" cellpadding="6" cellspacing="0">
- <tr>
- <td width="250" height="100" align="center"><b>Exemplary pazpar2 client [using pz2.js]</b></td>
+ <tr class="heading">
+ <td width="250" height="100" align="center"><b>PazPar2</b></td>
<td>
<form id="searchForm" name="search">
- <b>Search:</b>
<input id="query" type="text" size="50"/>
- <input type="submit" value="Go"/>
+ <input id="button" type="submit" value="Search"/>
</form>
- <td>
+ </td>
</tr>
<tr>
<td width="250" valign="top">
- <b>TERMLISTS:</b>
- <br/><br/>
<div id="termlist"></div>
</td>
<td valign="top">
- <b>RESULTS:</b>
- <br/><br/>
- <div id="body"><div>
- <td>
+ <div id="body"></div>
+ </td>
</tr>
</table>
<hr/>
- <b>STATUS INFO:<b>
+ <b>STATUS INFO:</b>
<br/>
<br/>
<div id="stat"></div>
<br/>
<hr/>
- <b>TARGET IFO:</b>
+ <b>TARGET INFO:</b>
<br/>
<br/>
<table id="bytarget"></table>