Stimulus avancé : options d'action personnalisées

Cet article a été initialement publié sur Rails Designer

---

Stimulus vous permet d'enregistrer vos propres options d'action personnalisées. Ce sont les éléments que vous pouvez ajouter à une action, comme keypress->input#validate:prevent (comme indiqué dans l'article sur les fonctionnalités de stimulation que vous ne connaissiez pas). :prevent est une option d'action et empêchera l'événement par défaut. Les autres options disponibles sont : stop et :self.

Vous pouvez également créer le vôtre ! Vous permettant de tirer encore plus parti de Stimulus (qui aurait pensé qu'un cadre modeste avait de nombreuses fonctionnalités ?!).

Je souhaite énumérer quelques suggestions pour vous aider à avoir une idée de ce qu'ils peuvent faire et vous inspirer à créer les vôtres.

Les bases

Vous pouvez créer vos propres options d'action avec la méthode Application.registerActionOption. La méthode renverrait alors soit true, soit false, en fonction de la logique que vous avez ajoutée.

Les bases ressemblent à ceci :

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

Lorsqu'il renvoie true, l'action à laquelle elle est ajoutée s'exécutera. Utilisé comme ceci : click->controller#action:fire.

Maintenant que les bases sont claires, regardons quelques exemples sur la façon dont vous pourriez l'utiliser.

QuandDehors

Une action courante consiste à cliquer à l'extérieur d'un élément pour le masquer, par exemple avec des modaux ou des listes déroulantes. La logique serait quelque chose comme ceci :

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Et votre contrôleur Stimulus pourrait ressembler à ceci :

// app/javascript/controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

Puis dans votre HTML :

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Ce n'est que lorsque vous cliquez en dehors du ul avec data-dropdown-target="menu" que la cible sera masquée. Avez-vous remarqué l'option d'action :stop ? Je l'ai exploré dans l'article sur les fonctionnalités de stimulation que vous (ne connaissiez pas).

Étranglé

Supposons maintenant que votre dropdown_controller.js dispose d'une méthode toggle et que vous souhaitez uniquement que vos utilisateurs la basculent toutes les 1 000 ms pour une raison quelconque (sans jugement !).

const throttles = new WeakMap();

application.registerActionOption("throttled", ({ element }, { wait = 1000 } = {}) => {
  if (!throttless.has(element)) {
    throttles.set(element, 0);
  }

  const now = Date.now();
  const lastRun = throttles.get(element);

  if (now - lastRun >= wait) {
    throttles.set(element, now);

    return true;
  }

  return false;
});

Cela ne retournera vrai qu'une fois toutes les 1 000 ms.

? Carte faible ? WTF ?! Je travaille sur un livre donc ça fait moins peur ! Précommandez JavaScript pour les développeurs Rails.

Étendons le dropdown_controller.js avec une méthode toggle :

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  toggle() {
    this.menuTarget.toggleAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

Utilisez-le comme ceci :

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Vous voyez comment il est possible d'empiler les options d'action ? L'arrêt et l'étranglement sont utilisés.

AvecMetakey

Un autre exemple pourrait être lorsque vous souhaitez ouvrir la liste déroulante uniquement lorsque la touche meta () ou ctrl est enfoncée

application.registerActionOption("withMetaKey", ({ event }) => {
  return event.metaKey;
});

Utilisez-le dans votre HTML comme ceci :

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled:withMetaKey">Show</button>

  <ul hidden data-clicker-target="menu" data-action="click@window->dropdown#hide:whenOutside">
    <li>Menu Item</li>
  </ul>
</div>

La liste déroulante ne s'affichera que lorsque vous appuierez également sur cmd/ctrl en cliquant.

Un de plus ? Un de plus !

AvecConfirmer

Voulez-vous afficher une boîte de dialogue de confirmation avant d'afficher la liste déroulante ?

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

Et dans votre HTML :

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Et toutes ces actions personnalisées empilées fonctionneront ! Pour l'exemple donné, ce n'est pas une utilisation pratique, mais il montre tout ce que vous pouvez faire avec eux.

Comme vous l'avez remarqué, j'aime nommer les options d'action personnalisées afin qu'elles soient faciles à comprendre lors de la lecture dans l'action :

• cliquez sur @window->dropdown#hide:whenOutside;
• cliquez->dropdown#show:withMetakey.

Préférence personnelle. Vous pouvez bien sûr les nommer comme vous le souhaitez.

Pour beaucoup de ces exemples, vous devrez normalement créer des actions distinctes, mais pas avec des options d'action personnalisées. Une fois que vous les aurez vus utilisés, vous découvrirez de nombreux cas d'utilisation.

? J'ai rassemblé ces options d'action personnalisées dans un petit package bien rangé appelé stimulus-fx ; assurez-vous de le vérifier! Contribuez si vous le trouvez utile !

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!