Interactive POIs - first part

css/main.css

@@ -34,6 +34,9 @@ div#preload img {
 .of-hidden {
     overflow: hidden;
 }
+.modal-body.of-scroll {
+    overflow: scroll;
+}
 .pl-lg {
     padding-left: 1rem !important;
 }

itinerario.html

@@ -43,7 +43,7 @@
                     <div class="columns">
                         <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
                             <a href="map.html">
-                                <img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
+                                <img src="img/map.svg" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
                             </a>
                         </div>
                         <div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">

js/fara.js

@@ -1,6 +1,36 @@
 //use strict;
 localStorage.setItem('online', true);
 
+/**
+ * Export constants!! 
+ * @todo titles, vimeoVids
+ */
+export const titles = [
+
+]
+
+export const vimeoVids = {
+    'thumb_prologo'     : '478632535',
+    'thumb_viaggiatore' : '562518107',
+    'thumb_faresi'      : '562529310',
+    'thumb_piazza'      : '443587380',
+    'thumb_antonio'     : '606341398',
+    'thumb_francesco'   : '471773781',
+    'thumb_nobili'      : '562534835',
+    'thumb_rocco'       : '606346781',
+    'thumb_alberto'     : '606372910',
+    'thumb_disputa'     : '471537982',
+    'thumb_duomo'       : '606343917',
+    'thumb_loredana'    : '513080769',
+    'thumb_pietro'      : '455576197',
+    'thumb_castello'    : '562536148',
+    'thumb_sabini'      : '542321131',
+    'thumb_monumento'   : '606362546',
+    'thumb_eva'         : '606352547',
+    'thumb_toto'        : '606348670',
+    'thumb_fuori'       : '606358668',
+    'thumb_carro'       : '562262086',
+};
 /**
  * 'Slide' background images
  * in landing page

js/ui-map.js

@@ -1,3 +1,5 @@
+//use strict;
+
 document.addEventListener('readystatechange', () => {
     let close = document.querySelector('#mod-vid a[href="#close"]');
     let mod = document.querySelector('#mod-vid');
@@ -8,25 +10,69 @@ document.addEventListener('readystatechange', () => {
     
 });
 
-function openModal() {
+function openModal(id) {
+    const modTitles = {
+        'prologo' : 'Itinerario - #0',
+        'viaggiatore' : 'Itinerario - #1',
+        'faresi' : 'Itinerario - #2',
+        'piazza' : 'Itinerario - #3',
+    }
+
+    document.querySelector('.modal-title').innerHTML = modTitles[id];
+    
     let modal = document.querySelector('#mod-vid');
+    let modCont = document.querySelector('#mod-cont');
+    let modChildren = Array.from(modCont.children);
+
+    modChildren.forEach(c => {
+        if (c.classList.contains('columns')) {
+            if (c.id === 'col-'+id || c.id.includes('piazza')) {
+                c.classList.remove('hide');
+            }
+            else {
+                c.classList.add('hide');
+            }
+        }
+    })
+    
     modal.classList.add('active');
 
-    let thumb = document.querySelector('.vid-thumb');
+    if (id !== 'piazza' /* && ... */) {
+        let thumb = document.querySelector('#t-'+id);
 
         thumb.addEventListener('click', () => {
-        openVid(thumb.id);
+            openVid(id);
         });
+    } else {
+        let thumbs = [];
+        for (let i = 1; i <= 3; i++) {
+            thumbs.push(document.querySelector(`#t-${id}${i}`));
+        }
+        thumbs.forEach(t => {
+            let img = document.querySelector('#'+t.id+' img');
+            let vidId = img.src.replace(/^(.*)?img\/thumbs\/thumb_(\w+)\.\w+$/i, "$2");
+
+            t.addEventListener('click', () => {
+                openVid(vidId);
+            });
+        });
+    }
+
+
     //modal.style = 'opacity: 1';            
 }
 
 const openVid = (id) => {
 
-    let titles = {
+    const titles = {
+        'viaggiatore' : 'Il Viaggiatore #1',
         'prologo' : 'Prologo - Annunciazione',
+        'faresi' : 'Sul carattere dei Faresi #2',
+        'piazza' : 'Piazza Forcina #3',
+        'antonio' : 'Antonio #3a',
+        'francesco' : 'Antonio #3b',
     }
-    
+    const vimeoVids = {
-    let vimeoVids = {
         'prologo'     : '478632535',
         'viaggiatore' : '562518107',
         'faresi'      : '562529310',

map.html

@@ -10,8 +10,8 @@
     <body>
         <div>
             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="max-height: 100%;">
-                <image href="img/map.svg" height="200" width="200"/>
+                <image href="img/mappa.png" height="200" width="200"/>
-                <rect
+                <!--<rect
                     onclick="openModal()"
                     y="35.578873"
                     x="15.127975"
@@ -20,18 +20,96 @@
                     id="prologo"
                     style="fill:rgba(155,155,155,0.29);
                     stroke:none;stroke-width:0.3;paint-order:fill markers stroke" 
-                />
+                />-->
+                <g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
+                    <circle
+                    r="2.817522"
+                    cy="35.578873"
+                    cx="26.127975"
+                    id="path833"
+                    style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
+                    <text
+                    id="text837"
+                    y="35.578873"
+                    x="15.127975"
+                    style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
+                    xml:space="preserve"><tspan
+                        style="font-style:italic;font-size:4px;font-family:Caladea;
+                        fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+                        y="37"
+                        x="25.1"
+                        id="tspan835"
+                        sodipodi:role="line">0</tspan></text>
+                </g>
+                <g id="viaggiatore" style="cursor: pointer" onclick="openModal(this.id)">
+                    <circle
+                    r="2.817522"
+                    cy="69.578873"
+                    cx="111.127975"
+                    id="path833"
+                    style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
+                    <text
+                    y="45.578873"
+                    x="50.127975"
+                    style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
+                    xml:space="preserve"><tspan
+                        style="font-style:italic;font-size:4px;font-family:Caladea;
+                        fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+                        y="71"
+                        x="110"
+                        id="tspan835"
+                        sodipodi:role="line">1</tspan></text>
+                </g>
+                <g id="faresi" style="cursor: pointer" onclick="openModal(this.id)">
+                    <circle
+                    r="2.817522"
+                    cy="69.578873"
+                    cx="85.127975"
+                    id="path833"
+                    style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
+                    <text
+                    y="45.578873"
+                    x="50.127975"
+                    style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
+                    xml:space="preserve"><tspan
+                        style="font-style:italic;font-size:4px;font-family:Caladea;
+                        fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+                        y="71"
+                        x="84"
+                        id="tspan835"
+                        sodipodi:role="line">2</tspan></text>
+                </g>
+                <g id="piazza" style="cursor: pointer" onclick="openModal(this.id)">
+                    <circle
+                    r="2.817522"
+                    cy="46.578873"
+                    cx="83.127975"
+                    id="path833"
+                    style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
+                    <text
+                    id="text837"
+                    y="35.578873"
+                    x="15.127975"
+                    style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
+                    xml:space="preserve"><tspan
+                        style="font-style:italic;font-size:4px;font-family:Caladea;
+                        fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+                        y="48"
+                        x="82"
+                        id="tspan835"
+                        sodipodi:role="line">3</tspan></text>
+                </g>
             </svg>
         </div>
         <div class="modal modal-lg modal-fullheight" id="mod-vid">
             <div class="modal-container">
                 <div class="modal-header">
                     <a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
-                <div class="modal-title h5 roboto">Itinerario - #0 Prologo</div>
+                <div class="modal-title h5 roboto"></div>
             </div>
-            <div class="modal-body">
+            <div class="modal-body of-scroll">
                 <div class="container roboto-slab" id="mod-cont">
-                    <div class="columns">
+                    <div class="columns hide" id="col-prologo">
                         <div class="column col-lg-6 col-md-6 col-sm-12">
                             <h3 class="lilac mb-2 text-italic text-bold">
                                 Prologo - Annunciazione
@@ -43,8 +121,91 @@
                                 in attesa di un re che farà ritorno&hellip;
                             </p>
                         </div>
-                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="prologo">
+                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-prologo">
-                            <img src="img/thumbs/thumb_prologo.jpg" alt="Prologo">
+                            <img src="img/thumbs/thumb_prologo.jpg" alt="Prologo" style="cursor: pointer;">
+                        </div>
+                    </div>
+                    <div class="columns hide" id="col-viaggiatore">
+                        <div class="column col-lg-6 col-md-6 col-sm-12">
+                            <h3 class="lilac mb-2 text-italic text-bold">
+                                Il Viaggiatore #1
+                            </h3>
+                            <p class="text-small">
+                                Un viaggiatore, arrivato a Fara Sabina, incontra una strano personaggio 
+                                che si offre di guidarlo in un viaggio attraverso il borgo che lo 
+                                porterà a riscoprire il senso  della meraviglia. 
+                                Si comincia dal teatro dove gli attori, attraverso i personaggi
+                                che hanno creato in tanti anni di spettacoli, 
+                                si stanno preparando a rappresentare la &quot;Fara invisibile&quot;.
+                            </p>
+                        </div>
+                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-viaggiatore">
+                            <img src="img/thumbs/thumb_viaggiatore.jpg" alt="Il viaggiatore" style="cursor: pointer;">
+                        </div>
+                    </div>
+                    <div class="columns hide" id="col-faresi">
+                        <div class="column col-lg-6 col-md-6 col-sm-12">
+                            <h3 class="lilac mb-2 text-italic text-bold">
+                                Sul carattere dei Faresi #2
+                            </h3>
+                            <p class="text-small">
+                                Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato 
+                                dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta. 
+                                Ariel, l'eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall'alto,
+                                osserva  la forma della città e le abitudini dei suoi abitanti, fa magie. 
+                                Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere 
+                                contatto con il mondo.
+                            </p>
+                        </div>
+                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-faresi">
+                            <img src="img/thumbs/thumb_faresi.jpg" alt="Sul carattere dei Faresi" style="cursor: pointer;">
+                        </div>
+                    </div>
+                    <div class="columns hide" id="col-piazza1">
+                        <div class="column col-lg-6 col-md-6 col-sm-12">
+                            <h3 class="lilac mb-2 text-italic text-bold">
+                                Piazza Forcina #3
+                            </h3>
+                            <p class="text-small">
+                                Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava
+                                piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l'unità d'Italia.
+                                Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia.
+                                Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità!
+                            </p>
+                        </div>
+                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza1">
+                            <img src="img/thumbs/thumb_piazza.jpg" alt="Piazza Forcina" style="cursor: pointer;">
+                        </div>
+                    </div>
+                    <div class="columns hide" id="col-piazza2">
+                        <div class="column col-lg-6 col-md-6 col-sm-12">
+                            <h3 class="lilac mb-2 text-italic text-bold">
+                                Antonio #3a
+                            </h3>
+                            <p class="text-small">
+                                Antonio è un artigiano restauratore del legno, di Fara Sabina. 
+                                La sua bottega si affaccia su Piazza Garibaldi dove lo troviamo
+                                al lavoro, allietato dal canto degli uccelli.
+                            </p>
+                        </div>
+                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza2">
+                            <img src="img/thumbs/thumb_antonio.jpg" alt="Piazza Forcina" style="cursor: pointer;">
+                        </div>
+                    </div>
+                    <div class="columns hide" id="col-piazza3">
+                        <div class="column col-lg-6 col-md-6 col-sm-12">
+                            <h3 class="lilac mb-2 text-italic text-bold">
+                                Francesco #3b
+                            </h3>
+                            <p class="text-small">
+                                Francesco appartiene ad un'antica famiglia di Fara, 
+                                negli anni ha raccolto nella sua casa una collezione
+                                di oggetti dell'800 e del primo ‘900 che ci 
+                                raccontano una cultura ormai scomparsa.
+                            </p>
+                        </div>
+                        <div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza3">
+                            <img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" style="cursor: pointer;">
                         </div>
                     </div>
                 </div>