Comment déplacer correctement mon script vers le nouvel onglet JS de mon composant ?

[Canapin (Coin-coin le Canapin)]

[Avis d’administrateur] Le thème « _Base » contient du code qui doit être mis à jour. (id:discourse.script-tag-discourse-plugin) (en savoir plus)

Pour l’un de mes forums, je me suis débarrassé de ce message simplement en déplaçant mon script JS vers le nouvel onglet de personnalisation JS.

Sur mon autre forum, cela ne fonctionne pas aussi facilement.

Il s’agit d’un ancien remplacement qui affiche le champ de balise du compositeur uniquement dans les catégories qui acceptent les balises :

<script type="text/discourse-plugin" version="1.4.0">    
    // show tag chooser in the composer only when necessary
    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;
        }
        // Verify the existence of the tag choser
        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) {
            // custom code to toggle the tag choser
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // end of the custom code
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorporates both minimum_required_tags, and 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>

Ce script était fortement basé sur une modification similaire (et ancienne, datant de 2019 ou avant) publiée sur meta, mais je ne parviens plus à trouver la publication originale.

Quoi qu’il en soit, il y a deux questions en une :

1. Comment déplacer correctement cela dans l’onglet JS ? Est-ce possible, ou dois-je créer un composant de thème ?

2. Existe-t-il un moyen plus élégant de masquer/afficher le sélecteur de balises du compositeur uniquement dans certaines catégories ? J’utilise des balises pour une seule catégorie sur mon forum (une catégorie d’annonces avec les balises #search et #offer)

[chapoi]

Je suppose que vous pourriez utiliser CSS pour afficher/masquer le champ de balise en fonction de la classe de catégorie sur le corps, mais il est discutable de savoir si c’est plus élégant

[renato (Renato Atilio)]

@Canapin

J’utilise des tags pour une seule catégorie sur mon forum (une catégorie d’annonces avec les tags #search et #offer)

Cela ne résout pas le problème pour le personnel ^[1], mais si vous définissez les tags comme étant restreints à cette catégorie, ils ne pourront pas être utilisés (par le personnel non-modérateur) dans d’autres catégories. Depuis la section /edit/tags d’une catégorie :

Les tags et groupes de tags spécifiés ci-dessus ne seront disponibles que dans cette catégorie et dans d’autres catégories qui les spécifient également. Ils ne seront pas disponibles pour une utilisation dans d’autres catégories.

---

1. à moins que nous n’appliquions Make category tag rules / restrictions apply to moderators too ↩︎

[Canapin (Coin-coin le Canapin)]

J’ai regardé comment ça fonctionne, car ça fait longtemps.

• Les champs de tags apparaissent dans l’éditeur lors de la création d’un nouveau sujet, quelle que soit la catégorie sélectionnée (même si la catégorie n’a pas de tags disponibles pour d’autres que les administrateurs), ce que je veux empêcher.
• Le CSS seul ne fonctionnera pas, car l’éditeur peut être ouvert sur n’importe quelle page, et il n’y a pas de sélecteur CSS parent ciblant la catégorie souhaitée qui aiderait à masquer le champ de tags de l’éditeur, ce qui je crois est la raison pour laquelle j’ai utilisé du javascript.

Donc, à moins que je ne rate quelque chose, j’ai toujours besoin d’un script pour atteindre mon objectif.

Le sujet Feature original à ce sujet était ici :

Enable tagging only in some categories

This is looking good @neil. One thing that would be good relating to this would be the simple option to ‘enable tags in category’ option in the category modal. In my use case I only want tags (and specific tags at that) to be able to be used in specific categories. E.g. in those categories where I don’t want tags enabled I wouldn’t want the tag input field to be shown to users. Is this doable?

Je suppose qu’il n’y a pas eu assez d’intérêt pour que cette fonctionnalité soit développée, et pr-welcome n’était pas souhaité ici selon sam.

Donc, coincé avec une solution JS personnalisée (que je dois alors corriger )

[david (David Taylor)]

@Canapin

Comment déplacer correctement ceci dans l’onglet JS ? Est-ce possible, ou dois-je créer un composant de thème ?

Cela devrait être possible en copiant/collant simplement. Les éléments de l’onglet JS sont exécutés exactement de la même manière que <script type='text/discourse-plugin'>. Si cela ne fonctionne pas, pouvez-vous partager le code ?

@Canapin

il n’y a pas de CSS parent ciblant la catégorie souhaitée

Avec du CSS moderne et un peu fou, c’est possible :

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

^^ ceci masque le champ des tags pour la catégorie “Support” sur Meta.

Vous pouvez remplacer [data-name="Support"] par :not(data-name="Support") pour inverser la logique.

[Canapin (Coin-coin le Canapin)]

Sainte mère de Dieu ! On dirait que mes compétences en CSS de 2012 ne suffisent plus. Ce qui est un peu bizarre, parce que j’aurais juré que 2012, c’était littéralement hier !

---

J’ai opté pour

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

Donc, ça se cache dans toutes les catégories sauf le Trading Post.

Merci à tous !