Edit indentation style
This commit is contained in:
Paul Nicoué
parent
d916cac8c9
commit
9fc5497f33
21 changed files with 14837 additions and 14840 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -6,23 +6,23 @@
|
|||
|
||||
.k-textarea-field {
|
||||
|
||||
.k-toolbar {
|
||||
.k-toolbar {
|
||||
|
||||
.k-dropdown {
|
||||
.k-dropdown {
|
||||
|
||||
.k-button:nth-of-type(2),
|
||||
.k-button:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.k-button:nth-of-type(2),
|
||||
.k-button:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visual image crop field properties
|
||||
|
||||
.kirby-imagecrop-field {
|
||||
|
||||
.k-column:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
.k-column:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,34 +3,34 @@
|
|||
// ----------------------------------------------------------------------------
|
||||
|
||||
@keyframes expand-outline {
|
||||
from {
|
||||
outline-offset: 0;
|
||||
}
|
||||
to {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
from {
|
||||
outline-offset: 0;
|
||||
}
|
||||
to {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-up {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
60% {
|
||||
top: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
60% {
|
||||
top: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-down {
|
||||
0% {
|
||||
bottom: 0;
|
||||
}
|
||||
60% {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
0% {
|
||||
bottom: 0;
|
||||
}
|
||||
60% {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,66 +5,66 @@
|
|||
// Nunito
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-family: 'Nunito';
|
||||
src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Gloria Hallelujah
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gloria Hallelujah';
|
||||
src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'Gloria Hallelujah';
|
||||
src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,59 +4,59 @@
|
|||
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
// Fonts
|
||||
|
||||
--text-font-family: 'Nunito', Verdana, sans-serif;
|
||||
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
|
||||
--regular-font-weight: 400;
|
||||
--medium-font-weight: 500;
|
||||
--semi-bold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--text-font-size: 1rem;
|
||||
--caption-font-size: 0.9rem;
|
||||
--footnote-font-size: 0.8rem;
|
||||
--text-line-height: 1.4rem;
|
||||
--h1-font-size: 1.8rem;
|
||||
--h2-font-size: 1.4rem;
|
||||
--h3-font-size: 1.2rem;
|
||||
--text-font-family: 'Nunito', Verdana, sans-serif;
|
||||
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
|
||||
--regular-font-weight: 400;
|
||||
--medium-font-weight: 500;
|
||||
--semi-bold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--text-font-size: 1rem;
|
||||
--caption-font-size: 0.9rem;
|
||||
--footnote-font-size: 0.8rem;
|
||||
--text-line-height: 1.4rem;
|
||||
--h1-font-size: 1.8rem;
|
||||
--h2-font-size: 1.4rem;
|
||||
--h3-font-size: 1.2rem;
|
||||
|
||||
// Dimensions
|
||||
// Dimensions
|
||||
|
||||
--content-max-width: 140rem;
|
||||
--text-max-width: 70rem;
|
||||
--icon-size: 2.5rem;
|
||||
--header-bar-vertical-padding: 1rem;
|
||||
--header-bar-horizontal-padding: 2rem;
|
||||
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--footer-bar-vertical-padding: 1rem;
|
||||
--footer-bar-horizontal-padding: 2rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
|
||||
--generic-section-vertical-padding: 3rem;
|
||||
--generic-section-horizontal-padding: 2rem;
|
||||
--home-section-vertical-padding: 2rem;
|
||||
--home-section-horizontal-padding: 2rem;
|
||||
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
|
||||
--home-nav-gap: 1rem;
|
||||
--home-nav-item-size: 2rem;
|
||||
--home-nav-item-translation: 0;
|
||||
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
|
||||
--content-max-width: 140rem;
|
||||
--text-max-width: 70rem;
|
||||
--icon-size: 2.5rem;
|
||||
--header-bar-vertical-padding: 1rem;
|
||||
--header-bar-horizontal-padding: 2rem;
|
||||
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--footer-bar-vertical-padding: 1rem;
|
||||
--footer-bar-horizontal-padding: 2rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
|
||||
--generic-section-vertical-padding: 3rem;
|
||||
--generic-section-horizontal-padding: 2rem;
|
||||
--home-section-vertical-padding: 2rem;
|
||||
--home-section-horizontal-padding: 2rem;
|
||||
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
|
||||
--home-nav-gap: 1rem;
|
||||
--home-nav-item-size: 2rem;
|
||||
--home-nav-item-translation: 0;
|
||||
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
|
||||
|
||||
// Colors
|
||||
// Colors
|
||||
|
||||
--black: #000;
|
||||
--transparent-black: rgba(0, 0, 0, 0.8);
|
||||
--jet: #333333;
|
||||
--transparent-jet: rgba(51, 51, 51, 0.8);
|
||||
--granite-gray: #666666;
|
||||
--spanish-gray: #999999;
|
||||
--light-gray: #cccccc;
|
||||
--white: #fff;
|
||||
--transparent-white: rgba(255, 255, 255, 0.8);
|
||||
--black: #000;
|
||||
--transparent-black: rgba(0, 0, 0, 0.8);
|
||||
--jet: #333333;
|
||||
--transparent-jet: rgba(51, 51, 51, 0.8);
|
||||
--granite-gray: #666666;
|
||||
--spanish-gray: #999999;
|
||||
--light-gray: #cccccc;
|
||||
--white: #fff;
|
||||
--transparent-white: rgba(255, 255, 255, 0.8);
|
||||
|
||||
// Plyr (audio player)
|
||||
// Plyr (audio player)
|
||||
|
||||
--plyr-color-main: var(--transparent-jet);
|
||||
--plyr-tab-focus-color: var(--white);
|
||||
--plyr-color-main: var(--transparent-jet);
|
||||
--plyr-tab-focus-color: var(--white);
|
||||
}
|
||||
|
||||
// Media queries
|
||||
|
|
@ -66,26 +66,26 @@ $desktop-media-query: 62rem;
|
|||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
:root {
|
||||
:root {
|
||||
|
||||
// Fonts
|
||||
// Fonts
|
||||
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 1.6rem;
|
||||
--h3-font-size: 1.4rem;
|
||||
--text-font-size: 1.2rem;
|
||||
--caption-font-size: 1.1rem;
|
||||
--footnote-font-size: 1rem;
|
||||
--h1-font-size: 2rem;
|
||||
--h2-font-size: 1.6rem;
|
||||
--h3-font-size: 1.4rem;
|
||||
|
||||
// Dimensions
|
||||
// Dimensions
|
||||
|
||||
--icon-size: 3rem;
|
||||
--header-bar-vertical-padding: 2rem;
|
||||
--header-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-vertical-padding: 2rem;
|
||||
--footer-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--generic-section-horizontal-padding: 4rem;
|
||||
--home-section-horizontal-padding: 4rem;
|
||||
}
|
||||
--icon-size: 3rem;
|
||||
--header-bar-vertical-padding: 2rem;
|
||||
--header-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-vertical-padding: 2rem;
|
||||
--footer-bar-horizontal-padding: 4rem;
|
||||
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
|
||||
--generic-section-horizontal-padding: 4rem;
|
||||
--home-section-horizontal-padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -35,44 +35,44 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
392
assets/js/app.js
392
assets/js/app.js
|
|
@ -32,8 +32,8 @@ const headerNavMenu = document.querySelector('.header-bar__nav-menu');
|
|||
const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li');
|
||||
const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
|
||||
const touchPosition = {
|
||||
initialX: null,
|
||||
initialY: null
|
||||
initialX: null,
|
||||
initialY: null
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -42,8 +42,8 @@ const touchPosition = {
|
|||
|
||||
// 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;
|
||||
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
|
||||
return rem * fontSize;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -54,282 +54,282 @@ function convertRemToPixels(rem) {
|
|||
|
||||
// Calculate navigation grid inner width
|
||||
function calculateNavGridInnerWidth() {
|
||||
if (root && navImage) {
|
||||
let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
|
||||
let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
|
||||
return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
|
||||
}
|
||||
if (root && navImage) {
|
||||
let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
|
||||
let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
|
||||
return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate navigation grid inner diagonal
|
||||
function calculateNavGridInnerDiagonal() {
|
||||
return calculateNavGridInnerWidth() * Math.sqrt(2);
|
||||
return calculateNavGridInnerWidth() * Math.sqrt(2);
|
||||
}
|
||||
|
||||
// Create new instance of CircleType for each navigation link, set radius and direction
|
||||
function curveNavLinks() {
|
||||
if (navLinks.length !== 0 && circleTypes) {
|
||||
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||
circleTypes[i] = new CircleType(navLinks[i]);
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||
circleTypes[i] = new CircleType(navLinks[i]);
|
||||
circleTypes[i].dir(-1);
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
}
|
||||
if (navLinks.length !== 0 && circleTypes) {
|
||||
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||
circleTypes[i] = new CircleType(navLinks[i]);
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||
circleTypes[i] = new CircleType(navLinks[i]);
|
||||
circleTypes[i].dir(-1);
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set --home-nav-item-translation CSS property
|
||||
function setNavItemTranslationProperty() {
|
||||
let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
|
||||
if (root) {
|
||||
root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
|
||||
}
|
||||
let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
|
||||
if (root) {
|
||||
root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
// Set navigation grid display depending on number of links
|
||||
function setNavGridDisplay() {
|
||||
if (navEl && navLinks.length !== 0) {
|
||||
if (navLinks.length === 2) {
|
||||
navEl.classList.add('home__nav--2-items');
|
||||
} else if (navLinks.length === 3) {
|
||||
navEl.classList.add('home__nav--3-items');
|
||||
} else if (navLinks.length === 4) {
|
||||
navEl.classList.add('home__nav--4-items');
|
||||
}
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
navLinks[i].classList.add('home__nav-link--visible');
|
||||
}
|
||||
}
|
||||
if (navEl && navLinks.length !== 0) {
|
||||
if (navLinks.length === 2) {
|
||||
navEl.classList.add('home__nav--2-items');
|
||||
} else if (navLinks.length === 3) {
|
||||
navEl.classList.add('home__nav--3-items');
|
||||
} else if (navLinks.length === 4) {
|
||||
navEl.classList.add('home__nav--4-items');
|
||||
}
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
navLinks[i].classList.add('home__nav-link--visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edit navigation links radius and translation on window resize event
|
||||
function editNavLinksOnResize() {
|
||||
window.addEventListener('resize', function(e) {
|
||||
if (navLinks.length !== 0 && circleTypes) {
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
}
|
||||
setNavItemTranslationProperty();
|
||||
});
|
||||
window.addEventListener('resize', function(e) {
|
||||
if (navLinks.length !== 0 && circleTypes) {
|
||||
for (let i = 0; i < navLinks.length; i++) {
|
||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||
}
|
||||
}
|
||||
setNavItemTranslationProperty();
|
||||
});
|
||||
}
|
||||
|
||||
// Add wave up animation to a single letter and remove it on animationend event
|
||||
function waveNavLetterUp(navLetter) {
|
||||
navLetter.classList.add('home__nav-letter--wave-up');
|
||||
navLetter.addEventListener('animationend', function(e) {
|
||||
navLetter.classList.remove('home__nav-letter--wave-up');
|
||||
});
|
||||
navLetter.classList.add('home__nav-letter--wave-up');
|
||||
navLetter.addEventListener('animationend', function(e) {
|
||||
navLetter.classList.remove('home__nav-letter--wave-up');
|
||||
});
|
||||
}
|
||||
|
||||
// Add wave down animation to a single letter and remove it on animationend event
|
||||
function waveNavLetterDown(navLetter) {
|
||||
navLetter.classList.add('home__nav-letter--wave-down');
|
||||
navLetter.addEventListener('animationend', function(e) {
|
||||
navLetter.classList.remove('home__nav-letter--wave-down');
|
||||
});
|
||||
navLetter.classList.add('home__nav-letter--wave-down');
|
||||
navLetter.addEventListener('animationend', function(e) {
|
||||
navLetter.classList.remove('home__nav-letter--wave-down');
|
||||
});
|
||||
}
|
||||
|
||||
// Add wave up animation to every letters of a single link with a slight delay
|
||||
function waveNavLinkUp(navLink) {
|
||||
let navLinkLetters = navLink.querySelectorAll('span');
|
||||
let animationDelay = 0;
|
||||
for (let i = 0; i < navLinkLetters.length; i++) {
|
||||
setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
|
||||
animationDelay += 50;
|
||||
}
|
||||
let navLinkLetters = navLink.querySelectorAll('span');
|
||||
let animationDelay = 0;
|
||||
for (let i = 0; i < navLinkLetters.length; i++) {
|
||||
setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
|
||||
animationDelay += 50;
|
||||
}
|
||||
}
|
||||
|
||||
// Add wave down animation to every letters of a single link with a slight delay
|
||||
function waveNavLinkDown(navLink) {
|
||||
let navLinkLetters = navLink.querySelectorAll('span');
|
||||
let animationDelay = 0;
|
||||
for (let i = 0; i < navLinkLetters.length; i++) {
|
||||
setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
|
||||
animationDelay += 50;
|
||||
}
|
||||
let navLinkLetters = navLink.querySelectorAll('span');
|
||||
let animationDelay = 0;
|
||||
for (let i = 0; i < navLinkLetters.length; i++) {
|
||||
setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
|
||||
animationDelay += 50;
|
||||
}
|
||||
}
|
||||
|
||||
// Add wave (up or down) animation to every letters of each link on mouseover event
|
||||
function waveNavLinksOnHover() {
|
||||
if (navLinks.length !== 0) {
|
||||
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||
navLinks[i].addEventListener('mouseover', function(e) {
|
||||
waveNavLinkUp(navLinks[i]);
|
||||
});
|
||||
}
|
||||
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||
navLinks[i].addEventListener('mouseover', function(e) {
|
||||
waveNavLinkDown(navLinks[i]);
|
||||
});
|
||||
}
|
||||
}
|
||||
if (navLinks.length !== 0) {
|
||||
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||
navLinks[i].addEventListener('mouseover', function(e) {
|
||||
waveNavLinkUp(navLinks[i]);
|
||||
});
|
||||
}
|
||||
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||
navLinks[i].addEventListener('mouseover', function(e) {
|
||||
waveNavLinkDown(navLinks[i]);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// VIDEO PLAYERS //
|
||||
|
||||
// Set up Plyr video players
|
||||
function setUpVideoPlayers() {
|
||||
if (galleryVideos.length !== 0) {
|
||||
videoPlayers = Plyr.setup(galleryVideos, {
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'duration',
|
||||
'mute',
|
||||
'volume',
|
||||
'fullscreen'
|
||||
],
|
||||
i18n: {
|
||||
play: 'Lire',
|
||||
pause: 'Mettre sur pause',
|
||||
seek: 'Parcourir la piste audio',
|
||||
currentTime: 'Temps écoulé depuis le début de la piste audio',
|
||||
duration: 'Durée de la piste audio',
|
||||
volume: 'Ajuster le volume',
|
||||
mute: 'Couper le son',
|
||||
unmute: 'Activer le son',
|
||||
enterFullscreen: 'Activer le mode plein écran',
|
||||
exitFullscreen: 'Quitter le mode plein écran'
|
||||
}
|
||||
});
|
||||
}
|
||||
if (galleryVideos.length !== 0) {
|
||||
videoPlayers = Plyr.setup(galleryVideos, {
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'duration',
|
||||
'mute',
|
||||
'volume',
|
||||
'fullscreen'
|
||||
],
|
||||
i18n: {
|
||||
play: 'Lire',
|
||||
pause: 'Mettre sur pause',
|
||||
seek: 'Parcourir la piste audio',
|
||||
currentTime: 'Temps écoulé depuis le début de la piste audio',
|
||||
duration: 'Durée de la piste audio',
|
||||
volume: 'Ajuster le volume',
|
||||
mute: 'Couper le son',
|
||||
unmute: 'Activer le son',
|
||||
enterFullscreen: 'Activer le mode plein écran',
|
||||
exitFullscreen: 'Quitter le mode plein écran'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle videos full screen mode on Plyr enterfullscreen and exitfullscreen media events
|
||||
function toggleVideosFullScreen() {
|
||||
if (videoPlayers.length !== 0) {
|
||||
for (let i = 0; i < videoPlayers.length; i++) {
|
||||
videoPlayers[i].on('enterfullscreen', function(e) {
|
||||
galleryVideos[i].classList.add('gallery__video--full-screen');
|
||||
});
|
||||
videoPlayers[i].on('exitfullscreen', function(e) {
|
||||
galleryVideos[i].classList.remove('gallery__video--full-screen');
|
||||
});
|
||||
}
|
||||
}
|
||||
if (videoPlayers.length !== 0) {
|
||||
for (let i = 0; i < videoPlayers.length; i++) {
|
||||
videoPlayers[i].on('enterfullscreen', function(e) {
|
||||
galleryVideos[i].classList.add('gallery__video--full-screen');
|
||||
});
|
||||
videoPlayers[i].on('exitfullscreen', function(e) {
|
||||
galleryVideos[i].classList.remove('gallery__video--full-screen');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// HEADER BAR ANIMATION //
|
||||
|
||||
// Toggle header bar depending on scroll offset
|
||||
function toggleHeaderBar() {
|
||||
if (headerBar && headerLogo) {
|
||||
let headerBarHeight = headerBar.getBoundingClientRect().height;
|
||||
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
|
||||
headerBar.classList.add('header-bar--fixed');
|
||||
headerLogo.classList.add('header-bar__logo--small');
|
||||
} else if (window.pageYOffset <= 0) {
|
||||
headerBar.classList.remove('header-bar--fixed');
|
||||
headerLogo.classList.remove('header-bar__logo--small');
|
||||
headerBar.classList.remove('header-bar--visible');
|
||||
}
|
||||
if (headerBar.classList.contains('header-bar--fixed')) {
|
||||
if (scrollOffset < window.pageYOffset) { // Scroll down
|
||||
headerBar.classList.remove('header-bar--visible');
|
||||
} else if (scrollOffset > window.pageYOffset) { // Scroll up
|
||||
headerBar.classList.add('header-bar--visible');
|
||||
}
|
||||
scrollOffset = window.pageYOffset;
|
||||
}
|
||||
}
|
||||
if (headerBar && headerLogo) {
|
||||
let headerBarHeight = headerBar.getBoundingClientRect().height;
|
||||
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
|
||||
headerBar.classList.add('header-bar--fixed');
|
||||
headerLogo.classList.add('header-bar__logo--small');
|
||||
} else if (window.pageYOffset <= 0) {
|
||||
headerBar.classList.remove('header-bar--fixed');
|
||||
headerLogo.classList.remove('header-bar__logo--small');
|
||||
headerBar.classList.remove('header-bar--visible');
|
||||
}
|
||||
if (headerBar.classList.contains('header-bar--fixed')) {
|
||||
if (scrollOffset < window.pageYOffset) { // Scroll down
|
||||
headerBar.classList.remove('header-bar--visible');
|
||||
} else if (scrollOffset > window.pageYOffset) { // Scroll up
|
||||
headerBar.classList.add('header-bar--visible');
|
||||
}
|
||||
scrollOffset = window.pageYOffset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAVIGATION MENU ANIMATION //
|
||||
|
||||
// Toggle header navigation
|
||||
function toggleHeaderNav() {
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
|
||||
document.body.classList.toggle('body--hidden-overflow-y');
|
||||
}
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
|
||||
document.body.classList.toggle('body--hidden-overflow-y');
|
||||
}
|
||||
}
|
||||
|
||||
// Open header navigation
|
||||
function openHeaderNav() {
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.add('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
|
||||
document.body.classList.add('body--hidden-overflow-y');
|
||||
}
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.add('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
|
||||
document.body.classList.add('body--hidden-overflow-y');
|
||||
}
|
||||
}
|
||||
|
||||
// Close header navigation
|
||||
function closeHeaderNav() {
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
|
||||
document.body.classList.remove('body--hidden-overflow-y');
|
||||
}
|
||||
if (headerNavBtn && headerNavMenu) {
|
||||
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
|
||||
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
|
||||
headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
|
||||
document.body.classList.remove('body--hidden-overflow-y');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle header navigation on button click event
|
||||
function toggleHeaderNavOnClick() {
|
||||
headerNavBtn.addEventListener('click', toggleHeaderNav);
|
||||
headerNavBtn.addEventListener('click', toggleHeaderNav);
|
||||
}
|
||||
|
||||
// Close header navigation on document click event
|
||||
function closeHeaderNavOnClick() {
|
||||
document.addEventListener('click', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
|
||||
closeHeaderNav(e);
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
document.addEventListener('click', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
|
||||
closeHeaderNav(e);
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Open header navigation on menu list focusin event
|
||||
function openHeaderNavBeforeFocus() {
|
||||
if (headerNavMenuListEls) {
|
||||
for (let i = 0; i < headerNavMenuListEls.length; i++) {
|
||||
headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
|
||||
}
|
||||
}
|
||||
if (headerNavMenuListEls) {
|
||||
for (let i = 0; i < headerNavMenuListEls.length; i++) {
|
||||
headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close header navigation on menu list focusout event
|
||||
function closeHeaderNavAfterFocus() {
|
||||
if (headerNavMenuListEls) {
|
||||
for (let i = 0; i < headerNavMenuListEls.length; i++) {
|
||||
headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
|
||||
}
|
||||
}
|
||||
if (headerNavMenuListEls) {
|
||||
for (let i = 0; i < headerNavMenuListEls.length; i++) {
|
||||
headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close header navigation on touchstart and touchmove events (swipe right)
|
||||
function closeHeaderNavOnSwipe() {
|
||||
headerNavMenu.addEventListener('touchstart', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
|
||||
touchPosition.initialX = event.touches[0].clientX;
|
||||
touchPosition.initialY = event.touches[0].clientY;
|
||||
}
|
||||
}, {passive: true});
|
||||
headerNavMenu.addEventListener('touchmove', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
|
||||
touchPosition.currentX = event.touches[0].clientX;
|
||||
touchPosition.currentY = event.touches[0].clientY;
|
||||
touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
|
||||
touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
|
||||
if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
|
||||
if (touchPosition.diffX < 0) {
|
||||
closeHeaderNav(e);
|
||||
}
|
||||
}
|
||||
touchPosition.initialX = null;
|
||||
touchPosition.initialY = null;
|
||||
}
|
||||
}, {passive: true});
|
||||
headerNavMenu.addEventListener('touchstart', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
|
||||
touchPosition.initialX = event.touches[0].clientX;
|
||||
touchPosition.initialY = event.touches[0].clientY;
|
||||
}
|
||||
}, {passive: true});
|
||||
headerNavMenu.addEventListener('touchmove', function(e) {
|
||||
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
|
||||
touchPosition.currentX = event.touches[0].clientX;
|
||||
touchPosition.currentY = event.touches[0].clientY;
|
||||
touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
|
||||
touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
|
||||
if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
|
||||
if (touchPosition.diffX < 0) {
|
||||
closeHeaderNav(e);
|
||||
}
|
||||
}
|
||||
touchPosition.initialX = null;
|
||||
touchPosition.initialY = null;
|
||||
}
|
||||
}, {passive: true});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -342,11 +342,11 @@ document.addEventListener("touchstart", function() {},false);
|
|||
// HOME NAVIGATION DISPLAY //
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
curveNavLinks();
|
||||
setNavItemTranslationProperty();
|
||||
setNavGridDisplay();
|
||||
editNavLinksOnResize();
|
||||
waveNavLinksOnHover();
|
||||
curveNavLinks();
|
||||
setNavItemTranslationProperty();
|
||||
setNavGridDisplay();
|
||||
editNavLinksOnResize();
|
||||
waveNavLinksOnHover();
|
||||
});
|
||||
|
||||
// VIDEO PLAYERS //
|
||||
|
|
@ -357,7 +357,7 @@ toggleVideosFullScreen();
|
|||
// HEADER BAR ANIMATION //
|
||||
|
||||
document.addEventListener('scroll', function() {
|
||||
toggleHeaderBar();
|
||||
toggleHeaderBar();
|
||||
});
|
||||
|
||||
// NAVIGATION MENU ANIMATION //
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue