Créez une navigation redimensionnable avec Stimulus

Cet article a été initialement publié sur Rails Designer : bibliothèque de composants d'interface utilisateur pour l'application Rails, construite avec ViewComponent, conçue avec Tailwind CSS et améliorée avec Hotwire.

Si votre application dispose d'une barre de navigation latérale, ce qui est assez courant, la plupart des écrans étant suffisamment larges pour être pris en charge de nos jours, la rendre redimensionnable pourrait être une fonctionnalité intéressante à ajouter. Donner cette personnalisation permet à vos utilisateurs de modifier l’écran en fonction de la tâche à accomplir. Peut-être qu'ils veulent se concentrer sur l'écriture de leur prochain gros morceau ou peut-être qu'ils divisent leur écran, ce qui rend la largeur par défaut un peu trop large.

Quelle que soit la raison, redimensionner la barre de navigation latérale (ou tout autre composant) est facile avec JavaScript et donc avec Stimulus. Allons droit au but. Définissons les bases en HTML :

<main data-controller="resizer" class="flex">
  <nav data-resizer-target="container" class="relative w-1/6">
    <!-- Imagine some nav items here -->
  </nav>

  <div class="w-5/6">
    <p>Content for your app here</p>
  </div>
</main>

Ci-dessus, HTML utilise les classes CSS Tailwind, mais ce n'est pas obligatoire pour cet exemple. Vous pouvez bien sûr le styliser comme bon vous semble.

Maintenant le contrôleur de stimulus. Comme vous l'avez remarqué ci-dessus, le handler (l'élément qui peut être glissé pour redimensionner) n'est pas ajouté dans le HTML, il sera plutôt injecté avec JS.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="resizer"
export default class extends Controller {
  static targets = ["container"];
  static values = {
    resizing: { type: Boolean, default: false },
    maxWidth: { type: Number, default: 360 } // in px
  };

  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);
  }

  // private

  get #handler() {
    return `
      <span
        data-action="mousedown->resizer#setup"
        class="absolute top-0 w-1 h-full bg-gray-200 -right-px cursor-col-resize hover:bg-gray-300"
      ></span>
    `
  }
}

Cela injectera le handler à côté de l'élément de navigation (position absolue). Il a également une action pour déclencher setup() lors de l'événement mousedown. Ajoutons-le.

export default class extends Controller {
  // …
  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);

    this.resize = this.#resize.bind(this);
    this.stop = this.#stop.bind(this);
  }

  setup() {
      this.resizingValue = true;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stop);
  }
  // …
}

Que se passe-t-il ici ? Pourquoi ne pas ajouter les #resize() et #stop() respectivement sur les événements mousemove et mouseup. Cela permet de garantir que cela fait référence à l'instance du contrôleur lorsque resize et stop sont appelés en tant qu'écouteurs d'événements, préservant ainsi l'accès aux propriétés et méthodes du contrôleur.

Ajoutons les fonctions privées #resize() et #stop().

export default class extends Controller {
  // …

  // private

  #resize(event) {
    if (!this.resizingValue) return;

    const width = event.clientX - this.containerTarget.offsetLeft;

    if (width <= this.maxWidthValue) {
      this.containerTarget.style.width = `${width}px`;
    } else {
      this.containerTarget.style.width = `${this.maxWidthValue}px`;
    }
  }

  #stop() {
    this.resizingValue = false;

    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stop);
  }

  // …
}

La fonction #resize() calcule la nouvelle largeur du conteneur en fonction de la position de la souris (event.clientX) et met à jour la largeur du conteneur, en s'assurant qu'elle ne dépasse pas la largeur maximale autorisée (définie dans les valeurs). La fonction #stop() arrête le processus de redimensionnement en définissant resizingValue sur false et en supprimant les écouteurs d'événements.

Si vous accédez à votre navigateur, vous pouvez désormais redimensionner le navigateur et ne pas le rendre plus large que la valeur définie comme maxWidth (360 px par défaut).

Génial ! ? C'est tout ce dont vous avez besoin pour redimensionner un élément de votre application à l'aide de Stimulus. À partir de là, vous pouvez améliorer en stockant la valeur dans les paramètres de l'utilisateur (par exemple via Redis) pour qu'elle soit la même dans tous les navigateurs ou en la stockant dans LocalStorage du navigateur pour la stocker pour cette session (Rails Designer vous aide en fournissant des utilitaires JS pour cela).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!