[newbie] Trouble adding script to dynamically change CSS values based on conditions

Product Support

AI-generated summary

A user, tshenry, is trying to run a script on the homepage and categories page of their Discourse forum. The script fails to run when navigating back to the categories page after visiting another page. fefrei suggests using a solution provided by cpradio that utilizes the api.onPageChange function.

tshenry tries implementing the solution in the CSS/HTML Customization page, but it doesn’t work. cpradio points out that the implementation is incorrect and provides a simplified version of the code.

tshenry then tries implementing the solution as a plugin, which works. The user achieves their desired outcome, which is to dynamically change the CSS values of a category list.

cpradio explains that the plugin and CSS/HTML page implementation methods have nearly identical performance and results. However, the CSS/HTML method allows for easier modification and doesn’t require a container rebuild.

1

I’m very new to the world of Discourse so please bear with me if this is a question that has been answered a million times.

I’ve created a script that needs to run each time the user navigates to the homepage or the categories page. Currently I am attempting to run it through the Customize > HTML/CSS > Head using <script> tags. I check for DOM load completion, but it looks like Discourse has a very unique way of loading pages as you navigate around the forum.

Refreshing the categories page executes the script, but after navigating to another page, then back to the categories, the script fails to run.

I’ve tried creating a plugin to see if it would work better that way (I got the example alert() plugin working, woo!), but I just don’t quite understand how to utilize everything that’s available.

Any suggestions on how to get a script to run each time I navigate to the categories page?

If you need more information to understand what I’m asking for, please let me know. Sometimes my wording makes sense to me, but not to everyone else!

Thanks!

2

Yes, Discourse uses internal navigation, so the DOM will only be ready once.

@cpradio suggested a possible solution here:

3

Thank you for the quick reply, @fefrei! I will try his suggestion out in morning and report back!

4

Alright, I placed the code that @cpradio suggested in a CSS/HTML Customization page under the tab, but unfortunately it doesn’t seem to be working. Just to prove the concept, I have it try to display an alert. Below is the exact code I am using:

<script type="text/discourse-plugin">

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializePlugin(api)
{
  api.onPageChange((url, title) => {
        alert('test');
  });
}

export default {
  name: 'align-category-text',
  initialize: function(container)
  {
    withPluginApi('0.1', api => initializePlugin(api));
  }
};

</script>

I made sure the code was enabled and tried restarting rails. Any thoughts on what I’m missing?

5

That isn’t how you’d do it there. To do it there, you’d have to do something like

<script type="text/discourse-plugin" version="0.4">
api.onPageChange((url, title) => {
  alert('test');
});
</script>

My original post was from a plugin perspective.

6

Oops! I just realized that right before you replied. Trying the plugin perspective now! If that doesn’t work, I will attempt to try the method you just posted. Thank you so much for your help!!

7

Both should work. I just tested the one I just posted, so I know it works, the plugin one should too :slight_smile:

8

The plugin method works great! Thank you @cpradio, and @fefrei for getting me to the correct solution!

This was the end result of what I was trying to do as shown by a screenshot of a category with subcategories in the category list:

Screen Shot 2016-10-11 at 11.34.12 AM.png892×454 25.8 KB

I like the look of a stacked subcategory list with the new post indication to the right of each category better than everything pretty much displayed inline.

For future reference, is there an ideal method to use when comparing the plugin vs. the CSS/HTML page implementation, or do they have the same performance and end result?

9

It should be nearly identical, both get preprocessed and minimized. The advantage the CSS/HTML has is you won’t have to do a container rebuild to pull in changes (or use the /admin/upgrade path), you can simply modify it within the Admin UI and save it to enable it (it may require a hard refresh of the browser though).

10

Great! Thanks for the answer.