Dans ce tutoriel je vous propose de découvrir comment créer un système de redimensionnement en JavaScript. L'objectif est de permettre à l'utilisateur de redimensionner la sidebar.
Le style
Pour notre structure nous allons utiliser une grille avec une variable CSS pour piloter la largeur de la sidebar.
<style>
body,
html {
--sidebar: 300px;
}
.layout {
display: grid;
grid-template-columns: var(--sidebar) 1fr;
}
</style>
<div class="layout">
<aside class="sidebar">
<!-- Cet élément servira -->
<div class="resizer"></div>
</aside>
<main class="main">
<!-- Le contenu ici -->
</main>
</div>
Pour contrôler la sidebar, on va créer un élément qui servira de zone sélectionnable (on rendra cette zone volontairement plus large afin de faciliter la sélection)
.resizer {
position: absolute;
top: 0;
right: -10px;
height: 100%;
width: 20px;
cursor: ew-resize;
touch-action: none;
}
On utilisera ensuite les pseudos élément pour définir l'aspect visuel de notre curseur de redimensionnement.
.resizer::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: coral;
transform: scale(0);
opacity: 0;
transition: 0.3s;
}
.resizer:hover::after {
opacity: 1;
transform: scaleX(0.2);
}
Souris & Doigts
Afin de gérer, les différents périphériques nous allons utiliser les évènements de type PointerEvent qui offre une API commune à tous les dispositifs de pointage.
// Lorsque l'on clique sur l'élément
element.addEventListener("pointerdown", onPointerDown);
/**
* On commence à écouter le déplacement du curseur
*
* @param {PointerEvent} e
**/
function onPointerDown(e) {
e.preventDefault();
document.addEventListener("pointermove", onPointerMove);
document.addEventListener("pointerup", onPointerUp, { once: true });
}
/**
* Au déplacement du curseur, on met à jour la largeur de la sidebar
*
* @param {PointerEvent} e
**/
function onPointerMove(e) {
e.preventDefault();
const sidebarWidth = e.pageX + "px";
document.body.style.setProperty("--sidebar", sidebarWidth);
}
/**
* Lorsque le curseur est relaché, on arrête de suivre le déplacement du curseur
*
* @param {PointerEvent} e
**/
function onPointerUp(e) {
document.removeEventListener("pointermove", onPointerMove);
}
Limiter la largeur
Pour limiter la largeur de la sidebar on va se reposer sur le CSS et la fonction CSS [clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()) qui permettra en prime de prendre en compte la taille de l'écran.
.layout {
--sidebarClamped: clamp(300px, var(--sidebar), 50vw);
grid-template-columns: var(--sidebarClamped) 1fr;
}
