From 10b11592ab7fa534355c937aef89087b042d9c90 Mon Sep 17 00:00:00 2001
From: Arvind <arvindkhadri@gmail.com>
Date: Wed, 10 Jul 2013 17:17:45 +0530
Subject: [PATCH] UI changes   Highlight the element in text annotation when
 the related xpath is clicked. 	Fixing keywords for search
 API for consistency with old data.

---
 server.py                  |    3 +-
 static/config.js.sample    |    3 ++
 static/myVector.js         |   67 +++++++++++++++++++++++++++++---------------
 static/text-annotation.css |    4 +++
 static/text-annotation.js  |   19 +++++++++++--
 templates/blank.html       |   22 +++++++++++++--
 templates/index.html       |    1 +
 7 files changed, 90 insertions(+), 29 deletions(-)
 create mode 100644 static/config.js.sample

diff --git a/server.py b/server.py
index 6ce50ff..d976d3f 100644
--- a/server.py
+++ b/server.py
@@ -90,8 +90,7 @@ def search():
             del(i['_id'])
             ret[y] = i
             y = y + 1
-    
-    return render_template('blank.html', content = ret)
+    return render_template('blank.html', content = ret, flag = request.args['flag'])
 
 
 @app.route('/submit', methods=['POST'])
diff --git a/static/config.js.sample b/static/config.js.sample
new file mode 100644
index 0000000..2977228
--- /dev/null
+++ b/static/config.js.sample
@@ -0,0 +1,3 @@
+var config = {
+  'indexer':'http://127.0.0.1:5000'
+}
diff --git a/static/myVector.js b/static/myVector.js
index e2b0f7f..deeab1b 100644
--- a/static/myVector.js
+++ b/static/myVector.js
@@ -62,8 +62,8 @@ function onFeatureSelect(feature)
 {
  for(var i in ans.ans)
   {
-		if(feature.geometry.bounds['left'] == ans.ans[i]['left'] && feature.geometry.bounds['right'] == ans.ans[i]['right'] && feature.geometry.bounds['top'] == ans.ans[i]['top'] && feature.geometry.bounds['bottom'] == ans.ans[i]['bottom'])
-		{
+		// if(feature.geometry.bounds['left'] == ans.ans[i]['left'] && feature.geometry.bounds['right'] == ans.ans[i]['right'] && feature.geometry.bounds['top'] == ans.ans[i]['top'] && feature.geometry.bounds['bottom'] == ans.ans[i]['bottom'])
+		// {
 	    str = {};
 	    if(ans.ans[i]['character'])
 				str['character'] = ans.ans[i]['character'];
@@ -72,30 +72,42 @@ function onFeatureSelect(feature)
 				str['material'] = ans.ans[i]['material'];
 				//	str['jewellery'] = ans.ans[i]['jewellery']
 	    }
-
+		if(ans.ans[i]["how"])
+		{
 	    z = new OpenLayers.Popup.FramedCloud(
 				"test",
 				feature.geometry.getBounds().getCenterLonLat(),
 				new OpenLayers.Size(640,480),
-					'<iframe src='+config.indexer+"/search?data="+JSON.stringify({'nodes': ans.ans[i]["nodes"]})+" ></iframe>",null,true);
+					'<iframe src='+config.indexer+"/search?flag=0&data="+JSON.stringify({'nodes': ans.ans[i]["how"]})+" ></iframe>",null,true);
+		}
+		else
+		{
+		  z = new OpenLayers.Popup.FramedCloud(
+				"test",
+				feature.geometry.getBounds().getCenterLonLat(),
+				new OpenLayers.Size(640,480),
+					'<iframe src='+config.indexer+"/search?flag=0&data="+JSON.stringify({'nodes': ans.ans[i]["nodes"]})+" ></iframe>",null,true);
+
+		}
+
 	    feature.popup = z;
 	    z.panMapIfOutOfView = true;
 	    map.addPopup(z);
 	    break;
-		}
-		else{
-	    if(i == ans.count-1)
-	    {
-				z = new OpenLayers.Popup.FramedCloud(
-					"test",
-					feature.geometry.getBounds().getCenterLonLat(),
-					new OpenLayers.Size(640,480),
-					'<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
-				feature.popup = z;
-				z.panMapIfOutOfView = true;
-				map.addPopup(z);
-	    }
-		}
+		//}
+		//else{
+	    // if(i == ans.count-1)
+	    // {
+			// 	z = new OpenLayers.Popup.FramedCloud(
+			// 		"test",
+			// 		feature.geometry.getBounds().getCenterLonLat(),
+			// 		new OpenLayers.Size(640,480),
+			// 		'<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
+			// 	feature.popup = z;
+			// 	z.panMapIfOutOfView = true;
+			// 	map.addPopup(z);
+	    // }
+		//}
   }
 
 }
@@ -184,6 +196,7 @@ function init(url){
 		$.get(config.indexer+"/fetch",{uri:"default"} , function(data){
 			if (data != undefined)
 			{
+				console.log(data);
 				ans.ans = data;
 				for(var i in ans.ans)
 				{
@@ -316,11 +329,23 @@ function addLabel(left, top, name)
 }
 function makeBoxes(x)
 {
-
+	if(x.left)
+	{
   bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);
   box = new OpenLayers.Feature.Vector(bounds.toGeometry());
   box3.addFeatures(box);
   addLabel(x['left'],x['top'],x['name']);
+	}
+	else if(x.where)
+	{
+	position = JSON.parse(x.where.split("#")[1]);
+	console.log(position);
+	bounds = new OpenLayers.Bounds(position[2], position[1], position[3], position[0]);
+  box = new OpenLayers.Feature.Vector(bounds.toGeometry());
+  box3.addFeatures(box);
+  addLabel(position[2],position[0],x['name']);
+
+	}
 }
 // function onmouse(data){
 //     console.log(data);
@@ -472,7 +497,3 @@ function publish()
 	  });
 	});
 }
-var config = {
-  'postTweetUrl':'http://demo.swtr.us/add',
-  'indexer':'http://folkhampi.openrun.net/mural-annotation'
-}
diff --git a/static/text-annotation.css b/static/text-annotation.css
index ba5f4ca..e638433 100644
--- a/static/text-annotation.css
+++ b/static/text-annotation.css
@@ -18,3 +18,7 @@
   width: 500px;
   margin: -250px 0 0 28%;
 }
+.highlight{
+background-color: rgba(255, 212, 0, 0.6);
+
+}
\ No newline at end of file
diff --git a/static/text-annotation.js b/static/text-annotation.js
index 10ad0ec..4a2513a 100644
--- a/static/text-annotation.js
+++ b/static/text-annotation.js
@@ -14,7 +14,12 @@ var attributes = {};
     modal.id = 'modal-wrap';
     document.body.appendChild(modal);
     modal.innerHTML = modal_template();
-    $('#publish').click(function() {
+    $("#list-anno").on("hidden", function(){
+			$(".well a").off("click");
+			$(".highlight").removeClass("highlight");
+
+		})
+		$('#publish').click(function() {
       sweet.publish();
     });
   };
@@ -37,7 +42,8 @@ var attributes = {};
   };
   window.listAnno = function() { // list annotations of current page
     console.log('listing annotations');
-    $.get(config.indexer + '/search?data=' +
+
+    $.get(config.indexer + '/search?flag=1&data=' +
         JSON.stringify({'where': window.location.search.split('url=')[1]}),
         function(data) {
           //console.log(data);
@@ -45,6 +51,15 @@ var attributes = {};
           $('#list-anno').modal({
             backdrop: false,
           });
+					$('.well a').click(function(event){
+						xpath = $(event.currentTarget).text().split('#')[1];
+						var nodes = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE,null);
+						result = nodes.iterateNext();
+						while(result){
+							$(result).addClass("highlight");
+							result = nodes.iterateNext();
+						}
+					});
         });
   };
 
diff --git a/templates/blank.html b/templates/blank.html
index 36d9147..57a68c9 100644
--- a/templates/blank.html
+++ b/templates/blank.html
@@ -1,7 +1,25 @@
+<!doctype html>
+<body>
+{% if flag == '1' %}
 {% for obj in content %}
 <div class="well">
-{% for key in content[obj].keys() %}
-  <p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
+	{% for key in content[obj].keys() %}
+	{% if key == "where" or key == "xpath" %}
+	<p><b>{{ key }}</b>:<a href="#"> {{ content[obj][key] }}</a></p>
+	{% else %}
+	<p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
+	{% endif %}
+	{% endfor %}
+</div>
 {% endfor %}
+{% else %}
+{% for obj in content %}
+<div class="well">
+	{% for key in content[obj].keys() %}
+  <p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
+	{% endfor %}
 </div>
 {% endfor %}
+{% endif %}
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index 7d6ae86..68153c3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,6 +14,7 @@
 	<script type="text/javascript" src="static/tree.js"></script>
 	<script type="text/javascript" src="static/myVector.js"></script>
 	<script type="text/javascript" src="static/bootstrap.js"></script>
+	<script type="text/javascript" src="{{ url_for('static',filename='config.js') }}"></script>
 </head>
 {% if url %}
 	<body onload='init({{ url|string|safe }});'>
-- 
1.7.10.4