Masterkey: IE 6 and 7 works. Safari 2.04, Opera 9.10 and Konqueror works with minor...
[pazpar2-moved-to-github.git] / 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     var recsBody = $('div.records');
52     recsBody.empty();
53     
54     for (var i = 0; i < data.hits.length; i++) {
55         var title = data.hits[i]["md-title"] || 'N/A';
56         var author = data.hits[i]["md-author"] || '';
57         var id = data.hits[i].recid;
58         var count = data.hits[i].count || 1;
59         
60         var recBody = $('<div class="record" id="rec_'+id+'"></div>');
61         var aTitle = $('<a class="recTitle">'+title+'</a>').appendTo(recBody);
62         aTitle.click(function(){
63                         var clickedId = this.parentNode.id.split('_')[1];
64                         if(currentDetailedId == clickedId){
65                             $(this.parentNode.lastChild).remove();
66                             currentDetailedId = null;
67                             return;
68                         } else if (currentDetailedId != null) {
69                             $('#rec_'+currentDetailedId).children('.detail').remove();
70                         }
71                         currentDetailedId = clickedId;
72                         my_paz.record(currentDetailedId);
73                         });
74         
75         if( author )
76             recBody.append('<i> by </i>');
77             $('<a name="author" class="recAuthor">'+author+'</a>\n').click(function(){ refine(this.name, this.firstChild.nodeValue) }).appendTo(recBody);
78
79         if( currentDetailedId == id ){
80             var detailBox = $('<div class="detail"></div>').appendTo(recBody);
81             drawDetailedRec(detailBox);
82         }
83
84         recsBody.append('<div class="resultNum">'+(currentPage*currentResultsPerPage+i+1)+'.</a>');
85         recsBody.append(recBody);
86
87     }
88
89     drawPager(data.merged, data.total);    
90 }
91
92 /*
93
94     body.innerHTML = "";
95     for ( i = 0; i < data.hits.length; i++) {
96         var hit = data.hits[i];
97         body.innerHTML += '<div id="' + hit.recid + '" onclick="my_paz.record(this.id)"><span>' + i + 
98                           '. </span><span><b>' + hit["md-title"] +
99                           ' </b></span> by <span><i>' + hit["md-author"] + '</i></span></div>';
100     }
101     body.innerHTML += "<hr/>";
102     body.innerHTML += '<div>active clients: ' + data.activeclients + '</div>' +
103                      '<div>merged: ' + data.merged + '</div>' +
104                      '<div>total: ' + data.total + '</div>' +
105                      '<div>start: ' + data.start + '</div>' +
106                      '<div>num: ' + data.num + '</div>';
107 }
108 */
109
110 function my_onstat(data)
111 {
112 /*
113     var stat = document.getElementById("stat");
114     stat.innerHTML = '<div>active clients: ' + data.activeclients + '</div>' +
115                      '<div>hits: ' + data.hits + '</div>' +
116                      '<div>records: ' + data.records + '</div>' +
117                      '<div>clients: ' + data.clients + '</div>' +
118                      '<div>searching: ' + data.searching + '</div>';
119 */
120 }
121
122 function my_onterm(data)
123 {
124     var termLists = $("#termlists");
125
126     if(termStartup)
127     {
128         for(var key in data){
129             if (key == "activeclients")
130                 continue;
131             var listName = key;
132             if (key == "xtargets")
133                 listName = "institution";
134
135             var termList = $('<div class="termlist" id="term_'+key+'"/>').appendTo(termLists);
136             var termTitle = $('<div class="termTitle"><a class="unselected">'+listName+'</a></div>').appendTo(termList);
137             termTitle.click(function(){
138                                 if( this.firstChild.className == "selected" ){
139                                     this.firstChild.className = "unselected";
140                                     $(this.nextSibling).hide();
141                                 } else {
142                                     this.firstChild.className = "selected";
143                                     $(this.nextSibling).show();
144                                 }
145                             });
146
147             listEntries = $('<div class="termEntries"></div>');
148             listEntries.hide();
149             listEntries.appendTo(termList);
150
151             for(var i = 0; i < data[key].length; i++)
152             {
153                 if (key == "xtargets"){
154                     var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
155                                 '<span> ('+data[key][i].freq+')</span></a>').appendTo(listEntries);
156                     listItem.click(function(){ 
157                         refine(this.name, this.attributes[0].nodeValue) });
158                 } else {
159                     var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name+
160                                     '<span> ('+data[key][i].freq+')</span></a>').appendTo(listEntries);
161                     listItem.click(function(){ refine(this.name, this.firstChild.nodeValue) });
162                 }
163             }        
164             $('<hr/>').appendTo(termLists);
165         }
166         termStartup = false;
167     } 
168     else 
169     {
170         for(var key in data){
171             if (key == "activeclients")
172                 continue;
173             var listEntries = $('#term_'+key).children('.termEntries');
174             listEntries.empty()
175
176             for(var i = 0; i < data[key].length; i++){
177                 if (key == "xtargets"){
178                     var listItem = $('<a class="sub" name="xtarget" value="'+data[key][i].id+'">'+data[key][i].name+
179                                 '<span> ('+data[key][i].freq+')</span></a>').click(function(){ 
180                                                                         refine(this.name, this.attributes[0].nodeValue) });
181                     listItem.appendTo(listEntries);
182                 } else {
183                     var listItem = $('<a class="sub" name="'+key+'">'+data[key][i].name+
184                                     '<span> ('+data[key][i].freq+')</span></a>').click(function(){ 
185                                                                         refine(this.name, this.firstChild.nodeValue) });
186                     listItem.appendTo(listEntries);
187                 }
188             }         
189         }
190     }
191 }
192
193 function my_onrecord(data)
194 {
195     currentDetailedData = data;
196     drawDetailedRec();
197     /*
198     details = data;
199     recordDiv = document.getElementById(data.recid);
200     recordDiv.innerHTML = "<table><tr><td><b>Ttle</b> : </td><td>" + data["md-title"] +
201                             "</td></tr><tr><td><b>Date</b> : </td><td>" + data["md-date"] +
202                             "</td></tr><tr><td><b>Author</b> : </td><td>" + data["md-author"] +
203                             "</td></tr><tr><td><b>Subject</b> : </td><td>" + data["md-subject"] + 
204                             "</td></tr><tr><td><b>Location</b> : </td><td>" + data["location"][0].name + "</td></tr></table>";
205                             */
206
207 }
208
209 function drawDetailedRec(detailBox)
210 {
211     if( detailBox == undefined )
212         detailBox = $('<div class="detail"></div>').appendTo($('#rec_'+currentDetailedId));
213     
214     detailBox.append('Details:<hr/>');
215     var detailTable = $('<table></table>');
216     var recDate = currentDetailedData["md-date"];
217     var recSubject = currentDetailedData["md-subject"];
218     var recLocation = currentDetailedData["location"];
219
220     if( recDate )
221         detailTable.append('<tr><td class="item">Published:</td><td>'+recDate+'</td></tr>');
222     if( recSubject )
223         detailTable.append('<tr><td class="item">Subject:</td><td>'+recSubject+'</td></tr>');
224     if( recLocation )
225         detailTable.append('<tr><td class="item">Available at:</td><td>&nbsp;</td></tr>');
226
227     for(var i=0; i < recLocation.length; i++)
228     {
229         detailTable.append('<tr><td class="item">&nbsp;</td><td>'+recLocation[i].name+'</td></tr>');
230     }
231
232     detailTable.appendTo(detailBox);
233 }
234
235 function my_onbytarget(data)
236 {
237     /*
238     targetDiv = document.getElementById("bytarget");
239     targetDiv.innerHTML = "<tr><td>ID</td><td>Hits</td><td>Diag</td><td>Rec</td><td>State</td></tr>";
240     
241     for ( i = 0; i < data.length; i++ ) {
242         targetDiv.innerHTML += "<tr><td><b>" + data[i].id +
243                                "</b></td><td>" + data[i].hits +
244                                "</td><td>" + data[i].diagnostic +
245                                "</td><td>" + data[i].records +
246                                "</td><td>" + data[i].state + "</td></tr>";
247     }
248     */
249 }
250
251 function refine(field, value)
252 {
253     var query = '';
254     var filter = undefined;
255     
256     switch(field) {
257         case "author": query = ' and au="'+value+'"'; break;
258         case "title": query = ' and ti="'+value+'"'; break;
259         case "date": query = ' and date="'+value+'"'; break;
260         case "subject": query = ' and su="'+value+'"'; break;
261         case "xtarget": filter = 'id='+value; break;
262     }
263     
264     currentPage = 0;
265     my_paz.search(currentQuery + query, currentResultsPerPage, currentSort, filter);    
266 }
267
268 function drawPager(max, hits)
269 {
270     var firstOnPage = currentPage * currentResultsPerPage + 1;
271     var lastOnPage = (firstOnPage + currentResultsPerPage - 1) < max ? (firstOnPage + currentResultsPerPage - 1) : max;
272
273     var results = $('div.showing');
274     results.empty();
275     results.append('Displaying: <b>'+firstOnPage+'</b> to <b>'+lastOnPage+
276                             '</b> of <b>'+max+'</b>'); //(total hits: '+hits+')');
277     var pager = $('div.pages');
278     pager.empty();
279     
280     if ( currentPage > 0 ){
281         $('<a class="previous_active">Previous</a>').click(function() { my_paz.showPrev(1); currentPage--; }).appendTo(pager.eq(0));
282         $('<a class="previous_active">Previous</a>').click(function() { my_paz.showPrev(1); currentPage--; }).appendTo(pager.eq(1));
283     }
284     else
285         pager.append('<a class="previous_inactive">Previous</a>');
286
287     var numPages = Math.ceil(max / currentResultsPerPage);
288     
289     for(var i = 1; i <= numPages; i++)
290     {
291         if( i == (currentPage + 1) ){
292            $('<a class="select">'+i+'</a>').appendTo(pager);
293            continue;
294         }
295         var pageLink = $('<a class="page">'+i+'</a>');
296         var plClone = pageLink.clone();
297
298         pageLink.click(function() { 
299             my_paz.showPage(this.firstChild.nodeValue - 1);
300             currentPage = (this.firstChild.nodeValue - 1);
301             });
302
303         plClone.click(function() { 
304             my_paz.showPage(this.firstChild.nodeValue - 1);
305             currentPage = (this.firstChild.nodeValue - 1);
306             });
307
308         //nasty hack
309         pager.eq(0).append(pageLink);
310         pager.eq(1).append(plClone);
311     }
312
313     if ( currentPage < (numPages-1) ){
314         $('<a class="next_active">Next</a>').click(function() { my_paz.showNext(1); currentPage++; }).appendTo(pager.eq(0));
315         $('<a class="next_active">Next</a>').click(function() { my_paz.showNext(1); currentPage++; }).appendTo(pager.eq(1));
316     }
317     else
318         pager.append('<a class="next_inactive">Next</a>');
319 }