fixing focus problem on chapterindex

This commit is contained in:
Antoine M 2023-10-03 10:38:12 +02:00
parent 1d643420e8
commit a7b4327ee3
5 changed files with 17 additions and 36 deletions

View File

@ -4641,10 +4641,13 @@ article > *:not(.entry-content, .chapter-header-block),
} }
.homegrade-blocks-vocabulaire-summary__title, .homegrade-blocks-vocabulaire-summary__title,
.homegrade-blocks-vocabulaire-summary h3 { .homegrade-blocks-vocabulaire-summary h2 {
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
font-size: 1.875rem; font-size: 1.875rem;
line-height: 2.25rem; line-height: 2.25rem;
font-weight: 700;
--tw-text-opacity: 1 !important; --tw-text-opacity: 1 !important;
color: rgb(0 0 0 / var(--tw-text-opacity)) !important; color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
/* color: red !important; */ /* color: red !important; */

View File

@ -247,28 +247,15 @@
return; return;
let chapterIndex = document.querySelector(".chapter_index"); let chapterIndex = document.querySelector(".chapter_index");
let questionBlocks = document.querySelectorAll(".questions-container-block"); let questionBlocks = document.querySelectorAll(".questions-container-block");
function handleLinksBehavior() {
let chapterLinks2 = document.querySelectorAll(".chapter_index__link");
chapterLinks2.forEach((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
let target = e.target.getAttribute("href");
let targetBlock = document.querySelector(target);
targetBlock.scrollIntoView({
behavior: "smooth"
});
targetBlock.focus();
});
});
}
function handleLinkScrollToTarget(e) { function handleLinkScrollToTarget(e) {
e.preventDefault(); e.preventDefault();
let target = e.target.getAttribute("href"); let target = e.target.getAttribute("href");
let targetBlock = document.querySelector(target); let targetBlock = document.querySelector(target);
targetBlock.setAttribute("tabindex", "0");
targetBlock.scrollIntoView({ targetBlock.scrollIntoView({
behavior: "smooth" behavior: "smooth"
}); });
targetBlock.focus(); targetBlock.focus({ preventScroll: true });
} }
function handleChapterIndicatorPosition(targetPosition) { function handleChapterIndicatorPosition(targetPosition) {
let chapterIndicator = document.querySelector(".chapter_index__position-indicator"); let chapterIndicator = document.querySelector(".chapter_index__position-indicator");

View File

@ -5,8 +5,8 @@
} }
&__title, &__title,
h3 { h2 {
@apply text-3xl !text-black pb-6; @apply text-3xl !text-black pb-6 font-bold my-0;
/* color: red !important; */ /* color: red !important; */
} }
&__content { &__content {

View File

@ -5,31 +5,16 @@ export default function singleConseil() {
let chapterIndex = document.querySelector('.chapter_index'); let chapterIndex = document.querySelector('.chapter_index');
let questionBlocks = document.querySelectorAll('.questions-container-block'); let questionBlocks = document.querySelectorAll('.questions-container-block');
function handleLinksBehavior() {
let chapterLinks = document.querySelectorAll('.chapter_index__link');
chapterLinks.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
let target = e.target.getAttribute('href');
let targetBlock = document.querySelector(target);
targetBlock.scrollIntoView({
behavior: 'smooth',
});
targetBlock.focus();
});
});
}
function handleLinkScrollToTarget(e) { function handleLinkScrollToTarget(e) {
e.preventDefault(); e.preventDefault();
let target = e.target.getAttribute('href'); let target = e.target.getAttribute('href');
let targetBlock = document.querySelector(target); let targetBlock = document.querySelector(target);
targetBlock.setAttribute('tabindex', '0');
targetBlock.scrollIntoView({ targetBlock.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
}); });
targetBlock.focus(); targetBlock.focus({ preventScroll: true });
} }
function handleChapterIndicatorPosition(targetPosition) { function handleChapterIndicatorPosition(targetPosition) {
let chapterIndicator = document.querySelector('.chapter_index__position-indicator'); let chapterIndicator = document.querySelector('.chapter_index__position-indicator');

View File

@ -5,7 +5,6 @@ function build_chapter_index($blocks)
$chapterBlockIndex = []; $chapterBlockIndex = [];
foreach ($blocks as $key => $block) { foreach ($blocks as $key => $block) {
if ($block['blockName'] == 'homegrade-content-blocks/questions-container') { if ($block['blockName'] == 'homegrade-content-blocks/questions-container') {
// array_push($chapterBlockIndex, $block['attrs']['relatedPostId']);
array_push($chapterBlockIndex, [ array_push($chapterBlockIndex, [
'block-type' => $block['blockName'], 'block-type' => $block['blockName'],
'anchor' => '#questions-container-' . $block['attrs']['relatedPostId'], 'anchor' => '#questions-container-' . $block['attrs']['relatedPostId'],
@ -19,6 +18,13 @@ function build_chapter_index($blocks)
'title' => "Vocabulaire" . " " . get_the_terms(get_the_ID(), "thematiques")[0]->name, 'title' => "Vocabulaire" . " " . get_the_terms(get_the_ID(), "thematiques")[0]->name,
]); ]);
} }
if ($block['blockName'] == 'homegrade-content-blocks/plus-loin') {
array_push($chapterBlockIndex, [
'block-type' => $block['blockName'],
'anchor' => "#aller-plus-loin",
'title' => __("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel"),
]);
}
} }
return $chapterBlockIndex; return $chapterBlockIndex;
} }