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

Compare commits

base: Antoine:cd9959dfc6c9d2350e14944beea47a8aa97db5a5
Branches Tags
Antoine:main
...
compare: Antoine:b0c67d96f80bcbb5f945de75cc6486a89f1c5887
Branches Tags
Antoine:main

8 Commits
cd9959dfc6 ... b0c67d96f8

Author SHA1 Message Date
Nonimart
b0c67d96f8 FEATURE Introducing component
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-06-24 14:49:39 +02:00
Nonimart
7ce9e9fc7c REFACTOR Handling a dedicated template part for index panel 2025-06-24 14:49:27 +02:00
Nonimart
2d272daefb REFACTOR Moving the injectIdToNativeTitles to dedicated sommaire file 2025-06-24 14:49:17 +02:00
Nonimart
27e2506d4c UPLOAD icons 2025-06-24 14:48:37 +02:00
Nonimart
158ee98135 STYLE Refining index panel styles 2025-06-24 14:48:25 +02:00
Nonimart
5c8409c10b REFACTOR Handling a dedicated template part for index panel 2025-06-24 14:48:12 +02:00
Nonimart
15619b08a2 REFACTOR Showing top nav 2025-06-24 14:47:52 +02:00
Nonimart
b18779d11a REFACTOR implementing a dedicated cite component 2025-06-24 14:46:29 +02:00
9 changed files with 139 additions and 98 deletions
Show Stats Expand all files Collapse all files

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

@ -7,11 +7,18 @@
@apply flex gap-4 border-b border-gray-300 mb-8;
button {
@apply pb-3 text-carhop-gray opacity-60 relative;
@apply pb-6 text-carhop-gray opacity-60 relative;
box-sizing: border-box;
@apply flex items-center gap-2;
.icon {
@apply w-7 h-7 block;
}
}
button[aria-selected='true'] {
@apply text-primary opacity-100;
.icon {
@apply filter-primary;
}
&:after {
@apply bg-primary;
content: '';

14
resources/img/icons/carhop-notes.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="notes" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.22 35.69">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<circle class="cls-1" cx="18.11" cy="17.81" r="16.72"/>
<rect class="cls-1" x="14.06" y="14.09" width="8.08" height="8.08" transform="translate(-7.51 18.11) rotate(-45)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 435 B

16
resources/img/icons/carhop-resume.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="resume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.12 36.42">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<line class="cls-1" x1="34.12" y1="12.47" x2="9.41" y2="12.47"/>
<line class="cls-1" x1="34.12" y1="35.42" x2="9.41" y2="35.42"/>
<line class="cls-1" x1="24.62" y1="1" y2="1"/>
<line class="cls-1" x1="27.24" y1="23.95" x2="9.41" y2="23.95"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 510 B

49
resources/js/singles/cite-button.ts Normal file
View File

@ -0,0 +1,49 @@
export default function handleCiteButton(): void {
const citeButton: HTMLElement | null = document.querySelector('.socials-buttons__button--cite');
const citeReference: HTMLElement | null = document.querySelector('#cite-reference');
if (!citeButton || !citeReference) return;
if (!window.isSecureContext) {
citeButton.setAttribute('disabled', 'true');
citeButton.setAttribute(
'title',
'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
);
}
citeButton.addEventListener('click', () => {
const textToCopy = citeReference.textContent;
if (!textToCopy) return;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard
.writeText(textToCopy)
.then(() => {
const notyf = new Notyf({
duration: 4000,
ripple: false,
dismissible: true,
types: [
{
type: 'success',
icon: {
className: 'notyf__icon--success',
tagName: 'i',
},
},
],
position: {
x: 'right',
y: 'top',
},
});
notyf.success(
'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
);
})
.catch((err) => {
console.error('Failed to copy text: ', err);
});
}
});
}

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

@ -1,5 +1,7 @@
import handleIndexPanel from './index-panel';
import handleFootnoteFormat from './footnote-format';
import handleCiteButton from './cite-button';
import { injectIdToNativeTitles } from './sommaire';
export default function singles(): void {
const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@ -12,67 +14,3 @@ export default function singles(): void {
handleFootnoteFormat();
handleCiteButton();
}
function handleCiteButton(): void {
const citeButton: HTMLElement | null = document.querySelector('.socials-buttons__button--cite');
const citeReference: HTMLElement | null = document.querySelector('#cite-reference');
if (!citeButton || !citeReference) return;
if (!window.isSecureContext) {
citeButton.setAttribute('disabled', 'true');
citeButton.setAttribute(
'title',
'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
);
}
citeButton.addEventListener('click', () => {
const textToCopy = citeReference.textContent;
if (!textToCopy) return;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard
.writeText(textToCopy)
.then(() => {
const notyf = new Notyf({
duration: 4000,
ripple: false,
dismissible: true,
types: [
{
type: 'success',
icon: {
className: 'notyf__icon--success',
tagName: 'i',
},
},
],
position: {
x: 'right',
y: 'top',
},
});
notyf.success(
'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
);
})
.catch((err) => {
console.error('Failed to copy text: ', err);
});
}
});
}
function injectIdToNativeTitles(): void {
const titles = document.querySelectorAll('.content-area h2, .content-area h3');
titles.forEach((title) => {
const titleText = title.textContent || '';
const slug = titleText
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(/\s+/g, '-')
.replace(/[^\w-]+/g, '');
title.setAttribute('id', slug);
});
}

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

@ -4,3 +4,16 @@ export function handleSmoothScrollToTitle(targetId: string): void {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
export function injectIdToNativeTitles(): void {
const titles = document.querySelectorAll('.content-area h2, .content-area h3');
titles.forEach((title) => {
const titleText = title.textContent || '';
const slug = titleText
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(/\s+/g, '-')
.replace(/[^\w-]+/g, '');
title.setAttribute('id', slug);
});
}

0
resources/js/singles/top-nav-toolbar.ts Normal file
View File

36
single-articles.php
View File

@ -5,7 +5,7 @@
<?php get_template_part('template-parts/post-header'); ?>
<div class="content-wrapper">
<!-- <div class="top-toolbar">
<div class="top-toolbar">
<div role="tablist" aria-labelledby="tablist-1" class="tablist">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
<span class="focus">Article</span>
@ -23,43 +23,13 @@
<span class="focus">Informations</span>
</button>
</div>
</div> -->
</div>
<aside class="sidebar">
<div class="search-field">
<input type="text" placeholder="Rechercher">
</div>
<div class="index-panel">
<div class="index-panel__header">
<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
Résumé
</button>
<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index">
Notes de bas de page
</button>
</div>
<div class="index-panel__content">
<ul data-index="sommaire" class="sommaire-index" aria-hidden="false">
<?php
$sommaire = build_sommaire_from_content(get_the_ID());
foreach ($sommaire as $chapter) {
echo '<li><a href="#' . $chapter['anchor'] . '">' . $chapter['title'] . '</a></li>';
}
?>
</ul>
<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
<?php
$footnotes = build_footnotes_index_from_content(get_the_content());
?>
<?php foreach ($footnotes as $footnote) : ?>
<li><a href="#footnote-<?php echo $footnote['anchorID']; ?>" class="footnote-reference-item"><?php echo $footnote['content']; ?></a></li>
<?php endforeach; ?>
</div>
</div>
<?php get_template_part('template-parts/articles/index-panel'); ?>
</aside>
<div class="content-area">

34
template-parts/articles/index-panel.php Normal file
View File

@ -0,0 +1,34 @@
<?php ?>
<div class="index-panel">
<div class="index-panel__header">
<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
Résumé
</button>
<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index">
<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
Notes de bas de page
</button>
</div>
<div class="index-panel__content">
<ul data-index="sommaire" class="sommaire-index" aria-hidden="false">
<?php
$sommaire = build_sommaire_from_content(get_the_ID());
foreach ($sommaire as $chapter) {
echo '<li><a href="#' . $chapter['anchor'] . '">' . $chapter['title'] . '</a></li>';
}
?>
</ul>
<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
<?php
$footnotes = build_footnotes_index_from_content(get_the_content());
?>
<?php foreach ($footnotes as $footnote) : ?>
<li><a href="#footnote-<?php echo $footnote['anchorID']; ?>" class="footnote-reference-item"><?php echo $footnote['content']; ?></a></li>
<?php endforeach; ?>
</div>
</div>