Skip to content

Commit 945c782

Browse files
simonreddingsimonredding
committed
2 parents 4b4dbe8 + 99453db commit 945c782

File tree

5 files changed

+181
-37
lines changed

5 files changed

+181
-37
lines changed

‎translate-demo/translation-demo

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<html>
2+
<head>
3+
4+
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
5+
<script>
6+
$(document).ready(function() {
7+
$('#languages').data('pre', $(this).val());
8+
$('#languages').bind('change', runTranslation);
9+
10+
function runTranslation(evt) {
11+
var before_change = $(this).data('pre');//get the pre data
12+
var langCode = $("#languages option:selected").val();
13+
14+
// Empty string returned on first interaction with select?
15+
if (!before_change) {
16+
before_change = document.getElementById('languages').options[0].value;
17+
}
18+
19+
// Hardcoded for now, just pass originalText in as a parameter and it will replace the spaces and send to the api
20+
var originalText = "Hello! Welcome to our new website";
21+
var replacedText = originalText.split(' ').join('+');
22+
23+
var langCode = $("#languages option:selected").val();
24+
var xhr = new XMLHttpRequest();
25+
26+
xhr.onreadystatechange = function() {
27+
if (xhr.readyState == 4 && xhr.status == 200) {
28+
var jsonObject = JSON.parse(xhr.responseText);
29+
$('#textArea').text(jsonObject.text[0]);
30+
}
31+
};
32+
33+
// Had a problem translating from certain languages to others (encoding issues I think). But our source content will always be in English
34+
// so we can just use that and translate to the selected languages
35+
36+
// API Key hardcoded for now
37+
//xhr.open("GET", "https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20160206T123230Z.37bca81167793559.4914b0cdb53f30907bf278a6726aee775e04cfb1&text=" + replacedText +"&lang=" + before_change + "-" + langCode, false);
38+
xhr.open("GET", "https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20160206T123230Z.37bca81167793559.4914b0cdb53f30907bf278a6726aee775e04cfb1&text=" + replacedText +"&lang=" + langCode, false);
39+
xhr.send();
40+
41+
$(this).data('pre', $(this).val());
42+
}
43+
});
44+
</script>
45+
46+
</head>
47+
48+
<body>
49+
50+
<!--Harcoded in a few language codes as examples, full supported list available here: https://tech.yandex.com/translate/doc/dg/concepts/langs-docpage/ -->
51+
<select id="languages">
52+
<option value="en">English</option>
53+
<option value="ar">Arabic</option>
54+
<option value="hy">Armenian</option>
55+
<option value="bs">Bosnian</option>
56+
</select>
57+
<br/>
58+
<br/>
59+
<div id="textArea">
60+
Hello! Welcome to our new website
61+
</div>
62+
</body>
63+
64+
</html>

‎translate-demo/yandex-api-key

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
trnsl.1.1.20160206T123230Z.37bca81167793559.4914b0cdb53f30907bf278a6726aee775e04cfb1

‎web/js/app.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,58 @@
11
$(document).foundation();
2+
3+
4+
5+
var map = L.map('map').setView([53.38159, -1.47148], 13);
6+
7+
8+
9+
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
10+
{
11+
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
12+
maxZoom: 18,
13+
zoom: 13,
14+
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
15+
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
16+
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
17+
id: 'mapbox.streets'
18+
}).addTo(map);
19+
20+
21+
map.locate();
22+
23+
function onLocationFound(e) {
24+
var radius = e.accuracy / 2;
25+
26+
L.marker(e.latlng).addTo(map)
27+
.bindPopup("You are within " + radius + " meters from this point").openPopup();
28+
29+
L.circle(e.latlng, radius).addTo(map);
30+
31+
}
32+
33+
map.on('locationfound', onLocationFound);
34+
35+
36+
var popup = L.popup();
37+
38+
function onMapClick(e) {
39+
popup
40+
.setLatLng(e.latlng)
41+
.setContent("You clicked the map at " + e.latlng.toString())
42+
.openOn(map);
43+
}
44+
45+
map.on('click', onMapClick);
46+
47+
48+
var postoffices = L.tileLayer.wms('http://52.16.129.211:8080/geoserver/sheffugees/wms',
49+
{
50+
layers: 'shefugees:postoffices',
51+
tiled: true,
52+
format: 'image/png',
53+
transparent: true,
54+
maxZoom: 18,
55+
minZoom: 12,
56+
continuousWorld: true
57+
}).addTo(map);
58+

‎web/scss/_global.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,9 @@ and open the template in the editor.
1616
li a{
1717
display: block;
1818
}
19+
}
20+
21+
22+
#map {
23+
height: 400px;
1924
}

‎web/search-postoffice.html

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Foundation for Sites</title>
88
<link rel="stylesheet" href="css/app.css">
9+
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
910
</head>
1011
<body>
1112
<div class="row">
@@ -17,51 +18,67 @@ <h1>Post Offices near you</h1>
1718

1819

1920
<div class="row">
21+
<div class="small-12 columns">
22+
<ul class="tabs" data-tabs id="example-tabs">
23+
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">List view</a></li>
24+
<li class="tabs-title"><a href="#panel2">Map view</a></li>
25+
</ul>
2026

21-
<div class="small-12 medium-6 large-6 columns">
22-
<div class="callout secondary">
23-
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.372722,-1.4682351&heading=234.28&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
24-
<p>228 Shoreham St, Sheffield, England</p>
25-
<div class="row">
26-
<div class="small-6 columns">
27-
<a href="#" class="button expand">
28-
<img src="//placehold.it/128x128" class="thumbnail" alt="">
29-
<p>Navigate using Street View</p>
30-
</a>
27+
<div class="tabs-content" data-tabs-content="example-tabs">
28+
<div class="tabs-panel is-active" id="panel1">
29+
<div class="small-12 medium-6 large-6 columns">
30+
<div class="callout secondary">
31+
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.372722,-1.4682351&heading=234.28&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
32+
<p>228 Shoreham St, Sheffield, England</p>
33+
<div class="row">
34+
<div class="small-6 columns">
35+
<a href="#" class="button expand">
36+
<img src="//placehold.it/128x128" class="thumbnail" alt="">
37+
<p>Navigate using images</p>
38+
</a>
39+
</div>
40+
<div class="small-6 columns">
41+
<a href="#" class="button expand">
42+
<img src="//placehold.it/128x128" class="thumbnail" alt="">
43+
<p>Navigate on a map</p>
44+
</a>
45+
</div>
46+
</div>
47+
</div>
3148
</div>
32-
<div class="small-6 columns">
33-
<a href="#" class="button expand">
34-
<img src="//placehold.it/128x128" class="thumbnail" alt="">
35-
<p>Navigate on a map</p>
36-
</a>
49+
<div class="small-12 medium-6 large-6 columns">
50+
<div class="callout secondary">
51+
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.3787745,-1.470125&heading=19.8&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
52+
<p>43 Charles St, Sheffield, England</p>
53+
<div class="row">
54+
<div class="small-6 columns">
55+
<a href="#" class="button expand">
56+
<img src="//placehold.it/128x128" class="thumbnail" alt="">
57+
<p>Navigate using images</p>
58+
</a>
59+
</div>
60+
<div class="small-6 columns">
61+
<a href="#" class="button expand">
62+
<img src="//placehold.it/128x128" class="thumbnail" alt="">
63+
<p>Navigate on a map</p>
64+
</a>
65+
</div>
66+
</div>
67+
</div>
3768
</div>
38-
</div>
39-
</div>
40-
</div>
4169

42-
<div class="small-12 medium-6 large-6 columns">
43-
<div class="callout secondary">
44-
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=53.3787745,-1.470125&heading=19.8&pitch=0&key=AIzaSyBEoWw039wZsgCN9sBND-oLlQfzFJ6vLwo" class="thumbnail" alt="">
45-
<p>43 Charles St, Sheffield, England</p>
46-
<div class="row">
47-
<div class="small-6 columns">
48-
<a href="#" class="button expand">
49-
<img src="//placehold.it/128x128" class="thumbnail" alt="">
50-
<p>Navigate using Street View</p>
51-
</a>
52-
</div>
53-
<div class="small-6 columns">
54-
<a href="#" class="button expand">
55-
<img src="//placehold.it/128x128" class="thumbnail" alt="">
56-
<p>Navigate on a map</p>
57-
</a>
70+
</div>
71+
<div class="tabs-panel" id="panel2">
72+
<div class="map-container">
73+
<div id="map">
74+
</div>
5875
</div>
5976
</div>
60-
</div>
61-
</div>
62-
77+
</div>
78+
</div>
6379
</div>
6480

81+
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
6582
<script src="bower_components/jquery/dist/jquery.js"></script>
6683
<script src="bower_components/what-input/what-input.js"></script>
6784
<script src="bower_components/foundation-sites/dist/foundation.js"></script>

0 commit comments

Comments
 (0)