fixing focus problem on chapterindex
This commit is contained in:
parent
1d643420e8
commit
a7b4327ee3
|
|
@ -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; */
|
||||||
|
|
|
||||||
17
js/app.js
17
js/app.js
|
|
@ -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");
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user