Added clickable facets to the jsdemo.

[pazpar2-moved-to-github.git] / www / jsdemo / example_client.js

diff --git a/www/jsdemo/example_client.js b/www/jsdemo/example_client.js
index 0863997..0df0002 100644 (file)
--- a/www/jsdemo/example_client.js
+++ b/www/jsdemo/example_client.js
@@ -1,5 +1,5 @@
 /* A very simple client that shows a basic usage of the pz2.js
-** $Id: example_client.js,v 1.2 2007-06-22 10:54:46 adam Exp $
+** $Id: example_client.js,v 1.5 2007-07-24 08:15:12 jakub Exp $
 */
 
 // create a parameters array and pass it to the pz2's constructor
@@ -19,7 +19,7 @@ my_paz = new pz2( { "onshow": my_onshow,
 var curPage = 1;
 var recPerPage = 20;
 var totalRec = 0;
-var curDetRecId = -1;
+var curDetRecId = '';
 var curDetRecData = null;
 
 // wait until the DOM is ready
@@ -34,7 +34,7 @@ function domReady ()
 function onFormSubmitEventHandler() 
 {
     curPage = 1;
-    curDetRecId = -1;
+    curDetRecId = '';
     totalRec = 0;
     my_paz.search(document.search.query.value, recPerPage, 'relevance');
     return false;
@@ -62,11 +62,18 @@ function my_onshow(data) {
     
     for (var i = 0; i < data.hits.length; i++) {
         var hit = data.hits[i];
-        body.innerHTML += '<div class="record" id="rec_' + hit.recid + '" onclick="showDetails(this.id)">'
-                        +'<span>' + (i + 1 + recPerPage * ( curPage - 1)) + '. </span>'
-                        +'<span class="jslink"><b>' + hit["md-title"] +
-                        ' </b></span> by <span><i>' + hit["md-author"] + '</i></span></div>';
-
+       var html = '<div class="record" id="rec_' + hit.recid + '" onclick="showDetails(this.id)">'
+                    +'<span>' + (i + 1 + recPerPage * ( curPage - 1)) + '. </span>'
+                    +'<span class="jslink"><b>' + hit["md-title"] +
+                    ' </b></span>'; 
+       if (hit["md-title-remainder"] !== undefined) {
+           html += '<span>' + hit["md-title-remainder"] + '</span>';
+       }
+       if (hit["md-title-responsibility"] !== undefined) {
+           html += '<span><i>' + hit["md-title-responsibility"] + '</i></span>';
+       }
+       html += '</div>';
+       body.innerHTML += html;
         if ( hit.recid == curDetRecId ) {
             drawCurDetails();
         }
@@ -87,16 +94,16 @@ function my_onterm(data) {
     termlist.innerHTML = "<hr/><b>TERMLISTS:</b><hr/>";
     termlist.innerHTML += '<div class="termtitle">.::Subjects</div>';
     for (var i = 0; i < data.subject.length; i++ ) {
-        termlist.innerHTML += '<span>' 
+        termlist.innerHTML += '<span class="jslink" onclick="limitQuery(\'su\', this.firstChild.nodeValue)">' 
                             + data.subject[i].name 
-                            + ' </span><span> (' 
+                            + '</span><span>  (' 
                             + data.subject[i].freq 
                             + ')</span><br/>';
     }
     termlist.innerHTML += "<hr/>";
     termlist.innerHTML += '<div class="termtitle">.::Authors</div>';
     for (var i = 0; i < data.author.length; i++ ) {
-        termlist.innerHTML += '<span>' 
+        termlist.innerHTML += '<span class="jslink" onclick="limitQuery(\'au\', this.firstChild.nodeValue)">' 
                             + data.author[i].name 
                             + ' </span><span> (' 
                             + data.author[i].freq 
@@ -135,7 +142,7 @@ function my_onbytarget(data) {
 
 // detailed record drawing
 function showDetails ( prefixRecId ) {
-    var recId = Number(prefixRecId.replace('rec_', ''));
+    var recId = prefixRecId.replace('rec_', '');
     
     // remove current detailed view if any
     var detRecordDiv = document.getElementById('det_'+curDetRecId);
@@ -145,7 +152,7 @@ function showDetails ( prefixRecId ) {
 
     // if the same clicked do not redraw
     if ( recId == curDetRecId ) {
-        curDetRecId = -1;
+        curDetRecId = '';
         return;
     }
 
@@ -163,11 +170,18 @@ function drawCurDetails ()
                             '"><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>URL</b></td><td><b>:</b> <a href="' + data["md-electronic-url"] + '">' + data["md-electronic-url"] + '</a>' +
                             "</td></tr><tr><td><b>Subject</b></td><td><b>:</b> " + data["md-subject"] + 
                             "</td></tr><tr><td><b>Location</b></td><td><b>:</b> " + data["location"][0].name + 
                             "</td></tr></table></div>";
 }
 
+// limit the query after clicking the facet
+function limitQuery (field, value)
+{
+    document.search.query.value += ' and ' + field + '="' + value + '"';
+    onFormSubmitEventHandler();
+}
 
 // simple paging functions