diff --git a/css/main.css b/css/main.css index d171738..f19b579 100644 --- a/css/main.css +++ b/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; } diff --git a/img/mappa.png b/img/mappa.png index efe314e..11d2a61 100644 Binary files a/img/mappa.png and b/img/mappa.png differ diff --git a/itinerario.html b/itinerario.html index 156e8d7..d580b9e 100644 --- a/itinerario.html +++ b/itinerario.html @@ -43,7 +43,7 @@
- Mappa dei percorsi a Fara Sabina + Mappa dei percorsi a Fara Sabina
@@ -171,7 +171,7 @@

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. + al lavoro, allietato dal canto degli uccelli.

diff --git a/js/fara.js b/js/fara.js index c4f3bf8..4c16db1 100644 --- a/js/fara.js +++ b/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 diff --git a/js/ui-map.js b/js/ui-map.js index 10b8599..6a6b95a 100644 --- a/js/ui-map.js +++ b/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', diff --git a/map.html b/map.html index 67f6d7b..f3d09fb 100644 --- a/map.html +++ b/map.html @@ -10,8 +10,8 @@
- - + + + + + 1 + + + + 2 + + + + 3 +