From ce46517c8d0095eedc2d7c95cfd298a21f7a6c9b Mon Sep 17 00:00:00 2001
From: Toke Eskildsen <te@ekot.dk>
Date: Fri, 13 Dec 2013 13:51:21 +0100
Subject: [PATCH] Added simple optional multiple URL-specified overlay boxes
---
web/quack.css | 7 ++++++
web/quack.js | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 69 insertions(+), 1 deletion(-)
diff --git a/web/quack.css b/web/quack.css
index a548c2e..0887d4a 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 fdb5d45..d78120d 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;
--
GitLab