Como mover corretamente meu script para a nova aba JS no meu componente?

Dev
,
1

[Aviso do Admin] O tema ‘_Base’ contém código que precisa ser atualizado. (id:discourse.script-tag-discourse-plugin) (saiba mais)

Em um dos meus fóruns, me livrei dessa mensagem simplesmente movendo meu script JS para a nova aba de personalização de JS.

No meu outro fórum, não funciona tão facilmente.

É um override antigo que mostra o campo de tags do composer apenas em categorias que aceitam tags:

<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>

Este script foi amplamente baseado em uma modificação semelhante (e antiga, de 2019 ou anterior) postada no meta, mas não consigo encontrar a postagem original.

De qualquer forma, há duas perguntas em uma:

  1. Como mover isso corretamente para a aba JS? É possível, ou devo criar um componente de tema?

  2. Existe uma maneira mais elegante de ocultar/mostrar o seletor de tags do composer apenas em certas categorias? Eu uso tags para apenas 1 categoria no meu fórum (uma categoria de anúncios com tags #search e #offer)

1 curtida
2

Eu acho que você poderia usar CSS para mostrar/ocultar o campo de tag com base na classe de categoria no corpo, mas se isso é mais elegante é discutível :slight_smile:

1 curtida
3

Isso não resolve para a equipe [1], mas se você definir as tags como restritas a essa categoria, elas não poderão ser usadas (por não-membros da equipe) em outras categorias. De uma categoria /edit/tags:

Tags e grupos de tags especificados acima estarão disponíveis apenas nesta categoria e em outras categorias que também as especificarem. Elas não estarão disponíveis para uso em outras categorias.

  1. a menos que nós Make category tag rules / restrictions apply to moderators too ↩︎

1 curtida
5

Eu dei uma olhada em como funciona, já que faz muito tempo.

  • As tags de entrada aparecem no compositor ao criar um novo tópico, independentemente da categoria selecionada (mesmo que a categoria não tenha tags disponíveis para outros além de administradores), o que eu quero evitar.
  • Apenas CSS não funcionará, pois o compositor pode ser aberto em qualquer página, e não há um alvo CSS pai que direcione a categoria desejada que ajudaria a ocultar a entrada de tags do compositor, que acredito ser o motivo pelo qual usei JavaScript.

Portanto, a menos que eu esteja perdendo alguma coisa, ainda preciso de um script para atingir meu objetivo.

O tópico original de Feature sobre isso estava aqui:

Acho que não houve tração suficiente para que esse recurso fosse trabalhado, e pr-welcome não foi desejado aqui, de acordo com Sam.

Então, preso com uma solução JS personalizada (que preciso consertar então :smiling_face_with_tear: )

1 curtida
6

Deve ser possível apenas copiar/colar. Coisas na aba JS são executadas exatamente da mesma forma que <script type='text/discourse-plugin'>. Se não estiver funcionando, você pode compartilhar o código?

Com um CSS moderno e maluco, é possível:

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

^^ isso oculta a entrada de tags para a categoria “Support” no Meta.

Você pode trocar [data-name="Support"] por :not(data-name="Support") para reverter a lógica.

4 curtidas
7

Nossa! Parece que minhas habilidades de CSS de 2012 não estão mais funcionando. O que é meio estranho, porque eu poderia jurar que 2012 foi literalmente ontem!

Eu usei

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

Então ele se esconde em todas as categorias, exceto Trading Post.

Obrigado a todos!

5 curtidas