From c28e854e7f1ff1dbdcfe4c72d6524a3aaeddc8ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Fri, 17 Sep 2021 15:55:43 +0200 Subject: [PATCH] Fix close btn in video.html; add brutal slideshow... --- README.md | 6 ++-- credits.html | 6 +++- css/main.css | 39 +++++++++++++++++++++--- itinerario.html | 40 ++++++++++++------------ js/fara.js | 81 +++++++++++++++++++++++++++++-------------------- js/ui.js | 23 +++++++++++--- video.html | 2 +- 7 files changed, 129 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 8522498..6301663 100644 --- a/README.md +++ b/README.md @@ -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... \ No newline at end of file +- offline local installation (tracked by `master` branch) +- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch) \ No newline at end of file diff --git a/credits.html b/credits.html index 042ca3f..77825b7 100644 --- a/credits.html +++ b/credits.html @@ -42,7 +42,11 @@
-
+ + + + +

Modello narrativo e contenuti

diff --git a/css/main.css b/css/main.css index 5c93cd5..fa4976f 100644 --- a/css/main.css +++ b/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} } \ No newline at end of file diff --git a/itinerario.html b/itinerario.html index 2528327..a2d7fbc 100644 --- a/itinerario.html +++ b/itinerario.html @@ -81,7 +81,7 @@
- + Prologo
@@ -97,7 +97,7 @@

- + Viaggiatore #1
@@ -120,7 +120,7 @@
- + Prologo
@@ -138,7 +138,7 @@

- + Viaggiatore #1
@@ -159,7 +159,7 @@
- + Antonio
@@ -174,7 +174,7 @@

- + Francesco #3b
@@ -195,7 +195,7 @@
- + I nobili di Fara
@@ -214,7 +214,7 @@

- + Rocco si รจ svegliato #5
@@ -237,7 +237,7 @@
- + Alberto
@@ -253,7 +253,7 @@

- + Disputa sui dialetti e sui saperi
@@ -275,7 +275,7 @@
- + Piazza Duomo
@@ -293,7 +293,7 @@

- + Loredana
@@ -316,7 +316,7 @@
- + Pietro
@@ -333,7 +333,7 @@

- + Il castello
@@ -355,7 +355,7 @@
- + I sabini ieri e oggi
@@ -372,7 +372,7 @@

- + Il monumento sacro
@@ -394,7 +394,7 @@
- + Eva
@@ -412,7 +412,7 @@

- + Toto
@@ -433,7 +433,7 @@
- + Fuori Porta
@@ -450,7 +450,7 @@

- + Il ritorno del carro
diff --git a/js/fara.js b/js/fara.js index dbaa8d5..9b42af4 100644 --- a/js/fara.js +++ b/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'); } -} \ No newline at end of file +} +/** + * 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); + }); +} diff --git a/js/ui.js b/js/ui.js index 5caf2c3..38a3841 100644 --- a/js/ui.js +++ b/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(); + }); } \ No newline at end of file diff --git a/video.html b/video.html index 0d4a128..6ae33d3 100644 --- a/video.html +++ b/video.html @@ -15,7 +15,7 @@

- +