How to properly move my script to the new JS tab in my component?

[Canapin (Coin-coin le Canapin)]

[Admin Notice] Theme ‘_Base’ contains code which needs updating. (id:discourse.script-tag-discourse-plugin) (learn more)

For one on my forum, I got rid of this message simply by moving my JS script to the new JS customization tab.

On my other forum, it doesn’t work that easily.

It’s an old override that shows the composer’s tag field only in categories that accept tags:

This script was heavily based on a similar (and old, 2019 or older) modification posted on meta, but I can’t find the original post anymore.

Anyway, there are two questions in one:

1. How to properly move this in the JS tab? Is it possible, or should I create a theme component?

2. Is there a more elegant way to hide/show the composer’s tag selector only in certain categories? I use tags for only 1 category on my forum (an ads category with #search and #offer tags)

[chapoi (Charlie)]

I guess you could use CSS to show/hide the tag field based on the category class on the body, but whether that’s more elegant is up for debate

[renato (Renato Atilio)]

@Canapin

I use tags for only 1 category on my forum (an ads category with #search and #offer tags)

It doesn’t solve it for staff ^[1], but if you set the tags as restricted to that category, they won’t be usable (by non-staff) on other categories. From a category /edit/tags:

Tags and tag groups specified above will only be available in this category and other categories that also specify them. They won’t be available for use in other categories.

---

1. unless we Make category tag rules / restrictions apply to moderators too ↩︎

[Canapin (Coin-coin le Canapin)]

I had a look at how it works, since it has been a long time.

• Tag inputs appear on the composer when creating a new topic regardless of the selected category (even if the category has no available tags for others than admins), which is I want to prevent
• CSS only won’t work, because the composer can be open on any page, and there’s no parent CSS targetting the wanted category that would help hiding the composer’s tag input, which I believe is why I used javascript for.

So, unless I’m missing something I still need a script to achieve my goal.

The original Feature topic about this was here:

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?

I guess not enough traction to have this feature worked on, and pr-welcome was not desired here according to sam.

So, stuck with a custom JS solution (which I need to fix then )

[david (David Taylor)]

@Canapin

How to properly move this in the JS tab? Is it possible, or should I create a theme component?

It should be possible to just copy/paste it. Stuff in the JS tab is run in exactly the same way as <script type='text/discourse-plugin>. If it’s not working, can you share the code?

@Canapin

there’s no parent CSS targetting the wanted category

With some crazy modern CSS, it’s possible:

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

^^ this hides the tag input for the “Support” category on Meta.

You can swap the [data-name="Support"] for :not(data-name="Support") to reverse the logic.

[Canapin (Coin-coin le Canapin)]

Holy moly! Looks like my 2012 CSS skills aren’t cutting it anymore. Which is kinda weird, because I could’ve sworn 2012 was literally yesterday!

---

I went for

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

So it hides in every category but Trading Post.

Thanks all!