host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit nav links target depending on viewport size

Browse source
This commit is contained in:
Paul Nicoué 2022-08-08 11:31:25 +02:00
parent 33be423cf5
commit 5d13ba3336
3 changed files with 90 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

47
public/assets/build/app.js
View file

File diff suppressed because one or more lines are too long

46
public/assets/js/app.js
View file

@ -17,9 +17,16 @@ const slides = document.querySelectorAll('.splide__slide');
// EXHIBITION IFRAME
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
const exhibitionIframe = document.querySelector('.exhibition');
// NAV LINKS TARGET
const mediaQueries = {
remTabletWidth: 48,
remDesktopWidth: 62
}
// ----------------------------------------------------------------------------
// LOGIC
// ----------------------------------------------------------------------------
@ -185,6 +192,38 @@ function loadExhibitionIframe() {
}
}
// NAV LINKS TARGET
function setNavLinksIframeTarget() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].setAttribute('target', 'exhibition');
}
}
}
function setNavLinksBlankTarget() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].setAttribute('target', '_blank');
}
}
}
function editNavLinksTarget() {
if (window.innerWidth < convertRemToPixels(mediaQueries.remDesktopWidth)) {
setNavLinksBlankTarget();
} else {
setNavLinksIframeTarget();
}
}
function editNavLinksTargetOnResize() {
window.addEventListener('resize', function(e) {
editNavLinksTarget();
})
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -205,3 +244,8 @@ rotateLogoOnSliderMove();
// EXHIBITION IFRAME
loadExhibitionIframe();
// NAV LINKS TARGET
editNavLinksTarget();
editNavLinksTargetOnResize();

4
site/templates/exhibitions.twig
View file

@ -21,9 +21,9 @@
{% for exhibition in exhibitions %}
<li class="sidebar__nav-item">
{% if exhibition.external_link == 'false' %}
<a class="sidebar__nav-link sidebar__nav-link--internal" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
<a class="sidebar__nav-link sidebar__nav-link--iframe" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
{% else %}
<a class="sidebar__nav-link sidebar__nav-link--external" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
<a class="sidebar__nav-link sidebar__nav-link--blank" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
{% endif %}
</li>
{% endfor %}