Forum : Barre de completion JS

Les bases Algorithmique

Bonjour !
Je cherche à pouvoir modifier l'avancement d'une barre de completion avec un clique de souris en JS (voir le faire glisser à la souris).
Voici le code de ma barre :
Du html :

Du css :

.bar-content{ width: 100%; height: 7px; border: 1px rgb(0, 140, 255) solid; } .bar-progression{ height: 100%; background-color:rgb(0, 140, 255); }

Plus bête on sait pas faire.
Je voudrais que quand je clique sur un endroit de "bar-content", "bar-progression" se redimentionne pour venir se mettre à l'endroit où j'ai cliqué. (en bonus, si je clique/glisse sur "bar-content", que "bar-progression" suive le mouvement).

Alors, dit comme çà, la fonctionnalité à l'air toute cruche, mais, soit je m'y prends pas comme il faut, soit va falloir faire une usine à gaz

J'aimerais bien si quelqu'un pouvait déjà m'orienter sur la méthodologie d'une telle feature : comment s'y prendre, par où commencer, la barre est-elle mal conçue dès le départ, p-ê trop simple ? Des jours que je m'y casse les dents. J'étudie JS depuis 2 mois (pour info), peut-être n'est-ce pas de mon niveau... Mais il faut bien progresser, non ? ;-)

Jusqu'à présent j'ai mon eventListener qui capte quand la souris passe, et s'en va de "bar-content" et qui console.log('bonjour') et ('au revoir'), mais c'est tout.

Merci !

****Bonjour,

Il va falloir que tu gères un clic sur ta div (barre de progression) à l'aide de l'event listener: https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
Ensuite tu devrais pouvoir récupérer la position grâce à event.target.getBoundingClientRect()

A partir de là tu auras plus qu'à modifier la taille de ta barre en faisant un:

const width = /* ta width en % */ document.querySelector('.bar-progression').style.width = `${width}%`

Le code suivant n'est pas du tout testé, mais devrait donner un axe à suivre:

const barEl = document.querySelector('.bar-progression') barEl.addEventListener('click', e => { const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; //x position within the element. const barTotalWidth = rect.width const percent = 100 * (x / barTotalWidth) barEl.style.width = `${percent}%` })

Bonjour, Et merci Pandazaur (mangeur de panda ? !)

Alors j'ai bien avancé sur mon pb.
Voici le code que j'ai fait :

resizeContentBarStart : function(event){ //console.log(event.currentTarget); progressBarContent = event.currentTarget // 1- trouver le point de départ en X de la content bar : //* getBoundingClientRect() est une fonction JS qui va nous permettre de retrouver les //* propriétés de notre élément (positionX, y, largeur, heuteur...) const progressBarContentPosition = progressBarContent.getBoundingClientRect(); // 2- trouver la posistion de la souris: çà s'appelle event.x (ou event.clientX) // 3- trouver la barre de progression (bar-progress) progressBarElement = progressBarContent.querySelector('.bar-progression'); // 4- Calculer la nouvelle longueur de la div (on fait juste un produit en croix qu'on arrondis en 0.5) const newProgression = Math.round((((event.x - progressBarContentPosition.x) / progressBarContentPosition.width) * 100) * 2)/2 ; // 5- envoyer la nouvelle valeur à la progression-bar progressBarElement.style.width = newProgression + "%"; //console.log(newProgression); },

Et donc celà fonctionne (et j'en suis ravi !) Il se lance sur un mousedown et c'est donc bien !
Je m'attaque au bonus et là, je coince encore un peu j'avoue :

Comment faire un event Listener qui, au mousedown traque la position X de la souris et redimentionne la progress-bar en fonction, même si la souris sort du event.target, et ce, tant qu'on a pas d'évenement mouseup ? faudrait faire un while(1) ? J'ai essayé çà marche moyen... Un mousemove ? Il ne fonctionnera pas hors du target...
J'avoue que je sèche un peu... Des pistes ?
Merci !

Tu peux essayer de faire un event listener sur le mousedown qui crée un event listener mousemove et supprimer cet event listener une fois que tu as un mouseup.

function onMouseMove(e) { // Ta logique de récupération de la position, etc ... console.log({ e }) // affiche l'event } element.addEventListener('mousedown', (e) => { element.addEventListener('mousemove', onMouseMove) }) element.addEventListener('mouseup', (e) => { element.removeEventListener('mousemove', onMouseMove) })

Pas mal,
Je savais pas qu'on pouvais supprimer des eventListener !
Je vais essayer çà et je fais un retour.
Merci beaucoup !

Barre de completion JS

4 réponses