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>
Due cose che mi vengono in mente, non sono sicuro se attualmente possibili ma mi piacerebbe avere:
La possibilità di usarlo per le menzioni di gruppo? Ho appena provato per il mio gruppo di amministratori ma non sembrava funzionare.
La possibilità per l’utente di scegliere la propria emoji nelle preferenze e poi mostrerebbe ogni volta che viene menzionato. Forse potrebbe anche essere un vantaggio da dare agli utenti più coinvolti a livelli di fiducia più elevati.
Modifica:
La possibilità di usarlo per le menzioni di gruppo? Ho appena provato per il mio gruppo di amministratori ma non sembrava funzionare.
Ho capito come fare ma non so come fare una richiesta di PR, quindi per ora posterò il codice qui sotto:
common.scss aggiunge .mention-group:after e .mention-group:before
Volevo anche la possibilità di utilizzare SVG personalizzati come icona accanto a una menzione, qualcosa che ho visto su Guilded per lo staff e che volevo avere lì ma non potevo avere—un altro motivo per cui mi piace così tanto Discourse è che posso effettivamente creare qualcosa che potrebbe funzionare invece di sperare e aspettare che gli sviluppatori lo aggiungano.
Così ho creato la seguente soluzione. Non è infallibile in alcun modo, probabilmente richiede che l’SVG che carichi abbia una variabile SCSS che inizi con svg e tuttavia sembra funzionare abbastanza per me ora
Se qualcuno vuole prendere questo codice e svilupparlo, incorporarlo per renderlo più elegante, gli sarei grato!
Possibili miglioramenti
Far funzionare tutte le icone SVG, il che significa tutte quelle di Discourse e tutte quelle caricate che non iniziano con svg.
Pulire il codice.
Migliorare lo stile, dato che ho un po’ improvvisato il CSS per farlo funzionare e potrebbe non funzionare in tutte le situazioni.
Indipendentemente da ciò, ecco un esempio di menzione con me che uso l’icona personalizzata che ho per Emotional Self-Defense come icona di menzione dello staff:
Ecco il codice che ho aggiunto:
header.html
// Aggiunge icone SVG come opzione, purché siano incluse negli asset e caricate
// Crea un oggetto di tutti gli asset e itera per trovare quali link hanno l'attributo data-emoji
// uguale al nome della variabile dell'asset e quindi aggiunge l'URL per esso
// converte l'oggetto in un array di chiavi
const keys = Object.keys(settings.theme_uploads);
// stampa tutte le chiavi
console.log(keys);
// itera sull'oggetto
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 + "')");
}
);
});
