Come spostare correttamente il mio script nella nuova scheda JS del mio componente?

Sviluppatore
,
1

[Avviso Admin] Il tema ‘_Base’ contiene codice che necessita di aggiornamenti. (id:discourse.script-tag-discourse-plugin) (scopri di più)

Per uno dei miei forum, ho eliminato questo messaggio semplicemente spostando il mio script JS nella nuova scheda di personalizzazione JS.

Sull’altro mio forum, non funziona così facilmente.

Si tratta di un vecchio override che mostra il campo tag del composer solo nelle categorie che accettano tag:

<script type="text/discourse-plugin" version="1.4.0">    
    // mostra il selettore di tag nel composer solo quando necessario
    const discourseComputed = require("discourse-common/utils/decorators").default;
    const EmberObject = require("@ember/object").default;
    function toggleTagChooser(display = "hide") {
        if (display == "show") {
            document.getElementsByClassName("mini-tag-chooser")[0].style.display = "block";
            document.getElementsByClassName("reply-area")[0].classList.add("with-tags");
            return;
        }
        // Verifica l'esistenza del selettore di tag
        let tagChoser = document.getElementsByClassName("mini-tag-chooser");
        if(tagChoser.length > 0) {
            tagChoser[0].style.display = "none";
            document.getElementsByClassName("reply-area")[0].classList.remove("with-tags");
        }
        return;
    }
    api.modifyClass('controller:composer', {
        pluginId: "toggleTagChoser",
        @discourseComputed("model.category", "model.tags", "lastValidatedAt")
        tagValidation(category, tags, lastValidatedAt) {
            // codice personalizzato per mostrare/nascondere il selettore di tag
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // fine del codice personalizzato
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorpora sia minimum_required_tags che required_tag_groups
                if (category.minimumRequiredTags > tagsArray.length) {
                    return EmberObject.create({
                        failed: true,
                        reason: I18n.t("composer.error.tags_missing", {
                            count: category.minimumRequiredTags,
                        }),
                        lastShownAt: lastValidatedAt,
                    });
                }
            }
        }
    });
</script>

Questo script era fortemente basato su una modifica simile (e vecchia, del 2019 o precedente) pubblicata su meta, ma non riesco più a trovare il post originale.

Comunque, ci sono due domande in una:

  1. Come spostare correttamente questo nella scheda JS? È possibile, o dovrei creare un componente tema?

  2. Esiste un modo più elegante per nascondere/mostrare il selettore di tag del composer solo in determinate categorie? Uso i tag solo per 1 categoria sul mio forum (una categoria annunci con tag #search e #offer)

1 Mi Piace
2

Suppongo che potresti usare CSS per mostrare/nascondere il campo del tag in base alla classe della categoria sul corpo, ma se sia più elegante è discutibile :slight_smile:

1 Mi Piace
3

Non lo risolve per lo staff [1], ma se imposti i tag come limitati a quella categoria, non saranno utilizzabili (da non staff) in altre categorie. Da una categoria /edit/tags:

I tag e i gruppi di tag specificati sopra saranno disponibili solo in questa categoria e in altre categorie che li specificano anche. Non saranno disponibili per l’uso in altre categorie.

  1. a meno che non Make category tag rules / restrictions apply to moderators too ↩︎

1 Mi Piace
5

Ho dato un’occhiata a come funziona, dato che è passato molto tempo.

  • Gli input dei tag appaiono nel composer durante la creazione di un nuovo argomento indipendentemente dalla categoria selezionata (anche se la categoria non ha tag disponibili per altri oltre agli amministratori), cosa che voglio evitare.
  • Il solo CSS non funzionerà, perché il composer può essere aperto su qualsiasi pagina e non esiste un selettore CSS padre che possa aiutare a nascondere l’input dei tag del composer, motivo per cui credo di aver usato javascript.

Quindi, a meno che non mi stia sfuggendo qualcosa, ho ancora bisogno di uno script per raggiungere il mio obiettivo.

L’argomento Feature originale a riguardo era qui:

Immagino non ci sia stato abbastanza interesse per far funzionare questa funzionalità e pr-welcome non era desiderato qui secondo sam.

Quindi, bloccato con una soluzione JS personalizzata (che devo quindi correggere :smiling_face_with_tear: )

1 Mi Piace
6

Dovrebbe essere possibile semplicemente copiarla e incollarla. Le cose nella scheda JS vengono eseguite esattamente nello stesso modo di <script type='text/discourse-plugin'>. Se non funziona, puoi condividere il codice?

Con un po’ di CSS moderno e complesso, è possibile:

.d-editor-container:has(.category-input .select-kit-header[data-name="Support"]) .tags-input {
    display: none !important;
}

^^ questo nasconde l’input dei tag per la categoria “Support” su Meta.

Puoi sostituire [data-name="Support"] con :not(data-name="Support") per invertire la logica.

4 Mi Piace
7

Santo cielo! Sembra che le mie capacità CSS del 2012 non siano più all’altezza. Il che è piuttosto strano, perché avrei potuto giurare che il 2012 fosse letteralmente ieri!

Ho optato per

.d-editor-container:not(:has(.category-input .select-kit-header\[data-name=“Trading Post”\])) .tags-input {
    display: none;
}

Quindi si nasconde in ogni categoria tranne Trading Post.

Grazie a tutti!

5 Mi Piace