document, refactor for empty mkws_config object
[mkws-moved-to-github.git] / experiments / spclient / mkws.js
1 /* A very simple client that shows a basic usage of the pz2.js
2 */
3
4 "use strict"; // HTML5: disable for debug >= 2
5
6 /* 
7  * global config object: mkws_config 
8  * 
9  * needs to be defined in the HTML header before 
10  * including this JS file
11  */
12
13 if (!mkws_config)
14     var mkws_config = {}; // for the guys who forgot to define mkws_config...
15
16 var mkws_debug = 1;
17
18 var pazpar2_url = mkws_config.pazpar2_url ? mkws_config.pazpar2_url : "/pazpar2/search.pz2";
19 var service_proxy_url = mkws_config.service_proxy_url ? mkws_config.service_proxy_url : "/service-proxy/";
20
21 var pazpar2path = mkws_config.use_service_proxy ? service_proxy_url : pazpar2_url;
22 var usesessions = mkws_config.use_service_proxy ? false : true;
23
24
25 var mkws_locale_lang = {
26     "de": {
27         "Authors": "Autoren",
28         "Subjects": "Schlagwörter",
29         "Sources": "Daten und Quellen",
30         "TERMLISTS": "Termlisten",
31         "Next": "Weiter",
32         "Prev": "Zurück",
33         "Search": "Suche",
34         "Sort by": "Sortieren nach",
35         "and show": "und zeige",
36         "per page": "pro Seite",
37         "Displaying": "Zeige",
38         "to": "von",
39         "of": "aus",
40         "found": "gefunden",
41         "Title": "Titel",
42         "Author": "Autor",
43         "Date": "Datum",
44         "Subject": "Schlagwort",
45         "Location": "Ort",
46
47         "dummy": "dummy"
48     },
49
50     "da": {
51         "Authors": "Forfattere",
52         "Subjects": "Emner",
53         "Sources": "Kilder",
54         "TERMLISTS": "TERMLISTS",
55         "Next": "Næste",
56         "Prev": "Forrige",
57         "Search": "Søg",
58         "Sort by": "Sorter efter",
59         "and show": "og vis",
60         "per page": "per side",
61         "Displaying": "Viser",
62         "to": "til",
63         "of": "ud af",
64         "found": "fandt",
65         "Title": "Title",
66         "Author": "Forfatter",
67         "Date": "Dato",
68         "Subject": "Emneord",
69         "Location": "Lokation",
70
71         "dummy": "dummy"
72     }
73 };
74
75 // create a parameters array and pass it to the pz2's constructor
76 // then register the form submit event with the pz2.search function
77 // autoInit is set to true on default
78 var my_paz = new pz2( { "onshow": my_onshow,
79                     "showtime": 500,            //each timer (show, stat, term, bytarget) can be specified this way
80                     "pazpar2path": pazpar2path,
81                     "oninit": my_oninit,
82                     "onstat": my_onstat,
83                     "onterm": my_onterm,
84                     "termlist": "xtargets,subject,author",
85                     "onbytarget": my_onbytarget,
86                     "usesessions" : usesessions,
87                     "showResponseType": '', // or "json" (for debugging?)
88                     "onrecord": my_onrecord } );
89 // some state vars
90 var curPage = 1;
91 var recPerPage = 20;
92 var totalRec = 0;
93 var curDetRecId = '';
94 var curDetRecData = null;
95 var curSort = 'relevance';
96 var curFilter = null;
97 var submitted = false;
98 var SourceMax = 16;
99 var SubjectMax = 10;
100 var AuthorMax = 10;
101
102 //
103 // pz2.js event handlers:
104 //
105 function my_oninit() {
106     my_paz.stat();
107     my_paz.bytarget();
108 }
109
110 function my_onshow(data) {
111     totalRec = data.merged;
112     // move it out
113     var pager = document.getElementById("pager");
114     pager.innerHTML = "";
115     pager.innerHTML +='<hr/><div style="float: right">' + M('Displaying') + ': '
116                     + (data.start + 1) + ' ' + M('to') + ' ' + (data.start + data.num) +
117                      ' ' + M('of') + ' ' + data.merged + ' (' + M('found') + ': '
118                      + data.total + ')</div>';
119     drawPager(pager);
120     // navi
121     var results = document.getElementById("results");
122
123     var html = [];
124     for (var i = 0; i < data.hits.length; i++) {
125         var hit = data.hits[i];
126               html.push('<div class="record" id="recdiv_'+hit.recid+'" >'
127             +'<span>'+ (i + 1 + recPerPage * (curPage - 1)) +'. </span>'
128             +'<a href="#" id="rec_'+hit.recid
129             +'" onclick="showDetails(this.id);return false;"><b>'
130             + hit["md-title"] +' </b></a>');
131               if (hit["md-title-remainder"] !== undefined) {
132                 html.push('<span>' + hit["md-title-remainder"] + ' </span>');
133               }
134               if (hit["md-title-responsibility"] !== undefined) {
135             html.push('<span><i>'+hit["md-title-responsibility"]+'</i></span>');
136         }
137         if (hit.recid == curDetRecId) {
138             html.push(renderDetails(curDetRecData));
139         }
140         html.push('</div>');
141     }
142     replaceHtml(results, html.join(''));
143 }
144
145 function my_onstat(data) {
146     var stat = document.getElementById("mkwsStat");
147     if (stat == null)
148         return;
149
150     stat.innerHTML = '<b>STATUS INFO</b> -- Active clients: '
151                         + data.activeclients
152                         + '/' + data.clients + ' -- </span>'
153                         + '<span>Retrieved records: ' + data.records
154                         + '/' + data.hits + ' :.</span>';
155 }
156
157 function my_onterm(data) {
158     if (!mkws_config.termlist_menu)
159         return;
160     
161     var termlists = [];
162     termlists.push('<hr/><b>' + M('TERMLISTS') + ':</b><hr/><div class="termtitle">' + M('Sources') + '</div>');
163     for (var i = 0; i < data.xtargets.length && i < SourceMax; i++ ) {
164         termlists.push('<a href="#" target_id='+data.xtargets[i].id
165             + ' onclick="limitTarget(this.getAttribute(\'target_id\'), this.firstChild.nodeValue);return false;">' + data.xtargets[i].name
166         + ' </a><span> (' + data.xtargets[i].freq + ')</span><br/>');
167     }
168
169     termlists.push('<hr/><div class="termtitle">' + M('Subjects') + '</div>');
170     for (var i = 0; i < data.subject.length && i < SubjectMax; i++ ) {
171         termlists.push('<a href="#" onclick="limitQuery(\'su\', this.firstChild.nodeValue);return false;">' + data.subject[i].name + '</a><span>  ('
172               + data.subject[i].freq + ')</span><br/>');
173     }
174
175     termlists.push('<hr/><div class="termtitle">' + M('Authors') + '</div>');
176     for (var i = 0; i < data.author.length && i < AuthorMax; i++ ) {
177         termlists.push('<a href="#" onclick="limitQuery(\'au\', this.firstChild.nodeValue);return false;">'
178                             + data.author[i].name
179                             + ' </a><span> ('
180                             + data.author[i].freq
181                             + ')</span><br/>');
182     }
183     var termlist = document.getElementById("termlist");
184     replaceHtml(termlist, termlists.join(''));
185 }
186
187 function my_onrecord(data) {
188     // FIXME: record is async!!
189     clearTimeout(my_paz.recordTimer);
190     // in case on_show was faster to redraw element
191     var detRecordDiv = document.getElementById('det_'+data.recid);
192     if (detRecordDiv) return;
193     curDetRecData = data;
194     var recordDiv = document.getElementById('recdiv_'+curDetRecData.recid);
195     var html = renderDetails(curDetRecData);
196     recordDiv.innerHTML += html;
197 }
198
199 function my_onbytarget(data) {
200     var targetDiv = document.getElementById("bytarget");
201     var table ='<table><thead><tr><td>Target ID</td><td>Hits</td><td>Diags</td>'
202         +'<td>Records</td><td>State</td></tr></thead><tbody>';
203
204     for (var i = 0; i < data.length; i++ ) {
205         table += "<tr><td>" + data[i].id +
206             "</td><td>" + data[i].hits +
207             "</td><td>" + data[i].diagnostic +
208             "</td><td>" + data[i].records +
209             "</td><td>" + data[i].state + "</td></tr>";
210     }
211
212     table += '</tbody></table>';
213     targetDiv.innerHTML = table;
214 }
215
216 ////////////////////////////////////////////////////////////////////////////////
217 ////////////////////////////////////////////////////////////////////////////////
218
219 // wait until the DOM is ready
220 function domReady ()
221 {
222     document.search.onsubmit = onFormSubmitEventHandler;
223     document.search.query.value = '';
224     document.select.sort.onchange = onSelectDdChange;
225     document.select.perpage.onchange = onSelectDdChange;
226 }
227
228 // when search button pressed
229 function onFormSubmitEventHandler()
230 {
231     resetPage();
232     loadSelect();
233     triggerSearch();
234     submitted = true;
235     return false;
236 }
237
238 function onSelectDdChange()
239 {
240     if (!submitted) return false;
241     resetPage();
242     loadSelect();
243     my_paz.show(0, recPerPage, curSort);
244     return false;
245 }
246
247 function resetPage()
248 {
249     curPage = 1;
250     totalRec = 0;
251 }
252
253 function triggerSearch ()
254 {
255     my_paz.search(document.search.query.value, recPerPage, curSort, curFilter);
256 }
257
258 function loadSelect ()
259 {
260     curSort = document.select.sort.value;
261     recPerPage = document.select.perpage.value;
262 }
263
264 // limit the query after clicking the facet
265 function limitQuery (field, value)
266 {
267     document.search.query.value += ' and ' + field + '="' + value + '"';
268     onFormSubmitEventHandler();
269 }
270
271 // limit by target functions
272 function limitTarget (id, name)
273 {
274     var navi = document.getElementById('navi');
275     navi.innerHTML =
276         'Source: <a class="crossout" href="#" onclick="delimitTarget();return false;">'
277         + name + '</a>';
278     navi.innerHTML += '<hr/>';
279     curFilter = 'pz:id=' + id;
280     resetPage();
281     loadSelect();
282     triggerSearch();
283     return false;
284 }
285
286 function delimitTarget ()
287 {
288     var navi = document.getElementById('navi');
289     navi.innerHTML = '';
290     curFilter = null;
291     resetPage();
292     loadSelect();
293     triggerSearch();
294     return false;
295 }
296
297 function drawPager (pagerDiv)
298 {
299     //client indexes pages from 1 but pz2 from 0
300     var onsides = 6;
301     var pages = Math.ceil(totalRec / recPerPage);
302
303     var firstClkbl = ( curPage - onsides > 0 )
304         ? curPage - onsides
305         : 1;
306
307     var lastClkbl = firstClkbl + 2*onsides < pages
308         ? firstClkbl + 2*onsides
309         : pages;
310
311     var prev = '<span id="prev">&#60;&#60; ' + M('Prev') + '</span><b> | </b>';
312     if (curPage > 1)
313         prev = '<a href="#" id="prev" onclick="pagerPrev();">'
314         +'&#60;&#60; ' + M('Prev') + '</a><b> | </b>';
315
316     var middle = '';
317     for(var i = firstClkbl; i <= lastClkbl; i++) {
318         var numLabel = i;
319         if(i == curPage)
320             numLabel = '<b>' + i + '</b>';
321
322         middle += '<a href="#" onclick="showPage(' + i + ')"> '
323             + numLabel + ' </a>';
324     }
325
326     var next = '<b> | </b><span id="next">' + M('Next') + ' &#62;&#62;</span>';
327     if (pages - curPage > 0)
328         next = '<b> | </b><a href="#" id="next" onclick="pagerNext()">'
329         + M('Next') + ' &#62;&#62;</a>';
330
331     var predots = '';
332     if (firstClkbl > 1)
333         predots = '...';
334
335     var postdots = '';
336     if (lastClkbl < pages)
337         postdots = '...';
338
339     pagerDiv.innerHTML += '<div style="float: clear">'
340         + prev + predots + middle + postdots + next + '</div><hr/>';
341 }
342
343 function showPage (pageNum)
344 {
345     curPage = pageNum;
346     my_paz.showPage( curPage - 1 );
347 }
348
349 // simple paging functions
350
351 function pagerNext() {
352     if ( totalRec - recPerPage*curPage > 0) {
353         my_paz.showNext();
354         curPage++;
355     }
356 }
357
358 function pagerPrev() {
359     if ( my_paz.showPrev() != false )
360         curPage--;
361 }
362
363 // swithing view between targets and records
364
365 function switchView(view) {
366
367     var targets = document.getElementById('mkwsTargets');
368     var records = document.getElementById('mkwsRecords');
369
370     switch(view) {
371         case 'targets':
372             targets.style.display = "block";
373             records.style.display = "none";
374             break;
375         case 'records':
376             targets.style.display = "none";
377             records.style.display = "block";
378             break;
379         default:
380             alert('Unknown view.');
381     }
382 }
383
384 // detailed record drawing
385 function showDetails (prefixRecId) {
386     var recId = prefixRecId.replace('rec_', '');
387     var oldRecId = curDetRecId;
388     curDetRecId = recId;
389
390     // remove current detailed view if any
391     var detRecordDiv = document.getElementById('det_'+oldRecId);
392     // lovin DOM!
393     if (detRecordDiv)
394       detRecordDiv.parentNode.removeChild(detRecordDiv);
395
396     // if the same clicked, just hide
397     if (recId == oldRecId) {
398         curDetRecId = '';
399         curDetRecData = null;
400         return;
401     }
402     // request the record
403     my_paz.record(recId);
404 }
405
406 function replaceHtml(el, html) {
407   var oldEl = typeof el === "string" ? document.getElementById(el) : el;
408   /*@cc_on // Pure innerHTML is slightly faster in IE
409     oldEl.innerHTML = html;
410     return oldEl;
411     @*/
412   var newEl = oldEl.cloneNode(false);
413   newEl.innerHTML = html;
414   oldEl.parentNode.replaceChild(newEl, oldEl);
415   /* Since we just removed the old element from the DOM, return a reference
416      to the new element, which can be used to restore variable references. */
417   return newEl;
418 };
419
420 function renderDetails(data, marker)
421 {
422     var details = '<div class="details" id="det_'+data.recid+'"><table>';
423     if (marker) details += '<tr><td>'+ marker + '</td></tr>';
424     if (data["md-title"] != undefined) {
425         details += '<tr><td><b>' + M('Title') + '</b></td><td><b>:</b> '+data["md-title"];
426         if (data["md-title-remainder"] !== undefined) {
427               details += ' : <span>' + data["md-title-remainder"] + ' </span>';
428         }
429         if (data["md-title-responsibility"] !== undefined) {
430               details += ' <span><i>'+ data["md-title-responsibility"] +'</i></span>';
431         }
432           details += '</td></tr>';
433     }
434     if (data["md-date"] != undefined)
435         details += '<tr><td><b>' + M('Date') + '</b></td><td><b>:</b> ' + data["md-date"] + '</td></tr>';
436     if (data["md-author"] != undefined)
437         details += '<tr><td><b>' + M('Author') + '</b></td><td><b>:</b> ' + data["md-author"] + '</td></tr>';
438     if (data["md-electronic-url"] != undefined)
439         details += '<tr><td><b>URL</b></td><td><b>:</b> <a href="' + data["md-electronic-url"] + '" target="_blank">' + data["md-electronic-url"] + '</a>' + '</td></tr>';
440     if (data["location"][0]["md-subject"] != undefined)
441         details += '<tr><td><b>' + M('Subject') + '</b></td><td><b>:</b> ' + data["location"][0]["md-subject"] + '</td></tr>';
442     if (data["location"][0]["@name"] != undefined)
443         details += '<tr><td><b>' + M('Location') + '</b></td><td><b>:</b> ' + data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")" + '</td></tr>';
444     details += '</table></div>';
445     return details;
446 }
447
448 /*
449  * All the HTML stuff to render the search forms and
450  * result pages.
451  */
452 function mkws_html_all(data) {
453
454     /* default config */
455     var config = {
456         sort: [["relevance"], ["title:1", "title"], ["date:0", "newest"], ["date:1", "oldest"]],
457         perpage: [10, 20, 30, 50],
458         sort_default: "relevance",
459         perpage_default: 20,
460         query_width: 50,
461         switch_menu: true,      /* show/hide Records|Targets menu */
462         lang_menu: true,        /* show/hide language menu */
463         lang_display: [],       /* display languages links for given languages, [] for all */
464         termlist_menu: true,    /* show/hide termlist */
465         debug: 0,     /* debug level for development: 0..2 */
466
467         dummy: "dummy"
468     };
469
470     /* set global debug flag early */
471     if (data.debug !== 'undefined') {
472         mkws_debug = data.debug;
473     } else if (config.debug !== 'undefined') {
474         mkws_debug = config.debug;
475     }
476     
477     /* override standard config values by function parameters */
478     for (var k in config) {
479         mkws_config[k] = config[k];
480         debug("Set config: " + k + ' => ' + config[k]);
481     }
482     if (mkws_config.query_width < 5 || mkws_config.query_width > 150) {
483         debug("Reset query width: " + mkws_config.query_width);
484         mkws_config.query_width = 50;
485     }
486    
487     mkws_set_lang(mkws_config); 
488     if (mkws_config.lang_menu)
489         mkws_html_lang(mkws_config); 
490
491     // For some reason, doing this programmatically results in
492     // document.search.query being undefined, hence the raw HTML.
493     debug("HTML search form");
494     $("#mkwsSearch").html('\
495     <form id="searchForm" name="search" action="" >\
496       <input id="query" type="text" size="' + mkws_config.query_width + '" />\
497       <input id="button" type="submit" value="' + M('Search') + '" />\
498     </form>');
499
500     debug("HTML records");
501     $("#mkwsRecords").html('\
502       <table width="100%" border="0" cellpadding="6" cellspacing="0">\
503         <tr>\
504           <td width="250" valign="top">\
505             <div id="termlist"></div>\
506           </td>\
507           <td valign="top">\
508             <div id="ranking">\
509               <form name="select" id="select" action="" >\
510         ' + M('Sort by') + mkws_html_sort(config) + '\
511         ' + M('and show') + ' ' + mkws_html_perpage(config) + '\
512         ' + M('per page') + '.\
513        </form>\
514             </div>\
515             <div id="pager"></div>\
516             <div id="navi"></div>\
517             <div id="results"></div>\
518           </td>\
519         </tr>\
520       </table>');
521
522     mkws_html_switch(config);
523     if (mkws_config.use_service_proxy)
524         mkws_service_proxy_auth(config.service_proxy_auth);
525
526     domReady();
527 }
528
529 function mkws_set_lang(mkws_config)  {
530     var lang = jQuery.parseQuerystring().lang || mkws_config.lang || "";
531     if (!lang || !mkws_locale_lang[lang]) {
532         mkws_config.lang = ""
533     } else {
534         mkws_config.lang = lang;
535     }
536     
537     debug("Locale language: " + (mkws_config.lang ? mkws_config.lang : "none"));
538     return mkws_config.lang;
539 }
540
541 function mkws_html_switch(config) {
542     debug("HTML switch");
543     
544     $("#mkwsSwitch").html($("<a/>", {
545         href: '#',
546         onclick: "switchView(\'records\')",
547         text: "Records"
548     }));
549     $("#mkwsSwitch").append($("<span/>", { text: " | " }));
550     $("#mkwsSwitch").append($("<a/>", {
551         href: '#',
552         onclick: "switchView(\'targets\')",
553         text: "Targets"
554     }));
555
556     debug("HTML targets");
557     $("#mkwsTargets").html('\
558       <div id="bytarget">\
559        No information available yet.\
560       </div>');
561     $("#mkwsTargets").css("display", "none");
562
563     if (!config.switch_menu) {
564         debug("disable switch menu");
565         $("#mkwsSwitch").css("display", "none");
566     }
567 }
568
569 function mkws_html_sort(config) {
570     debug("HTML sort");
571     var sort_html = '<select name="sort" id="sort">';
572
573     for(var i = 0; i < config.sort.length; i++) {
574         var key = config.sort[i][0];
575         var val = config.sort[i].length == 1 ? config.sort[i][0] : config.sort[i][1];
576
577         sort_html += '<option value="' + key + '"';
578         if (key == config.sort_default) {
579             sort_html += ' selected="selected"';
580         }
581         sort_html += '>' + val + '</option>';
582     }
583     sort_html += '</select>';
584
585     return sort_html;
586 }
587
588 function mkws_html_perpage(config) {
589     debug("HTML perpage");
590     var perpage_html = '<select name="perpage" id="perpage">';
591
592     for(var i = 0; i < config.perpage.length; i++) {
593         var key = config.perpage[i];
594
595         perpage_html += '<option value="' + key + '"';
596         if (key == config.perpage_default) {
597             perpage_html += ' selected="selected"';
598         }
599         perpage_html += '>' + key + '</option>';
600     }
601     perpage_html += '</select>';
602
603     return perpage_html;
604 }
605
606 /*
607  * Run service-proxy authentication in background (after page load).
608  * The username/password is configured in the apache config file
609  * for the site.
610  */
611 function mkws_service_proxy_auth(auth_url) {
612     if (!auth_url)
613         auth_url = "/service-proxy-auth";
614         
615     debug("Run service proxy auth URL: " + auth_url);
616
617     var jqxhr = jQuery.get(auth_url)
618         .fail(function() {
619             alert("service proxy authentication failed, give up!");
620         })
621         .success(function(data) {
622             if (!jQuery.isXMLDoc(data)) {
623                 alert("service proxy auth response document is not valid XML document, give up!");
624                 return;
625             }
626             var status = $(data).find("status");
627             if (status.text() != "OK") {
628                 alert("service proxy auth repsonse status: " + status.text() + ", give up!");
629                 return;
630             }
631         });
632 }
633
634 /* create locale language menu */
635 function mkws_html_lang(mkws_config) {
636     var lang_default = "en";
637     var lang = mkws_config.lang || lang_default;
638     var list = [];
639
640     /* display a list of configured languages, or all */
641     var lang_display = mkws_config.lang_display || [];
642     var hash = {};
643     for (var i = 0; i < lang_display.length; i++) {
644         hash[lang_display[i]] = 1;
645     }
646     
647     if (hash[lang_default] == 1)
648         list.push(lang_default);
649
650     for (var k in mkws_locale_lang) {
651         if (hash[k] == 1 || lang_display.length == 0)
652             list.push(k);
653     }
654     debug("Language menu for: " + list.join(", "));
655
656     /* the HTML part */
657     var data = "";    
658     for(var i = 0; i < list.length; i++) {
659         var l = list[i];
660         
661         if (data)
662             data += ' | ';
663             
664         if (lang == l) {
665             data += l;
666         } else {
667             data += ' <a href="?lang=' + l + '">' + l + '</a> '
668         }
669     }
670     
671     $("#mkwsLang").html(data);
672 }
673
674 /* locale */
675 function M(word) {
676     var lang = mkws_config.lang;
677
678     if (!lang || !mkws_locale_lang[lang])
679         return word;
680
681     return mkws_locale_lang[lang][word] ? mkws_locale_lang[lang][word] : word;
682 }
683
684 /* implement jQuery.parseQuerystring() for parsing URL parameters */
685 jQuery.extend({
686     parseQuerystring: function() {
687     var nvpair = {};
688     var qs = window.location.search.replace('?', '');
689     var pairs = qs.split('&');
690     $.each(pairs, function(i, v){
691         var pair = v.split('=');
692         nvpair[pair[0]] = pair[1];
693     });
694     return nvpair;
695 } });
696
697 function debug(string) {
698     if (!mkws_debug)
699         return;
700
701     if (typeof console === "undefined" || typeof console.log === "undefined") { /* ARGH!!! */
702         return;
703     }
704
705     // you need to disable use strict at the top of the file!!!
706     if (mkws_debug >= 3) {
707         console.log(arguments.callee.caller);
708     } else if (mkws_debug >= 2) {
709         console.log(">>> called from function " + arguments.callee.caller.name + ' <<<');
710     }
711     console.log(string);
712 }
713
714 /* magic */
715 $(document).ready(function() { mkws_html_all(mkws_config) });