Bonjour,
Je tente d’exécuter une fonction personnalisée lorsqu’un contenu supplémentaire est ajouté à la page (pour les longs messages) en utilisant l’API suivante :
api.onAppEvent('post-stream:refresh', () => {
console.log('Nouveau contenu ajouté à la page...');
});
… cependant, cela ne fonctionne pas. Qu’est-ce que je fais de travers et quelle serait la bonne méthode pour le faire ?
Pouvez-vous nous en dire un peu plus sur ce que vous essayez d’accomplir ? Il existe plusieurs API différentes qui vous permettent de modifier le contenu des publications lors de leur rendu. La plus courante est api.decorateCookedElement.
En fait, je viens de réaliser que je dois exécuter la fonction sur le contenu des publications ajouté au DOM.
Je recrée pratiquement l’API addPosterIcon, car la mienne doit contenir du HTML personnalisé. J’ai déjà tout fait fonctionner, sauf lors du défilement d’une longue page.
J’essaie d’ajouter une icône à côté du nom d’utilisateur de l’afficheur, ce qui déclenche un événement personnalisé. Le seul problème est qu’elle n’est pas encore ajoutée lors des modifications du DOM.
Le problème avec cette méthode, c’est qu’elle déclenche plusieurs objets « cooked » à la fois et privilégie donc un identifiant (pour éviter les fuites de mémoire), ce dont je n’ai pas besoin. Ce qui me conviendrait, c’est qu’un seul événement soit déclenché après que tous les éléments aient été « cookés ». J’ai une idée de la façon dont cela pourrait être réalisé, mais existe-t-il une méthode appropriée pour le faire en utilisant l’API Discourse ?
L’API decorateCookedElement sera déclenchée une fois pour chaque message rendu. Le callback recevra l’élément DOM contenant le contenu du message. L’idée est que vous ne modifiez que l’élément qui vous a été transmis, et rien d’autre sur la page.
Mais comme vous souhaitez apporter des modifications aux métadonnées entourant le contenu du message, decorateCookedElement n’est probablement pas la bonne option.
Dans ce cas, la meilleure approche est probablement d’examiner comment l’API addPosterIcon est implémentée :
En coulisses, il s’agit d’un appel à la fonction api.decorateWidget. Vous pouvez effectuer cet appel vous-même, puis le faire rendre sous forme de HTML brut. Pour plus d’informations sur l’API decorateWidget, vous pouvez consulter https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6.
La solution pour moi afin que decorateCookedElement ne s’exécute qu’une seule fois pour un type spécifique, et lorsque le dernier contenu cuit est prêt, était aussi simple que cela :
<script type="text/discourse-plugin" version="0.11">
api.decorateCookedElement((callback, opts) => {
if(opts?.widget?.dirtyKeys?.name === 'post-stream') {
if(this?.cooking) clearTimeout(this.cooking);
this.cooking = setTimeout(() => {
console.log('Toutes les cuissons sont terminées, mise à jour du nouveau contenu..');
});
}
});
</script>
Veuillez me corriger s’il y a une erreur ou des pièges dans ce code.
Désolé d’ajouter une question à ce vieux sujet.
Nous utilisions le code mentionné ci-dessus (decorateCookedElement) pour appeler une fonction de script courte lorsque des publications supplémentaires dans un sujet sont rendues.
Avec le flux de publications Glimmer, ce codage ne fonctionne pas correctement. Nous obtenons le message suivant dans la console du développeur :
L’accès à helper.widget n’est pas pris en charge lors de l’utilisation de api.decorateCookedElement avec le flux de publications Glimmer et peut produire des résultats inattendus.
Par conséquent, la fonction de script n’est pas exécutée.
Existe-t-il une fonctionnalité correspondante que nous pouvons utiliser pour le flux de publications Glimmer ?
Merci d’avance pour toute information permettant d’ajuster notre codage.