Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Antoine:4e66d244eee15f24895395ed67bcb44ad1d0d1a1
Branches Tags
Antoine:main
..
compare: Antoine:1bd97997b517ed21e6722bf07904d89b0b3432a2
Branches Tags
Antoine:main

No commits in common. "4e66d244eee15f24895395ed67bcb44ad1d0d1a1" and "1bd97997b517ed21e6722bf07904d89b0b3432a2" have entirely different histories.
4e66d244ee ... 1bd97997b5

8 changed files with 50 additions and 186 deletions
Show Stats Expand all files Collapse all files

15
resources/css/components/footnote-reference.css
View File

@ -1,21 +1,6 @@
.footnote-reference { .footnote-reference {
color: unset; color: unset;
cursor: pointer;
&:hover {
@apply underline underline-offset-8;
text-decoration-thickness: 1px;
&:after {
transform: translate(0px, -2px) scale(1.1);
z-index: 10;
transition: all 0.3s ease;
@apply nunito;
}
}
&:after { &:after {
transform: translate(0px, -2px) scale(1);
transition: all 0.3s ease;
@apply nunito; @apply nunito;
} }

6
resources/css/components/index-panel.css
View File

@ -31,10 +31,4 @@
@apply hidden; @apply hidden;
} }
} }
.sommaire-index a:hover,
.footnotes-index a:hover {
@apply text-carhop-green-800 underline-offset-8 underline;
text-decoration-thickness: 1px;
}
} }

3
resources/css/components/sommaire-index.css
View File

@ -6,7 +6,4 @@
a { a {
@apply text-xl text-carhop-gray opacity-80; @apply text-xl text-carhop-gray opacity-80;
} }
a[active='true'] {
@apply text-carhop-green-700 font-bold;
}
} }

27
resources/js/singles/footnote-format.ts
View File

@ -1,27 +0,0 @@
import {
scrollToFootnoteInIndexPanel,
toggleActiveTabPanel,
toggleActiveFootnoteLinkInIndexPanel,
} from './index-panel';
export default function handleFootnoteFormat(): void {
const footnotes = document.querySelectorAll('.content-area .footnote-reference');
footnotes.forEach((footnote) => {
const footnoteId = footnote.getAttribute('id');
if (!footnoteId) return;
footnote.addEventListener('click', () => {
toggleActiveTabPanel('footnotes');
scrollToFootnoteInIndexPanel(footnoteId);
toggleActiveFootnoteLinkInIndexPanel(footnoteId);
});
});
}
export function scrollToFootnote(footnoteId: string): void {
const footnote = document.querySelector(`a.footnote-reference#${footnoteId}`);
if (!footnote) return;
footnote.scrollIntoView({ behavior: 'smooth' });
}

143
resources/js/singles/index-panel.ts
View File

@ -1,13 +1,10 @@
import { scrollToFootnote } from './footnote-format'; export default function handleIndexPanels(): void {
import { handleSmoothScrollToTitle } from './sommaire';
export default function handleIndexPanel(): void {
const indexPanel = document.querySelector('.index-panel'); const indexPanel = document.querySelector('.index-panel');
if (!indexPanel) return; if (!indexPanel) return;
console.log('indexPanel');
observeTabsButtons(); observeTabsButtons();
observeFootnotesLinks(); observeFootnotesLinks();
observeSommaireLinks();
} }
// HANDLE TABS // HANDLE TABS
@ -16,19 +13,26 @@ function observeTabsButtons(): void {
buttons.forEach((button) => { buttons.forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
toggleActiveTabPanel(button.getAttribute('data-index') as string); toggleActiveTabsButton(button as HTMLElement);
toggleActiveTabsPanel(button as HTMLElement);
}); });
}); });
} }
export function toggleActiveTabPanel(dataIndex: string): void { function toggleActiveTabsButton(button: HTMLElement): void {
const buttons = document.querySelectorAll('.index-panel__header button');
buttons.forEach((button) => {
button.setAttribute('aria-selected', 'false');
});
button.setAttribute('aria-selected', 'true');
}
function toggleActiveTabsPanel(activeButton: HTMLElement): void {
const dataIndex = activeButton.getAttribute('data-index');
const activePanel = document.querySelector<HTMLElement>( const activePanel = document.querySelector<HTMLElement>(
`.index-panel__content > [data-index="${dataIndex}"]` `.index-panel__content > [data-index="${dataIndex}"]`
); );
const activeButton = document.querySelector<HTMLElement>( if (!dataIndex || !activePanel) return;
`.index-panel__header button[data-index="${dataIndex}"]`
);
if (!dataIndex || !activePanel || !activeButton) return;
// Hide all buttons and panels // Hide all buttons and panels
const allButtons = document.querySelectorAll<HTMLElement>('.index-panel__header button'); const allButtons = document.querySelectorAll<HTMLElement>('.index-panel__header button');
@ -42,125 +46,36 @@ export function toggleActiveTabPanel(dataIndex: string): void {
panel.setAttribute('aria-hidden', 'true'); panel.setAttribute('aria-hidden', 'true');
}); });
// Active the button and the panel
activeButton.setAttribute('aria-selected', 'true'); activeButton.setAttribute('aria-selected', 'true');
activePanel.setAttribute('aria-hidden', 'false'); activePanel.setAttribute('aria-hidden', 'false');
} }
// ********************************************************
// ************* SOMMAIRE *********************************
// ********************************************************
function observeSommaireLinks(): void {
console.log('observeSommaireLinks');
const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
for (const title of sommaireTitles) {
title.addEventListener('click', (e) => {
e.preventDefault();
const href = title.getAttribute('href');
if (!href) return;
const targetId = href.startsWith('#') ? href.substring(1) : href;
if (!targetId) return;
handleSmoothScrollToTitle(targetId);
toggleActiveChapterLinkInIndexPanel(targetId);
});
}
}
function handleSmoothScrollToTitle(targetId: string): void {
const targetElement = document.querySelector(`#${targetId}`);
if (!targetElement) return;
targetElement.scrollIntoView({ behavior: 'smooth' });
}
function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
const sommaireLinks: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
const indexPanel = document.querySelector('.index-panel') as HTMLElement;
const currentLink = indexPanel.querySelector(`a[href="#${targetId}"]`) as HTMLElement;
console.log(currentLink);
if (!currentLink) return;
for (const link of sommaireLinks) {
link.setAttribute('active', 'false');
}
currentLink?.setAttribute('active', 'true');
}
// export function handleSmoothScrollToTitle(): void {
// const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
// for (const title of sommaireTitles) {
// title.addEventListener('click', (e) => {
// e.preventDefault();
// const target = title.getAttribute('href');
// if (!target) return;
// const targetElement = document.querySelector(target);
// if (!targetElement) return;
// targetElement.scrollIntoView({ behavior: 'smooth' });
// });
// }
// }
// ********************************************************
// ************* FOOTNOTES *********************************
// ********************************************************
function observeFootnotesLinks(): void { function observeFootnotesLinks(): void {
const footnotesLinks = document.querySelectorAll('.footnotes-index a'); const footnotesButtons = document.querySelectorAll('.footnotes-index a');
footnotesLinks.forEach((footnoteLink) => { footnotesButtons.forEach((footnoteButton) => {
footnoteLink.addEventListener('click', (e) => { footnoteButton.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
const href = target.getAttribute('href'); const targetId = target.getAttribute('href');
if (!href) return;
const targetId = href.startsWith('#') ? href.substring(1) : href;
if (!targetId) return; if (!targetId) return;
scrollToFootnote(targetId);
// document.querySelector(`#${targetId}`)?.scrollIntoView({ behavior: 'smooth' });
toggleActiveFootnoteLinkInIndexPanel(targetId); document.querySelector(targetId)?.scrollIntoView({ behavior: 'smooth' });
scrollToFootnoteInIndexPanel(targetId); toggleActiveFootnote(footnoteButton as HTMLElement);
}); });
}); });
} }
export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void { function toggleActiveFootnote(button: HTMLElement): void {
const footnotesIndexLinks = document.querySelectorAll('.footnote-reference-item'); const buttons = document.querySelectorAll('footnote-reference-item');
const indexPanel = document.querySelector('.index-panel') as HTMLElement;
const currentFootnote = indexPanel.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;
footnotesIndexLinks.forEach((footnoteLink) => { const footnotesItems = document.querySelectorAll('.footnote-reference-item');
footnoteLink.setAttribute('active', 'false');
footnotesItems.forEach((footnoteItem) => {
footnoteItem.setAttribute('active', 'false');
}); });
currentFootnote?.setAttribute('active', 'true'); button.setAttribute('active', 'true');
}
export function scrollToFootnoteInIndexPanel(footnoteId: string): void {
const footnotesIndex = document.querySelector('#footnotes-index') as HTMLElement;
const indexPanel = document.querySelector('.index-panel') as HTMLElement;
const currentFootnote = indexPanel?.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;
if (currentFootnote && indexPanel) {
const containerRect = indexPanel.getBoundingClientRect();
const elementRect = currentFootnote.getBoundingClientRect();
const relativeTop = elementRect.top - containerRect.top;
const scrollTop = indexPanel.scrollTop + relativeTop - 20;
indexPanel.scrollTo({
top: scrollTop,
behavior: 'smooth',
});
}
} }

24
resources/js/singles/singles.ts
View File

@ -1,5 +1,4 @@
import handleIndexPanel from './index-panel'; import handleIndexPanels from './index-panel';
import handleFootnoteFormat from './footnote-format';
export default function singles(): void { export default function singles(): void {
const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue'); const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@ -8,9 +7,9 @@ export default function singles(): void {
injectIdToNativeTitles(); injectIdToNativeTitles();
handleIndexPanel(); handleIndexPanels();
handleFootnoteFormat();
handleCiteButton(); handleCiteButton();
handleSmoothScrollToTitle();
} }
function handleCiteButton(): void { function handleCiteButton(): void {
@ -76,3 +75,20 @@ function injectIdToNativeTitles(): void {
title.setAttribute('id', slug); title.setAttribute('id', slug);
}); });
} }
function handleSmoothScrollToTitle(): void {
const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
for (const title of sommaireTitles) {
title.addEventListener('click', (e) => {
e.preventDefault();
const target = title.getAttribute('href');
if (!target) return;
const targetElement = document.querySelector(target);
if (!targetElement) return;
targetElement.scrollIntoView({ behavior: 'smooth' });
});
}
}

16
resources/js/singles/sommaire.ts
View File

@ -1,16 +0,0 @@
export function handleSmoothScrollToTitle(): void {
const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
for (const title of sommaireTitles) {
title.addEventListener('click', (e) => {
e.preventDefault();
const target = title.getAttribute('href');
if (!target) return;
const targetElement = document.querySelector(target);
if (!targetElement) return;
targetElement.scrollIntoView({ behavior: 'smooth' });
});
}
}

2
single-articles.php
View File

@ -49,7 +49,7 @@
} }
?> ?>
</ul> </ul>
<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true"> <ul data-index="footnotes" class="footnotes-index" aria-hidden="true">
<?php <?php
$footnotes = build_footnotes_index_from_content(get_the_content()); $footnotes = build_footnotes_index_from_content(get_the_content());
?> ?>