diff --git a/web/quack.css b/web/quack.css index a548c2e3035efa06199555748c3bf5042a43d1f5..0887d4a541b832de0e8e81869384824149e1fb1c 100644 --- a/web/quack.css +++ b/web/quack.css @@ -116,6 +116,13 @@ div.openseadragon-canvas canvas { width: 1px; } +.searchresultbox { + opacity: 0.8; + filter: alpha(opacity=40); + border: 4px solid #3333DE; + color: #3333DE; + background-color: transparent; +} .highlight { opacity: 0.4; filter: alpha(opacity=40); diff --git a/web/quack.js b/web/quack.js index fdb5d45576c3ca47ef16ce924ca9896cc7ccf558..d78120d385e1c1a9624475f6931955926a6cb61c 100644 --- a/web/quack.js +++ b/web/quack.js @@ -133,13 +133,74 @@ function outOverlay(overlay) { removeBackward(overlay, "next"); } +// URL parameter parsing +// http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter +function getRes() { + var input = window.location.href; +// name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); +// var regexS = "/[\\?&]" + name + "=([^&#]*)/g"; +// var regex = new RegExp( regexS ); + var regex = /[\\?&]box=([^&#]*)/g; + var results = []; + + var tokens; + while (tokens = regex.exec(input)) { + results.push(decodeURIComponent(tokens[1])); +// console.log('Pushing ' + decodeURIComponent(tokens[1])); + } + return results; +} + + +function createDiv(id, className, content) { + var msgContainer = document.createElement('div'); + msgContainer.id = id; // No setAttribute required + msgContainer.className = className; // No setAttribute required, note it's "className" to avoid conflict with JavaScript reserved word + msgContainer.appendChild(document.createTextNode(content)); + document.body.appendChild(msgContainer); + return msgContainer; +} + +// Helper for addResultBoxes that constructs a single box +// 0.036886,0.740071 0.898778x0.108414 I BYEN MED DE KENDTE +var boxCounter = 0; +function addResultBox(boxData) { +// console.log('Processing box ' + boxData); + var parts = boxData.split(' '); + var x = parseFloat(parts[0].split(',')[0]); + var y = parseFloat(parts[0].split(',')[1]); + var w = parseFloat(parts[1].split('x')[0]); + var h = parseFloat(parts[1].split('x')[1]); + var content = ''; + for (var i = 2 ; i < parts.length ; i++) { + if (i > 2) { + content += ' '; + } + content += parts[i]; + } + console.log('Creating overlay box for x=' + x + ', y=' + y + ', w=' + w + ', h=' + h + ', content=' + content); + myDragon.drawer.addOverlay(createDiv('searchresult' + boxCounter++, 'searchresultbox', content), new OpenSeadragon.Rect(x, y, w, h), OpenSeadragon.OverlayPlacement.TOP_LEFT, ''); +} + +// Looks for attributes with the name 'box'. A box contains x,y in relative coordinates, +// width x height i relative coordinates and optional context for the box. Sample: +// 0.036886,0.740071 0.898778x0.108414 I BYEN MED DE KENDTE +function addResultBoxes() { + var results = getRes(); + document.title = document.title + ' ' + results + ' (length ' + results.length + ')'; + for (var i = 0; i < results.length; i++) { + addResultBox(results[i]); + } +} + function setupJS() { // TODO: Check if this is an image page and if not, exit immediately toggleGrid(); toggleTextBlock(); toggleBlown(); - + addResultBoxes(); + //! Create a callback for eack overlay with the overlay-ID as argument for (var i = 0; i < myDragon.overlays.length; i++) { id = myDragon.overlays[i].id;