-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (75 loc) · 2.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Itowns Climate Examples</title>
<link type="text/css" rel="stylesheet" href="examples/css/example.css">
</head>
<body data-spy="scroll" data-target="nav" onload="onLoad()">
<div id="main">
<iframe id="content" class="scroll-section" frameborder="0" height="100%"></iframe>
<div id="view-source" class="text"></div>
</div>
<nav class="scroll-section">
<a href="/">
<img src="doc/itowns_logo_300x134.png" width="245px"/>
</a>
</nav>
<script type="text/javascript">
var baseURI = document.baseURI;
function bindIframe() {
var navLinks = document.getElementsByClassName('nav-link');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var target = e.target.localName === 'b' ? e.target.parentNode : e.target;
var url = target.href.replace('#', 'examples/') + '.html';
var slug = target.hash;
goTo(url, slug);
});
}
// load page if setted
if (document.location.hash) {
var url = document.location.href.replace('#', 'examples/') + '.html';
goTo(url);
} else {
goTo('examples/map_netcdf_temp.html');
}
}
function goTo(url, slug) {
if (slug) window.location.hash = slug;
var iframe = document.getElementById('content');
iframe.src = url.replace('index.html', '');
iframe.focus();
var viewSrc = '<a href="https://github.com/cboucheIGN/itowns-climate-example/blob/master/examples/';
viewSrc += window.location.hash.substr(1) || 'map_netcdf_temp';
viewSrc += '.html" target="_blank">View source</a>';
document.getElementById('view-source').innerHTML = viewSrc;
}
function initNavigation(list) {
var nav = '<h2>Examples</h2>';
for (var section in list) {
nav += '<div class="package">';
nav += `<h3 class="nav-section">${section}</h3>`;
nav += '<ul>';
for (var example in list[section]) {
nav += '<li class="nav-item">';
nav += `<a class="nav-link" href="#${example}">`;
nav += `${list[section][example]}</a></li>`;
}
nav += '</ul></div>';
}
document.getElementsByTagName('nav')[0].insertAdjacentHTML('beforeend', nav);
}
function onLoad() {
// Get the configuration
fetch('./examples/config.json').then(function _(response) {
return response.json();
}).then(function _(config) {
initNavigation(config);
bindIframe();
});
}
</script>
</body>
</html>