Cómo mover correctamente mi script a la nueva pestaña JS en mi componente?

[Aviso de administrador] El tema ‘_Base’ contiene código que necesita ser actualizado. (id:discourse.script-tag-discourse-plugin) (más información)

En uno de mis foros, me deshice de este mensaje simplemente moviendo mi script JS a la nueva pestaña de personalización de JS.

En mi otro foro, no funciona tan fácilmente.

Es una antigua anulación que muestra el campo de etiquetas del compositor solo en las categorías que aceptan etiquetas:

<script type="text/discourse-plugin" version="1.4.0">    
    // mostrar el selector de etiquetas en el compositor solo cuando sea necesario
    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;
        }
        // Verificar la existencia del selector de etiquetas
        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) {
            // código personalizado para mostrar/ocultar el selector de etiquetas
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // fin del código personalizado
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorpora tanto minimum_required_tags como 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 se basó en gran medida en una modificación similar (y antigua, de 2019 o anterior) publicada en meta, pero ya no puedo encontrar la publicación original.

De todos modos, hay dos preguntas en una:

  1. ¿Cómo muevo esto correctamente a la pestaña de JS? ¿Es posible o debería crear un componente de tema?

  2. ¿Hay una forma más elegante de ocultar/mostrar el selector de etiquetas del compositor solo en ciertas categorías? Uso etiquetas solo para 1 categoría en mi foro (una categoría de anuncios con etiquetas #search y #offer)

Supongo que podrías usar CSS para mostrar/ocultar el campo de etiqueta según la clase de categoría en el cuerpo, pero si eso es más elegante es discutible :slight_smile:

No lo resuelve para el personal [1], pero si configuras las etiquetas como restringidas a esa categoría, no podrán ser utilizadas (por personal no autorizado) en otras categorías. Desde una categoría /edit/tags:

Las etiquetas y grupos de etiquetas especificados anteriormente solo estarán disponibles en esta categoría y en otras categorías que también las especifiquen. No estarán disponibles para su uso en otras categorías.


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

He echado un vistazo a cómo funciona, ya que ha pasado mucho tiempo.

  • Los campos de entrada de etiquetas aparecen en el editor al crear un nuevo tema, independientemente de la categoría seleccionada (incluso si la categoría no tiene etiquetas disponibles para otros usuarios que no sean administradores), y esto es lo que quiero evitar.
  • Solo con CSS no funcionará, porque el editor puede abrirse en cualquier página y no hay un selector CSS padre que apunte a la categoría deseada y que permita ocultar el campo de entrada de etiquetas del editor; creo que por eso es que antes utilicé JavaScript.

Así que, a menos que esté pasando por alto algo, aún necesito un script para lograr mi objetivo.

El tema original Contribute > Feature sobre esto estaba aquí:

Supongo que no hubo suficiente interés para que se trabajara en esta función, y según Sam, pr-welcome no era deseable en este caso.

Así que me quedo con una solución personalizada en JavaScript (que necesito arreglar entonces :smiling_face_with_tear: ).

Debería ser posible simplemente copiarlo y pegarlo. Las cosas en la pestaña JS se ejecutan exactamente de la misma manera que <script type='text/discourse-plugin'>. Si no funciona, ¿puedes compartir el código?

Con CSS moderno y un poco loco, es posible:

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

^^ esto oculta la entrada de etiquetas para la categoría “Support” en Meta.

Puedes reemplazar [data-name="Support"] por :not(data-name="Support") para invertir la lógica.

¡Cielos! Parece que mis habilidades de CSS de 2012 ya no son suficientes. Lo cual es un poco raro, ¡porque podría haber jurado que 2012 fue literalmente ayer!


Opté por

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

Así que se oculta en todas las categorías excepto en Trading Post.

¡Gracias a todos!