nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Folder structure and first implementation of changes...

Browse Source
This commit is contained in:
Nicolò P
2021-09-17 11:43:25 +02:00
parent 5331b04248
commit a4ecbd037c
88 changed files with 427 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
js/fara.js
View File

@@ -1,35 +1,49 @@
//use strict;
export function slider(nextimage) {
/**
* 'Slide' background images
* in landing page
* @todo Preload iamges?? https://stackoverflow.com/questions/3646036/preloading-images-with-javascript
*/
export function sliderBg()
{
let nextimage = 0;
let header = document.querySelector('header');
slider();
function slider() {
/*** Fade in??*/
//opacity = 1;
let images = [
'img/fara_background.jpg',
//'img/fara_bg_2.jpg',
'img/fara_bg_3.jpg',
'img/fara_bg_4.jpg',
'img/fara_bg_5.jpg',
//'img/fara_bg_6.jpg',
'img/fara_bg_7.jpg',
'img/fara_bg_8.jpg',
'img/fara_bg_9.jpg',
'img/fara_bg_10.png',
'img/fara_bg_11.jpg',
];
'img/lp-bg/fara_bg_1.jpg',
'img/lp-bg/fara_bg_2.jpg',
'img/lp-bg/fara_bg_3.jpg',
'img/lp-bg/fara_bg_4.jpg',
'img/lp-bg/fara_bg_5.jpg',
];
if (nextimage >= images.length) {
nextimage = 0;
nextimage = 0;
}
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
setTimeout(slider, 2000);
}
header.setAttribute('style', 'background-image : url("' +images[nextimage++] + '");');
setTimeout(slider(nextimage), 2000);
}
/**
* @todo
* Simple slideshow (Credits page)
*/
export function slideshow()
{
// Write me...
}
/**
* @todo
* The canvas should be drawn into an overlay
* container (always fullscreen)
*/
export function interactiveMap() {
export function interactiveMap()
{
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
@@ -40,4 +54,149 @@ export function interactiveMap() {
img.onload = () => {
ctx.drawImage(img, 0, 0);
}
}
/**
* Menu keys for accessibility
*/
export function menuKeys()
{
document.addEventListener('keypress', e => {
let keyCode = e.code;
if (keyCode.includes('Digit')) {
let numCode = keyCode.replace('Digit', '');
let menuK = {
'1' : 'itinerario.html',
'2' : 'progetto.html',
'3' : 'news.html',
'4': 'credits.html',
};
for (let k in menuK) {
if (k === numCode)
window.location.href = menuK[k];
}
}
});
}
/**
* Apply active class to nav links
* @todo Inefficient?
*/
export function activeNav()
{
let navlinks = Array.from(document.querySelectorAll('#links a'));
navlinks.forEach(element => {
let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
if (window.location.href.includes(ref)) {
element.setAttribute('class', 'active');
}
});
}
/**
* Show vertical nav on mobile
*/
export function mobileNav()
{
let menu = document.querySelector('i');
if (menu) {
menu.addEventListener('click', () => {
document.querySelector('.side-nav').classList.remove('d-hide');
document.querySelector('.side-nav').classList.remove('slide-out');
document.querySelector('body').classList.add('opaque');
});
let close = document.querySelector('#close-nav');
close.addEventListener('click', () => {
document.querySelector('.side-nav').classList.add('d-hide');
document.querySelector('body').classList.remove('opaque');
});
}
}
/**
* Open / close modal for videos
* and apply video source
*/
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
.nextElementSibling
.firstElementChild
.innerHTML
.trim();
console.log(aNodes);
let vStr = '';
aNodes.forEach(n => {
if (n.src) {
vStr = n.src;
vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
}
});
localStorage.setItem('vidURI', vStr);
localStorage.setItem('vidTitle', title);
/**
* 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
* if not small screen
*/
export function navOnScroll()
{
let nav = document.querySelector('#nav');
let links = document.querySelector('#links');
if (window.pageYOffset !== 0) {
nav.classList.add('bg-white', 'border');
nav.classList.remove('text-gray');
links.classList.add('nav-dark');
links.classList.remove('nav-light');
}
else {
if (!document.querySelector('header').classList.contains('itin')) {
nav.classList.add('text-gray');
links.classList.remove('nav-dark');
links.classList.add('nav-light');
}
nav.classList.remove('bg-white', 'border');
}
}

194
js/ui.js
View File

@@ -2,165 +2,59 @@
import * as Farapp from './fara.js';
let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
let landing = new RegExp(/(https?:\S+\/$|index.html$)/);
if (homeRE.test(window.location.href)) {
if (landing.test(window.location.href)) {
window.addEventListener('load', () => {
Farapp.sliderBg();
});
}
if (!window.location.href.includes('video')) {
document.addEventListener('readystatechange', () => {
let nextimage = 0;
let header = document.querySelector('header');
slider();
function slider() {
/*** Fade in??*/
//opacity = 1;
Farapp.activeNav();
Farapp.menuKeys();
Farapp.mobileNav();
});
let images = [
'img/fara_background.jpg',
//'img/fara_bg_2.jpg',
'img/fara_bg_3.jpg',
'img/fara_bg_4.jpg',
'img/fara_bg_5.jpg',
//'img/fara_bg_6.jpg',
'img/fara_bg_7.jpg',
'img/fara_bg_8.jpg',
'img/fara_bg_9.jpg',
'img/fara_bg_10.png',
'img/fara_bg_11.jpg',
];
if (nextimage >= images.length) {
nextimage = 0;
}
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
setTimeout(slider, 2000);
}
window.addEventListener('scroll', event => {
Farapp.navOnScroll();
});
}
/**
* Apply active class to selected link...
* @todo Inefficient!!
* For itinerario.html...
* @todo What about the interactive map?!?
*/
document.addEventListener('readystatechange', () => {
let navlinks = Array.from(document.querySelectorAll('#links a'));
navlinks.forEach(element => {
let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
if (window.location.href.includes(ref)) {
element.setAttribute('class', 'active');
}
if (homeRE.test(window.location.href)) {
navlinks[0].setAttribute('class', 'active');
}
});
});
/**
* Activate background on scroll for nav only
* if not small screen
*/
window.addEventListener('scroll', event => {
let nav = document.querySelector('#nav');
let links = document.querySelector('#links');
if (window.pageYOffset !== 0) {
nav.classList.add('bg-white', 'border');
nav.classList.remove('text-gray');
links.classList.add('nav-dark');
links.classList.remove('nav-light');
}
else {
if (!document.querySelector('header').classList.contains('itin')) {
nav.classList.add('text-gray');
links.classList.remove('nav-dark');
links.classList.add('nav-light');
}
nav.classList.remove('bg-white', 'border');
}
});
/**
* Show horizontal nav on mobile
*/
document.addEventListener('readystatechange', () => {
let menu = document.querySelector('i');
menu.addEventListener('click', () => {
document.querySelector('.side-nav').classList.remove('d-hide');
document.querySelector('.side-nav').classList.remove('slide-out');
document.querySelector('body').classList.add('opaque');
});
let close = document.querySelector('#close-nav');
close.addEventListener('click', () => {
document.querySelector('.side-nav').classList.add('d-hide');
document.querySelector('body').classList.remove('opaque');
if (window.location.href.includes('itinerario')) {
let vidLinks = document.querySelectorAll('a[href="#open-vid"]');
vidLinks.forEach(a => {
a.addEventListener('click', () => {
Farapp.openVideo(a);
});
})
})
}
/**
* Open / close modal for videos
* and apply video source
* For videos...
*/
window.addEventListener('load', () => {
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) {
if (window.location.href.includes('video')) {
document.addEventListener('readystatechange', () => {
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';
});
let source = document.querySelector('source');
let video = source.parentNode;
let overlay = document.querySelector('.modal-overlay');
vidLinks.forEach(a => {
let aNodes = a.childNodes;
// Hacky??
let title = a.parentElement
.nextElementSibling
.firstElementChild
.innerHTML
.trim();
a.addEventListener('click', () => {
aNodes.forEach(n => {
if (n.src) {
let vStr = n.src
.substr(n.src.lastIndexOf('/')+1, n.src.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
source.src = `assets/video/${vStr}`;
video.load();
}
});
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');
});
/* Close the modal when clicking on the
* overlay
*/
overlay.addEventListener('click', () => {
modal.classList.remove('active');
})
}
});
/**
* Draw interactive map in canvas...
if (window.location.href.includes('itinerario')) {
let mapImg = document.getElementById('map');
mapImg.addEventListener('click', () => {
Farapp.interactiveMap();
});
}
*/
source.src = `assets/video/${vStr}`;
video.load();
});
}