Événements

L'élément <hyvor-talk-comments> émet plusieurs événements que vous pouvez écouter. Par exemple, lorsqu'un commentaire est publié, vous pouvez utiliser les événements pour l'enregistrer dans votre service d'analyse.

Les événements suivants sont émis :

  • loaded - déclenché lorsque l'embed est entièrement chargé
  • comment:published
  • comment:edited
  • comment:deleted
  • comment:voted
  • comment:flagged
  • reaction
  • rating
  • auth:login:clicked* - lorsque le bouton/lien de connexion est cliqué
  • profile:clicked* - lorsque le profil de l'utilisateur (nom ou photo de profil) est cliqué

Vous pouvez appeler preventDefault() sur l'événement pour empêcher l'action par défaut pour les événements marqués d'un *.

Écouter les événements

Utilisez addEventListener sur l'élément <hyvor-talk-comments>.

const comments = document.querySelector('hyvor-talk-comments');
comments.addEventListener('comment:published', function (e) {
	console.log('Comment ID: ' + e.detail.id);
});

Données des événements

Voici une définition TypeScript de tous les événements émis (nom_événement : données) :

interface CommentsEvents {
	loaded: null;
	'comment:published': RealComment;
	'comment:edited': Comment;
	'comment:deleted': Comment;
	'comment:voted': {
		comment: Comment;
		vote: 'up' | 'down' | null;
	};
	'comment:flagged': {
		comment: Comment;
	};
	reaction: {
		type: 'superb' | 'love' | 'wow' | 'sad' | 'laugh' | 'angry';
	};
	rating: {
		rating: number;
		count: number;
		average: number;
	};
	'auth:login:clicked': null;

	// when clicking on user's name or profile picture
	'profile:clicked': User;
}

Objet Comment

L'objet Comment peut être un HiddenComment (ex. : un commentaire supprimé qui a des réponses) ou un RealComment.

interface BaseComment {
	id: number;
	page_id: number;
	url: string;
	parent_id: number | null;
	depth: number;
	created_at: number;
}
interface HiddenComment extends BaseComment {
	is_hidden: true;
}
interface RealComment extends BaseComment {
	is_hidden: false;
	content: string;
	content_html: string;
	is_featured: boolean;
	is_loved: boolean;
	is_edited: boolean;
	upvotes: number;
	downvotes: number;
	user: User;
	status: 'published' | 'spam' | 'deleted' | 'pending';
}
type Comment = HiddenComment | RealComment;
Hyvor Talk Logo