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

Add logo and edit general design

Browse source
This commit is contained in:
Paul Nicoué 2022-07-28 18:59:14 +02:00
parent eb21a245bc
commit e0cb8d46f4
8 changed files with 330 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,35 +5,68 @@
// SIDEBAR ANIMATION
const sidebar = document.querySelector('.sidebar');
const sidebarNav = document.querySelector('.sidebar__nav');
const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
const logoIcon = document.querySelector('.logo__icon');
const exhibitionIframe = document.querySelector('.exhibition');
// ----------------------------------------------------------------------------
// UTILS
// LOGIC
// ----------------------------------------------------------------------------
// UTILS
// Enable CSS :active pseudo-class in Safari Mobile
function enableActivePseudoClass() {
document.addEventListener("touchstart", function() {},false);
}
// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
return rem * fontSize;
}
// ----------------------------------------------------------------------------
// LOGIC
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
function slimDownSidebar() {
if (sidebar) {
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
sidebar.classList.add('sidebar--slimmed');
}
}
function slimDownSidebarOnClick() {
if (sidebarNavLinks.length > 0) {
function enableLogoIconRotation() {
if (logoIcon) {
if (logoIcon.classList.contains('logo__icon--vertical')) {
logoIcon.classList.add('logo__icon--rotate-vertical-left');
} else {
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
}
}
}
function disableLogoIconRotation() {
if (logoIcon) {
if (logoIcon.classList.contains('logo__icon--vertical')) {
logoIcon.classList.remove('logo__icon--rotate-vertical-left');
} else {
logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
}
}
}
function loadExhibitionIframe() {
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
sidebarNavLinks[i].addEventListener('click', function(e) {
enableLogoIconRotation();
exhibitionIframe.classList.remove('exhibition--visible');
exhibitionIframe.addEventListener('load', function(e) {
slimDownSidebar();
disableLogoIconRotation();
exhibitionIframe.classList.add('exhibition--visible');
});
});
}
}
}
@ -42,9 +75,10 @@ function slimDownSidebarOnClick() {
// PROGRAM
// ----------------------------------------------------------------------------
// Enable CSS :active pseudo-class in Safari Mobile
document.addEventListener("touchstart", function() {},false);
// UTILS
enableActivePseudoClass();
// SIDEBAR ANIMATION
slimDownSidebarOnClick();
loadExhibitionIframe();