https://editorialedomani-g8.netlify.app/

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset='utf-8' />
5    <title>Il G8 per chi non c'è stato - editorialedomani</title>
6    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
7    

7<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>

7
8    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />
9    

9<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>

9
10    

10<script src="https://unpkg.com/scrollama"></script>

10        
11    </div>   
12    <style>
13        body {
14            margin:0;
15            padding:0;
16            font-family: 'Barlow', sans-serif;;
17        }
18        a, a:hover, a:visited {
19            color: #e48b8b;
20        }
21        #map {
22            top:0;
23            height: 100vh;
24            width:100vw;
25            position: fixed;
26        }
27        #header {
28            margin: auto;
29            width: 100%;
30            position: relative;
31            z-index: 5;
32            
33        }
34        #header h1, #header h2, #header p {
35            margin: 0;
36            padding: 2vh 2vw;
37            text-align: center;
38        }
39        #footer {
40            width: 100%;
41            min-height: 5vh;
42            padding-top: 2vh;
43            padding-bottom: 2vh;
44            text-align: center;
45            line-height: 10px;
46            font-size: 10px;
47            position: relative;
48            z-index: 5;
49        }
50        #features {
51            padding-top: 10vh;
52            padding-bottom: 10vh;
53        }
54        .hidden {
55            visibility: hidden;
56        }
57        .centered {
58            width: 50vw;
59            margin: 0 auto;
60        }
61        .lefty {
62            width: 33vw;
63            margin-left: 5vw;
64        }
65        .righty {
66            width: 33vw;
67            margin-left: 62vw;
68        }
69        .fully {
70            width: 100%;
71            color: #444;
72            background-color: #444;
73            margin: 0 auto;
74        }
75        .light {
76            color: #444;
77            background-color: hsl(0, 0%, 100%);
78            opacity: 0.95;
79        }
80        .dark {
81            color: rgb(250, 250, 250);
82            background-color: #444;
83        }
84        .step {
85            padding-bottom: 60vh;
86            margin-bottom: 40vh;
87            opacity: 0.25;
88        }
89        .step.active {
90            opacity: 0.999;
91        }
92
93        .step div {
94            padding:  25px 50px;
95            line-height: 20px;
96            font-size: 15px;
97        }
98
99        .step img {
100            width: 100%;
101        }
102
103        @media (max-width: 750px) {
104            .centered, .lefty, .righty, .fully {
105                width: 90vw;
106                margin: 0 auto;
107            }
108        }
109
110        /* Fix issue on mobile browser where scroll breaks  */
111        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, 
112        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
113            touch-action: unset;
114        }
115
116        </style>
117</head>
118<body>
119<div id="map"></div>
120<div id="story"></div>

121<script src="./config.js"></script>

121

122<script>
123var layerTypes = {
124    'fill': ['fill-opacity'],
125    'line': ['line-opacity'],
126    'circle': ['circle-opacity', 'circle-stroke-opacity'],
127    'symbol': ['icon-opacity', 'text-opacity'],
128    'raster': ['raster-opacity'],
129    'fill-extrusion': ['fill-extrusion-opacity'],
130    'heatmap': ['heatmap-opacity']
131}
132
133var alignments = {
134    'left': 'lefty',
135    'center': 'centered',
136    'right': 'righty',
137    'full': 'fully'
138}
139
140function getLayerPaintType(layer) {
141    var layerType = map.getLayer(layer).type;
142    return layerTypes[layerType];
143}
144
145function setLayerOpacity(layer) {
146    var paintProps = getLayerPaintType(layer.layer);
147    paintProps.forEach(function(prop) {
148        var options = {};
149        if (layer.duration) {
150            var transitionProp = prop + "-transition";
151            options = { "duration": layer.duration };
152            map.setPaintProperty(layer.layer, transitionProp, options);
153        }
154        map.setPaintProperty(layer.layer, prop, layer.opacity, options);
155    });
156}
157
158var story = document.getElementById('story');
159var features = document.createElement('div');
160features.setAttribute('id', 'features');
161
162var header = document.createElement('div');
163
164if (config.title) {
165    var titleText = document.createElement('h1');
166    titleText.innerText = config.title;
167    header.appendChild(titleText);
168}
169
170if (config.subtitle) {
171    var subtitleText = document.createElement('h2');
172    subtitleText.innerText = config.subtitle;
173    header.appendChild(subtitleText);
174}
175
176if (config.byline) {
177    var bylineText = document.createElement('p');
178    bylineText.innerText = config.byline;
179    header.appendChild(bylineText);
180}
181
182if (header.innerText.length > 0) {
183    header.classList.add(config.theme);
184    header.setAttribute('id', 'header');
185    story.appendChild(header);
186}
187
188config.chapters.forEach((record, idx) => {
189    var container = document.createElement('div');
190    var chapter = document.createElement('div');
191
192    if (record.title) {
193        var title = document.createElement('h3');
194        title.innerText = record.title;
195        chapter.appendChild(title);
196    }
197
198    if (record.image) {
199        var image = new Image();
200        image.src = record.image;
201        chapter.appendChild(image);
202    }
203
204    if (record.description) {
205        var story = document.createElement('p');
206        story.innerHTML = record.description;
207        chapter.appendChild(story);
208    }
209
210    container.setAttribute('id', record.id);
211    container.classList.add('step');
212    if (idx === 0) {
213        container.classList.add('active');
214    }
215
216    chapter.classList.add(config.theme);
217    container.appendChild(chapter);
218    container.classList.add(alignments[record.alignment] || 'centered');
219    if (record.hidden) {
220        container.classList.add('hidden');
221    }
222    features.appendChild(container);
223});
224
225story.appendChild(features);
226
227var footer = document.createElement('div');
228
229if (config.footer) {
230    var footerText = document.createElement('p');
231    footerText.innerHTML = config.footer;
232    footer.appendChild(footerText);
233}
234
235if (footer.innerText.length > 0) {
236    footer.classList.add(config.theme);
237    footer.setAttribute('id', 'footer');
238    story.appendChild(footer);
239}
240
241mapboxgl.accessToken = config.accessToken;
242
243const transformRequest = (url) => {
244    const hasQuery = url.indexOf("?") !== -1;
245    const suffix = hasQuery ? "&pluginName=scrollytellingV2" : "?pluginName=scrollytellingV2";
246    return {
247      url: url + suffix
248    }
249}
250
251var map = new mapboxgl.Map({
252    container: 'map',
253    style: config.style,
254    center: config.chapters[0].location.center,
255    zoom: config.chapters[0].location.zoom,
256    bearing: config.chapters[0].location.bearing,
257    pitch: config.chapters[0].location.pitch,
258    interactive: false,
259    transformRequest: transformRequest
260});
261
262if (config.showMarkers) {
263    var marker = new mapboxgl.Marker({ color: config.markerColor });
264    marker.setLngLat(config.chapters[0].location.center).addTo(map);
265}
266
267// instantiate the scrollama
268var scroller = scrollama();
269
270map.on("load", function() {
271    if (config.use3dTerrain) {
272        map.addSource('mapbox-dem', {
273            'type': 'raster-dem',
274            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
275            'tileSize': 512,
276            'maxzoom': 14
277        });
278        // add the DEM source as a terrain layer with exaggerated height
279        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
280
281        // add a sky layer that will show when the map is highly pitched
282        map.addLayer({
283            'id': 'sky',
284            'type': 'sky',
285            'paint': {
286                'sky-type': 'atmosphere',
287                'sky-atmosphere-sun': [0.0, 0.0],
288                'sky-atmosphere-sun-intensity': 15
289            }
290        });
291    };
292
293    // setup the instance, pass callback functions
294    scroller
295    .setup({
296        step: '.step',
297        offset: 0.5,
298        progress: true
299    })
300    .onStepEnter(response => {
301        var chapter = config.chapters.find(chap =>

301 chap.id === response.element.id);
302        response.element.classList.add('active');
303        map[chapter.mapAnimation || 'flyTo'](chapter.location);
304        if (config.showMarkers) {
305            marker.setLngLat(chapter.location.center);
306        }
307        if (chapter.onChapterEnter.length > 0) {
308            chapter.onChapterEnter.forEach(setLayerOpacity);
309        }
310        if (chapter.callback) {
311            window[chapter.callback]();
312        }
313        if (chapter.rotateAnimation) {
314            map.once('moveend', function() {
315                const rotateNumber = map.getBearing();
316                map.rotateTo(rotateNumber + 90, {
317                    duration: 24000, easing: function (t) {
318                        return t;
319                    }
320                });
321            });
322        }
323    })
324    .onStepExit(response => {
325        var chapter = config.chapters.find(chap => chap.id === response.element.id);
326        response.element.classList.remove('active');
327        if (chapter.onChapterExit.length > 0) {
328            chapter.onChapterExit.forEach(setLayerOpacity);
329        }
330    });
331});
332
333// setup resize event
334window.addEventListener('resize', scroller.resize);
335
336  
337</script>

337
338
339</body>
340</html>