From b7a9d304af62a712e6bf556d70a7b27f2393be45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Wed, 27 Oct 2021 17:06:07 +0200 Subject: [PATCH] Interactive POIs - to n. 9 --- css/main.css | 3 + js/ui-map.js | 26 ++++-- map.html | 221 ++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 233 insertions(+), 17 deletions(-) diff --git a/css/main.css b/css/main.css index 9647435..b6d8f52 100644 --- a/css/main.css +++ b/css/main.css @@ -444,6 +444,9 @@ video, .open-vid { color: var(--white); margin-top: 0.9rem; } +.vid-thumb > img { + cursor: pointer; +} /* .vid-thumb::before { content: ""; diff --git a/js/ui-map.js b/js/ui-map.js index 7791c1c..8e86d4d 100644 --- a/js/ui-map.js +++ b/js/ui-map.js @@ -18,8 +18,18 @@ function openModal(id) { 'piazza' : 'Itinerario - #3', 'nobili' : 'Itinerario - #4', 'rocco' : 'Itinerario - #5', + 'disputa' : 'Itinerario - #6', + 'duomo' : 'Itinerario - #7', + 'castello' : 'Itinerario - #8', + 'sabini' : 'Itinerario - #9', } + const multiVid = { + 'piazza' : 3, + 'rocco' : 2, + 'duomo' : 3, + }; + document.querySelector('.modal-title').innerHTML = modTitles[id]; let modal = document.querySelector('#mod-vid'); @@ -29,7 +39,7 @@ function openModal(id) { modChildren.forEach(c => { if (c.classList.contains('columns')) { if (c.id === 'col-'+id || - (c.id.includes('piazza') && id.includes('piazza'))) { + (c.id.includes(id) && Object.keys(multiVid).includes(id))) { c.classList.remove('hide'); } else { @@ -40,7 +50,7 @@ function openModal(id) { modal.classList.add('active'); - if (id !== 'piazza' /* && ... */) { + if (!Object.keys(multiVid).includes(id)) { let thumb = document.querySelector('#t-'+id); thumb.addEventListener('click', () => { @@ -48,7 +58,7 @@ function openModal(id) { }); } else { let thumbs = []; - for (let i = 1; i <= 3; i++) { + for (let i = 1; i <= multiVid[id]; i++) { thumbs.push(document.querySelector(`#t-${id}${i}`)); } thumbs.forEach(t => { @@ -60,9 +70,6 @@ function openModal(id) { }); }); } - - - //modal.style = 'opacity: 1'; } const openVid = (id) => { @@ -76,6 +83,13 @@ const openVid = (id) => { 'francesco' : 'Francesco #3b', 'nobili' : 'I Nobili di Fara #4', 'rocco' : 'Rocco si è svegliato #5', + 'alberto' : 'Alberto #5b', + 'disputa' : 'Disputa sui dialetti e sui saperi #6', + 'duomo' : 'Piazza Duomo #7', + 'loredana' : 'Loredana #7a', + 'pietro' : 'Pietro #7b', + 'castello' : 'Il castello #8', + 'sabini' : 'I Sabini ieri e oggi #9', } const vimeoVids = { 'prologo' : '478632535', diff --git a/map.html b/map.html index 0d4fc07..8222e2b 100644 --- a/map.html +++ b/map.html @@ -139,6 +139,86 @@ id="tspan835" sodipodi:role="line">5 + + + 6 + + + + 7 + + + + 8 + + + + 9 +
@@ -180,7 +260,7 @@

- Il viaggiatore + Il viaggiatore
@@ -198,7 +278,7 @@

- Sul carattere dei Faresi + Sul carattere dei Faresi
@@ -214,7 +294,7 @@

- Piazza Forcina + Piazza Forcina
@@ -229,7 +309,7 @@

- Piazza Forcina + Piazza Forcina
@@ -245,7 +325,7 @@

- Piazza Forcina + Piazza Forcina
@@ -264,10 +344,10 @@

- I nobili di Fara + I nobili di Fara
-
+

Rocco si è svegliato #5 @@ -281,13 +361,132 @@ il borgo popolato come era allora.

-
- Rocco si è svegliato +
+ Rocco si è svegliato +
+
+
+
+

+ Alberto #5b +

+

+ Alberto è lo storico appassionato di Fara, scrive e colleziona foto storiche, + proseguendo una tradizione di famiglia e rappresenta "il tipico farese". + Racconta come è avvenuto lo spopolamento del borgo, nel secondo dopoguerra. + Molte cose si sono perse ma, dice, quassù si continua a vivere bene. +

+
+
+ Alberto +
+
+
+
+

+ Disputa sui dialetti e sui saperi #6 +

+

+ Trilussa recita poesie davanti una piccola platea in una piazzetta. + Alberto, inizialmente seduto un po' in disparte, mal sopporta la + lingua romanesca di Trilussa e improvvisamente si accende, + accusando il poeta di essere un forestiero in terra sabina. + I due intraprendono una accesa disputa sui dialetti e sui cibi. +

+
+
+ Disputa sui dialetti e sui saperi +
+
+
+
+

+ Piazza Duomo #7 +

+

+ Piazza duomo è il cuore del borgo, dove il sacro e il profano + si incontrano: la cisterna dell'acqua pubblica, l'antico Monte + Frumentario, il forno, il museo, i palazzetti nobiliari, + la chiesa, e un panorama magnifico. Ariel si delizia e volteggia + nella piazza, tessendo ghirlande da finestra a finestra, + compiendo magie e trasformandole architetture del luogo. +

+
+
+ Piazza Duomo +
+
+
+
+

+ Loredana #7a +

+

+ Loredana gestisce il forno quattrocentesco di Fara, + con suo fratello Angelo e altri abitanti del borgo. + Era l'antico forno pubblico del borgo. Loredana racconta + come questo forno sia l'espressione del suo forte legame + con la famiglia, dalla quale ha imparato l'arte e + la gestualità del fare il pane. +

+
+
+ Loredana +
+
+
+
+

+ Pietro #7b +

+

+ Pietro è venuto a vivere a Fara, da Roma. + Nel suo palazzo ha raccolto una collezione d'arte africana + straordinaria, frutto di cinquant'anni di vita trascorsi in Africa. + Ci racconta il suo rapporto di serenità con il borgo, + dove l'architettura vive in stupefacente equilibrio con la natura +

+
+
+ Pietro +
+
+
+
+

+ Il castello #8 +

+

+ Fara ha un castello di nobili origini, più volte espugnato e ricostruito. + Un tempo ospitava le tante attività del paese. Oggi è quasi in abbandono. + Due imbonitori convincono la popolazione ad entrare, promettendo che lì + dentro potrà trovare risposta a tutti i suoi desideri. + Così gli abitanti cominciano a dar voce ai loro desideri, fin quando… +

+
+
+ Il castello +
+
+
+
+

+ I Sabini ieri e oggi #9 +

+

+ Gli oggetti del museo di Fara in Sabina vengono proiettati sullo spazio esterno + di Piazza Duomo. Uno spettacolo di video-mapping si anima sulle facciate dei palazzi, + e viene raccontata la storia dei Sabini attraverso un dialogo drammatizzato fra + due personaggi immaginari. Gli abitanti del borgo entrano nello spettacolo, + anch'essi proiettati sui muri, e interagiscono con gli oggetti della loro passata cultura. +

+
+
+ I sabini ieri e oggi
- \ No newline at end of file