Fix close btn in video.html; add brutal slideshow...

README.md

@@ -2,7 +2,5 @@
 
 This project includes two versions of the same HTML5 app:
 
-- offline local installation (tracked by `master`)
+- offline local installation (tracked by `master` branch)
 - online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
-
-Let's hope this never happens again...

credits.html

@@ -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>

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%;
+    width: 100vw;
-    height: 100%;
+    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}
 }

itinerario.html

@@ -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>

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
+ * Get video source for given
- * and apply video source
+ * 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
@@ -142,7 +155,6 @@ export function openVideo(a)
         .innerHTML
         .trim();
             
-    console.log(aNodes);
     let vStr = '';
     
     aNodes.forEach(n => {
@@ -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
@@ -200,3 +196,22 @@ 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);
+    });
+}

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');
@@ -58,3 +65,11 @@ if (window.location.href.includes('video')) {
         video.load();
     });
 }
+/**
+ * Slideshow in credits page
+ */
+if (window.location.href.includes('credits')) {
+    document.addEventListener('readystatechange', () => {
+        Farapp.slideshow();
+    });
+}

video.html

@@ -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">