Would be possible to use this with custom emojis?
As we provide support from our community, it would be nice to add our logo before mentioning one of the staff
This component is kind of a super basic template on finding content in a post and appending something to it. There’s probably a way to grab existing emojis, but I don’t know it off the top of my head.
What would work is replacing the header.html file in the component with this, which would just append an image after a mention instead (that image could be a little logo).
<script type="text/discourse-plugin" version="0.8.18">
$.expr[":"].contains = $.expr.createPseudo(function(arg) { // make case insensitive
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
let emoji = {};
settings.username_emoji.split('|').forEach(pair => {
let split = pair.split(",");
emoji[split[0].toLowerCase()] = split[1];
});
$.each(emoji, function (key, value){
api.decorateCooked($elem => $elem.find("a.mention:contains(" + key + ")").append("<img src='" + value + "'>").addClass("with-image"));
});
</script>
Deux choses me viennent à l’esprit, je ne sais pas si c’est actuellement possible mais j’adorerais l’avoir :
La possibilité de l’utiliser pour les mentions de groupe ? Je viens de l’essayer pour mon groupe d’administrateurs mais cela ne semble pas fonctionner.
La possibilité pour l’utilisateur de choisir son propre emoji dans ses préférences et il s’afficherait alors chaque fois qu’il serait mentionné. Ce pourrait même être un avantage à accorder aux utilisateurs les plus engagés ayant des niveaux de confiance plus élevés.
Modifier :
La possibilité de l’utiliser pour les mentions de groupe ? Je viens de l’essayer pour mon groupe d’administrateurs mais cela ne semble pas fonctionner.
J’ai trouvé comment faire mais je ne sais pas comment faire une demande de PR, donc pour l’instant, je vais juste poster le code ci-dessous :
common.scss ajoute .mention-group:after et .mention-group:before
Je voulais la possibilité d’utiliser également des SVG personnalisés comme icône à côté d’une mention, quelque chose que j’ai vu sur Guilded pour le personnel et que je voulais avoir là mais que je ne pouvais pas avoir — encore une autre raison pour laquelle j’aime tellement Discourse, c’est que je peux réellement bricoler quelque chose qui pourrait fonctionner au lieu d’espérer et d’attendre que les développeurs l’ajoutent.
J’ai donc bricolé la solution suivante. Elle n’est en aucun cas infaillible, elle nécessite probablement que le SVG que vous téléchargez ait une variable SCSS qui commence par svg et pourtant, elle semble fonctionner suffisamment pour moi maintenant
Si quelqu’un veut prendre ce code et l’améliorer, l’incorporer pour le rendre plus sophistiqué, j’en serais reconnaissant !
Choses possibles à améliorer
La faire fonctionner pour toutes les icônes SVG, c’est-à-dire toutes celles de Discourse et toutes celles qui sont téléchargées et qui ne commencent pas par svg.
Nettoyer le code.
Améliorer le style, car j’ai un peu bricolé le CSS pour qu’il fonctionne et il pourrait ne pas fonctionner dans toutes les situations.
Quoi qu’il en soit, voici un exemple de mention avec moi utilisant l’icône personnalisée que j’ai pour la Défense Émotionnelle en tant qu’icône de mention du personnel :
Voici le code que j’ai ajouté :
header.html
// Add SVG icons as an option, as long as they're included in assets and uploaded
// Creates an object of all the assets and iterates to find which links have the data-emoji
// attribute equaling the asset variable name then adds the URL for it
// convert object to key's array
const keys = Object.keys(settings.theme_uploads);
// print all keys
console.log(keys);
// iterate over object
keys.forEach((key, index) => {
console.log(`${key}: ${settings.theme_uploads[key]}`);
api.decorateCooked($elem => {
var url = settings.theme_uploads[key];
console.log("key: " + key);
console.log("index: " + index);
console.log("url: " + url);
console.log(JSON.stringify(settings.theme_uploads));
$elem
.find("a[data-emoji^='" + key + "']")
.css("--svg-icon", "url('" + url + "')");
}
);
});
Y a-t-il un moyen pour que l’emoji n’apparaisse que pour l’utilisateur choisi ? Si vous avez un utilisateur nommé Taylor et TaylorLife, l’emoji apparaît pour les deux.
