www/pz2_js/client_pz2.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 my_paz = new pz2( { "onshow": my_onshow,
   7                     "showtime": 500,            //each timer (show, stat, term, bytarget) can be specified this way
   8                     "onstat": my_onstat,
   9                     "onterm": my_onterm,
  10                     "termlist": "subject,author",
  11                     "onbytarget": my_onbytarget,
  12                     "onrecord": my_onrecord } );
  13
  14 // wait until the DOM is ready (could have been defined in the HTML)
  15 $(document).ready( function() {
  16                     document.search.onsubmit = onFormSubmitEventHandler;
  17                     document.getElementById("next").onclick = pagerNext;
  18                     document.getElementById("prev").onclick = pagerPrev;
  19                     } );
  20
  21 function onFormSubmitEventHandler() {
  22     my_paz.search(document.search.query.value, 15, 'relevance');
  23     return false;
  24 }
  25 //
  26 // pz2.js event handlers:
  27 //
  28 function my_onshow(data) {
  29     var body = document.getElementById("body");
  30     body.innerHTML = "";
  31     for ( i = 0; i < data.hits.length; i++) {
  32         var hit = data.hits[i];
  33         body.innerHTML += '<div id="' + hit.recid + '" onclick="my_paz.record(this.id)"><span>' + i +
  34                           '. </span><span><b>' + hit["md-title"] +
  35                           ' </b></span> by <span><i>' + hit["md-author"] + '</i></span></div>';
  36     }
  37     body.innerHTML += "<hr/>";
  38     body.innerHTML += '<div>active clients: ' + data.activeclients + '</div>' +
  39                      '<div>merged: ' + data.merged + '</div>' +
  40                      '<div>total: ' + data.total + '</div>' +
  41                      '<div>start: ' + data.start + '</div>' +
  42                      '<div>num: ' + data.num + '</div>';
  43 }
  44
  45 function my_onstat(data) {
  46     var stat = document.getElementById("stat");
  47     stat.innerHTML = '<div>active clients: ' + data.activeclients + '</div>' +
  48                      '<div>hits: ' + data.hits + '</div>' +
  49                      '<div>records: ' + data.records + '</div>' +
  50                      '<div>clients: ' + data.clients + '</div>' +
  51                      '<div>searching: ' + data.searching + '</div>';
  52 }
  53
  54 function my_onterm(data) {
  55     var termlist = document.getElementById("termlist");
  56     termlist.innerHTML = "";
  57     termlist.innerHTML  += "<div><b> --Author-- </b></div>";
  58     for ( i = 0; i < data.author.length; i++ ) {
  59         termlist.innerHTML += '<div><span>' + data.author[i].name + ' </span><span> (' + data.author[i].freq + ')</span></div>';
  60     }
  61     termlist.innerHTML += "<hr/>";
  62     termlist.innerHTML += "<div><b> --Subject-- </b></div>";
  63     for ( i = 0; i < data.subject.length; i++ ) {
  64         termlist.innerHTML += '<div><span>' + data.subject[i].name + ' </span><span> (' + data.subject[i].freq + ')</span></div>';
  65     }
  66 }
  67
  68 function my_onrecord(data) {
  69     details = data;
  70     recordDiv = document.getElementById(data.recid);
  71     recordDiv.innerHTML = "<table><tr><td><b>Ttle</b> : </td><td>" + data["md-title"] +
  72                             "</td></tr><tr><td><b>Date</b> : </td><td>" + data["md-date"] +
  73                             "</td></tr><tr><td><b>Author</b> : </td><td>" + data["md-author"] +
  74                             "</td></tr><tr><td><b>Subject</b> : </td><td>" + data["md-subject"] +
  75                             "</td></tr><tr><td><b>Location</b> : </td><td>" + data["location"][0].name + "</td></tr></table>";
  76
  77 }
  78
  79 function my_onbytarget(data) {
  80     targetDiv = document.getElementById("bytarget");
  81     targetDiv.innerHTML = "<tr><td>ID</td><td>Hits</td><td>Diag</td><td>Rec</td><td>State</td></tr>";
  82
  83     for ( i = 0; i < data.length; i++ ) {
  84         targetDiv.innerHTML += "<tr><td><b>" + data[i].id +
  85                                "</b></td><td>" + data[i].hits +
  86                                "</td><td>" + data[i].diagnostic +
  87                                "</td><td>" + data[i].records +
  88                                "</td><td>" + data[i].state + "</td></tr>";
  89     }
  90 }
  91
  92 function pagerNext() {
  93     my_paz.showNext();
  94 }
  95
  96 function pagerPrev() {
  97     my_paz.showPrev();
  98 }