Decore um tópico nas novidades do mobile

Estou trabalhando em um componente de tema para bloquear postagens que contenham uma palavra-chave contida em um campo de usuário personalizado. Consegui fazer isso funcionar para ocultar respostas e tópicos quando listados em “mais recentes” ou “mais populares” na visualização de desktop, mas quando visualizado no aplicativo ou no celular, ele adicionará o aviso de que o tópico foi bloqueado, mas não aplicará a classe de bloqueado ao conteúdo. Bloquear respostas dentro de um tópico funciona bem no celular ou no aplicativo.

Ao dar uma olhada em componentes, não parece que um .hbs diferente foi usado para celular, estou perdendo alguma outra coisa?

const discourseComputed = require("discourse-common/utils/decorators").default;

function addIgnoredTopicClass() {
    if (currentUser) {
        api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
            const blocklist = user.user_fields[1];
            const case_sensitive = user.user_fields[2];
            const whole_words = user.user_fields[3];

            const blocked = blocklist.split(",").map(function(item) {
                if (case_sensitive) {
                    return item.trim();
                } else {
                    return item.trim().toLowerCase();
                }
            });
            let classList = this._super(...arguments);
            let elem = document.querySelectorAll("[data-topic-id='" + this.topic.id.toString() + "']")[0];
            console.log(elem);
            const title = (case_sensitive) ? this.topic.fancy_title : this.topic.fancy_title.toLowerCase();
            const excerpt = (case_sensitive) ? this.topic.excerpt : this.topic.excerpt.toLowerCase();
            let result = "";

            for (let index = 0; index < blocked.length; ++index) {
                    let pattern = (whole_words) ? new RegExp('(?:\\b|\\s|^)' + blocked[index] + '(?:\\b|\\s|$)') : new RegExp(blocked[index]);
                    // console.log(pattern)
                    if (pattern.test(title)) {
                        classList += "blocker-blocked"
                        const found = blocked.filter(text => title.includes(text));
                        if (found.length >= 2) {
                            const last = found.pop();
                            result = found.join(', ') + ' and ' + last;
                        } else {
                            result = found.join(', ');
                        }
                        const newNode = document.createElement("a");
                        const textNode = document.createTextNode("Blocked for containing " + result + ".");
                        newNode.classList.add("block-notice")
                        newNode.appendChild(textNode);
                        newNode.onclick = function() { showComment(this); };
                        elem.children[0].insertBefore(newNode, elem.children[0].children[0]);
                        for (let index = 0; index < elem.children.length; ++index) {
                            if (elem.children[index].classList.contains('main-link')) {
                                elem.children[index].classList.add("blocker-blocked");
                            }
                        }
                        newNode.classList.remove("blocker-blocked");
                    }
                }

            // console.log(classList);
            return classList;
        });
    }
}

api.modifyClass("component:topic-list-item", {
    @discourseComputed()
    unboundClassNames() {
        return addIgnoredTopicClass.call(this);
    }
});

api.modifyClass("component:latest-topic-list-item", {

    @discourseComputed()
    unboundClassNames() {
        return addIgnoredTopicClass.call(this);
    }
});

Ou pelo menos, eu pensei que isso estava funcionando. Fui trabalhar em outra coisa por um tempo e agora não está mais funcionando :thinking: Talvez esteja tendo este problema com api.modifyClass?

Por curiosidade, como isso difere do recurso integrado Palavras Monitoradas?

1 curtida

Até onde entendi, “Palavras Monitoradas” é uma configuração de administrador que se aplica a todos os usuários, correto? O que estou tentando fazer é permitir que os usuários tenham seu próprio filtro de palavras monitoradas que possa filtrar postagens que estão dentro das regras do fórum, mas que o usuário pode não querer ver por seus próprios motivos.

Cenário fictício: um fórum de animais de estimação pode ter um tópico geral sobre como lidar com pelos de animais, onde o tópico principal não é marcado com um tipo específico de animal. O Usuário A responde sobre seu cachorro, o Usuário B responde sobre seu gato, mas o Usuário A não quer ver nada sobre gatos. O que este componente de tema faz é permitir que o Usuário A coloque “gato” em sua lista de bloqueio, e então onde quer que “gato” apareça em um tópico ou resposta, ele é substituído por “Bloqueado por conter gatos” com um clique para mostrar de qualquer maneira.

Destina-se a coisas que estão no tópico e dentro das regras gerais do fórum, mas que podem não ser marcadas ou aparecer em respostas de um tópico marcado com algo que o Usuário A deseja ver. O fórum do qual estou migrando usava um pequeno userscript de navegador para escanear a página após o carregamento, e uma das atrações do Discourse foi a possibilidade de incorporar a função de bloqueio diretamente para que funcione também no celular (o userscript que estávamos usando não funciona em navegadores móveis). Ele reduz a marcação e as discussões sobre o que pertence a tópicos gerais se os usuários puderem simplesmente decidir que não querem ver X sem que isso seja uma violação das regras.

Não acho que postarei isso como um componente de tema adequado porque requer a criação de três campos de usuário no painel de administração (o que acho que precisaria de um plugin para ser criado automaticamente?). Estou em um plano básico hospedado aqui e não mexo com plugins, mas posso postar o código do componente de tema finalizado e as configurações dos campos de usuário quando terminar.

4 curtidas

Isso parece incrível. :slight_smile: Posso pensar em alguns fóruns que achariam isso útil.

3 curtidas

Sim, vejo potencial. Quanto a usar até mesmo uma versão modificada para estender a função de silenciar usuário. Como tenho um único usuário reclamando :man_facepalming: que ele ainda pode ver as respostas de outras pessoas para pessoas que ele silenciou. lol

Muito potencial interessante. Ficarei de olho no seu projeto.
:vulcan_salute::smiling_face_with_sunglasses::+1:

1 curtida

Como eu faria para descobrir onde está o problema? Usando o modo mobile através das ferramentas de desenvolvedor do Chrome, funciona corretamente, mas no Chrome em um telefone real e no aplicativo Android não funciona. Usando o componente de tema Plugin Outlets, não parece haver um outlet relevante, já que estou tentando modificar dentro de um item de lista de tópicos.

Desculpe se esta é uma pergunta básica, esta é a primeira vez que trabalho com Ember.

1 curtida

Consegui fazer isso funcionar no celular e postarei em Theme component assim que for aprovado para participar. O problema no celular era que eu estava adicionando uma classe ao elemento filho de topic-list que tinha uma classe “main-link”, mas no celular esse elemento filho main-link está alguns passos mais abaixo na hierarquia do que no desktop.

1 curtida