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

Remove exhibition section (iframe)

Browse source
This commit is contained in:
Paul Nicoué 2022-11-22 16:10:47 +01:00
parent 7c368957bc
commit c12732989c
5 changed files with 12 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

117
assets/css/main.scss
View file

@ -15,7 +15,6 @@ body {
font-size: var(--text-font-size);
line-height: var(--text-line-height);
color: var(--black);
background-color: var(--feldgrau);
}
h1 {
@ -38,10 +37,6 @@ h3 {
margin: 2rem 0 1rem 0;
}
p {
text-align: justify;
}
strong {
font-weight: var(--bold-font-weight);
}
@ -92,7 +87,7 @@ body {
.sidebar {
position: relative;
z-index: 2;
z-index: 1;
width: 100%;
padding: var(--sidebar-padding);
display: flex;
@ -171,62 +166,11 @@ body {
@media screen and (min-width: $desktop-media-query) {
.sidebar {
&--fixed {
position: fixed;
z-index: 3;
overflow-y: auto;
top: 0;
bottom: 0;
left: 0;
}
&--slimmed {
width: 15%;
min-width: 15rem;
.sidebar__nav-link {
color: var(--transparent-black);
}
.sidebar__social-link {
svg {
fill: var(--transparent-black);
}
}
&:hover {
.sidebar__nav-link {
color: var(--black);
}
.sidebar__social-link {
svg {
fill: var(--black);
}
}
}
.sidebar__nav-link {
&:focus-visible {
color: var(--black);
}
}
.sidebar__social-link {
&:focus-visible {
svg {
fill: var(--black);
}
}
}
}
position: fixed;
overflow-y: auto;
top: 0;
bottom: 0;
left: 0;
.sidebar__social {
width: auto;
@ -243,22 +187,8 @@ body {
.slider-section {
position: fixed;
z-index: 1;
top: 0;
right: 0;
visibility: visible;
opacity: 1;
transition:
visibility 0ms 400ms,
opacity 400ms ease-in-out;
&--hidden {
visibility: hidden;
opacity: 0;
transition:
visibility 0ms,
opacity 400ms ease-in-out;
}
}
.splide__image {
@ -266,38 +196,3 @@ body {
height: 100%;
object-fit: cover;
}
// Exhibition section
.exhibition-section {
display: none;
}
@media screen and (min-width: $desktop-media-query) {
.exhibition-section {
position: relative;
z-index: 2;
display: block;
width: 100vw;
height: 100vh;
}
.exhibition {
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
transition:
visibility 0ms,
opacity 400ms ease-in-out;
&--visible {
visibility: visible;
opacity: 1;
transition:
visibility 0ms 400ms,
opacity 400ms ease-in-out;
}
}
}

108
assets/js/app.js
View file

@ -14,21 +14,9 @@ const body = document.body;
const slider = document.querySelector('.slider-section');
let splideSlider;
const slides = document.querySelectorAll('.splide__slide');
// EXHIBITION IFRAME
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
const sidebarEmbeddedNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
const exhibitionIframe = document.querySelector('.exhibition');
// NAV LINKS TARGET
const mediaQueries = {
remTabletWidth: 48,
remDesktopWidth: 62
}
// ----------------------------------------------------------------------------
// LOGIC
@ -146,93 +134,6 @@ function editNavLinksColorOnSlideActive() {
}
}
// EXHIBITION IFRAME
function slimDownSidebar() {
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
sidebar.classList.add('sidebar--slimmed');
}
}
function enlargeSidebar() {
if (sidebar) {
sidebar.classList.remove('sidebar--slimmed');
}
}
function hideSlider() {
if (slider) {
slider.classList.add('slider-section--hidden');
}
}
function showSlider() {
if (slider) {
slider.classList.remove('slider-section--hidden');
}
}
function enableExhibitionIframe() {
if (exhibitionIframe) {
exhibitionIframe.classList.add('exhibition--visible');
}
}
function disableExhibitionIframe() {
if (exhibitionIframe && slider) {
exhibitionIframe.classList.remove('exhibition--visible');
}
}
function loadExhibitionIframe() {
if (sidebarEmbeddedNavLinks.length > 0 && exhibitionIframe) {
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
sidebarEmbeddedNavLinks[i].addEventListener('click', function(e) {
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
exhibitionIframe.addEventListener('load', function(e) {
turnSidebarLinksToBlack();
slimDownSidebar();
hideSlider();
enableExhibitionIframe();
});
}
});
}
}
}
// NAV LINKS TARGET
function setNavLinksIframeTarget() {
if (sidebarEmbeddedNavLinks) {
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
sidebarEmbeddedNavLinks[i].setAttribute('target', 'exhibition');
}
}
}
function setNavLinksBlankTarget() {
if (sidebarEmbeddedNavLinks) {
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
sidebarEmbeddedNavLinks[i].setAttribute('target', '_blank');
}
}
}
function editNavLinksTarget() {
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
setNavLinksIframeTarget();
} else {
setNavLinksBlankTarget();
}
}
function editNavLinksTargetOnResize() {
window.addEventListener('resize', function(e) {
editNavLinksTarget();
})
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -249,12 +150,3 @@ mountSlider();
goToNextSlideOnClick();
changeSlideOnSwipe();
editNavLinksColorOnSlideActive();
// EXHIBITION IFRAME
loadExhibitionIframe();
// NAV LINKS TARGET
editNavLinksTarget();
editNavLinksTargetOnResize();