Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introducing scroller-top component

Browse Source
This commit is contained in:
Antoine M 2023-12-21 10:02:32 +01:00
parent cf9022e090
commit 5a2b56226a
4 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/img/graphic-assets/arrow-scroll-top.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.548" height="15.652" viewBox="0 0 11.548 15.652">
<g id="Groupe_3519" data-name="Groupe 3519" transform="translate(1.414 14.652) rotate(-90)">
<line id="Ligne_6" data-name="Ligne 6" x2="13.652" transform="translate(0 4.36)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Tracé_162" data-name="Tracé 162" d="M104.818,78.861l4.36-4.36-4.36-4.36" transform="translate(-95.526 -70.142)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 606 B

2
resources/js/app.js
View File

@ -6,11 +6,13 @@ import taxonomyThematiqueFaqInit from './taxonomy-thematique-(faq)';
import archiveNewsInit from './archive-template-news'; import archiveNewsInit from './archive-template-news';
import filterPublicationsInit from './archive-template-publications'; import filterPublicationsInit from './archive-template-publications';
import accordeonInit from './accordeon'; import accordeonInit from './accordeon';
import scrollerTopInit from './scrollerTop';
// window.addEventListener('load', function () {}); // window.addEventListener('load', function () {});
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
menuInit(); menuInit();
SchemaBulletPointsInit(); SchemaBulletPointsInit();
scrollerTopInit();
singleConseil(); singleConseil();
editorInit(); editorInit();
accordeonInit(); accordeonInit();

26
resources/js/scrollerTop.js Normal file
View File

@ -0,0 +1,26 @@
function handleScrollButonDisplay() {
const scrollerTop = document.querySelector('#scroller-top');
if (
document.body.scrollTop > window.innerHeight / 2 ||
document.documentElement.scrollTop > window.innerHeight / 2
) {
scrollerTop.removeAttribute('aria-hidden');
} else {
scrollerTop.setAttribute('aria-hidden', 'true');
}
}
function scrollTop() {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
}
export default function scrollerTopInit() {
const scrollerTop = document.querySelector('#scroller-top');
if (!scrollerTop) return;
window.addEventListener('scroll', handleScrollButonDisplay);
scrollerTop.addEventListener('click', scrollTop);
}

6
template-components/header/page-scroller.php Normal file
View File

@ -0,0 +1,6 @@
<?php
?>
<div id="scroller-top" aria-hidden="true">
<img class="arrow-icon" src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/arrow-scroll-top.svg' ?>" alt=''>
</div>