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

Desarrollador
,
1

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

1 me gusta
2

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:

1 me gusta
3

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

1 me gusta
5

Heché un vistazo a cómo funciona, ya que ha pasado mucho tiempo.

  • Las etiquetas de entrada aparecen en el compositor al crear un nuevo tema independientemente de la categoría seleccionada (incluso si la categoría no tiene etiquetas disponibles para otros que no sean administradores), lo cual quiero evitar.
  • CSS por sí solo no funcionará, porque el compositor se puede abrir en cualquier página y no hay un elemento padre de CSS que apunte a la categoría deseada que ayude a ocultar la entrada de etiquetas del compositor, que creo que es la razón por la que usé JavaScript.

Por lo tanto, a menos que me falte algo, todavía necesito un script para lograr mi objetivo.

El tema original de Feature sobre esto estaba aquí:

Supongo que no hubo suficiente interés para que esta función se desarrollara, y pr-welcome no fue deseado aquí según sam.

Así que, me quedo atascado con una solución JS personalizada (que necesito arreglar entonces :smiling_face_with_tear: )

1 me gusta
6

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.

4 Me gusta
7

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

5 Me gusta