-
Notifications
You must be signed in to change notification settings - Fork 3
/
results.html
126 lines (125 loc) · 4.23 KB
/
results.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Geo This popup</title>
<style>
*{font-size:100%;margin:0;padding:0;}
html,body{background:#fff;color:#333;font-family:calibri,arial,sans-serif;width:480px;}
ul{margin:1em 0;}
ul li{margin:0 0 .5em 0;list-style:none;}
li span{font-weight:bold;}
#ft{clear:both;font-size:80%;color:#999;text-align:right;}
h1{padding:0 10px 0 34px;background:url(icon-32.png) center left no-repeat #69c;-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);color:#fff;font-size:120%;font-weight:bold;line-height:32px;-webkit-border-radius:5px;}
.locations img{-webkit-border-radius:10px;display:block;margin:1em 0;}
#doc{width:400px;padding:2em;}
ul li ul{position:absolute;left:-9999em;width:340px;font-size:90%;margin-left:1.2em;}
ul li {cursor:pointer;}
ul li.open ul{position:relative;left:0;}
#geocontainer p{margin:2em 0;font-weight:bold;}
.error{color:#c00;}
a{color:#369;}
</style>
</head>
<body>
<!-- <textarea id="debug"></textarea> -->
<div id="doc">
<h1>Geographical locations:</h1>
<div id="geocontainer"><p>Loading…</p></div>
<p id="ft">Powered by: Google Maps, Yahoo Placemaker and YQL.</p>
</div>
<script>
chrome.tabs.executeScript(null, {file: "content_script.js"});
chrome.extension.onConnect.addListener(function(port) {
if (port.name != 'getgeo'){return;}
port.onMessage.addListener(function(data){
if (data.command == "geo") {
if(data.selection !== ''){
postgeo(data.selection,null);
} else {
postgeo('',data.loc);
}
}
});
});
var container = document.getElementById('geocontainer');
function postgeo(selection,url){
if(url){
var yql = 'select * from geo.placemaker where '+
'documentURL ="'+url+
'" and documentType="text/html" and appid=""';
} else {
var yql = 'select * from geo.placemaker where '+
'documentContent ="'+selection+
'" and documentType="text/plain" and appid=""';
}
var url = 'http://query.yahooapis.com/v1/public/yql?q='+
encodeURIComponent(yql)+'&format=json';
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var resp = JSON.parse(xhr.responseText);
var badge = render(resp);
if(badge!==''){
container.innerHTML = badge;
} else {
container.innerHTML = '<p class="error">Sorry, can\'t find any '+
'locations :(</p>';
}
}
}
xhr.send();
}
function render(data){
var badge = '';
if(data.query.results && data.query.results.matches &&
data.query.results.matches.match){
var results = data.query.results.matches.match;
var markers = '';
var locs = '<ul>';
if(!results.length){
addto(results,0);
} else {
for(var i=0,j=results.length;i<j;i++){
addto(results[i],i);
}
}
var url = 'http://maps.google.com/maps/api/staticmap'+
'?sensor=false'+
'&size='+400+'x'+200+'&maptype=roadmap'+
markers;
locs += '</ul>';
badge = '<div class="locations">'+
'<img src="'+url+'" alt="Map">'+locs+
'</div>';
}
function addto(results,i){
var marker = String.fromCharCode((i+65));
var location = results.place.name;
var type = results.place.type;
var woeid = results.place.woeId;
var lat = results.place.centroid.latitude;
var lon = results.place.centroid.longitude;
markers += '&markers=color:blue|label:'+
marker+'|'+lat+','+lon;
locs += '<li><span>'+marker+': </span>'+
'<a href="http://maps.google.com/maps?q='+
location+'">'+location+'</a>'+
'<ul><li>Type: '+type+'</li>'+
'<li>Latitude, Longitude: '+lat+','+lon+'</li>'+
'<li>WOEID: '+woeid+'</li></ul></li>';
}
return badge;
}
container.addEventListener('click',function(e){
e.preventDefault();
var t = e.target;
if(t.nodeName.toLowerCase() === 'a'){
var p = t.parentNode;
p.className = p.className === 'open' ? '' : 'open';
}
},false);
</script>
</body>
</html>