Interactive POIs - first part

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(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);
+            });
+        });
+    }
+
 
-    thumb.addEventListener('click', () => {
-        openVid(thumb.id);
-    });
     //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',
     }
-    
-    let vimeoVids = {
+    const vimeoVids = {
         'prologo'     : '478632535',
         'viaggiatore' : '562518107',
         'faresi'      : '562529310',