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 {
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 {
transform: translate(0px, -2px) scale(1);
transition: all 0.3s ease;
@apply nunito;
}

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

@ -31,10 +31,4 @@
@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 {
@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';
import { handleSmoothScrollToTitle } from './sommaire';
export default function handleIndexPanel(): void {
export default function handleIndexPanels(): void {
const indexPanel = document.querySelector('.index-panel');
if (!indexPanel) return;
console.log('indexPanel');
observeTabsButtons();
observeFootnotesLinks();
observeSommaireLinks();
}
// HANDLE TABS
@ -16,19 +13,26 @@ function observeTabsButtons(): void {
buttons.forEach((button) => {
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>(
`.index-panel__content > [data-index="${dataIndex}"]`
);
const activeButton = document.querySelector<HTMLElement>(
`.index-panel__header button[data-index="${dataIndex}"]`
);
if (!dataIndex || !activePanel || !activeButton) return;
if (!dataIndex || !activePanel) return;
// Hide all buttons and panels
const allButtons = document.querySelectorAll<HTMLElement>('.index-panel__header button');
@ -42,125 +46,36 @@ export function toggleActiveTabPanel(dataIndex: string): void {
panel.setAttribute('aria-hidden', 'true');
});
// Active the button and the panel
activeButton.setAttribute('aria-selected', 'true');
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 {
const footnotesLinks = document.querySelectorAll('.footnotes-index a');
const footnotesButtons = document.querySelectorAll('.footnotes-index a');
footnotesLinks.forEach((footnoteLink) => {
footnoteLink.addEventListener('click', (e) => {
footnotesButtons.forEach((footnoteButton) => {
footnoteButton.addEventListener('click', (e) => {
e.preventDefault();
const target = e.target as HTMLElement;
const href = target.getAttribute('href');
if (!href) return;
const targetId = target.getAttribute('href');
const targetId = href.startsWith('#') ? href.substring(1) : href;
if (!targetId) return;
scrollToFootnote(targetId);
// document.querySelector(`#${targetId}`)?.scrollIntoView({ behavior: 'smooth' });
toggleActiveFootnoteLinkInIndexPanel(targetId);
scrollToFootnoteInIndexPanel(targetId);
document.querySelector(targetId)?.scrollIntoView({ behavior: 'smooth' });
toggleActiveFootnote(footnoteButton as HTMLElement);
});
});
}
export function toggleActiveFootnoteLinkInIndexPanel(footnoteId: string): void {
const footnotesIndexLinks = document.querySelectorAll('.footnote-reference-item');
const indexPanel = document.querySelector('.index-panel') as HTMLElement;
const currentFootnote = indexPanel.querySelector(`a[href="#${footnoteId}"]`) as HTMLElement;
function toggleActiveFootnote(button: HTMLElement): void {
const buttons = document.querySelectorAll('footnote-reference-item');
footnotesIndexLinks.forEach((footnoteLink) => {
footnoteLink.setAttribute('active', 'false');
const footnotesItems = document.querySelectorAll('.footnote-reference-item');
footnotesItems.forEach((footnoteItem) => {
footnoteItem.setAttribute('active', 'false');
});
currentFootnote?.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',
});
}
button.setAttribute('active', 'true');
}

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

@ -1,5 +1,4 @@
import handleIndexPanel from './index-panel';
import handleFootnoteFormat from './footnote-format';
import handleIndexPanels from './index-panel';
export default function singles(): void {
const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@ -8,9 +7,9 @@ export default function singles(): void {
injectIdToNativeTitles();
handleIndexPanel();
handleFootnoteFormat();
handleIndexPanels();
handleCiteButton();
handleSmoothScrollToTitle();
}
function handleCiteButton(): void {
@ -76,3 +75,20 @@ function injectIdToNativeTitles(): void {
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 id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
<ul data-index="footnotes" class="footnotes-index" aria-hidden="true">
<?php
$footnotes = build_footnotes_index_from_content(get_the_content());
?>