149 lines
4.4 KiB
JavaScript
149 lines
4.4 KiB
JavaScript
//use strict;
|
|
|
|
document.addEventListener('readystatechange', () => {
|
|
let close = document.querySelector('#mod-vid a[href="#close"]');
|
|
let mod = document.querySelector('#mod-vid');
|
|
|
|
close.addEventListener('click', () => {
|
|
mod.classList.remove('active');
|
|
});
|
|
|
|
});
|
|
|
|
document.addEventListener('readystatechange', () => {
|
|
let close = document.querySelector('#close-map');
|
|
|
|
close.addEventListener('click', () => {
|
|
window.location.href = "itinerario.html";
|
|
});
|
|
|
|
});
|
|
/**
|
|
* Open modal overlay
|
|
* for each POI
|
|
* @param {string} id
|
|
*/
|
|
function openModal(id) {
|
|
const modTitles = {
|
|
'prologo' : 'Itinerario - #0',
|
|
'viaggiatore' : 'Itinerario - #1',
|
|
'faresi' : 'Itinerario - #2',
|
|
'piazza' : 'Itinerario - #3',
|
|
'nobili' : 'Itinerario - #4',
|
|
'rocco' : 'Itinerario - #5',
|
|
'disputa' : 'Itinerario - #6',
|
|
'duomo' : 'Itinerario - #7',
|
|
'castello' : 'Itinerario - #8',
|
|
'sabini' : 'Itinerario - #9',
|
|
'monumento' : 'Itinerario - #10',
|
|
'fuori' : 'Itinerario - #11',
|
|
'carro' : 'Itinerario - #12',
|
|
}
|
|
// The POI with more than one video
|
|
const multiVid = {
|
|
'piazza' : 3,
|
|
'rocco' : 2,
|
|
'duomo' : 3,
|
|
'monumento' : 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(id) && Object.keys(multiVid).includes(id))) {
|
|
c.classList.remove('hide');
|
|
}
|
|
else {
|
|
c.classList.add('hide');
|
|
}
|
|
}
|
|
})
|
|
|
|
modal.classList.add('active');
|
|
|
|
if (!Object.keys(multiVid).includes(id)) {
|
|
let thumb = document.querySelector('#t-'+id);
|
|
|
|
thumb.addEventListener('click', () => {
|
|
openVid(id);
|
|
});
|
|
} else {
|
|
let thumbs = [];
|
|
for (let i = 1; i <= multiVid[id]; 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);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
/**
|
|
* Open video from thumbnail
|
|
* @param {string} id
|
|
*/
|
|
const openVid = (id) => {
|
|
|
|
const titles = {
|
|
'viaggiatore' : 'Il Viaggiatore #1',
|
|
'prologo' : 'Prologo - Annunciazione',
|
|
'faresi' : 'Sul carattere dei Faresi #2',
|
|
'piazza' : 'Piazza Forcina #3',
|
|
'antonio' : 'Antonio #3a',
|
|
'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',
|
|
'monumento' : 'Il monumento sacro #10',
|
|
'eva' : 'Eva #10a',
|
|
'toto' : 'Toto #10b',
|
|
'fuori' : 'Fuori Porta #11',
|
|
'carro' : 'Il ritorno del carro #12',
|
|
}
|
|
const vimeoVids = {
|
|
'prologo' : '478632535',
|
|
'viaggiatore' : '562518107',
|
|
'faresi' : '562529310',
|
|
'piazza' : '443587380',
|
|
'antonio' : '606341398',
|
|
'francesco' : '471773781',
|
|
'nobili' : '562534835',
|
|
'rocco' : '606346781',
|
|
'alberto' : '606372910',
|
|
'disputa' : '471537982',
|
|
'duomo' : '606343917',
|
|
'loredana' : '513080769',
|
|
'pietro' : '455576197',
|
|
'castello' : '562536148',
|
|
'sabini' : '542321131',
|
|
'monumento' : '606362546',
|
|
'eva' : '606352547',
|
|
'toto' : '606348670',
|
|
'fuori' : '606358668',
|
|
'carro' : '562262086',
|
|
};
|
|
|
|
let vimeoLink = 'https://player.vimeo.com/video/'+vimeoVids[id]+'?autoplay=1';
|
|
|
|
localStorage.setItem('vidURI', 'vid_'+id+'.mp4');
|
|
localStorage.setItem('vimeo', vimeoLink);
|
|
localStorage.setItem('vidTitle', titles[id]);
|
|
|
|
window.location.href = 'video.html';
|
|
} |