1 /* A very simple client that shows a basic usage of the pz2.js
4 // create a parameters array and pass it to the pz2's constructor
5 // then register the form submit event with the pz2.search function
6 // autoInit is set to true on default
7 var usesessions = false;
8 var pazpar2path = '/service-proxy/';
9 var showResponseType = '';
10 // Facet configuration
11 var querys = {'su': '', 'au': '', 'xt': ''};
12 var query_client_server = {'su': 'subject', 'au': 'author', 'xt': 'xtargets'};
13 var querys_server = {};
15 // Fail to get JSON working stabil.
16 var showResponseType = 'xml';
17 if (document.location.hash == '#pazpar2' || document.location.search.match("useproxy=false")) {
19 pazpar2path = '/pazpar2/search.pz2';
20 showResponseType = 'xml';
24 my_paz = new pz2( { "onshow": my_onshow,
25 // "showtime": 2000, //each timer (show, stat, term, bytarget) can be specified this way
26 "pazpar2path": pazpar2path,
29 "onterm": my_onterm_iphone,
30 "termlist": "xtargets,subject,author",
32 "usesessions" : usesessions,
33 "showResponseType": showResponseType,
34 "onrecord": my_onrecord } );
38 var recToShowPageSize = 20;
39 var recToShow = recToShowPageSize;
43 var curDetRecData = null;
44 var curSort = 'relevance';
45 var curFilter = 'ALL';
46 var submitted = false;
50 var tab = "recordview";
55 function loginFormSubmit() {
56 triedUser = document.loginForm.username.value;
57 triedPass = document.loginForm.password.value;
58 auth.login( {"username": triedUser,
59 "password": triedPass},
63 function handleKeyPress(e)
67 key = window.event.keyCode;
71 if(key == 13 || key == 10)
73 button = document.getElementById('button');
83 function authCb(authData) {
84 if (!authData.loginFailed) {
89 if (authData.loggedIn == true) {
90 showhide("recordview");
94 function logOutClick() {
95 auth.logOut(authCb, authCb);
98 function loggedOut() {
99 var login = document.getElementById("login");
100 login.innerHTML = 'Login';
103 function loggingOutFailed() {
104 alert("Logging out failed");
112 auth.logOut(loggedOut, loggingOutFailed, true);
115 function logInOrOut() {
116 var loginElement = document.getElementById("login");
117 if (loginElement.innerHTML == 'Login')
122 function loggedIn() {
123 var login = document.getElementById("login");
124 login.innerHTML = 'Logout(' + auth.displayName + ')';
125 document.getElementById("log").innerHTML = login.innerHTML;
128 function auth_check() {
129 auth.check(loggedIn, login);
134 // Pz2.js event handlers:
136 function my_oninit() {
141 function showMoreRecords() {
143 recToShow += recToShowPageSize;
144 for ( ; i < recToShow && i < recPerPage; i++) {
145 var element = document.getElementById(recIDs[i]);
147 element.style.display = '';
149 if (i == recPerPage) {
150 var element = document.getElementById('recdiv_END');
152 element.style.display = 'none';
156 function my_onshow(data) {
157 totalRec = data.merged;
159 var pager = document.getElementById("pager");
160 pager.innerHTML = "";
161 pager.innerHTML +='<hr/><div style="float: right">Displaying: '
162 + (data.start + 1) + ' to ' + (data.start + data.num) +
163 ' of ' + data.merged + ' (found: '
164 + data.total + ')</div>';
167 var results = document.getElementById("results");
170 if (data.hits == undefined)
173 for (var i = 0; i < data.hits.length; i++) {
174 var hit = data.hits[i];
175 var recID = "recdiv_" + hit.recid;
176 //var recID = "recdiv_" + i;
179 style = ' style="display:none" ';
180 html.push('<li id="' + recID + '" ' + style + '>'
181 +'<a href="#" id="rec_'+hit.recid
182 +'" onclick="showDetails(this.id);return false;">'
183 + hit["md-title"] +'</a> ');
184 if (hit["md-title-responsibility"] !== undefined) {
185 html.push('<a href="#">'+hit["md-title-responsibility"]+'</a> ');
186 if (hit["md-title-remainder"] !== undefined) {
187 html.push('<a href="#">' + hit["md-title-remainder"] + ' </a> ');
190 if (hit.recid == curDetRecId) {
191 html.push(renderDetails_iphone(curDetRecData));
195 // set up "More..." if needed.
196 style = 'display:none';
197 if (recToShow < recPerPage) {
198 style = 'display:block';
200 html.push('<li id="recdiv_END" style="' + style + '"><a onclick="showMoreRecords()">More...</a></li>');
202 replaceHtml(results, html.join(''));
205 function my_onstat(data) {
206 var stat = document.getElementById("stat");
210 stat.innerHTML = '<b> .:STATUS INFO</b> -- Active clients: '
212 + '/' + data.clients + ' -- </span>'
213 + '<span>Retrieved records: ' + data.records
214 + '/' + data.hits + ' :.</span>';
217 function showhide(newtab) {
218 var showtermlist = false;
222 if (tab == "recordview") {
223 document.getElementById("recordview").style.display = '';
226 document.getElementById("recordview").style.display = 'none';
228 if (tab == "xtargets") {
229 document.getElementById("term_xtargets").style.display = '';
233 document.getElementById("term_xtargets").style.display = 'none';
235 if (tab == "subjects") {
236 document.getElementById("term_subjects").style.display = '';
240 document.getElementById("term_subjects").style.display = 'none';
242 if (tab == "authors") {
243 document.getElementById("term_authors").style.display = '';
247 document.getElementById("term_authors").style.display = 'none';
249 if (showtermlist == false)
250 document.getElementById("termlist").style.display = 'none';
252 document.getElementById("termlist").style.display = '';
254 var tabDiv = document.getElementById("loginDiv");
255 if (tab == "login") {
256 tabDiv.style.display = '';
259 tabDiv.style.display = 'none';
263 function my_onterm(data) {
266 termlists.push('<div id="term_xtargets" >');
267 termlists.push('<h4 class="termtitle">Sources</h4>');
268 termlists.push('<ul>');
269 termlists.push('<li><a href="#" target_id="reset_xt" onclick="limitOrResetTarget(\'reset_xt\',\'All\');return false;">All</a></li>');
270 for (var i = 0; i < data.xtargets.length && i < SourceMax; i++ ) {
271 termlists.push('<li><a href="#" target_id='+data.xtargets[i].id
272 + ' onclick="limitOrResetTarget(this.getAttribute(\'target_id\'), \'' + data.xtargets[i].name + '\');return false;">'
273 + data.xtargets[i].name + ' (' + data.xtargets[i].freq + ')</a></li>');
275 termlists.push('</ul>');
276 termlists.push('</div>');
278 termlists.push('<div id="term_subjects" >');
279 termlists.push('<h4>Subjects</h4>');
280 termlists.push('<ul>');
281 termlists.push('<li><a href="#" target_id="reset_su" onclick="limitOrResetQuery(\'reset_su\',\'All\');return false;">All</a></li>');
282 for (var i = 0; i < data.subject.length && i < SubjectMax; i++ ) {
283 termlists.push('<li><a href="#" onclick="limitOrResetQuery(\'su\', \'' + data.subject[i].name + '\');return false;">'
284 + data.subject[i].name + ' (' + data.subject[i].freq + ')</a></li>');
286 termlists.push('</ul>');
287 termlists.push('</div>');
289 termlists.push('<div id="term_authors" >');
290 termlists.push('<h4 class="termtitle">Authors</h4>');
291 termlists.push('<ul>');
292 termlists.push('<li><a href="#" onclick="limitOrResetQuery(\'reset_au\',\'All\');return false;">All<a></li>');
293 for (var i = 0; i < data.author.length && i < AuthorMax; i++ ) {
294 termlists.push('<li><a href="#" onclick="limitOrResetQuery(\'au\', \'' + data.author[i].name +'\');return false;">'
295 + data.author[i].name
297 + data.author[i].freq
300 termlists.push('</ul>');
301 termlists.push('</div>');
302 var termlist = document.getElementById("termlist");
303 replaceHtml(termlist, termlists.join(''));
308 function my_onterm_iphone(data) {
310 var targets = "reset_xt|All\n";
312 for (var i = 0; i < data.xtargets.length; i++ ) {
314 targets = targets + data.xtargets[i].id + "|" + data.xtargets[i].name + "|" + data.xtargets[i].freq + "\n";
316 termlist["xtargets"] = targets;
317 var subjects = "reset_su|All\n";
318 for (var i = 0; i < data.subject.length; i++ ) {
319 subjects = subjects + "su" + "|" + data.subject[i].name + "|" + data.subject[i].freq + "\n";
321 termlist["subjects"] = subjects;
322 var authors = "reset_au|All\n";
323 for (var i = 0; i < data.author.length; i++ ) {
324 authors = authors + "au" + "|" + data.author[i].name + "|" + data.author[i].freq + "\n";
326 termlist["authors"] = authors;
327 callback.send("termlist", "refresh");
330 function getTargets() {
331 return termlist['xtargets'];
334 function getSubjects() {
335 return termlist['subjects'];
338 function getAuthors() {
339 return termlist['authors'];
342 function my_onrecord(data) {
343 // FIXME: record is async!!
344 clearTimeout(my_paz.recordTimer);
345 // in case on_show was faster to redraw element
346 var detRecordDiv = document.getElementById('det_'+data.recid);
347 if (detRecordDiv) return;
348 curDetRecData = data;
349 var recordDiv = document.getElementById('recdiv_'+curDetRecData.recid);
350 var html = renderDetails_iphone(curDetRecData);
351 recordDiv.innerHTML += html;
354 function my_onrecord_iphone(data) {
356 callback.send("record", data.recid, data, data.xtargets[i].freq);
360 function my_onbytarget(data) {
361 var targetDiv = document.getElementById("bytarget");
362 var table ='<table><thead><tr><td>Target ID</td><td>Hits</td><td>Diags</td>'
363 +'<td>Records</td><td>State</td></tr></thead><tbody>';
365 for (var i = 0; i < data.length; i++ ) {
366 table += "<tr><td>" + data[i].id +
367 "</td><td>" + data[i].hits +
368 "</td><td>" + data[i].diagnostic +
369 "</td><td>" + data[i].records +
370 "</td><td>" + data[i].state + "</td></tr>";
373 table += '</tbody></table>';
374 targetDiv.innerHTML = table;
377 ////////////////////////////////////////////////////////////////////////////////
378 ////////////////////////////////////////////////////////////////////////////////
380 // wait until the DOM is ready
383 document.search.onsubmit = onFormSubmitEventHandler;
384 document.search.query.value = '';
385 document.select.sort.onchange = onSelectDdChange;
386 document.select.perpage.onchange = onSelectDdChange;
387 if (document.location.search.match("inApp=true"))
388 applicationMode(true);
390 applicationMode(false);
393 function applicationMode(newmode)
395 var searchdiv = document.getElementById("searchForm");
399 document.getElementById("heading").style.display="none";
400 searchdiv.style.display = 'none';
404 document.getElementById("nav").style.display="";
405 document.getElementById("normal").style.display="inline";
406 document.getElementById("normal").style.visibility="";
407 searchdiv.style.display = '';
408 document.search.onsubmit = onFormSubmit;
412 // when search button pressed
413 function onFormSubmitEventHandler()
416 document.getElementById("logo").style.display = 'none';
423 function onSelectDdChange()
425 if (!submitted) return false;
428 my_paz.show(0, recPerPage, curSort);
438 function getFacets() {
440 for (var key in querys_server) {
441 if (result.length > 0)
443 result += querys_server[key];
448 function triggerSearch ()
450 // Restore to initial page size
451 recToShow = recToShowPageSize;
452 my_paz.search(document.search.query.value, recPerPage, curSort, curFilter, undefined,
454 "limit" : getFacets()
459 function loadSelect ()
461 curSort = document.select.sort.value;
462 recPerPage = document.select.perpage.value;
465 // limit the query after clicking the facet
466 function limitQuery(field, value)
468 var newQuery = ' and ' + field + '="' + value + '"';
469 querys[field] += newQuery;
470 document.search.query.value += newQuery;
471 onFormSubmitEventHandler();
472 showhide("recordview");
475 // limit the query after clicking the facet
476 function limitQueryServer(field, value)
478 // Check for client field usage
479 var fieldname = query_client_server[field];
483 var newQuery = fieldname + '=' + value.replace(",", "\\,").replace("|", "\\,");
484 // Does it already exists?
485 if (querys_server[fieldname])
486 querys_server[fieldname] += "," + newQuery;
488 querys_server[fieldname] = newQuery;
489 // document.search.query.value += newQuery;
490 onFormSubmitEventHandler();
491 showhide("recordview");
496 // limit the query after clicking the facet
497 function removeQuery (field, value) {
498 document.search.query.value.replace(' and ' + field + '="' + value + '"', '');
499 onFormSubmitEventHandler();
500 showhide("recordview");
503 // limit the query after clicking the facet
504 function limitOrResetQuery (field, value, selected) {
506 limitOrResetQueryServer(field,value, selected);
509 if (field == 'reset_su' || field == 'reset_au') {
510 var reset_field = field.substring(6);
511 document.search.query.value = document.search.query.value.replace(querys[reset_field], '');
512 querys[reset_field] = '';
513 onFormSubmitEventHandler();
514 showhide("recordview");
517 limitQuery(field, value);
518 //alert("limitOrResetQuerry: query after: " + document.search.query.value);
521 // limit the query after clicking the facet
522 function limitOrResetQueryServer (field, value, selected) {
523 if (field.substring(0,6) == 'reset_') {
524 var clientname = field.substring(6);
525 var fieldname = query_client_server[clientname];
527 fieldname = clientname;
528 delete querys_server[fieldname];
529 onFormSubmitEventHandler();
530 showhide("recordview");
533 limitQueryServer(field, value);
534 //alert("limitOrResetQuerry: query after: " + document.search.query.value);
540 // limit by target functions
541 function limitTarget (id, name)
543 curFilter = 'pz:id=' + id;
547 showhide("recordview");
551 function delimitTarget ()
560 function limitOrResetTarget(id, name) {
561 if (id == 'reset_xt') {
565 limitTarget(id,name);
569 function drawPager (pagerDiv)
571 //client indexes pages from 1 but pz2 from 0
573 var pages = Math.ceil(totalRec / recPerPage);
575 var firstClkbl = ( curPage - onsides > 0 )
579 var lastClkbl = firstClkbl + 2*onsides < pages
580 ? firstClkbl + 2*onsides
583 var prev = '<span id="prev"><< Prev</span><b> | </b>';
585 var prev = '<a href="#" id="prev" onclick="pagerPrev();">'
586 +'<< Prev</a><b> | </b>';
589 for(var i = firstClkbl; i <= lastClkbl; i++) {
592 numLabel = '<b>' + i + '</b>';
594 middle += '<a href="#" onclick="showPage(' + i + ')"> '
595 + numLabel + ' </a>';
598 var next = '<b> | </b><span id="next">Next >></span>';
599 if (pages - curPage > 0)
600 var next = '<b> | </b><a href="#" id="next" onclick="pagerNext()">'
601 +'Next >></a>';
608 if (lastClkbl < pages)
611 pagerDiv.innerHTML += '<div style="float: none">'
612 + prev + predots + middle + postdots + next + '</div><hr/>';
615 function showPage (pageNum)
618 my_paz.showPage( curPage - 1 );
621 // simple paging functions
623 function pagerNext() {
624 if ( totalRec - recPerPage*curPage > 0) {
630 function pagerPrev() {
631 if ( my_paz.showPrev() != false )
635 // swithing view between targets and records
637 function switchView(view) {
639 var targets = document.getElementById('targetview');
640 var records = document.getElementById('recordview');
644 targets.style.display = "block";
645 records.style.display = "none";
648 targets.style.display = "none";
649 records.style.display = "block";
652 alert('Unknown view.');
656 // detailed record drawing
657 function showDetails (prefixRecId) {
658 var recId = prefixRecId.replace('rec_', '');
659 var oldRecId = curDetRecId;
662 // remove current detailed view if any
663 var detRecordDiv = document.getElementById('det_'+oldRecId);
664 //alert("oldRecId: " + oldRecId + " " + detRecordDiv != null);
667 detRecordDiv.parentNode.removeChild(detRecordDiv);
669 // if the same clicked, just hide
670 if (recId == oldRecId) {
672 curDetRecData = null;
675 // request the record
676 my_paz.record(recId);
679 function replaceHtml(el, html) {
680 var oldEl = typeof el === "string" ? document.getElementById(el) : el;
681 /*@cc_on // Pure innerHTML is slightly faster in IE
682 oldEl.innerHTML = html;
685 var newEl = oldEl.cloneNode(false);
686 newEl.innerHTML = html;
687 oldEl.parentNode.replaceChild(newEl, oldEl);
688 /* Since we just removed the old element from the DOM, return a reference
689 to the new element, which can be used to restore variable references. */
693 function renderDetails(data, marker)
695 var details = '<div class="details" id="det_'+data.recid+'"><table>';
696 if (marker) details += '<tr><td>'+ marker + '</td></tr>';
697 if (data["md-title"] != undefined) {
698 details += '<tr><td><b>Title</b></td><td><b>:</b> '+data["md-title"];
699 if (data["md-title-remainder"] !== undefined) {
700 details += ' : <span>' + data["md-title-remainder"] + ' </span>';
702 if (data["md-title-responsibility"] !== undefined) {
703 details += ' <span><i>'+ data["md-title-responsibility"] +'</i></span>';
705 details += '</td></tr>';
707 if (data["md-date"] != undefined)
708 details += '<tr><td><b>Date</b></td><td><b>:</b> ' + data["md-date"] + '</td></tr>';
709 if (data["md-author"] != undefined)
710 details += '<tr><td><b>Author</b></td><td><b>:</b> ' + data["md-author"] + '</td></tr>';
711 if (data["md-electronic-url"] != undefined)
712 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>';
713 if (data["location"][0]["md-subject"] != undefined)
714 details += '<tr><td><b>Subject</b></td><td><b>:</b> ' + data["location"][0]["md-subject"] + '</td></tr>';
715 if (data["location"][0]["@name"] != undefined)
716 details += '<tr><td><b>Location</b></td><td><b>:</b> ' + data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")" + '</td></tr>';
717 details += '</table></div>';
721 function renderLine(title, value) {
722 if (value != undefined)
723 return '<li><h3>' + title + '</h3> <big>' + value + '</big></li>';
727 function renderLineURL(title, URL, display) {
728 if (URL != undefined)
729 return '<li><h3>' + title + '</h3> <a href="' + URL + '" target="_blank">' + display + '</a></li>';
733 function renderLineEmail(dtitle, email, display) {
734 if (email != undefined)
735 return '<li><h3>' + title + '</h3> <a href="mailto:' + email + '" target="_blank">' + display + '</a></li>';
739 function renderDetails_iphone(data, marker)
741 //return renderDetails(data,marker);
745 var details = '<div class="details" id="det_'+data.recid+'" >'
747 details = '<div id="header" id="det_'+data.recid+'">'
748 + '<h1>Detailed Info</h1>'
749 + '<a id="backbutton" href="hidedetail(\'det_' + data.recid + '\')">Back</a>'
753 details += '<h4>'+ marker + '</h4>';
754 details += '<ul class="field">';
755 if (data["md-title"] != undefined) {
756 details += '<li><h3>Title</h3> <big> ' + data["md-title"];
757 if (data["md-title-remainder"] !== undefined) {
758 details += ' ' + data["md-title-remainder"] + ' ';
760 if (data["md-title-responsibility"] !== undefined) {
761 details += '<i>'+ data["md-title-responsibility"] +'</i>';
767 +=renderLine('Date', data["md-date"])
768 + renderLine('Author', data["md-author"])
769 + renderLineURL('URL', data["md-electronic-url"], data["md-electronic-url"])
770 + renderLine('Subject', data["location"][0]["md-subject"]);
772 if (data["location"][0]["@name"] != undefined)
773 details += renderLine('Location', data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")");
774 details += '</ul></div>';