Het element pagina-navigatie gebruikt een custom script om de juiste elementen in een collection in de vorige / volgende link te plaatsen.
// get hidden project list an retrieve the current, previous and next item
if(document.getElementById('completeList') ){
var projectList = document.getElementById('completeList');
var currentProject = projectList.querySelector('.w--current').parentElement;
var previousProject = currentProject.previousElementSibling;
var nextProject = currentProject.nextElementSibling;
// check if a previous project exists and set it to last project item if none exist
if(previousProject){
var previousProjectLink = previousProject.querySelector('a').getAttribute('href');
var previousProjectName = previousProject.querySelector('a').innerHTML;
document.querySelector('.navigation-link--left').setAttribute('href', previousProjectLink);
document.querySelector('.navigation-link--left').innerHTML = previousProjectName;
}
else{
var lastProjectLink = projectList.querySelector('.w-dyn-items').lastChild.querySelector('a').getAttribute('href');
var lastProjectName = projectList.querySelector('.w-dyn-items').lastChild.querySelector('a').innerHTML;
document.querySelector('.navigation-link--left').setAttribute('href', lastProjectLink);
document.querySelector('.navigation-link--left').innerHTML = lastProjectName;
}
// do the same for the next project
if(nextProject){
var nextProjectLink = nextProject.querySelector('a').getAttribute('href');
var nextProjectName = nextProject.querySelector('a').innerHTML;
document.querySelector('.navigation-link--right').setAttribute('href', nextProjectLink);
document.querySelector('.navigation-link--right').innerHTML = nextProjectName;
}
else{
var firstProjectLink = projectList.querySelector('.w-dyn-items').firstChild.querySelector('a').getAttribute('href');
var firstProjectName = projectList.querySelector('.w-dyn-items').firstChild.querySelector('a').innerHTML;
document.querySelector('.navigation-link--right').setAttribute('href', firstProjectLink);
document.querySelector('.navigation-link--right').innerHTML = firstProjectName;
}
}
// create icon if fontawesome is enabled
var leftIcon = document.createElement("span");
leftIcon.classList.add('fa', 'fa-angle-left', 'nav-icon');
var rightIcon = document.createElement("span");
rightIcon.classList.add('fa', 'fa-angle-right', 'nav-icon');
document.querySelector('.navigation-link--right').appendChild(rightIcon);
var centerIcon = document.createElement("span");
centerIcon.classList.add('fa', 'fa-th-large', 'nav-icon');
var leftEl = document.querySelector('.navigation-link--left');
leftEl.insertBefore(leftIcon, leftEl.childNodes[0] || null);
var centerEl = document.querySelector('.navigation-link--center');
centerEl.insertBefore(centerIcon, centerEl.childNodes[0] || null);