Dekorieren Sie ein Thema im neuesten auf Mobilgeräten

Entwickler
1

Ich arbeite an einer Theme-Komponente, um Beiträge zu blockieren, die ein Schlüsselwort enthalten, das in einem benutzerdefinierten Benutzerfeld aufgeführt ist. Ich habe dies zum Ausblenden von Antworten und Themen in der Listenansicht auf dem Desktop zum Laufen gebracht, aber wenn es in der App oder auf Mobilgeräten angezeigt wird, wird die Benachrichtigung, dass das Thema blockiert wurde, angehängt, aber die Klasse „blocked“ nicht auf den Inhalt angewendet. Das Blockieren von Antworten innerhalb eines Themas funktioniert auf Mobilgeräten oder in der App einwandfrei.

Bei einer Überprüfung der Komponenten sah es nicht so aus, als würde für Mobilgeräte eine andere .hbs-Datei verwendet. Übersehe ich etwas anderes?

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

Oder zumindest dachte ich, ich hätte das zum Laufen gebracht. Ich habe mich ein wenig um etwas anderes gekümmert und jetzt funktioniert es nicht mehr :thinking: Vielleicht habe ich dieses Problem mit api.modifyClass?

3

Aus reiner Neugier, wie unterscheidet sich dies von der integrierten Funktion Watched Words?

1 „Gefällt mir“
4

Soweit ich das verstehe, ist „Watched Words“ eine Admin-Einstellung, die für alle Benutzer gilt, richtig? Was ich zu tun versuche, ist, Benutzern im Grunde zu ermöglichen, ihren eigenen Filter für beobachtete Wörter zu haben, der Beiträge herausfiltern kann, die den Forenregeln entsprechen, die der Benutzer aus eigenen Gründen jedoch nicht sehen möchte.

Fake-Szenario: Ein Haustierforum hat möglicherweise einen allgemeinen Thread über den Umgang mit Tierhaaren, bei dem das Hauptthema nicht mit einer bestimmten Tierart gekennzeichnet ist. Benutzer A antwortet über seinen Hund, Benutzer B antwortet über seine Katze, aber Benutzer A möchte überhaupt nichts über Katzen sehen. Was diese Theme-Komponente tut, ist, dass Benutzer A „Katze“ auf seine Sperrliste setzen kann, und dann wird überall dort, wo „Katze“ in einem Thema oder einer Antwort erscheint, durch „Wegen Katzen blockiert“ ersetzt, mit einem Klick, um es trotzdem anzuzeigen.

Es ist für Dinge gedacht, die themenbezogen sind und den allgemeinen Regeln des Forums entsprechen, die aber möglicherweise nicht gekennzeichnet sind oder in Antworten eines Themas vorkommen, das etwas enthält, das Benutzer A sehen möchte. Das Forum, von dem ich migriere, hat ein kleines Browser-Userscript verwendet, um die Seite nach dem Laden zu scannen, und eine der Attraktionen von Discourse war die Möglichkeit, die Blockierfunktion direkt einzubauen, damit sie auch auf Mobilgeräten funktioniert (das von uns verwendete Userscript läuft nicht auf mobilen Browsern). Es reduziert das Melden und die Argumente darüber, was in allgemeinen Threads gehört, wenn Benutzer einfach entscheiden können, dass sie X nicht sehen möchten, ohne dass dies gegen die Regeln verstößt.

Ich glaube nicht, dass ich dies als ordnungsgemäße Theme-Komponente veröffentlichen werde, da sie drei Benutzerfelder erfordert, die im Admin-Panel erstellt werden müssen (was meiner Meinung nach ein Plugin erfordern würde, um sie automatisch zu erstellen?). Ich bin hier auf einem Basis-Hosting-Plan und befasse mich nicht mit Plugins, aber ich kann den fertigen Code der Theme-Komponente und die Einstellungen für die Benutzerfelder posten, wenn ich fertig bin.

4 „Gefällt mir“
5

Das klingt großartig. :slight_smile: Ich kann mir ein paar Foren vorstellen, die das nützlich finden würden.

3 „Gefällt mir“
6

Ja, ich sehe Potenzial. Um sogar eine modifizierte Version zu verwenden, um die Mute-User-Funktion zu erweitern. Da ich einen einzelnen Benutzer habe, der sich beschwert :man_facepalming:, dass er immer noch die Antworten anderer Leute auf Leute sehen kann, die er stummgeschaltet hat. lol

Viele interessante Potenziale. Ich werde Ihr Projekt im Auge behalten.
:vulcan_salute::smiling_face_with_sunglasses::+1:

1 „Gefällt mir“
7

Wie kann ich herausfinden, wo das Problem liegt? Im mobilen Modus über die Chrome-Entwicklertools funktioniert es richtig, aber in Chrome auf einem echten Telefon und in der Android-App funktioniert es nicht. Wenn ich die Plugin Outlets Theme-Komponente verwende, scheint es keinen relevanten Outlet zu geben, da ich versuche, innerhalb eines Topic-List-Items selbst zu modifizieren.

Entschuldigung, wenn dies eine grundlegende Frage ist, dies ist mein erstes Mal, dass ich mit Ember arbeite.

1 „Gefällt mir“
8

Ich habe das auf Mobilgeräten zum Laufen gebracht und werde es in Theme component posten, sobald ich zur Teilnahme zugelassen werde. Bei diesem Problem mit Mobilgeräten habe ich eine Klasse zum untergeordneten Element der topic-list hinzugefügt, das eine “main-link”-Klasse hatte, aber auf Mobilgeräten ist dieses main-link-untergeordnete Element ein paar Schritte weiter unten in der Hierarchie als auf dem Desktop.

1 „Gefällt mir“