Les Javascripts ciblant le pied de page ne fonctionnent pas après les transitions de page

Dev
1

J’ai écrit du CSS pour rendre le menu du pied de page adaptatif. Lorsque nous passons aux appareils mobiles, les menus du pied de page sont conçus de manière similaire au menu hamburger. J’ai donc ajouté une fonction de clic dans la section Modifier le CSS/HTML >> /head pour basculer l’affichage des menus en vue mobile.

ScriptIssue
ScriptIssue820×283 5.72 KB

Ici, la fonction de clic fonctionnait parfaitement sur la page d’accueil de Discourse. Cependant, sur certaines autres pages comme Résumé, Compte du forum, etc., le script était bloqué. Je ne peux donc pas voir les sous-menus. Je peux également voir le script dans le code source du navigateur.

Pourquoi l’exécution des scripts personnalisés est-elle bloquée sur certaines pages de Discourse ? Quelle est la solution permanente à ce problème ?

2

Discourse est une application monopage. Ainsi, les scripts que vous ajoutez dans la balise <head> ne s’exécutent qu’une seule fois lors du chargement initial de la page, sauf si vous utilisez les bons crochets. Vous devrez probablement ajuster votre code pour ajouter un écouteur d’événement à la place.

Pouvez-vous partager votre code ?

3 « J'aime »
3

Voici mon script,

ScriptTagHead
ScriptTagHead1117×450 20.8 KB

4

Il existe probablement plusieurs façons de résoudre ce problème, mais essayons la méthode « appropriée » en utilisant les bons hooks de personnalisation.

Lorsque vous ajoutez du HTML dans la section pied de page d’un thème, Discourse effectue un traitement spécifique pour éviter que le contenu ne bouge lors des transitions entre les pages ou lorsque de nouveaux éléments sont ajoutés via le défilement infini.

Ce contenu est ajouté sous forme de composant custom-html ici.

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

Si vous examinez le code du composant, vous verrez qu’il déclenche un événement d’application une fois rendu.

discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

C’est le hook que vous devez utiliser.

Comment l’utiliser ?
Il existe une méthode dans l’API des plugins qui vous permet d’exécuter du code lorsqu’un événement d’application spécifique est déclenché.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519

Puisque nous connaissons déjà le nom de l’événement, nous pouvons l’utiliser comme suit :

api.onAppEvent("inserted-custom-html:footer", () => {
  // effectuez vos actions ici
});

Comme il s’agit d’une méthode de l’API des plugins, vous devez modifier le type de votre balise script en text/discourse-plugin comme ceci :

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  // effectuez vos actions ici
});
</script>

Le fragment ci-dessus sera exécuté à chaque fois que le pied de page est rendu. Vous pouvez donc maintenant faire quelque chose comme ceci :

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  $(".footer-div #footerNavDiv").click(function () {
    console.log("événement de clic capturé");
    // effectuez vos actions ici pour l'événement de clic
  });
});
</script>

Vous pouvez en savoir plus sur l’API des plugins ici.

5 « J'aime »
5

Super, merci :slight_smile:

1 « J'aime »