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

Improve accessibility features

Browse source
This commit is contained in:
Paul Nicoué 2022-06-14 16:08:23 +02:00
parent b138a0df21
commit d5d951c8df
8 changed files with 112 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

51
assets/js/app.js
View file

@ -21,13 +21,14 @@ let videoPlayers = [];
// HEADER BAR ANIMATION //
const headerBar = document.querySelector('.header-bar');
const headerLogo =document.querySelector('.header-bar__logo');
const headerLogo = document.querySelector('.header-bar__logo');
let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const headerNavBtn = document.querySelector('.header-bar__nav-button');
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,
@ -181,12 +182,8 @@ function setUpVideoPlayers() {
'duration',
'mute',
'volume',
'settings',
'fullscreen'
],
settings: [
'quality'
],
i18n: {
play: 'Lire',
pause: 'Mettre sur pause',
@ -198,20 +195,6 @@ function setUpVideoPlayers() {
unmute: 'Activer le son',
enterFullscreen: 'Activer le mode plein écran',
exitFullscreen: 'Quitter le mode plein écran'
},
tooltips: {
controls: true,
seek: true
},
quality: {
default: 720,
options: [
1080,
720,
480,
360,
240,
]
}
});
}
@ -268,6 +251,16 @@ function toggleHeaderNav() {
}
}
// 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');
}
}
// Close header navigation
function closeHeaderNav() {
if (headerNavBtn && headerNavMenu) {
@ -295,6 +288,24 @@ function closeHeaderNavOnClick() {
});
}
// 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);
}
}
}
// 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);
}
}
}
// Close header navigation on touchstart and touchmove events (swipe right)
function closeHeaderNavOnSwipe() {
headerNavMenu.addEventListener('touchstart', function(e) {
@ -352,4 +363,6 @@ document.addEventListener('scroll', function() {
toggleHeaderNavOnClick();
closeHeaderNavOnClick();
openHeaderNavBeforeFocus();
closeHeaderNavAfterFocus();
closeHeaderNavOnSwipe();