From d7f1c93a49111cc48e2c78c1796472509b8397fe Mon Sep 17 00:00:00 2001 From: Dennis Schafroth Date: Mon, 31 May 2010 09:11:41 +0200 Subject: [PATCH] iPhone UI and client demo Some test for embedding a HTML page in an iPhone. - Example of calling javascript from objective-c - Example of calling objective-c from javascript --- www/iphone/example_client.js | 382 +++++++++++++++++++++++++++++++++++++++++ www/iphone/index.html | 100 +++++++++++ www/iphone/index2.html | 60 +++++++ www/iphone/indexdata_logo.png | Bin 0 -> 3824 bytes www/iphone/styles.css | 110 ++++++++++++ 5 files changed, 652 insertions(+) create mode 100644 www/iphone/example_client.js create mode 100644 www/iphone/index.html create mode 100644 www/iphone/index2.html create mode 100644 www/iphone/indexdata_logo.png create mode 100644 www/iphone/styles.css diff --git a/www/iphone/example_client.js b/www/iphone/example_client.js new file mode 100644 index 0000000..fd9c37e --- /dev/null +++ b/www/iphone/example_client.js @@ -0,0 +1,382 @@ +/* A very simple client that shows a basic usage of the pz2.js +*/ + +// 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 = true; +var pazpar2path = '/pazpar2/search.pz2'; +var showResponseType = ''; +if (document.location.hash == '#useproxy') { + usesessions = false; + pazpar2path = '/service-proxy/'; + showResponseType = 'json'; +} + +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": "xtargets,subject,author", + "onbytarget": my_onbytarget, + "usesessions" : usesessions, + "showResponseType": showResponseType, + "onrecord": my_onrecord } ); +// some state vars +var curPage = 1; +var recPerPage = 20; +var totalRec = 0; +var curDetRecId = ''; +var curDetRecData = null; +var curSort = 'relevance'; +var curFilter = null; +var submitted = false; +var SourceMax = 16; +var SubjectMax = 10; +var AuthorMax = 10; + +// +// pz2.js event handlers: +// +function my_oninit() { + my_paz.stat(); + my_paz.bytarget(); +} + +function my_onshow(data) { + totalRec = data.merged; + // move it out + var pager = document.getElementById("pager"); + pager.innerHTML = ""; + pager.innerHTML +='
Displaying: ' + + (data.start + 1) + ' to ' + (data.start + data.num) + + ' of ' + data.merged + ' (found: ' + + data.total + ')
'; + drawPager(pager); + // navi + var results = document.getElementById("results"); + + var html = []; + for (var i = 0; i < data.hits.length; i++) { + var hit = data.hits[i]; + html.push('
' + +''+ (i + 1 + recPerPage * (curPage - 1)) +'. ' + +'' + + hit["md-title"] +' '); + if (hit["md-title-remainder"] !== undefined) { + html.push('' + hit["md-title-remainder"] + ' '); + } + if (hit["md-title-responsibility"] !== undefined) { + html.push(''+hit["md-title-responsibility"]+''); + } + if (hit.recid == curDetRecId) { + html.push(renderDetails(curDetRecData)); + } + html.push('
'); + } + replaceHtml(results, html.join('')); +} + +function my_onstat(data) { + var stat = document.getElementById("stat"); + if (stat == null) + return; + + stat.innerHTML = ' .:STATUS INFO -- Active clients: ' + + data.activeclients + + '/' + data.clients + ' -- ' + + 'Retrieved records: ' + data.records + + '/' + data.hits + ' :.'; +} + +function my_onterm(data) { + var termlists = []; + termlists.push('
TERMLISTS:
.::Sources
'); + for (var i = 0; i < data.xtargets.length && i < SourceMax; i++ ) { + termlists.push('' + data.xtargets[i].name + + ' (' + data.xtargets[i].freq + ')
'); + } + + termlists.push('
.::Subjects
'); + for (var i = 0; i < data.subject.length && i < SubjectMax; i++ ) { + termlists.push('' + data.subject[i].name + ' (' + + data.subject[i].freq + ')
'); + } + + termlists.push('
.::Authors
'); + for (var i = 0; i < data.author.length && i < AuthorMax; i++ ) { + termlists.push('' + + data.author[i].name + + ' (' + + data.author[i].freq + + ')
'); + } + var termlist = document.getElementById("termlist"); + replaceHtml(termlist, termlists.join('')); +} + +function my_onrecord(data) { + // FIXME: record is async!! + clearTimeout(my_paz.recordTimer); + // in case on_show was faster to redraw element + var detRecordDiv = document.getElementById('det_'+data.recid); + if (detRecordDiv) return; + curDetRecData = data; + var recordDiv = document.getElementById('recdiv_'+curDetRecData.recid); + var html = renderDetails(curDetRecData); + recordDiv.innerHTML += html; +} + +function my_onbytarget(data) { + var targetDiv = document.getElementById("bytarget"); + var table ='' + +''; + + for (var i = 0; i < data.length; i++ ) { + table += ""; + } + + table += '
Target IDHitsDiagsRecordsState
" + data[i].id + + "" + data[i].hits + + "" + data[i].diagnostic + + "" + data[i].records + + "" + data[i].state + "
'; + targetDiv.innerHTML = table; +} + +//////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + +// 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; +} + +// when search button pressed +function onFormSubmitEventHandler() +{ + resetPage(); + loadSelect(); + triggerSearch(); + submitted = true; + return false; +} + +function onSelectDdChange() +{ + if (!submitted) return false; + resetPage(); + loadSelect(); + my_paz.show(0, recPerPage, curSort); + return false; +} + +function resetPage() +{ + 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 +function limitQuery (field, value) +{ + document.search.query.value += ' and ' + 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() { + if ( totalRec - recPerPage*curPage > 0) { + my_paz.showNext(); + curPage++; + } +} + +function pagerPrev() { + if ( my_paz.showPrev() != false ) + curPage--; +} + +// swithing view between targets and records + +function switchView(view) { + + var targets = document.getElementById('targetview'); + var records = document.getElementById('recordview'); + + switch(view) { + case 'targetview': + targets.style.display = "block"; + records.style.display = "none"; + break; + case 'recordview': + targets.style.display = "none"; + records.style.display = "block"; + break; + default: + alert('Unknown view.'); + } +} + +// detailed record drawing +function showDetails (prefixRecId) { + var recId = prefixRecId.replace('rec_', ''); + var oldRecId = curDetRecId; + curDetRecId = recId; + + // remove current detailed view if any + var detRecordDiv = document.getElementById('det_'+oldRecId); + // lovin DOM! + if (detRecordDiv) + detRecordDiv.parentNode.removeChild(detRecordDiv); + + // if the same clicked, just hide + if (recId == oldRecId) { + curDetRecId = ''; + curDetRecData = null; + return; + } + // request the record + my_paz.record(recId); +} + +function replaceHtml(el, html) { + var oldEl = typeof el === "string" ? document.getElementById(el) : el; + /*@cc_on // Pure innerHTML is slightly faster in IE + oldEl.innerHTML = html; + return oldEl; + @*/ + var newEl = oldEl.cloneNode(false); + newEl.innerHTML = html; + oldEl.parentNode.replaceChild(newEl, oldEl); + /* Since we just removed the old element from the DOM, return a reference + to the new element, which can be used to restore variable references. */ + return newEl; +}; + +function renderDetails(data, marker) +{ + var details = '
'; + if (marker) details += ''; + if (data["md-title"] != undefined) { + details += ''; + } + if (data["md-date"] != undefined) + details += ''; + if (data["md-author"] != undefined) + details += ''; + if (data["md-electronic-url"] != undefined) + details += ''; + if (data["location"][0]["md-subject"] != undefined) + details += ''; + if (data["location"][0]["@name"] != undefined) + details += ''; + details += '
'+ marker + '
Title: '+data["md-title"]; + if (data["md-title-remainder"] !== undefined) { + details += ' : ' + data["md-title-remainder"] + ' '; + } + if (data["md-title-responsibility"] !== undefined) { + details += ' '+ data["md-title-responsibility"] +''; + } + details += '
Date: ' + data["md-date"] + '
Author: ' + data["md-author"] + '
URL: ' + data["md-electronic-url"] + '' + '
Subject: ' + data["location"][0]["md-subject"] + '
Location: ' + data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")" + '
'; + return details; +} + //EOF diff --git a/www/iphone/index.html b/www/iphone/index.html new file mode 100644 index 0000000..01a13d8 --- /dev/null +++ b/www/iphone/index.html @@ -0,0 +1,100 @@ + + + + + + + Pazpar2 demo client + + + + + + + +
+ +
+ + + +
+ + + + + + +
+
+ + +
+
+
+ +
+ + + + + +
+ +
+ +
+
+
+ + + + + + + diff --git a/www/iphone/index2.html b/www/iphone/index2.html new file mode 100644 index 0000000..3bbc190 --- /dev/null +++ b/www/iphone/index2.html @@ -0,0 +1,60 @@ + + + + + + + Pazpar2 demo client + + + + + + + +
+
+
+ callback +
+ + + diff --git a/www/iphone/indexdata_logo.png b/www/iphone/indexdata_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..171c03986a1b846dc1bf12d255f57e62aad2df68 GIT binary patch literal 3824 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 mT4625YB1_Z=Lto#oT%Cs^MI#bjD0000