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

Compare commits

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

No commits in common. "b0c67d96f80bcbb5f945de75cc6486a89f1c5887" and "cd9959dfc6c9d2350e14944beea47a8aa97db5a5" have entirely different histories.
b0c67d96f8 ... cd9959dfc6

9 changed files with 98 additions and 139 deletions
Show Stats Expand all files Collapse all files

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

@ -7,18 +7,11 @@
@apply flex gap-4 border-b border-gray-300 mb-8;
button {
@apply pb-6 text-carhop-gray opacity-60 relative;
@apply pb-3 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
View File

@ -1,14 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 435 B

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

@ -1,16 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 510 B

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

@ -1,49 +0,0 @@
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,7 +1,5 @@
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');
@ -14,3 +12,67 @@ 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,16 +4,3 @@ 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
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,13 +23,43 @@
<span class="focus">Informations</span>
</button>
</div>
</div>
</div> -->
<aside class="sidebar">
<div class="search-field">
<input type="text" placeholder="Rechercher">
</div>
<?php get_template_part('template-parts/articles/index-panel'); ?>
<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>
</aside>
<div class="content-area">

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

@ -1,34 +0,0 @@
<?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>