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