Как правильно перенести мой скрипт на новую вкладку JS в моем компоненте?

[Уведомление администратора] Тема «_Base» содержит код, требующий обновления. (id:discourse.script-tag-discourse-plugin) (узнать больше)

На одном из моих форумов я устранил это сообщение, просто переместив свой JS-скрипт на новую вкладку настройки JS.

На другом форуме это не срабатывает так просто.

Это старое переопределение, которое отображает поле тегов композера только в категориях, поддерживающих теги:

<script type="text/discourse-plugin" version="1.4.0">    
    // показывать выбор тегов в композере только при необходимости
    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;
        }
        // Проверить наличие выбора тегов
        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) {
            // пользовательский код для переключения выбора тегов
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // конец пользовательского кода
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags учитывает как minimum_required_tags, так и 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>

Этот скрипт был основан на похожей (и старой, от 2019 года или ранее) модификации, опубликованной на meta, но я больше не могу найти исходный пост.

В любом случае, здесь два вопроса в одном:

  1. Как правильно перенести это на вкладку JS? Это возможно, или мне следует создать компонент темы?

  2. Есть ли более элегантный способ скрыть/показать селектор тегов композера только в определённых категориях? Я использую теги только для одной категории на моём форуме (категория объявлений с тегами #search и #offer).

Наверное, можно использовать CSS, чтобы показывать или скрывать поле тега в зависимости от класса категории в теге body, но насколько это более элегантно — вопрос спорный :slight_smile:

Это не решает проблему для сотрудников [1], но если вы установите теги как ограниченные только для этой категории, они не будут доступны (для не-сотрудников) в других категориях. Из раздела редактирования категории /edit/tags:

Указанные выше теги и группы тегов будут доступны только в этой категории и в других категориях, которые также их указывают. Они не будут доступны для использования в других категориях.


  1. если только мы не Make category tag rules / restrictions apply to moderators too ↩︎

Я пересмотрел, как это работает, так как прошло много времени.

  • Поля ввода тегов появляются в редакторе при создании новой темы независимо от выбранной категории (даже если в категории нет доступных тегов для пользователей, кроме администраторов), а я хочу этого избежать.
  • Только CSS не сработает, потому что редактор может быть открыт на любой странице, и нет родительского CSS-селектора, нацеленного на нужную категорию, который помог бы скрыть поле ввода тегов в редакторе. Я полагаю, именно поэтому я использовал JavaScript.

Так что, если я что-то упускаю, мне всё ещё нужен скрипт для достижения моей цели.

Оригинальная тема #feature об этом была здесь:

Кажется, не было достаточного интереса, чтобы над этой функцией начали работать, а тег pr-welcome, согласно Sam, здесь не приветствовался.

Так что остаётся только кастомное JS-решение (которое мне нужно исправить, так что :smiling_face_with_tear:).

Должно быть достаточно просто скопировать и вставить. Код во вкладке JS выполняется точно так же, как и <script type='text/discourse-plugin'>. Если это не работает, пожалуйста, поделитесь кодом.

С помощью некоторых современных CSS-трюков это возможно:

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

^^ это скрывает поле ввода тегов для категории «Support» на Meta.

Вы можете заменить [data-name="Support"] на :not([data-name="Support"]), чтобы инвертировать логику.

Ого! Похоже, мои навыки CSS 2012 года больше не работают. Что-то странное, ведь я клянусь, что 2012 год был буквально вчера!


Я использовал:

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

Так что тег скрывается во всех категориях, кроме Trading Post.

Спасибо всем!