Decora un tema en lo último en móviles

Estoy trabajando en un componente de tema para bloquear publicaciones que contengan una palabra clave contenida en un campo de usuario personalizado. He logrado que esto funcione para ocultar respuestas y temas cuando se enumeran en “latest” o “top” en la vista de escritorio, pero cuando se ven en la aplicación o en dispositivos móviles, agregará el aviso de que el tema fue bloqueado, pero no aplicará la clase “blocked” al contenido. Bloquear respuestas dentro de un tema funciona bien en dispositivos móviles o en la aplicación.

Al revisar components, no parecía que se usara un archivo .hbs diferente para dispositivos móviles, ¿me estoy perdiendo algo más?

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);
    }
});

O al menos, pensé que esto funcionaba. Me fui a trabajar en otra cosa por un tiempo y ahora ya no funciona :thinking: ¿Quizás tengo este problema con api.modifyClass?

Por curiosidad, ¿en qué se diferencia de la función integrada Palabras vigiladas?

1 me gusta

Hasta donde entiendo, ¿“Watched Words” es una configuración de administrador que se aplica a todos los usuarios, correcto? Lo que estoy tratando de hacer es permitir que los usuarios tengan su propio filtro de “watched words” que pueda filtrar publicaciones que están dentro de las reglas del foro, pero que el usuario podría no querer ver por sus propias razones.

Escenario ficticio: un foro de mascotas podría tener un hilo general sobre cómo lidiar con el pelo de las mascotas donde el tema principal no está etiquetado con un tipo específico de animal. El usuario A responde sobre su perro, el usuario B responde sobre su gato, pero el usuario A no quiere ver nada sobre gatos. Lo que hace este componente temático es permitir que el usuario A ponga “gato” en su lista de bloqueo, y luego dondequiera que “gato” aparezca en un tema o respuesta, lo reemplaza con “Bloqueado por contener gatos” con un clic para mostrar de todos modos.

Está destinado a cosas que están en tema y dentro de las reglas generales del foro, pero que podrían no estar etiquetadas o aparecer en las respuestas de un hilo etiquetado con algo que el usuario A sí quiere ver. El foro del que estoy migrando había estado usando un pequeño script de usuario del navegador para escanear la página después de cargarla, y una de las atracciones de Discourse fue la posibilidad de incorporar la función de bloqueo directamente para que funcione también en dispositivos móviles (el script de usuario que estábamos usando no se ejecuta en navegadores móviles). Reduce las marcaciones y las discusiones sobre lo que pertenece a los hilos generales si los usuarios simplemente pueden decidir que no quieren ver X sin que sea una violación de las reglas.

No creo que publique esto como un componente temático adecuado porque requiere la creación de tres campos de usuario en el panel de administración (¿lo que requeriría un plugin para crearlos automáticamente?). Estoy en un plan básico alojado aquí y no estoy modificando plugins, pero puedo publicar el código del componente temático terminado y la configuración de los campos de usuario cuando termine.

4 Me gusta

Eso suena increíble. :slight_smile: Puedo pensar en un par de foros que encontrarían útil eso.

3 Me gusta

Sí, puedo ver el potencial. En cuanto a usar incluso una versión modificada para extender la función de silenciar usuario. Como tengo un solo usuario quejándose :man_facepalming: de que todavía puede ver las respuestas de otras personas a personas que él ha silenciado. lol

Mucho potencial interesante. Seguiré tu proyecto con atención.
:vulcan_salute::smiling_face_with_sunglasses::+1:

1 me gusta

¿Cómo podría averiguar dónde está el problema? Usando el modo móvil a través de las herramientas de desarrollador de Chrome, funciona correctamente, pero en Chrome en un teléfono real y en la aplicación de Android no funciona. Usando el componente temático Plugin Outlets, no parece haber una salida relevante ya que estoy tratando de modificar dentro de un elemento de lista de temas en sí.

Disculpe si esta es una pregunta básica, es la primera vez que trabajo con Ember.

1 me gusta

Esto funcionó en dispositivos móviles y lo publicaré en Theme component una vez que se me apruebe para unirme. El problema con los dispositivos móviles era que estaba agregando una clase al elemento hijo de topic-list que tenía una clase “main-link”, pero en dispositivos móviles, ese elemento hijo de main-link está unos pasos más abajo en la jerarquía que en el escritorio.

1 me gusta