-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
206 lines (180 loc) · 7.53 KB
/
index.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A short story about how Finland is helping 2 million Syrian refugees</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
body {
font-family: Arial;
text-align: center;
background-color: #333;
color: white;
}
a, a:visited, a:active, a:hover {
color: inherit;
text-decoration: none;
}
.row1 {
width: 4px;
margin: 0 1px;
}
.row1, .row200, .row2000 {
margin-bottom: 4px;
}
h1 {
font-size: 80px;
width: 700px;
display: inline-block;
margin-top: 200px;
margin-bottom: 500px;
}
h2 {
font-size: 36px;
width: 900px;
display: inline-block;
}
.button {
display: inline-block;
background-color: rgb(214, 83, 83);
padding: 7px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 15px;
}
.break {
margin: 14px 16px 18px;
font-size: 39px;
font-weight: bold;
}
.color {
color: rgb(214, 83, 83);
}
#share {
margin: 30px;
margin-top: 100px;
}
#credit {
font-size: 13px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1&appId=589389644451916";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="container"><a href="javascript:scrollTo('h0', 500)"><h1 id="top"></h1></a></div>
<div id="share" class="block">
<div class="fb-like" data-href="http://jplusplus.se/u/syria" data-width="300" data-colorscheme="dark" data-layout="button_count" data-action="recommend" data-show-faces="true" data-send="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jplusplus.se/u/syria" data-via="jensfinnas">Tweet</a>
</div>
<div id="credit">
<strong>Sources:</strong> <a href="http://yle.fi/uutiset/interior_minister_finland_could_take_in_500_syrian_refugees/6838793" target="_blank" id="source">Yle</a>, <a href="http://data.unhcr.org/syrianrefugees/regional.php">UNHCR</a>.<br>
<a href="http://jplusplus.se" target="_blank">Jens Finnäs, Journalism++ Stockholm</a></div>
<script>
function addCommas(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Scroll to headline with given id
function scrollTo(h, time){
var aTag = $("#"+h);
$('html,body').animate({scrollTop: aTag.offset().top},time);
}
// Get data
function getData() {
var country = getParameterByName("country");
if (!country) country = "fi"; // If no country parameter given display Finland
for (var i=0; i<countries.length; i++) {
if (countries[i]['Country id'] == country) return countries[i]; // Return id match
}
}
function drawIcons(n) {
// Count number of image blocks
var n2000 = Math.floor(n / 2000);
var n200 = Math.floor((n - n2000 * 2000) / 200);
var n1 = Math.floor(n - n2000 * 2000 - n200 * 200);
// Draw 2000 item blocks
for (var j=0; j<n2000; j++) {
if (j%25==0 && j!==0) cont.append('<div class="break">'+addCommas(j*2000)+'</div>')
cont.append('<img src="2000.png" class="row2000"/><br>');
}
// Draw 200 item blocks
for (var j=0; j<n200; j++) {
cont.append('<img src="200.png" class="row200"/><br>');
}
´// Draw single items
for (var j=0; j<n1; j++) {
cont.append('<img src="1.png" class="row1"/>');
}
}
var cont = $("#container");
// Data, copy-paste from Google Spreadsheet via Mr Data Converter
var countries = [
{"Country id":"fi","Country":"Finland","Number":72,"Sentence":"Finland has so far received * Syrian asylum seekers this year.","Source name":"Yle","Source url":"http://yle.fi/uutiset/interior_minister_finland_could_take_in_500_syrian_refugees/6838793"},
{"Country id":"ch","Country":"Switzerland","Number":500,"Sentence":"Switzerland is planning to take up to * Syrian refugees within the next 3 years.","Source name":"Tages-Anzeiger","Source url":"http://www.tagesanzeiger.ch/schweiz/standard/Sommaruga-holt-500-syrische-Fluechtlinge-in-die-Schweiz/story/15112816"},
{"Country id":"de","Country":"Germany","Number":5000,"Sentence":"Germany is planning to take up to * Syrian refugees.","Source name":"BAMF (official)","Source url":"http://www.bamf.de/SharedDocs/Meldungen/DE/2013/20130617-aufnahme-syrien-unhcr.html"},
{"Country id":"ca","Country":"Canada","Number":1300,"Sentence":"Canada plans to accept up to * Syrian refugees.","Source name":"CBC","Source url":"http://www.cbc.ca/news/politics/canada-to-accept-up-to-1-300-syrian-refugees-1.1353950"}];
var data = getData();
// Headlines
var story = [
{name: 'Approximately 2,000,000 Syrians have fled the country because of the war. <span class="color">*</span> of these refugees are less than 4 years of age.', value: 372000},
{name: '<span class="color">*</span> are 5 to 11 years old.', value: 394000},
{name: '<span class="color">*</span> are teenagers.', value: 264000},
{name: '<span class="color">*</span> adults have fled the country.', value: 912000},
{name: 'And <span class="color">*</span> refugees are older than 60 years.', value: 58000}
];
// Set country specific content
var url = data['Country id'] == "fi" ? "http://jplusplus.se/u/syria/index.html" : "http://jplusplus.se/u/syria/index.html?country="+data['Country id']; // Exception to capture initial Finnish shares
$('h1').html('A short story about how '+data["Country"]+' is helping <span class="color">2 million</span> Syrian refugees');
$('title').text('A short story about how '+data["Country"]+' is helping 2 million Syrian refugees');
$('.fb-like').attr('data-href', url);
$('.twitter-share-button').attr('data-url', url);
$('#source').text(data["Source name"]).attr('href', data["Source url"]);
// Draw story
for (var i=0; i<story.length; i++) {
var d = story[i];
var str = d.name.replace("*", addCommas(d.value))
// Add heading
cont.append('<h2 id="h'+i+'"><a href="javascript:scrollTo(\'h'+(i+1)+'\', '+(d.value/100)+')">'+str+' <br><div class="button">Tell me more</div></a></h2>');
// Draw icons
drawIcons(d.value);
}
// Add final national heading
cont.append('<h2 id="h'+story.length+'">'+data["Sentence"].replace("*", "<span class=\"color\">"+data["Number"]+"</span>")+'<br>But hey, we can\'t help everyone.</h2><br>');
// Draw icons
drawIcons(data["Number"]);
// Scroll to top
cont.append('<br><br><br><br><br><div class="button"><a href="javascript:scrollTo(\'top\', 2000)">Back to top</a></div>');
</script>
<script>
// twitter share
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44179248-1', 'jplusplus.se');
ga('send', 'pageview');
</script>
</body>
</html>