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
|
{{ partial "header.html" . }}
<main role="main">
<div class="white z-depth-1">
<main role="main" class="container">
<article itemscope itemtype="http://schema.org/BlogPosting" class="section">
{{ if .Params.image }}
<picture>
<source srcset="/images/min/{{ .Params.image }}.webp" type="image/webp">
<source srcset="/images/min/{{ .Params.image }}.jpg" type="image/jpeg">
<img width="100%" src="/images/min/{{ .Params.image }}.jpg">
</picture>
{{ end }}
<h1 itemprop="headline" class="header">{{ .Title }}</h1>
<span><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}"></time></span>
{{ if .Params.rating }}
<div class="center right">
<i>
{{ range seq .Params.rating }}
<img src="/fonts/icons/ic_star_black_24px.svg">
{{ end }}
{{ range seq (sub 5 (int .Params.rating)) }}
<img src="/fonts/icons/ic_star_border_black_24px.svg">
{{ end }}
</i>
</div>
{{ end }}
<section itemprop="articleBody" class="flow-text">
{{ .Content }}
</section>
{{ if .Params.mapzoom }}
<div class="section">
<div id="loadingmap" class="preloader-wrapper small active" style="left: 45%;">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div id="mapview" style="width: 100%; height: 40em;"></div>
<script type="text/javascript">
var map,
mapboxReadyAttached;
if (typeof $ === 'undefined') {
document.addEventListener('DOMContentLoaded', loadMapbox);
}
if (typeof mapboxReadyAttached === 'undefined') {
mapboxReadyAttached = true;
document.addEventListener('pageReady', loadMapbox);
}
function loadMapbox() {
if (typeof L === 'undefined') {
console.log('loading mapbox files');
$('<link>').appendTo('head')
.attr({type: 'text/css', rel: 'stylesheet'})
.attr('href', 'https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css');
$.getScript('https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js', initMapbox);
} else {
console.log('mapbox files already present');
initMapbox();
}
}
function initMapbox() {
console.log('creating new map instance');
var lon = parseFloat({{ .Params.longitude }}),
lat = parseFloat({{ .Params.latitude }}),
zoom= parseFloat({{ .Params.mapzoom }});
if (typeof map !== 'undefined') {
console.log('old map present');
}
L.mapbox.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
map = L.mapbox.map('mapview')
.setView([lat, lon], zoom);
var layer = L.mapbox.tileLayer('mapbox.streets').addTo(map);
layer.on('ready', showMapbox);
}
/* ! mapboxgl: [lon, lat] - mapboxjs: [lat, lon]… */
function showMapbox() {
var lon = parseFloat({{ .Params.longitude }}),
lat = parseFloat({{ .Params.latitude }}),
zoom= parseFloat({{ .Params.mapzoom }});
console.log('updating map data', [lon, lat, zoom]);
map.setView([lat, lon], zoom);
L.marker([lat, lon]).addTo(map);
$('#loadingmap').hide();
$('#mapview').show();
}
</script>
</div> <!-- /map section -->
{{ end }}
</article>
</main>
</div>
</main>
{{ partial "footer.html" . }}
|
