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 jeté un œil au fonctionnement, car cela fait longtemps.

• Les champs de saisie 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 ne propose de tags disponibles que pour les administrateurs), ce que je souhaite empêcher.
• Une solution purement CSS ne fonctionnera pas, car l’éditeur peut être ouvert sur n’importe quelle page, et il n’existe pas de parent CSS ciblant la catégorie souhaitée qui permettrait de masquer le champ de saisie de tags de l’éditeur, ce qui, je pense, explique pourquoi j’avais utilisé JavaScript.

Donc, sauf si je passe à côté de quelque chose, j’ai toujours besoin d’un script pour atteindre mon objectif.

Le sujet original Contribute > Feature à ce sujet se trouvait 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’adhésion pour que cette fonctionnalité soit prise en charge, et que pr-welcome n’était pas souhaité ici selon Sam.

Donc, coincé avec une solution JavaScript personnalisée (que je dois ensuite 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 !