Fix close btn in video.html; add brutal slideshow...
This commit is contained in:
parent
a4ecbd037c
commit
c28e854e7f
@ -2,7 +2,5 @@
|
||||
|
||||
This project includes two versions of the same HTML5 app:
|
||||
|
||||
- offline local installation (tracked by `master`)
|
||||
- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
|
||||
|
||||
Let's hope this never happens again...
|
||||
- offline local installation (tracked by `master` branch)
|
||||
- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
|
||||
@ -42,7 +42,11 @@
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="col-lg-2 col-sm-12 col-md-12 column">
|
||||
<div class="placeholder"></div>
|
||||
<img class="slide fadein" src="img/slider/slide_1.jpg">
|
||||
<img class="slide fadein" src="img/slider/slide_2.jpg">
|
||||
<img class="slide fadein" src="img/slider/slide_3.jpg">
|
||||
<img class="slide fadein" src="img/slider/slide_4.jpg">
|
||||
<img class="slide fadein" src="img/slider/slide_5.jpg">
|
||||
</div>
|
||||
<div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
|
||||
<h2>Modello narrativo e contenuti</h2>
|
||||
|
||||
39
css/main.css
39
css/main.css
@ -2,6 +2,7 @@
|
||||
@import url(fonts.css);
|
||||
|
||||
:root {
|
||||
--white: #fff;
|
||||
--ochre: #ccac68;
|
||||
--ochre-light : #f7f4ee;
|
||||
--ochre-dark: rgba(116,102,77,1);
|
||||
@ -62,9 +63,6 @@ div#preload img {
|
||||
.text-14pt {
|
||||
font-size: 14pt;
|
||||
}
|
||||
video {
|
||||
cursor: pointer;
|
||||
}
|
||||
#mod-cont {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -424,6 +422,37 @@ section.poi h3 {
|
||||
}
|
||||
/*****/
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
/** Videos **/
|
||||
video, .open-vid {
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-close#close-nav {
|
||||
color: var(--white);
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
/** Slideshow... **/
|
||||
.hide, .slide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
/* Fading animation */
|
||||
.fadein {
|
||||
-webkit-animation-name: fadein;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-name: fadein;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
@-webkit-keyframes fadein {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
@ -81,7 +81,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo">
|
||||
</a>
|
||||
</div>
|
||||
@ -97,7 +97,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video del viaggiatore">
|
||||
<a class="open-vid" title="Guarda il video del viaggiatore">
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
|
||||
</a>
|
||||
</div>
|
||||
@ -120,7 +120,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Prologo">
|
||||
</a>
|
||||
</div>
|
||||
@ -138,7 +138,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video del viaggiatore">
|
||||
<a class="open-vid" title="Guarda il video del viaggiatore">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Viaggiatore #1">
|
||||
</a>
|
||||
</div>
|
||||
@ -159,7 +159,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Antonio">
|
||||
</a>
|
||||
</div>
|
||||
@ -174,7 +174,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Francesco #3b">
|
||||
</a>
|
||||
</div>
|
||||
@ -195,7 +195,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara">
|
||||
</a>
|
||||
</div>
|
||||
@ -214,7 +214,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
|
||||
</a>
|
||||
</div>
|
||||
@ -237,7 +237,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_alberto.jpg" alt="Alberto">
|
||||
</a>
|
||||
</div>
|
||||
@ -253,7 +253,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
|
||||
</a>
|
||||
</div>
|
||||
@ -275,7 +275,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_duomo.jpg" alt="Piazza Duomo">
|
||||
</a>
|
||||
</div>
|
||||
@ -293,7 +293,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_loredana.jpg" alt="Loredana">
|
||||
</a>
|
||||
</div>
|
||||
@ -316,7 +316,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_pietro.jpg" alt="Pietro">
|
||||
</a>
|
||||
</div>
|
||||
@ -333,7 +333,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_castello.jpg" alt="Il castello">
|
||||
</a>
|
||||
</div>
|
||||
@ -355,7 +355,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
</a>
|
||||
</div>
|
||||
@ -372,7 +372,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_monumento.jpg" alt="Il monumento sacro">
|
||||
</a>
|
||||
</div>
|
||||
@ -394,7 +394,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_eva.jpg" alt="Eva">
|
||||
</a>
|
||||
</div>
|
||||
@ -412,7 +412,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_toto.jpg" alt="Toto">
|
||||
</a>
|
||||
</div>
|
||||
@ -433,7 +433,7 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_fuori.jpg" alt="Fuori Porta">
|
||||
</a>
|
||||
</div>
|
||||
@ -450,7 +450,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<a class="open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_carro.jpg" alt="Il ritorno del carro">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
81
js/fara.js
81
js/fara.js
@ -35,7 +35,30 @@ export function sliderBg()
|
||||
*/
|
||||
export function slideshow()
|
||||
{
|
||||
// Write me...
|
||||
let slideIndex = 0;
|
||||
carousel();
|
||||
|
||||
function carousel() {
|
||||
let i;
|
||||
let slides = document.querySelectorAll(".slide");
|
||||
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].classList.add("hide");
|
||||
slides[i].classList.remove("show");
|
||||
}
|
||||
slideIndex++;
|
||||
|
||||
if (slideIndex > slides.length) {
|
||||
slideIndex = 1;
|
||||
}
|
||||
|
||||
//console.log(slides);
|
||||
|
||||
slides[slideIndex-1].classList.remove("hide");
|
||||
slides[slideIndex-1].classList.add("show");
|
||||
|
||||
setTimeout(carousel, 2000); // Change image every 2 seconds
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @todo
|
||||
@ -119,21 +142,11 @@ export function mobileNav()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Open / close modal for videos
|
||||
* and apply video source
|
||||
* Get video source for given
|
||||
* link and open video page
|
||||
*/
|
||||
export function openVideo(a)
|
||||
{
|
||||
/**
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
|
||||
|
||||
* Dynamically change video source
|
||||
* Note naming convention...
|
||||
if (vidLinks.length) {
|
||||
vidLinks.forEach(a => {
|
||||
*/
|
||||
|
||||
let aNodes = a.childNodes;
|
||||
// Hacky??
|
||||
let title = a.parentElement
|
||||
@ -141,10 +154,9 @@ export function openVideo(a)
|
||||
.firstElementChild
|
||||
.innerHTML
|
||||
.trim();
|
||||
|
||||
console.log(aNodes);
|
||||
|
||||
let vStr = '';
|
||||
|
||||
|
||||
aNodes.forEach(n => {
|
||||
if (n.src) {
|
||||
vStr = n.src;
|
||||
@ -159,22 +171,6 @@ export function openVideo(a)
|
||||
* Go to video page
|
||||
*/
|
||||
window.location.href = 'video.html';
|
||||
/* Close the modal when clicking on the
|
||||
modal.classList.add('active');
|
||||
document.querySelector('.modal-title').classList.add('roboto');
|
||||
document.querySelector('.modal-title').innerHTML = title;
|
||||
|
||||
let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
modal.classList.remove('active');
|
||||
});
|
||||
|
||||
* overlay
|
||||
overlay.addEventListener('click', () => {
|
||||
modal.classList.remove('active');
|
||||
})
|
||||
*/
|
||||
}
|
||||
/**
|
||||
* Activate background on scroll for nav only
|
||||
@ -199,4 +195,23 @@ export function navOnScroll()
|
||||
}
|
||||
nav.classList.remove('bg-white', 'border');
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Generate anchors in 'itinerario' to
|
||||
* track click position to go back to
|
||||
* when closing video page...
|
||||
*/
|
||||
export function genAnchors()
|
||||
{
|
||||
let sections = document.querySelectorAll('.poi');
|
||||
let count = 0;
|
||||
|
||||
sections.forEach(s => {
|
||||
let a = document.createElement('a');
|
||||
count++;
|
||||
|
||||
a.id = 's' + new String(count);
|
||||
|
||||
s.prepend(a);
|
||||
});
|
||||
}
|
||||
|
||||
23
js/ui.js
23
js/ui.js
@ -26,12 +26,18 @@ if (!window.location.href.includes('video')) {
|
||||
* @todo What about the interactive map?!?
|
||||
*/
|
||||
if (window.location.href.includes('itinerario')) {
|
||||
let vidLinks = document.querySelectorAll('a[href="#open-vid"]');
|
||||
let vidLinks = document.querySelectorAll('.open-vid');
|
||||
vidLinks.forEach(a => {
|
||||
a.addEventListener('click', () => {
|
||||
Farapp.openVideo(a);
|
||||
});
|
||||
})
|
||||
});
|
||||
/**
|
||||
* Add anchors to sections
|
||||
*/
|
||||
document.addEventListener('readystatechange', () => {
|
||||
Farapp.genAnchors();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* For videos...
|
||||
@ -41,13 +47,14 @@ if (window.location.href.includes('video')) {
|
||||
let vStr = localStorage.getItem('vidURI');
|
||||
let vidTitle = localStorage.getItem('vidTitle');
|
||||
|
||||
console.log(vStr, vidTitle);
|
||||
document.querySelector('h1').innerHTML = vidTitle;
|
||||
|
||||
let close = document.querySelector('a[title="Close"]');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
window.location.href = 'itinerario.html';
|
||||
// If referred from interactive map, shouldn't
|
||||
// just go back...
|
||||
history.back();
|
||||
});
|
||||
|
||||
let source = document.querySelector('source');
|
||||
@ -57,4 +64,12 @@ if (window.location.href.includes('video')) {
|
||||
|
||||
video.load();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Slideshow in credits page
|
||||
*/
|
||||
if (window.location.href.includes('credits')) {
|
||||
document.addEventListener('readystatechange', () => {
|
||||
Farapp.slideshow();
|
||||
});
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
<h1 class="roboto-slab mb-2 mt-2 ml-2"></h1>
|
||||
</div>
|
||||
<div class="column col-1">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
<a href="#close" class="icon-close" title="Close" id="close-nav" aria-label="Close"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user