Edit iframe loading animations
This commit is contained in:
Paul Nicoué
parent
e0cb8d46f4
commit
39466006da
8 changed files with 121 additions and 95 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,10 @@ body {
|
|||
font-size: var(--text-font-size);
|
||||
line-height: var(--text-line-height);
|
||||
color: var(--black);
|
||||
background-color: var(--feldgrau);
|
||||
}
|
||||
|
||||
.body--white-background {
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +137,7 @@ body {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background-color: var(--white);
|
||||
background-color: transparent;
|
||||
transition: background-color 400ms ease-in-out;
|
||||
|
||||
.sidebar__nav {
|
||||
|
|
@ -185,7 +189,6 @@ body {
|
|||
|
||||
&--slimmed {
|
||||
width: 15%;
|
||||
background-color: transparent;
|
||||
|
||||
.sidebar__nav-link {
|
||||
color: var(--transparent-black);
|
||||
|
|
@ -197,7 +200,7 @@ body {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--transparent-white);
|
||||
background-color: var(--transparent-feldgrau);
|
||||
|
||||
|
||||
.sidebar__nav-link {
|
||||
|
|
@ -209,7 +212,13 @@ body {
|
|||
fill: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--white-background {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--transparent-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +237,7 @@ body {
|
|||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0 0 15%;
|
||||
// padding: 0 0 0 15%;
|
||||
transition: opacity 400ms ease-in-out;
|
||||
|
||||
&--visible {
|
||||
|
|
|
|||
|
|
@ -11,21 +11,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-vertical-left {
|
||||
0% {
|
||||
transform: rotateY(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(180deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-horizontal-bottom {
|
||||
0% {
|
||||
transform: rotateX(0);
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
--white: #fff;
|
||||
--transparent-white: rgba(255, 255, 255, 0.9);
|
||||
--feldgrau: #4B6259;
|
||||
--transparent-feldgrau: rgba(75, 98, 89, 0.9);
|
||||
}
|
||||
|
||||
// Media queries
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
// DATA
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// SIDEBAR ANIMATION
|
||||
// IFRAME LOADING ANIMATIONS
|
||||
|
||||
const body = document.querySelector('body');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
|
||||
const logoIcon = document.querySelector('.logo__icon');
|
||||
|
|
@ -26,7 +27,19 @@ function convertRemToPixels(rem) {
|
|||
return rem * fontSize;
|
||||
}
|
||||
|
||||
// SIDEBAR ANIMATION
|
||||
// IFRAME LOADING ANIMATIONS
|
||||
|
||||
function enableLogoIconRotation() {
|
||||
if (logoIcon) {
|
||||
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
}
|
||||
|
||||
function disableLogoIconRotation() {
|
||||
if (logoIcon) {
|
||||
logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
|
||||
}
|
||||
}
|
||||
|
||||
function slimDownSidebar() {
|
||||
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
||||
|
|
@ -34,23 +47,26 @@ function slimDownSidebar() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
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 enableExhibitionIframeVisibility() {
|
||||
if (exhibitionIframe) {
|
||||
exhibitionIframe.classList.add('exhibition--visible');
|
||||
}
|
||||
}
|
||||
|
||||
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 disableExhibitionIframeVisibility() {
|
||||
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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,12 +75,14 @@ function loadExhibitionIframe() {
|
|||
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
|
||||
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
||||
sidebarNavLinks[i].addEventListener('click', function(e) {
|
||||
logoIcon.removeEventListener('animationiteration', disableLogoIconRotation);
|
||||
enableLogoIconRotation();
|
||||
exhibitionIframe.classList.remove('exhibition--visible');
|
||||
disableExhibitionIframeVisibility();
|
||||
exhibitionIframe.addEventListener('load', function(e) {
|
||||
logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
|
||||
slimDownSidebar();
|
||||
disableLogoIconRotation();
|
||||
exhibitionIframe.classList.add('exhibition--visible');
|
||||
enableExhibitionIframeVisibility();
|
||||
editBackgroundColor(sidebarNavLinks[i]);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -79,6 +97,6 @@ function loadExhibitionIframe() {
|
|||
|
||||
enableActivePseudoClass();
|
||||
|
||||
// SIDEBAR ANIMATION
|
||||
// IFRAME LOADING ANIMATIONS
|
||||
|
||||
loadExhibitionIframe();
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ fields:
|
|||
en: URL
|
||||
fr: URL
|
||||
type: url
|
||||
width: 3/4
|
||||
width: 2/4
|
||||
external_link:
|
||||
label:
|
||||
en: External link
|
||||
|
|
@ -31,11 +31,27 @@ fields:
|
|||
en: 'Yes'
|
||||
fr: Oui
|
||||
width: 1/4
|
||||
background_color:
|
||||
when:
|
||||
external_link: false
|
||||
label:
|
||||
en: Background color
|
||||
fr: Couleur de fond
|
||||
type: select
|
||||
options:
|
||||
feldgrau: Feldgrau
|
||||
white:
|
||||
en: White
|
||||
fr: Blanc
|
||||
default: feldgrau
|
||||
width: 1/4
|
||||
columns:
|
||||
url:
|
||||
width: 3/4
|
||||
width: 2/4
|
||||
external_link:
|
||||
width: 1/4
|
||||
background_color:
|
||||
width: 1/4
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{% 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">{{ exhibition.title }}</a>
|
||||
<a class="sidebar__nav-link sidebar__nav-link--internal" 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>
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue