From: Jakub Skoczen Date: Thu, 19 Jun 2008 13:37:05 +0000 (+0200) Subject: Ported oplin changes back to the jsdemo: X-Git-Tag: v1.0.10~20 X-Git-Url: http://jsfdemo.indexdata.com/cgi-bin?a=commitdiff_plain;h=5e21f50e2c85da79ab1a2d5fe8201bc48b25f5dc;p=pazpar2-moved-to-github.git Ported oplin changes back to the jsdemo: - target facet - advanced paging - IE compatibility --- diff --git a/www/jsdemo/example_client.js b/www/jsdemo/example_client.js index c82df40..b6b1aea 100644 --- a/www/jsdemo/example_client.js +++ b/www/jsdemo/example_client.js @@ -5,21 +5,20 @@ // create a parameters array and pass it to the pz2's constructor // then register the form submit event with the pz2.search function // autoInit is set to true on default - +var usesessions = false; +var pazpar2path = '.'; if (document.location.hash == '#nosessions') { - var usesessions = false; - var pazpar2path = '/masterkey-core/php/p3.php'; -} else { - var usesessions = true; - var pazpar2path = '/pazpar2/search.pz2'; + usesessions = true; + pazpar2path = '/pazpar2/search.pz2'; } my_paz = new pz2( { "onshow": my_onshow, "showtime": 500, //each timer (show, stat, term, bytarget) can be specified this way "pazpar2path": pazpar2path, + "oninit": my_oninit, "onstat": my_onstat, "onterm": my_onterm, - "termlist": "subject,author", + "termlist": "xtargets,subject,author", "onbytarget": my_onbytarget, "usesessions" : usesessions, "onrecord": my_onrecord } ); @@ -29,51 +28,41 @@ var recPerPage = 20; var totalRec = 0; var curDetRecId = ''; var curDetRecData = null; - -// wait until the DOM is ready -function domReady () -{ - document.search.onsubmit = onFormSubmitEventHandler; - my_paz.stat(); - my_paz.bytarget(); -} - -// when search button pressed -function onFormSubmitEventHandler() -{ - curPage = 1; - curDetRecId = ''; - totalRec = 0; - my_paz.search(document.search.query.value, recPerPage, 'relevance'); - return false; -} +var curSort = 'relevance'; +var curFilter = null; +var submitted = false; // // pz2.js event handlers: // +function my_oninit() { + my_paz.stat(); + my_paz.bytarget(); +} function my_onshow(data) { totalRec = data.merged; - var body = document.getElementById("body"); - body.innerHTML = ""; + // move it out + var pager = document.getElementById("pager"); + pager.innerHTML = ""; - body.innerHTML +='
Displaying: ' + pager.innerHTML +='
Displaying: ' + data.start + ' to ' + (data.start + data.num) + - ' of ' + data.merged + ' (total not merged hits: ' + ' of ' + data.merged + ' (found: ' + data.total + ')
'; + drawPager(pager); - body.innerHTML += '
' - +'<< Prev | ' - +'' - +'Next >>
'; + // navi + var results = document.getElementById("results"); + results.innerHTML = ""; for (var i = 0; i < data.hits.length; i++) { var hit = data.hits[i]; var html = '
' +'' + (i + 1 + recPerPage * ( curPage - 1)) + '. ' - +'' + hit["md-title"] + - ' '; + +'' + hit["md-title"] + + ' '; if (hit["md-title-remainder"] !== undefined) { html += '' + hit["md-title-remainder"] + ''; } @@ -81,7 +70,7 @@ function my_onshow(data) { html += '' + hit["md-title-responsibility"] + ''; } html += '
'; - body.innerHTML += html; + results.innerHTML += html; if ( hit.recid == curDetRecId ) { drawCurDetails(); } @@ -100,20 +89,36 @@ function my_onstat(data) { function my_onterm(data) { var termlist = document.getElementById("termlist"); termlist.innerHTML = "
TERMLISTS:
"; + + termlist.innerHTML += '
.::Sources
'; + for (var i = 0; i < data.xtargets.length; i++ ) { + termlist.innerHTML += '' + + data.xtargets[i].name + + ' (' + + data.xtargets[i].freq + + ')
'; + } + + termlist.innerHTML += "
"; + termlist.innerHTML += '
.::Subjects
'; for (var i = 0; i < data.subject.length; i++ ) { - termlist.innerHTML += '' + termlist.innerHTML += '' + data.subject[i].name - + ' (' + + ' (' + data.subject[i].freq + ')
'; } + termlist.innerHTML += "
"; + termlist.innerHTML += '
.::Authors
'; for (var i = 0; i < data.author.length; i++ ) { - termlist.innerHTML += '' + termlist.innerHTML += '' + data.author[i].name - + ' (' + + ' (' + data.author[i].freq + ')
'; } @@ -148,40 +153,52 @@ function my_onbytarget(data) { } -// detailed record drawing -function showDetails ( prefixRecId ) { - var recId = prefixRecId.replace('rec_', ''); - - // remove current detailed view if any - var detRecordDiv = document.getElementById('det_'+curDetRecId); - // lovin DOM! - if ( detRecordDiv ) - detRecordDiv.parentNode.removeChild(detRecordDiv); +//////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// - // if the same clicked do not redraw - if ( recId == curDetRecId ) { - curDetRecId = ''; - return; - } +// wait until the DOM is ready +function domReady () +{ + document.search.onsubmit = onFormSubmitEventHandler; + document.search.query.value = ''; + document.select.sort.onchange = onSelectDdChange; + document.select.perpage.onchange = onSelectDdChange; +} - curDetRecId = recId; +// when search button pressed +function onFormSubmitEventHandler() +{ + resetPage(); + loadSelect(); + triggerSearch(); + submitted = true; + return false; +} - // request the record - my_paz.record(recId); +function onSelectDdChange() +{ + if (!submitted) return false; + resetPage(); + loadSelect(); + my_paz.show(0, recPerPage, curSort); + return false; } -function drawCurDetails () +function resetPage() { - var data = curDetRecData; - var recordDiv = document.getElementById('rec_'+data.recid); - recordDiv.innerHTML += '
Ttle: '+data["md-title"] + - "
Date: " + data["md-date"] + - "
Author: " + data["md-author"] + - '
URL: ' + data["md-electronic-url"] + '' + - "
Subject: " + data["md-subject"] + - "
Location: " + data["location"][0].name + - "
"; + curPage = 1; + totalRec = 0; +} + +function triggerSearch () +{ + my_paz.search(document.search.query.value, recPerPage, curSort, curFilter); +} + +function loadSelect () +{ + curSort = document.select.sort.value; + recPerPage = document.select.perpage.value; } // limit the query after clicking the facet @@ -191,6 +208,84 @@ function limitQuery (field, value) onFormSubmitEventHandler(); } +// limit by target functions +function limitTarget (id, name) +{ + var navi = document.getElementById('navi'); + navi.innerHTML = + 'Source: ' + + name + ''; + navi.innerHTML += '
'; + curFilter = 'pz:id=' + id; + resetPage(); + loadSelect(); + triggerSearch(); + return false; +} + +function delimitTarget () +{ + var navi = document.getElementById('navi'); + navi.innerHTML = ''; + curFilter = null; + resetPage(); + loadSelect(); + triggerSearch(); + return false; +} + +function drawPager (pagerDiv) +{ + //client indexes pages from 1 but pz2 from 0 + var onsides = 6; + var pages = Math.ceil(totalRec / recPerPage); + + var firstClkbl = ( curPage - onsides > 0 ) + ? curPage - onsides + : 1; + + var lastClkbl = firstClkbl + 2*onsides < pages + ? firstClkbl + 2*onsides + : pages; + + var prev = '<< Prev | '; + if (curPage > 1) + var prev = ' | '; + + var middle = ''; + for(var i = firstClkbl; i <= lastClkbl; i++) { + var numLabel = i; + if(i == curPage) + numLabel = '' + i + ''; + + middle += ' ' + + numLabel + ' '; + } + + var next = ' | Next >>'; + if (pages - curPage > 0) + var next = ' | '; + + predots = ''; + if (firstClkbl > 1) + predots = '...'; + + postdots = ''; + if (lastClkbl < pages) + postdots = '...'; + + pagerDiv.innerHTML += '
' + + prev + predots + middle + postdots + next + '
'; +} + +function showPage (pageNum) +{ + curPage = pageNum; + my_paz.showPage( curPage - 1 ); +} + // simple paging functions function pagerNext() { @@ -225,3 +320,46 @@ function switchView(view) { alert('Unknown view.'); } } + +// detailed record drawing +function showDetails ( prefixRecId ) { + var recId = prefixRecId.replace('rec_', ''); + + // remove current detailed view if any + var detRecordDiv = document.getElementById('det_'+curDetRecId); + // lovin DOM! + if ( detRecordDiv ) + detRecordDiv.parentNode.removeChild(detRecordDiv); + + // if the same clicked do not redraw + if ( recId == curDetRecId ) { + curDetRecId = ''; + return; + } + + curDetRecId = recId; + + // request the record + my_paz.record(recId); +} + +function drawCurDetails () +{ + var data = curDetRecData; + var recordDiv = document.getElementById('rec_'+data.recid); + var details = ""; + if (data["md-title"] != undefined) + details += 'Ttle: '+data["md-title"] + ''; + if (data["md-date"] != undefined) + details += 'Date: ' + data["md-date"] + ''; + if (data["md-author"] != undefined) + details += 'Author: ' + data["md-author"] + ''; + if (data["md-electronic-url"] != undefined) + details += 'URL: ' + data["md-electronic-url"] + '' + ''; + if (data["location"][0]["md-subject"] != undefined) + details += 'Subject: ' + data["location"][0]["md-subject"] + ''; + if (data["location"][0]["@name"] != undefined) + details += 'Location: ' + data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")" + ''; + recordDiv.innerHTML += '
' + details + '
'; +} + //EOF \ No newline at end of file diff --git a/www/jsdemo/index.html b/www/jsdemo/index.html index 432ec94..7f28637 100644 --- a/www/jsdemo/index.html +++ b/www/jsdemo/index.html @@ -7,83 +7,8 @@ Pazpar2 demo client - - + + @@ -118,7 +43,28 @@
-
+
+
+ Sort by + + and show + + per page. +
+
+
+ +
diff --git a/www/jsdemo/styles.css b/www/jsdemo/styles.css new file mode 100644 index 0000000..81dea91 --- /dev/null +++ b/www/jsdemo/styles.css @@ -0,0 +1,91 @@ +html { + overflow-y: scroll; +} + +body { + font-family: tahoma, arial, sans-serif; + font-size: small; +} + +hr { + border: 0; + color: gray; + background-color: gray; + height: 1px; +} + +thead { + font-weight: bold; +} + +a { + color: black; + text-decoration: none; +} + +a.extern { + color: #CC6600; +} + +a:hover { + text-decoration: underline; +} + +a.crossout:hover { + text-decoration: line-through; + font-weight: bold; +} + + +#heading { + background-color: #34cc67; + border-color: #34cc67; + color: #ffffff; + font-size: large; +} + +input#button { + border: 3px groove #3171f2; + background-color: #6b9bfd; + padding: 2px; + width: 6em; + color: #FFFFFF; + font-weight: bold; + text-transform: uppercase; + font-size: 10px; + margin-left: 8px; + cursor: pointer; +} + +input#query { + border: 2px inset #34cc67; + padding: 3px; + font-size: 12px; +} + +div.termtitle { + margin: 4px; + font-weight: bold; +} + +div.record { + padding: 5px; +} + +div.details { + border: 3px dashed gray; + padding: 5px; + margin: 4px; +} + +#recordview { + background-color: #FFF8DC; +} + +#targetview { + padding: 6px; +} + +#bottom { + background-color: #FBF5E6; +}