Funziona sia su mobile che su desktop come previsto, ma ho scoperto che causa anche il mancato aggiornamento dell’elenco degli argomenti dopo aver fatto clic sull’avviso di nuovo argomento/risposta.
Ho una registrazione dello schermo che riproduce questo bug.
Nel video, stavo guardando la visualizzazione mobile sul mio desktop e creando una nuova risposta a ‘test new topic alert 3’ dal mio cellulare, quindi ho fatto clic sull’avviso sul desktop, nel caso normale, l’argomento aggiornato dovrebbe apparire in cima agli argomenti, ma in questo caso non lo fa.
Pensavo che il metodo che ho usato sopra fosse attivato erroneamente, ma non viene chiamato quando si fa clic su un avviso di argomento.
Qualcuno ha suggerimenti sul perché si è verificato questo bug? Molte grazie.
Aggiornamento: ho scoperto che causa anche il mancato funzionamento del caricamento automatico di più argomenti durante lo scorrimento nella visualizzazione mobile.
Se rimuovi il codice sopra che non mostra gli utenti ignorati, il problema è risolto? Se è risolto, la mia ipotesi è che il tuo codice stia filtrando gli argomenti di tutti gli utenti (o di più utenti di quanto dovrebbe), il che fa sì che non vengano visualizzati.
Non so da dove venga popolato ignored, ma potrebbe essere popolato con il nome utente dell’utente che ha creato il nuovo argomento che ha mostrato l’avviso in alto. Forse viene popolato con utenti che non dovrebbero essere ignorati? Puoi registrare i valori presenti in ignored?
Penso che non sia così poiché questo problema si è verificato solo su mobile/visualizzazione mobile. (non è stato aggiornato e non è stato possibile caricare altro)
Ho impostato manualmente const ignored = ['david', 'pekka_gaiser', 'sam']; per testare sul sito del creatore del tema, dato che presumo di non aver raggiunto il livello di fiducia che può utilizzare la funzione di ignorare o che fosse disabilitata.
E l’argomento che ho aggiornato è un argomento che ho creato.
No, il bug è sparito se cambio il blocco con quello che fornisci. Pensavo che forse la funzione di filtro interrompesse il ciclo di aggiornamento dei dati dell’argomento, ma questo bug si verifica solo su dispositivi mobili, non riesco a capire cosa causi la differenza tra desktop e mobile…
Allora l’unica cosa a cui riesco a pensare è che la variabile ignored venga popolata erroneamente come ho detto in precedenza. Forse da qualche altra parte viene modificato il valore. Prova a cambiare il codice in:
Nel codice sopra ho inserito la variabile ignored nello stesso scope in cui viene applicato il filtro e ho cambiato il nome della variabile per evitare modifiche non intenzionali ai valori dell’array (ad esempio, se da qualche parte viene chiamato ignored.push(...), potrebbe cambiarne i valori altrove).
Stai ridefinendo quella proprietà con qualcos’altro. Va bene se nient’altro sta osservando quella proprietà, ma in questo caso, diverse cose stanno osservando l’array topics.
Ad esempio
Se fai questo su un’installazione di sviluppo, Ember genererà errori nella console come segue.
Quindi questo dovrebbe dirti qualcosa. L’array topics viene utilizzato in molti posti diversi. Quindi non è una buona idea pasticciarci - specialmente poiché il tuo caso d’uso è principalmente visivo e non ci sono implicazioni di sicurezza coinvolte.
Ecco cosa suggerisco: fai un passo indietro e prova un approccio diverso. Invece di cercare di modificare l’array, fai qualcosa di molto più semplice. Se un utente ignorato ha creato l’argomento, aggiungi una classe CSS e nascondilo con CSS.
Lo fai con qualcosa del genere - ho lasciato alcuni commenti se vuoi seguirli, ma puoi eliminarli quando sei pronto per usarli.
Questo va nel file initializer:
import { apiInitializer } from "discourse/lib/api";
import discourseComputed from "discourse-common/utils/decorators";
export default apiInitializer("0.11.1", api => {
// imposta un id per le tue modifiche
const PLUGIN_ID = "hide-ignored-op-topics";
// Il nome della classe che vuoi aggiungere. Lo spazio all'inizio è obbligatorio
const IGNORED_TOPIC_CLASS_STRING = " ignored-op-topic";
// ottieni l'utente corrente
const user = api.getCurrentUser();
// non loggato, esci
if (!user) {
return;
}
// ottieni un elenco di utenti ignorati
const ignored = user.ignored_users;
// funzione helper per evitare duplicazioni di codice
const addIgnoredTopicClass = context => {
// ottieni le classi dal core / altri plugin e temi
let classList = context._super(...arguments);
// crea la tua condizione
const shouldAddClass = ignored.includes(
context.topic.posters[0].user.username
);
// aggiungi la classe ignorata se la condizione è vera
if (shouldAddClass) {
classList += IGNORED_TOPIC_CLASS_STRING;
}
// restituisci la classList più le modifiche, se presenti
return classList;
};
// aggiungi la classe alla lista degli argomenti predefinita, come nella pagina "latest"
api.modifyClass("component:topic-list-item", {
pluginId: PLUGIN_ID,
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass(this);
}
});
// fai lo stesso per la lista degli argomenti della pagina delle categorie
api.modifyClass("component:latest-topic-list-item", {
pluginId: PLUGIN_ID,
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass(this);
}
});
});
e questo va in /common/common.css
// non usiamo display: none; qui perché non vogliamo interferire con load-more
.ignored-op-topic {
height: 0;
width: 0;
position: fixed;
bottom: 0;
}
È possibile aggiungere una classe aggiuntiva all’elemento figlio del componente?
Ad esempio, vorrei nascondere l’avatar dell’utente ignorato nell’elenco degli avatar desktop sul lato destro del titolo dell’argomento, aggiungendo una classe all’elemento dell’elenco degli argomenti, sarà possibile aggiungere una classe a un componente avatar?
Il metodo unboundClassNames() che abbiamo utilizzato sopra è responsabile delle classi aggiunte all’elemento del componente. In altre parole, gli elementi HTML .topic-list-item o .latest-topic-list-item. Puoi vederlo qui
e qui
Ember prende qualsiasi stringa restituita da quel metodo e la aggiunge come attributo class all’elemento stesso.
Dovrai usare qualcos’altro se vuoi aggiungere classi ai figli di quell’elemento.
Ogni poster nella proprietà posters ha una proprietà chiamata extras. Questa proprietà viene utilizzata come flag per le classi aggiuntive da aggiungere all’avatar quando viene renderizzato.
È impostato qui
e consumato qui
Quindi, puoi aggiungere classi agli avatar nell’elenco degli argomenti in base a una condizione se estendi quella proprietà.
Puoi usare il decoratore @on quando il componente riceve i suoi attributi per chiamare un metodo per farlo. Poiché stiamo già modificando quelle classi del componente, possiamo incorporare quel nuovo comportamento nel codice sopra.
Questo dovrebbe darti una classe CSS ignored-op-topic sugli elementi dell’elenco degli argomenti avviati da un utente ignorato e una classe CSS ignored-user-avatar su ogni avatar di utente ignorato nella colonna dei poster.
Abbiamo già il CSS per .ignored-op-topic da sopra.
// non usiamo display: none; qui perché non vogliamo interferire con load-more
.ignored-op-topic {
height: 0;
width: 0;
position: fixed;
bottom: 0;
}
Ora, vuoi nascondere gli avatar degli utenti ignorati nella colonna dell’elenco degli argomenti.
Non farlo. Questo creerà molta confusione.
Cosa succede se un utente ignorato risponde a un argomento, questo viene aggiornato, ma hai nascosto il suo avatar? Sembrerebbe che qualcun altro abbia appena aggiornato l’argomento.
Inoltre, c’è un solo avatar nella pagina delle categorie accanto ai titoli degli argomenti. Cosa succede se l’ultimo utente che ha risposto è un utente ignorato? Nessun avatar?
Puoi vedere come tali casi creerebbero un’esperienza spiacevole per i tuoi utenti.
Invece di nascondere gli avatar degli utenti ignorati, puoi sostituirli con un’icona SVG. Tutti gli utenti ignorati avranno lo stesso avatar. Puoi farlo con CSS
e lo stesso su latest-topic-list-item. Cambia l’SVG con qualsiasi icona tu voglia usare.
Detto questo…
Ho risposto alla tua domanda perché è una buona opportunità per parlare della personalizzazione dell’elenco degli argomenti e di come farlo. Tuttavia, ho molte riserve sul tuo caso d’uso. La necessità di nascondere gli avatar degli utenti ignorati indica un problema sottostante. È una cosa dire
“questa persona scrive di argomenti che non mi interessano. La ignorerò per ridurre il rumore.”
ma è una cosa completamente diversa dire
“anche vedere l’avatar di questa persona scatena una risposta emotiva. Non voglio mai più vedere il suo avatar.”
Conosci la tua community più di chiunque altro… ma è probabilmente qualcosa che vale la pena approfondire.
Capito. Stavo cercando di imitare la funzione di blocco come Mastodon o Twitter il più possibile, in modo che quando ignori un utente non vedrai mai più contenuti da lui. Concordo sul fatto che la maggior parte delle community potrebbe non aver mai bisogno di questo tipo di funzione. Dato che i miei utenti lo chiedono, vorrei fare del mio meglio.
