www/masterkey/js/client.js

   1 // very simple client that shows a basic usage of the pz2.js
   2
   3 // create a parameters array and pass it to the pz2's constructor
   4 // then register the form submit event with the pz2.search function
   5
   6 var my_paz = new pz2( { "onshow": my_onshow,
   7                     //"showtime": 1000,
   8                     //"onstat": my_onstat,
   9                     "onterm": my_onterm,
  10                     "termlist": "subject,author,xtargets,date",
  11                     //"onbytarget": my_onbytarget,
  12                     "onrecord": my_onrecord } );
  13
  14 var currentSort = 'relevance';
  15 var currentResultsPerPage = 20;
  16 var currentQuery = null;
  17 var currentPage = 0;
  18
  19 var currentDetailedId = null;
  20 var currentDetailedData = null;
  21
  22 var termStartup = true;    //some things should be done only once
  23
  24 // wait until the DOM is ready (could have been defined in the HTML)
  25 $(document).ready( function() {
  26                     document.search.onsubmit = onFormSubmitEventHandler;
  27                     } );
  28
  29 function onFormSubmitEventHandler() {
  30     currentQuery = document.search.query.value;
  31     $('#sort').change(function(){
  32                     currentSort = this.value;
  33                     currentPage = 0;
  34                     my_paz.show(0, currentResultsPerPage, currentSort);
  35                     });
  36     $('#perpage').change(function(){
  37                     currentResultsPerPage = this.value;
  38                     currentPage = 0;
  39                     my_paz.show(0, currentResultsPerPage, currentSort);
  40                     });
  41     my_paz.search(document.search.query.value, 20, 'relevance');
  42     $('div.content').show();
  43     $("div.leftbar").show();
  44     return false;
  45 }
  46 //
  47 // pz2.js event handlers:
  48 //
  49 function my_onshow(data)
  50 {
  51     global = data;
  52     var recsBody = $('div.records');
  53     recsBody.empty();
  54
  55     for (var i = 0; i < data.hits.length; i++) {
  56         var title = data.hits[i]["md-title"] || 'N/A';
  57         var author = data.hits[i]["md-author"] || '';
  58         var id = data.hits[i].recid;
  59         var count = data.hits[i].count || 1;
  60
  61         var recBody = $('<div class="record" id="rec_'+id+'></div>');
  62         var aTitle = $('<a class="recTitle">'+title+'</a>').appendTo(recBody);
  63         aTitle.click(function(){
  64                         var clickedId = this.parentNode.id.split('_')[1];
  65                         if(currentDetailedId == clickedId){
  66                             $(this.parentNode.lastChild).remove();
  67                             currentDetailedId = null;
  68                             return;
  69                         } else if (currentDetailedId != null) {
  70                             $('#rec_'+currentDetailedId).children('.detail').remove();
  71                         }
  72                         currentDetailedId = clickedId;
  73                         my_paz.record(currentDetailedId);
  74                         });
  75
  76         if( author )
  77             recBody.append('<i> by </i>');
  78             $('<a name="author" class="recAuthor">'+author+'</a>\n').click(function(){ refine(this.name, this.firstChild.nodeValue) }).appendTo(recBody);
  79
  80         if( currentDetailedId == id ){
  81             var detailBox = $('<div class="detail"></div>').appendTo(recBody);
  82             drawDetailedRec(detailBox);
  83         }
  84
  85         recsBody.append('<div class="resultNum">'+(currentPage*currentResultsPerPage+i+1)+'.</a>');
  86         recsBody.append(recBody);
  87
  88     }
  89
  90     drawPager(data.merged, data.total);
  91 }
  92
  93 /*
  94
  95     body.innerHTML = "";
  96     for ( i = 0; i < data.hits.length; i++) {
  97         var hit = data.hits[i];
  98         body.innerHTML += '<div id="' + hit.recid + '" onclick="my_paz.record(this.id)"><span>' + i +
  99                           '. </span><span><b>' + hit["md-title"] +
 100                           ' </b></span> by <span><i>' + hit["md-author"] + '</i></span></div>';
 101     }
 102     body.innerHTML += "<hr/>";
 103     body.innerHTML += '<div>active clients: ' + data.activeclients + '</div>' +
 104                      '<div>merged: ' + data.merged + '</div>' +
 105                      '<div>total: ' + data.total + '</div>' +
 106                      '<div>start: ' + data.start + '</div>' +
 107                      '<div>num: ' + data.num + '</div>';
 108 }
 109 */
 110
 111 function my_onstat(data)
 112 {
 113 /*
 114     var stat = document.getElementById("stat");
 115     stat.innerHTML = '<div>active clients: ' + data.activeclients + '</div>' +
 116                      '<div>hits: ' + data.hits + '</div>' +
 117                      '<div>records: ' + data.records + '</div>' +
 118                      '<div>clients: ' + data.clients + '</div>' +
 119                      '<div>searching: ' + data.searching + '</div>';
 120 */
 121 }
 122
 123 function my_onterm(data)
 124 {
 125     var termLists = $("#termlists");
 126
 127     if(termStartup)
 128     {
 129         for(var key in data){
 130             if (key == "activeclients")
 131                 continue;
 132             var listName = key;
 133             if (key == "xtargets")
 134                 listName = "institution";
 135
 136             var termList = $('<div class="termlist" id="term_'+key+'"/>').appendTo(termLists);
 137             var termTitle = $('<div class="termTitle"><a class="unselected">'+listName+'</a></div>').appendTo(termList);
 138             termTitle.click(function(){
 139                                 if( this.firstChild.className == "selected" ){
 140                                     this.firstChild.className = "unselected";
 141                                     $(this.nextSibling).hide();
 142                                 } else {
 143                                     this.firstChild.className = "selected";
 144                                     $(this.nextSibling).show();
 145                                 }
 146                             });
 147
 148             listEntries = $('<div class="termEntries"></div>');
 149             listEntries.hide();
 150             listEntries.appendTo(termList);
 151
 152             for(var i = 0; i < data[key].length; i++)
 153             {
 154                 if (key == "xtargets"){
 155                     var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
 156                                 '<span> ('+data[key][i].freq+')</span></a>').appendTo(listEntries);
 157                     listItem.click(function(){
 158                         refine(this.name, this.attributes[0].nodeValue) });
 159                 } else {
 160                     var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name+
 161                                     '<span> ('+data[key][i].freq+')</span></a>').appendTo(listEntries);
 162                     listItem.click(function(){ refine(this.name, this.firstChild.nodeValue) });
 163                 }
 164             }
 165             $('<hr/>').appendTo(termLists);
 166         }
 167         termStartup = false;
 168     }
 169     else
 170     {
 171         for(var key in data){
 172             if (key == "activeclients")
 173                 continue;
 174             var listEntries = $('#term_'+key).children('.termEntries');
 175             listEntries.empty()
 176
 177             for(var i = 0; i < data[key].length; i++){
 178                 if (key == "xtargets"){
 179                     var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
 180                                 '<span> ('+data[key][i].freq+')</span></a>').click(function(){
 181                                                                         refine(this.name, this.attributes[0].nodeValue) });
 182                     listItem.appendTo(listEntries);
 183                 } else {
 184                     var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name+
 185                                     '<span> ('+data[key][i].freq+')</span></a>').click(function(){
 186                                                                         refine(this.name, this.firstChild.nodeValue) });
 187                     listItem.appendTo(listEntries);
 188                 }
 189             }
 190         }
 191     }
 192 }
 193
 194 function my_onrecord(data)
 195 {
 196     currentDetailedData = data;
 197     drawDetailedRec();
 198     /*
 199     details = data;
 200     recordDiv = document.getElementById(data.recid);
 201     recordDiv.innerHTML = "<table><tr><td><b>Ttle</b> : </td><td>" + data["md-title"] +
 202                             "</td></tr><tr><td><b>Date</b> : </td><td>" + data["md-date"] +
 203                             "</td></tr><tr><td><b>Author</b> : </td><td>" + data["md-author"] +
 204                             "</td></tr><tr><td><b>Subject</b> : </td><td>" + data["md-subject"] +
 205                             "</td></tr><tr><td><b>Location</b> : </td><td>" + data["location"][0].name + "</td></tr></table>";
 206                             */
 207
 208 }
 209
 210 function drawDetailedRec(detailBox)
 211 {
 212     if( detailBox == undefined )
 213         detailBox = $('<div class="detail"></div>').appendTo($('#rec_'+currentDetailedId));
 214
 215     detailBox.append('Details:<hr/>');
 216     var detailTable = $('<table></table>');
 217     var recDate = currentDetailedData["md-date"];
 218     var recSubject = currentDetailedData["md-subject"];
 219     var recLocation = currentDetailedData["location"];
 220
 221     if( recDate )
 222         detailTable.append('<tr><td class="item">Published:</td><td>'+recDate+'</td></tr>');
 223     if( recSubject )
 224         detailTable.append('<tr><td class="item">Subject:</td><td>'+recSubject+'</td></tr>');
 225     if( recLocation )
 226         detailTable.append('<tr><td class="item">Available at:</td><td>&nbsp;</td></tr>');
 227
 228     for(var i=0; i < recLocation.length; i++)
 229     {
 230         detailTable.append('<tr><td class="item">&nbsp;</td><td>'+recLocation[i].name+'</td></tr>');
 231     }
 232
 233     detailTable.appendTo(detailBox);
 234 }
 235
 236 function my_onbytarget(data)
 237 {
 238     /*
 239     targetDiv = document.getElementById("bytarget");
 240     targetDiv.innerHTML = "<tr><td>ID</td><td>Hits</td><td>Diag</td><td>Rec</td><td>State</td></tr>";
 241
 242     for ( i = 0; i < data.length; i++ ) {
 243         targetDiv.innerHTML += "<tr><td><b>" + data[i].id +
 244                                "</b></td><td>" + data[i].hits +
 245                                "</td><td>" + data[i].diagnostic +
 246                                "</td><td>" + data[i].records +
 247                                "</td><td>" + data[i].state + "</td></tr>";
 248     }
 249     */
 250 }
 251
 252 function refine(field, value)
 253 {
 254     var query = '';
 255     var filter = undefined;
 256
 257     switch(field) {
 258         case "author": query = ' and au="'+value+'"'; break;
 259         case "title": query = ' and ti="'+value+'"'; break;
 260         case "date": query = ' and date="'+value+'"'; break;
 261         case "subject": query = ' and su="'+value+'"'; break;
 262         case "xtarget": filter = 'id='+value; break;
 263     }
 264
 265     currentPage = 0;
 266     my_paz.search(currentQuery + query, currentResultsPerPage, currentSort, filter);
 267 }
 268
 269 function drawPager(max, hits)
 270 {
 271     var firstOnPage = currentPage * currentResultsPerPage + 1;
 272     var lastOnPage = (firstOnPage + currentResultsPerPage - 1) < max ? (firstOnPage + currentResultsPerPage - 1) : max;
 273
 274     var results = $('div.showing');
 275     results.empty();
 276     results.append('Displaying: <b>'+firstOnPage+'</b> to <b>'+lastOnPage+
 277                             '</b> of <b>'+max+'</b>'); //(total hits: '+hits+')');
 278     var pager = $('div.pages');
 279     pager.empty();
 280
 281     if ( currentPage > 0 ){
 282         $('<a class="previous_active">Previous</a>').click(function() { my_paz.showPrev(1); currentPage--; }).appendTo(pager.eq(0));
 283         $('<a class="previous_active">Previous</a>').click(function() { my_paz.showPrev(1); currentPage--; }).appendTo(pager.eq(1));
 284     }
 285     else
 286         pager.append('<a class="previous_inactive">Previous</a>');
 287
 288     var numPages = Math.ceil(max / currentResultsPerPage);
 289
 290     for(var i = 1; i <= numPages; i++)
 291     {
 292         if( i == (currentPage + 1) ){
 293            $('<a class="select">'+i+'</a>').appendTo(pager);
 294            continue;
 295         }
 296         var pageLink = $('<a class="page">'+i+'</a>');
 297         var plClone = pageLink.clone();
 298
 299         pageLink.click(function() {
 300             my_paz.showPage(this.firstChild.nodeValue - 1);
 301             currentPage = (this.firstChild.nodeValue - 1);
 302             });
 303
 304         plClone.click(function() {
 305             my_paz.showPage(this.firstChild.nodeValue - 1);
 306             currentPage = (this.firstChild.nodeValue - 1);
 307             });
 308
 309         //nasty hack
 310         pager.eq(0).append(pageLink);
 311         pager.eq(1).append(plClone);
 312     }
 313
 314     if ( currentPage < (numPages-1) ){
 315         $('<a class="next_active">Next</a>').click(function() { my_paz.showNext(1); currentPage++; }).appendTo(pager.eq(0));
 316         $('<a class="next_active">Next</a>').click(function() { my_paz.showNext(1); currentPage++; }).appendTo(pager.eq(1));
 317     }
 318     else
 319         pager.append('<a class="next_inactive">Next</a>');
 320 }