Edit indentation style
This commit is contained in:
Paul Nicoué
parent
98499d98de
commit
955b13fc44
23 changed files with 14326 additions and 14329 deletions
240
assets/js/app.js
240
assets/js/app.js
|
|
@ -23,7 +23,7 @@ const exhibitionIframe = document.querySelector('.exhibition');
|
|||
// NAV LINKS TARGET
|
||||
|
||||
const mediaQueries = {
|
||||
remTabletWidth: 48,
|
||||
remTabletWidth: 48,
|
||||
remDesktopWidth: 62
|
||||
}
|
||||
|
||||
|
|
@ -35,195 +35,195 @@ const mediaQueries = {
|
|||
|
||||
// Enable CSS :active pseudo-class in Safari Mobile
|
||||
function enableActivePseudoClass() {
|
||||
document.addEventListener("touchstart", function() {},false);
|
||||
document.addEventListener("touchstart", function() {},false);
|
||||
}
|
||||
|
||||
// Convert rem to pixels by getting font-size CSS property
|
||||
function convertRemToPixels(rem) {
|
||||
let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
|
||||
return rem * fontSize;
|
||||
let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
|
||||
return rem * fontSize;
|
||||
}
|
||||
|
||||
// SPLIDE SLIDER
|
||||
|
||||
function setUpSlider() {
|
||||
if (slider) {
|
||||
slider = new Splide('.splide', {
|
||||
type: 'fade',
|
||||
rewind: true,
|
||||
rewindByDrag: true,
|
||||
speed: 400,
|
||||
fixedWidth: '100vw',
|
||||
fixedHeight: '100vh',
|
||||
arrows: false,
|
||||
pagination: false,
|
||||
easing: 'ease-in-out',
|
||||
drag: true,
|
||||
wheel: true
|
||||
});
|
||||
}
|
||||
if (slider) {
|
||||
slider = new Splide('.splide', {
|
||||
type: 'fade',
|
||||
rewind: true,
|
||||
rewindByDrag: true,
|
||||
speed: 400,
|
||||
fixedWidth: '100vw',
|
||||
fixedHeight: '100vh',
|
||||
arrows: false,
|
||||
pagination: false,
|
||||
easing: 'ease-in-out',
|
||||
drag: true,
|
||||
wheel: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mountSlider() {
|
||||
if (slider) {
|
||||
slider.mount();
|
||||
}
|
||||
if (slider) {
|
||||
slider.mount();
|
||||
}
|
||||
}
|
||||
|
||||
function goToNextSlideOnClick() {
|
||||
if (slider) {
|
||||
slider.on('click', function(e) {
|
||||
slider.go('>');
|
||||
});
|
||||
}
|
||||
if (slider) {
|
||||
slider.on('click', function(e) {
|
||||
slider.go('>');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function turnLogoToBlack() {
|
||||
if (logo) {
|
||||
logo.classList.remove('logo__icon--white');
|
||||
logo.classList.add('logo__icon--black');
|
||||
}
|
||||
if (logo) {
|
||||
logo.classList.remove('logo__icon--white');
|
||||
logo.classList.add('logo__icon--black');
|
||||
}
|
||||
}
|
||||
|
||||
function turnLogoToWhite() {
|
||||
if (logo) {
|
||||
logo.classList.remove('logo__icon--black');
|
||||
logo.classList.add('logo__icon--white');
|
||||
}
|
||||
if (logo) {
|
||||
logo.classList.remove('logo__icon--black');
|
||||
logo.classList.add('logo__icon--white');
|
||||
}
|
||||
}
|
||||
|
||||
function editLogoColor(slide) {
|
||||
if (slide) {
|
||||
if (slide.getAttribute('data-logo-color') === 'white') {
|
||||
turnLogoToWhite();
|
||||
} else if (slide.getAttribute('data-logo-color') === 'black') {
|
||||
turnLogoToBlack();
|
||||
}
|
||||
}
|
||||
if (slide) {
|
||||
if (slide.getAttribute('data-logo-color') === 'white') {
|
||||
turnLogoToWhite();
|
||||
} else if (slide.getAttribute('data-logo-color') === 'black') {
|
||||
turnLogoToBlack();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function editLogoColorOnSliderMounted() {
|
||||
if (slider && slides) {
|
||||
slider.on('mounted', function() {
|
||||
editLogoColor(slides[0]);
|
||||
})
|
||||
}
|
||||
if (slider && slides) {
|
||||
slider.on('mounted', function() {
|
||||
editLogoColor(slides[0]);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function editLogoColorOnSlideActive() {
|
||||
if (slider) {
|
||||
slider.on('active', function(e) {
|
||||
editLogoColor(e.slide);
|
||||
});
|
||||
}
|
||||
if (slider) {
|
||||
slider.on('active', function(e) {
|
||||
editLogoColor(e.slide);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function enableLogoRotation() {
|
||||
if (logo) {
|
||||
logo.classList.add('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
if (logo) {
|
||||
logo.classList.add('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
}
|
||||
|
||||
function disableLogoRotation() {
|
||||
if (logo) {
|
||||
logo.classList.remove('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
if (logo) {
|
||||
logo.classList.remove('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
}
|
||||
|
||||
function rotateLogoOnSliderMove() {
|
||||
if (slider && logo) {
|
||||
slider.on('move', function(e) {
|
||||
logo.removeEventListener('animationiteration', disableLogoRotation);
|
||||
enableLogoRotation();
|
||||
});
|
||||
slider.on('moved', function(e) {
|
||||
logo.addEventListener('animationiteration', disableLogoRotation);
|
||||
});
|
||||
}
|
||||
if (slider && logo) {
|
||||
slider.on('move', function(e) {
|
||||
logo.removeEventListener('animationiteration', disableLogoRotation);
|
||||
enableLogoRotation();
|
||||
});
|
||||
slider.on('moved', function(e) {
|
||||
logo.addEventListener('animationiteration', disableLogoRotation);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// EXHIBITION IFRAME
|
||||
|
||||
function slimDownSidebar() {
|
||||
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
||||
sidebar.classList.add('sidebar--slimmed');
|
||||
}
|
||||
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
||||
sidebar.classList.add('sidebar--slimmed');
|
||||
}
|
||||
}
|
||||
|
||||
function enableExhibitionIframeVisibility() {
|
||||
if (exhibitionIframe) {
|
||||
exhibitionIframe.classList.add('exhibition--visible');
|
||||
}
|
||||
if (exhibitionIframe) {
|
||||
exhibitionIframe.classList.add('exhibition--visible');
|
||||
}
|
||||
}
|
||||
|
||||
function disableExhibitionIframeVisibility() {
|
||||
if (exhibitionIframe) {
|
||||
exhibitionIframe.classList.remove('exhibition--visible');
|
||||
}
|
||||
if (exhibitionIframe) {
|
||||
exhibitionIframe.classList.remove('exhibition--visible');
|
||||
}
|
||||
}
|
||||
|
||||
function editBackgroundColor(sidebarNavLink) {
|
||||
if (body && sidebar) {
|
||||
if (sidebarNavLink.getAttribute('data-background') === 'feldgrau') {
|
||||
body.classList.remove('body--white-background');
|
||||
sidebar.classList.remove('sidebar--white-background');
|
||||
} else if (sidebarNavLink.getAttribute('data-background') === 'white') {
|
||||
body.classList.add('body--white-background');
|
||||
sidebar.classList.add('sidebar--white-background');
|
||||
}
|
||||
}
|
||||
if (body && sidebar) {
|
||||
if (sidebarNavLink.getAttribute('data-background') === 'feldgrau') {
|
||||
body.classList.remove('body--white-background');
|
||||
sidebar.classList.remove('sidebar--white-background');
|
||||
} else if (sidebarNavLink.getAttribute('data-background') === 'white') {
|
||||
body.classList.add('body--white-background');
|
||||
sidebar.classList.add('sidebar--white-background');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadExhibitionIframe() {
|
||||
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].addEventListener('click', function(e) {
|
||||
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
|
||||
logo.removeEventListener('animationiteration', disableLogoRotation);
|
||||
enableLogoRotation();
|
||||
disableExhibitionIframeVisibility();
|
||||
exhibitionIframe.addEventListener('load', function(e) {
|
||||
logo.addEventListener('animationiteration', disableLogoRotation);
|
||||
slimDownSidebar();
|
||||
enableExhibitionIframeVisibility();
|
||||
editBackgroundColor(sidebarNavLinks[i]);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].addEventListener('click', function(e) {
|
||||
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
|
||||
logo.removeEventListener('animationiteration', disableLogoRotation);
|
||||
enableLogoRotation();
|
||||
disableExhibitionIframeVisibility();
|
||||
exhibitionIframe.addEventListener('load', function(e) {
|
||||
logo.addEventListener('animationiteration', disableLogoRotation);
|
||||
slimDownSidebar();
|
||||
enableExhibitionIframeVisibility();
|
||||
editBackgroundColor(sidebarNavLinks[i]);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAV LINKS TARGET
|
||||
|
||||
function setNavLinksIframeTarget() {
|
||||
if (sidebarNavLinks) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].setAttribute('target', 'exhibition');
|
||||
}
|
||||
}
|
||||
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');
|
||||
}
|
||||
}
|
||||
if (sidebarNavLinks) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].setAttribute('target', '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function editNavLinksTarget() {
|
||||
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
|
||||
setNavLinksIframeTarget();
|
||||
} else {
|
||||
setNavLinksBlankTarget();
|
||||
}
|
||||
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
|
||||
setNavLinksIframeTarget();
|
||||
} else {
|
||||
setNavLinksBlankTarget();
|
||||
}
|
||||
}
|
||||
|
||||
function editNavLinksTargetOnResize() {
|
||||
window.addEventListener('resize', function(e) {
|
||||
editNavLinksTarget();
|
||||
})
|
||||
window.addEventListener('resize', function(e) {
|
||||
editNavLinksTarget();
|
||||
})
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue