studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

panel/btn mobile & scripts
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-25 19:40:55 +01:00
parent bd97c1c33e
commit f28680f77e
26 changed files with 506 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/css/base/_body.scss
View file

@ -73,3 +73,13 @@ body, #site-header, #site-footer{
display: none;
}
}
body.menu-open,
body.is-hidden{
overflow-y: hidden;
main, footer, #nav-highlight, .btn--back-to-top{
transition: opacity .3s ease-in;
opacity: 0.1;
}
}

48
assets/css/components/_btn-group-mobile.scss Normal file
View file

@ -0,0 +1,48 @@
.btn--group__mobile{
z-index: calc(var(--z-header) - 10);
opacity: 0;
transition: opacity .3s ease-in;
&.is-visible{
opacity: 1;
}
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
// padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,
var(--color-bg) 0%,
var(--color-bg) 75%,
transparent 100%);
// background-color: yellow;
display: flex;
align-items: flex-end;
gap: var(--padding-inner);
button, .dropdown{
flex-grow: 1;
width: 100%;
}
}
@media #{$small-up}{
.btn--group__mobile{
display: none;
opacity: 0!important;
}
}

16
assets/css/components/_buttons.scss
View file

@ -160,12 +160,26 @@ button:disabled{
}
.btn--toc{
svg{
width: 15px;
height: 15px;
top: 0px;
}
}
.btn--back-to-top{
display: flex;
border-color: var(--color-txt);
width: fit-content;
margin-inline: auto;
margin: var(--spacing) auto;
@media #{$small}{
margin-bottom: calc(var(--spacing)*2);
}
.icon{
width: 12px;
height: 12px;

12
assets/css/components/_dropdown.scss
View file

@ -74,10 +74,9 @@
}
// PANEL 
@media #{$small}{
&--position-panel .dropdown__content {
&--position-mobile .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner));
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto;
right: 0;
margin-top: 0;
@ -91,19 +90,20 @@
position: absolute;
top: auto;
bottom: -13px;
left: 50%;
left: auto;
right: 10%;
}
}
&--position-panel.is-open {
&--position-mobile.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}
@media #{$small-up}{

1
assets/css/components/_modal-share.scss
View file

@ -1,6 +1,7 @@
.modal--share{
width: 240px;
padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
.socials{
display: block;
list-style: none;

15
assets/css/partials/_site-menu.scss
View file

@ -6,10 +6,13 @@
top: var(--header-h);
right: calc(var(--menu-w)*-1);
transition: right .3s ease-in;
@media #{$small}{
transition: right .4s ease-in;
}
background-color: var(--color-bg);
border-left: var(--border-light);
padding: var(--padding-body);
z-index: 1000;
z-index: calc(var(--z-header) - 1);
@media #{$x-small}{
width: 100vw;
@ -50,11 +53,11 @@
}
body.menu-open{
overflow: hidden;
main, footer, #nav-highlight{
transition: opacity .3s ease-in;
opacity: 0.1;
}
// overflow: hidden;
// main, footer, #nav-highlight{
// transition: opacity .3s ease-in;
// opacity: 0.1;
// }
#site-menu{
right: 0;

297
assets/css/style.css
View file

@ -137,6 +137,19 @@ body, #site-header, #site-footer {
transition: background-color 0.3s ease, color 0.3s ease;
}
body.menu-open,
body.is-hidden {
overflow-y: hidden;
}
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top,
body.is-hidden main,
body.is-hidden footer,
body.is-hidden #nav-highlight,
body.is-hidden .btn--back-to-top {
transition: opacity 0.3s ease-in;
opacity: 0.1;
}
#site-header {
z-index: var(--z-header);
--gap: 3ch;
@ -390,12 +403,23 @@ button:disabled {
color: var(--color-txt);
}
.btn--toc svg {
width: 15px;
height: 15px;
top: 0px;
}
.btn--back-to-top {
display: flex;
border-color: var(--color-txt);
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
margin: var(--spacing) auto;
}
@media screen and (max-width: 768px) {
.btn--back-to-top {
margin-bottom: calc(var(--spacing) * 2);
}
}
.btn--back-to-top .icon {
width: 12px;
@ -511,6 +535,36 @@ button.sort[data-sort-type=up] .arrow {
transform: rotate(-90deg);
}
.btn--group__mobile {
z-index: calc(var(--z-header) - 10);
opacity: 0;
transition: opacity 0.3s ease-in;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
background-color: var(--color-bg);
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 75%, transparent 100%);
display: flex;
align-items: flex-end;
gap: var(--padding-inner);
}
.btn--group__mobile.is-visible {
opacity: 1;
}
.btn--group__mobile button, .btn--group__mobile .dropdown {
flex-grow: 1;
width: 100%;
}
@media screen and (min-width: 768px) {
.btn--group__mobile {
display: none;
opacity: 0 !important;
}
}
#hero {
width: 100%;
position: relative;
@ -820,6 +874,7 @@ button.sort[data-sort-type=up] .arrow {
.modal--share {
width: 240px;
padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
}
.modal--share .socials {
display: block;
@ -999,28 +1054,27 @@ button.sort[data-sort-type=up] .arrow {
visibility: visible;
transform: translateY(0);
}
@media screen and (max-width: 768px) {
.dropdown--position-panel .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner));
left: auto;
right: 0;
margin-top: 0;
margin-left: 4px;
}
.dropdown--position-panel .dropdown__content::before {
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: 50%;
}
.dropdown--position-panel.is-open .dropdown__content {
transform: translateX(0);
}
.dropdown--position-mobile .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner) * 2);
left: auto;
right: 0;
margin-top: 0;
margin-left: 4px;
}
.dropdown--position-mobile .dropdown__content::before {
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto;
right: 10%;
}
.dropdown--position-mobile.is-open .dropdown__content {
transform: translateX(0);
}
@media screen and (min-width: 768px) {
.dropdown--position-panel .dropdown__content {
@ -1519,10 +1573,15 @@ button.sort[data-sort-type=up] .arrow {
background-color: var(--color-bg);
border-left: var(--border-light);
padding: var(--padding-body);
z-index: 1000;
z-index: calc(var(--z-header) - 1);
display: flex;
flex-direction: column;
}
@media screen and (max-width: 768px) {
#site-menu {
transition: right 0.4s ease-in;
}
}
@media screen and (max-width: 560px) {
#site-menu {
width: 100vw;
@ -1555,13 +1614,6 @@ button.sort[data-sort-type=up] .arrow {
text-transform: uppercase;
}
body.menu-open {
overflow: hidden;
}
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight {
transition: opacity 0.3s ease-in;
opacity: 0.1;
}
body.menu-open #site-menu {
right: 0;
}
@ -1880,40 +1932,8 @@ body main {
margin: 0 var(--padding-body);
}
[data-template=investigation-summary] main .panel-left {
padding: calc(var(--spacing) * 0.5) 0;
background-color: yellow;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
}
[data-template=investigation-summary] main .panel-left #nav--page {
display: none;
}
[data-template=investigation-summary] main .panel-left .btn--group {
width: 100%;
display: flex;
flex-direction: row;
gap: var(--padding-inner);
position: relative;
}
[data-template=investigation-summary] main .panel-left .btn--group button {
width: 100%;
}
[data-template=investigation-summary] main .panel-left {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
[data-template=investigation-summary] main .panel-left.is-visible {
opacity: 1;
pointer-events: auto;
}
}
@media screen and (max-width: 560px) {
[data-template=investigation-summary] main #section__dl .dl__group {
@ -1923,57 +1943,94 @@ body main {
padding: calc(var(--spacing) * 0.25) 0;
}
}
[data-template=report] .report__header {
margin-inline: auto;
margin-top: calc(var(--spacing) * 1);
max-width: var(--max-w-cards);
margin-bottom: calc(var(--spacing) * 2.5);
@media screen and (max-width: 768px) {
[data-template=report] #toggle-panel {
display: none;
}
[data-template=report] #report__aside {
width: 100vw;
position: fixed;
top: 0px;
height: 100vh;
left: -100vw;
z-index: calc(var(--z-header) + 10);
transition: left 0.4s ease-in;
background: var(--color-bg);
}
[data-template=report] #report__aside .panel__header {
margin: 0 var(--padding-body);
border-bottom: var(--border-aside);
height: var(--header-h);
}
[data-template=report] #report__aside .panel__content {
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
padding-bottom: 30vh;
}
[data-template=report] #report__aside .btn--group {
display: none;
}
[data-template=report] .panel-open #report__aside {
left: 0px;
}
}
[data-template=report] .report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-body);
@media screen and (min-width: 768px) {
[data-template=report] .report__header {
margin-inline: auto;
margin-top: calc(var(--spacing) * 1);
max-width: var(--max-w-cards);
margin-bottom: calc(var(--spacing) * 2.5);
}
[data-template=report] .report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-body);
}
[data-template=report] .report__content .report__txt {
max-width: var(--max-w-content);
}
[data-template=report] .report__content .report__medias {
background-color: yellow;
}
[data-template=report] #toggle-panel {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
z-index: calc(var(--z-header) + 100);
}
[data-template=report] #report__aside {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
width: var(--panel-w);
height: calc(100vh - var(--header-h));
z-index: calc(var(--z-header) + 200);
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
}
[data-template=report] #report__aside .panel__header {
border: var(--border-aside);
height: calc(var(--h-block) * 1.5);
}
[data-template=report] #report__aside .panel__content {
height: calc(100% - var(--h-block) * 4.25);
padding-bottom: 80px;
}
[data-template=report] #report__aside {
left: calc(var(--panel-w) * -1);
transition: left ease-in-out 0.5s;
}
[data-template=report] #report {
padding-left: calc(var(--padding-body) * 2);
transition: padding-left ease-in-out 0.5s;
}
[data-template=report] .panel-open #report__aside {
left: var(--padding-body);
}
[data-template=report] .panel-open #report {
padding-left: calc(var(--panel-w) + var(--padding-body) * 1);
}
}
[data-template=report] .report__content .report__txt {
max-width: var(--max-w-content);
}
[data-template=report] .report__content .report__medias {
background-color: yellow;
}
[data-template=report] #toggle-panel {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
z-index: calc(var(--z-header) + 100);
}
[data-template=report] #report__aside {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
width: var(--panel-w);
height: calc(100vh - var(--header-h));
z-index: calc(var(--z-header) + 200);
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
}
[data-template=report] #report__aside .panel__content {
height: calc(100% - var(--h-block) * 4);
}
[data-template=report] #report__aside {
left: calc(var(--panel-w) * -1);
transition: left ease-in-out 0.5s;
}
[data-template=report] #report {
padding-left: calc(var(--padding-body) * 2);
transition: padding-left ease-in-out 0.5s;
}
[data-template=report] .panel-open #report__aside {
left: var(--padding-body);
}
[data-template=report] .panel-open #report {
padding-left: calc(var(--panel-w) + var(--padding-body) * 1);
}
.report__header {
display: grid;
-moz-column-gap: var(--padding-inner);
@ -2052,6 +2109,14 @@ body main {
.report__content .section-content {
margin-bottom: calc(var(--spacing) * 3);
}
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 2);
}
@media screen and (max-width: 768px) {
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 0.5);
}
}
.report__content .section-title {
font-size: var(--fs-medium);
margin-bottom: var(--spacing);
@ -2073,20 +2138,12 @@ body main {
width: calc(var(--h-block) * 1);
padding: 0;
}
#toggle-panel svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
top: 0px;
}
#report__aside {
--border-aside: var(--border-light);
}
#report__aside .panel__header {
display: flex;
border: var(--border-aside);
height: calc(var(--h-block) * 1.25);
display: flex;
align-items: center;
justify-content: flex-start;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
assets/css/style.scss
View file

@ -12,6 +12,7 @@
@import "components/keywords";
@import "components/details-summary";
@import "components/sort";
@import "components/btn-group-mobile";
@import "components/figures";
@import "components/hero";
@ -27,6 +28,7 @@
@import "components/card-impact";
@import "components/card-open-graph";
@import "partials/site-header";
@import "partials/site-menu";
@import "partials/site-footer";

47
assets/css/template/_investigation-summary.scss
View file

@ -197,52 +197,7 @@
}
.panel-left {
padding: calc(var(--spacing) * 0.5) 0;
background-color: yellow;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,
var(--color-bg) 0%,
var(--color-bg) 64%,
transparent 100%);
//background-color: red;
#nav--page {
display: none;
}
.btn--group {
width: 100%;
display: flex;
flex-direction: row;
gap: var(--padding-inner);
position: relative;
button{
width: 100%;
}
}
}
// action
.panel-left {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
.panel-left.is-visible {
opacity: 1;
pointer-events: auto;
display: none;
}
}
}

85
assets/css/template/_report.scss
View file

@ -3,6 +3,54 @@
// LAOUT -----------------------------------
@media #{$small}{
[data-template="report"] {
#toggle-panel{
display: none;
}
#report__aside{
width: 100vw;
position: fixed;
top: 0px;
height: 100vh;
left: -100vw;
z-index: calc(var(--z-header) + 10);
transition: left .4s ease-in;
background: var(--color-bg);
.panel__header{
margin: 0 var(--padding-body);
border-bottom: var(--border-aside);
height: var(--header-h);
}
.panel__content{
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
padding-bottom: 30vh;
}
.btn--group{
display: none;
}
}
.panel-open #report__aside{
left: 0px;
}
}
}
@media #{$small-up}{
[data-template="report"] {
@ -49,14 +97,19 @@
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
.panel__header{
border: var(--border-aside);
height: calc(var(--h-block)*1.5);
}
.panel__content {
height: calc(100% - var(--h-block)*4);
height: calc(100% - var(--h-block)*4.25);
padding-bottom: 80px;
}
}
#report__aside {
left: calc(var(--panel-w)*-1);
@ -85,6 +138,7 @@
}
}
// HEADER -------------------------------------------------------------------------
@ -178,6 +232,10 @@
.section-content {
margin-bottom: calc(var(--spacing)*3);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
}
}
@ -210,33 +268,14 @@
#toggle-panel {
width: calc(var(--h-block) * 1);
padding: 0;
svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
top: 0px;
}
}
#report__aside {
--border-aside: var(--border-light);
// border-radius: var(--radius-small);
.panel__header {
display: flex;
border: var(--border-aside);
height: calc(var(--h-block)*1.25);
display: flex;
align-items: center;
justify-content: flex-start;

31
assets/js/banner-sticky-desktop.js
View file

@ -4,19 +4,14 @@ export function bannerStickyDesktop(responsiveSmall) {
if (isInitialized) return;
let body = document.body;
if (!body || body.dataset.template !== 'investigation-summary') return;
let panel = body.querySelector(".panel-left");
if (!panel) return;
let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer");
if (!bannerPage || !sectionDl || !footer) return;
// Stocker la hauteur initiale du banner
const bannerInitialHeight = bannerPage.offsetHeight;
// Stocker la position initiale du footer (calculée une seule fois au chargement)
let footerInitialTop = footer.offsetTop;
const bannerInitialHeight = panel.offsetHeight;
function checkScroll() {
const screenWidth = window.innerWidth;
@ -24,33 +19,35 @@ export function bannerStickyDesktop(responsiveSmall) {
// Vérifier que l'écran est plus grand que responsiveSmall
if (screenWidth <= responsiveSmall) {
// Réinitialiser le transform si on est en dessous de responsiveSmall
bannerPage.style.transform = '';
panel.style.transform = '';
return;
}
// Calculer la position du bas de la fenêtre
const windowBottom = window.scrollY + window.innerHeight;
// Calculer de combien on dépasse le haut du footer (position initiale)
const overlap = windowBottom - footerInitialTop;
// Calculer dynamiquement la position du footer à chaque scroll
// Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
// Calculer de combien on dépasse le haut du footer
const overlap = windowBottom - footerTop;
if (overlap > 0) {
// Le bas de la fenêtre a atteint le haut du footer
// Déplacer le banner vers le haut du nombre de pixels de dépassement
const translateValue = Math.min(overlap, bannerInitialHeight);
bannerPage.style.transform = `translateY(-${translateValue}px)`;
panel.style.transform = `translateY(-${translateValue}px)`;
} else {
// Réinitialiser la position si on n'a pas encore atteint le footer
bannerPage.style.transform = 'translateY(0)';
panel.style.transform = 'translateY(0)';
}
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('resize', () => {
// Recalculer la position du footer lors du resize
if (window.innerWidth > responsiveSmall) {
bannerPage.style.transform = '';
footerInitialTop = footer.offsetTop;
panel.style.transform = '';
}
checkScroll();
});

50
assets/js/banner-sticky-mobile.js
View file

@ -1,50 +0,0 @@
let isInitialized = false;
export function bannerStickyMobile(responsiveSmall) {
if (isInitialized) return;
let body = document.body;
if (!body || body.dataset.template !== 'investigation-summary') return;
let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer");
if (!bannerPage || !sectionDl || !footer) return;
function checkScroll() {
const screenWidth = window.innerWidth;
// Vérifier que l'écran est plus petit que responsiveSmall
if (screenWidth >= responsiveSmall) {
bannerPage.classList.remove('is-visible');
bannerPage.style.transform = 'translateY(0)';
return;
}
const sectionTop = sectionDl.getBoundingClientRect().top;
const footerTop = footer.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
// Activer le banner quand #section__dl arrive en bas de l'écran
if (sectionTop <= windowHeight) {
bannerPage.classList.add('is-visible');
// Pousser le banner vers le haut si le footer arrive en bas de l'écran
if (footerTop < windowHeight) {
const pushUp = windowHeight - footerTop;
bannerPage.style.transform = `translateY(-${pushUp}px)`;
} else {
bannerPage.style.transform = 'translateY(0)';
}
} else {
bannerPage.classList.remove('is-visible');
bannerPage.style.transform = 'translateY(0)';
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

35
assets/js/btn-group-mobile.js Normal file
View file

@ -0,0 +1,35 @@
let isInitialized = false;
export function btnGroupMobile() {
if (isInitialized) return;
const btnGroup = document.querySelector(".btn--group__mobile");
let footer = document.querySelector("#site-footer");
if (!btnGroup) return;
function checkScroll() {
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
const footerTop = footer.getBoundingClientRect().top;
if (scrollY > windowHeight * 0.6) {
btnGroup.classList.add('is-visible');
if (footerTop < windowHeight) {
btnGroup.classList.remove('is-visible');
}
} else {
btnGroup.classList.remove('is-visible');
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

15
assets/js/dropdown.js
View file

@ -1,6 +1,14 @@
export function initDropdowns() {
export function initDropdowns(responsiveSmall) {
const dropdowns = document.querySelectorAll('.dropdown');
function updateBodyOverflow(isOpen) {
if (isOpen && window.innerWidth < responsiveSmall) {
document.body.classList.add('is-hidden');
} else {
document.body.classList.remove('is-hidden');
}
}
dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown__trigger');
const content = dropdown.querySelector('.dropdown__content');
@ -44,6 +52,9 @@ export function initDropdowns() {
// Toggle le dropdown actuel
dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected');
// Gère l'overflow du body sur mobile
updateBodyOverflow(dropdown.classList.contains('is-open'));
});
});
@ -57,6 +68,7 @@ export function initDropdowns() {
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
updateBodyOverflow(false);
});
// Ferme au press Escape
@ -66,6 +78,7 @@ export function initDropdowns() {
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
updateBodyOverflow(false);
}
});
}

2
assets/js/header.js
View file

@ -4,7 +4,7 @@ export function headerToggle() {
if (!header || !buttonToggle) return;
buttonToggle.addEventListener("click", () => {
document.body.classList.toggle("menu-open");
const isOpen = document.body.classList.toggle("menu-open");
});
}

63
assets/js/panel.js
View file

@ -1,19 +1,60 @@
export function panelToggle() {
export function panelToggle(responsiveSmall) {
const toggleBtn = document.querySelector('#toggle-panel');
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
function openPanel() {
main.classList.add('panel-open');
const screenWidth = window.innerWidth;
if (screenWidth <= responsiveSmall) {
console.log("small screen");
document.body.style.overflowY = 'hidden';
}
}
function closePanel() {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
if (toggleBtn) {
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
toggleBtn.addEventListener('click', () => {
main.classList.add('panel-open');
toggleBtn.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', () => {
if (toggleBtnMobile) {
toggleBtnMobile.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closePanel);
}
}
export function tocMobile(responsiveSmall) {
const toc = document.querySelector('#toc');
const main = document.querySelector('main');
if (!toc) return;
const tocLinks = toc.querySelectorAll('a');
tocLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= responsiveSmall) {
main.classList.remove('panel-open');
main.classList.add('panel-close');
});
}
}
document.body.style.overflowY = '';
}
});
});
}

14
assets/js/script.js
View file

@ -1,7 +1,7 @@
import { headerToggle, headerScrollVisibility } from './header.js';
import { copyLink } from './share.js';
import { panelToggle } from './panel.js';
import { bannerStickyMobile } from './banner-sticky-mobile.js';
import { panelToggle, tocMobile } from './panel.js';
import { btnGroupMobile } from './btn-group-mobile.js';
import { bannerStickyDesktop } from './banner-sticky-desktop.js';
import { themeToggle } from './themeToggle.js';
import { initHeroSlider } from './hero-slider.js';
@ -14,12 +14,14 @@ const responsiveSmall = 768;
window.onload = async function () {
console.log("SCRIPT LOADED");
headerToggle();
panelToggle();
copyLink();
panelToggle(responsiveSmall);
themeToggle();
bannerStickyMobile(responsiveSmall);
tocMobile(responsiveSmall);
copyLink();
btnGroupMobile(responsiveSmall)
bannerStickyDesktop(responsiveSmall);
initHeroSlider();
playVideo();
initDropdowns();
initDropdowns(responsiveSmall);
}