Librement couplé : ouvrez les boîtes de dialogue Drupal Ajax à partir de React via Drupal Behavior

Les boîtes de dialogue sont un moyen simple et rapide d’afficher des informations supplémentaires sans recharger la page entière. Les boîtes de dialogue peuvent afficher uniquement du texte statique, n’importe quel nœud ou formulaire de votre page, une page de vues ou tout balisage personnalisé que vous les alimenterez.

Afin d’ouvrir un lien/nœud/page dans une fenêtre modale, vous pouvez ajouter la structure suivante au lien dans React :

class="use-ajax" data-dialog-type="modal"

En option, vous pouvez également ajouter data-dialog-options= »{« width »:810, « dialogClass »: « modal-react »}’ pour styliser le modal.

Et finalement, le lien ressemblera à ceci :

<a
  href="https://www.tothenew.com/admin/content"
  className="use-ajax"
  data-dialog-type="modal"
  data-dialog-options="{"width":810,"dialogClass": "modal-react"}'
>Dialog link</a>

Cliquez sur ce lien, et dans la plupart des cas, il ouvrira la boîte de dialogue.

Mais si dans le cas où la balise est rendue après quelques secondes de chargement de la page, dans une fenêtre contextuelle ou après un appel AJAX, cliquer sur le lien ne fera rien. Pour pallier à cela, nous allons utiliser des comportements drupal pour Ajaxifier les liens.

Drupal dispose d’un système de « comportements » pour fournir un moyen modulaire et amélioré d’attacher des fonctionnalités JavaScript pour placer des éléments sur une page. Ce comportement Drupal est l’objet en JavaScript que Drupal initialise après le chargement de la page et après chaque appel AJAX dans DOM.
Ce comportement drupal peut être appelé depuis React, voyons comment :

Étape 1 : Ajouter un comportement Drupal

Tout d’abord, nous allons créer un comportement Drupal et écrire le code pour Ajaxifier le lien qu’il contient. Pour cela, créez un fichier js/personnalisé.js et ajoutez le code suivant :

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.custom_js = {
    ajaxifyLinks: function () {
      jQuery('.use-ajax:not(.ajax-processed)').addClass('ajax-processed').each(function () {
        var ajaxSettings = {
          url: jQuery(this).attr('href'),
          element: this
        };
        Drupal.attachBehaviors(this, ajaxSettings);
      });
    },
    attach: function (context, settings) {
      //Some JS Code
    }
  }
})(jQuery, Drupal, drupalSettings);

Puisque nous obtenons du nouveau contenu après le chargement de la page, une fois le nouveau contenu chargé, nous appelons Drupal.attachBehaviors() pour rattacher tous les effets javascript à ce contenu nouvellement chargé.

Étape 2 : Mettre à jour nos bibliothèques

Ajouter custom.js avant attacher le fichier de bundle de réaction. C’est pour assurer notre fonction de comportement drupal ajaxifyLiens est disponible lorsque react est chargé.

react-lib:
  version: 1.x
  js:
    js/custom.js: {}
    js/react-app/dist/app.bundle.js: { minified: true }

Étape 3 : Appeler le comportement Drupal à partir de React

Drupal.comportements est une variable globale qui peut être utilisée directement dans l’application React. custom_js est le nom du comportement que nous avons créé dans le personnalisé.js dossier, et ajaxifyLiens est une fonction dans ce fichier.

Drupal.behaviors.custom_js.ajaxifyLinks();

Appelez ceci après le chargement du nouveau contenu, comme dans l’exemple ci-dessous, le lien sera rendu après 2 secondes, et le comportement Drupal sera appelé après cela.

import React, { useState, useEffect } from "react";

const App = () => {
  const [timer, setTimer] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setTimer(true);
    }, 2000);
  }, [])

  useEffect(() => {
    Drupal.behaviors.custom_js.ajaxifyLinks();
  }, [timer]);

  return (
    <>
      {timer && <a
        href="https://www.tothenew.com/admin/content"
        className="use-ajax"
        data-dialog-type="modal"
        data-dialog-options="{"width":810,"dialogClass": "modal-react"}"
      >Dialog link</a>}
    </>
  )
}
export default App;

Lire la suite: Librement couplé : transmettre les données à l’application React via drupalSettings

Cliquez sur le lien maintenant, et il ouvrira la boîte de dialogue.

Facultatif : transmission de paramètres

Les paramètres peuvent également être passés de réagir aux comportements drupalcomme par exemple si nous devons passer la classe parent de réagir, nous pouvons le faire :

Drupal.behaviors.custom_js.ajaxifyLinks('.parent-class');

Et peut y accéder dans les comportements Drupal comme suit :

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.custom_js = {
    ajaxifyLinks: function (parentClass) {
      console.log(parentClass);
    },
    attach: function (context, settings) {
      //Some JS Code
    }
  }
})(jQuery, Drupal, drupalSettings);

Note: Si des modifications ne sont pas reflétées lors de l’actualisation de la page, essayez de vider le navigateur ou le cache Drupal ou en décochant « Agréger les fichiers JavaScript » à partir de /admin/config/development/performance.

Plus sur Boîtes de dialogue Ajax.

TROUVÉ CELA UTILE ? PARTAGEZ-LE