Custom javascript gets only applied after refresh, creating categories for location plugin

Dev
1

Hi,

The below script shows in the location plugin the tooltip permanently and give them colors to sort them according to their type(events, venues, etc), I’m working on a legend and maybe a filter.

The situation is that It does work, but only after I refresh the page, it does not work when landing on the page from the url.

There is no differences in the errors in the console in both cases and adding a higher delay to the function does not change a thing.

Has anyone ever experienced this when adding js to the header from the edit theme menu and found a solution?

Here is a picture of the result

image
image1225×1118 88.3 KB

the errors here appear with or without the code so they are not related to it

Copie d'écran_20250813_001747
Copie d'écran_20250813_0017472121×712 265 KB

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Apply CSS to change the alt text style
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `
    /* Ensure alt text is bold, underlined, and has conditional color */
    .leaflet-marker-pane img[alt] {
      font-weight: bold !important; /* Make text bold */
      text-decoration: underline !important; /* Underline the text */
      white-space: nowrap; /* Prevent the text from wrapping to a new line */
    }
  `;
  document.head.appendChild(style);

  // Give the page a moment to load and the images to be rendered
  setTimeout(function() {
    var images = document.querySelectorAll('.leaflet-marker-pane img');

    images.forEach(function(img) {
      var title = img.getAttribute('title');
      if (title) {
        title = title.length > 10 ? title.substring(0, 10) + '..' : title;
        img.setAttribute('alt', title);
        img.setAttribute('title', title);

        if (title.includes('/')) {
          img.style.color = 'white';
        } else {
          img.style.color = 'black';
        }
      }
      img.setAttribute('src', '');
    });
  }, 1000);  // Delay execution by 1 second (1000 ms)
});



</script>
2

If I’m not wrong, because Discourse is a single-page application, I believe you’ll have to use the plugin API’s api.onPageChange() for this.

4 Likes
3

Right, and using script is soon to be deprecated.

2 Likes
4

Good to know, I won’t bother using an adapted window.location.reload(true) in the header for an ember.js framework which might have been a solution for this.

Is the header field being deprecated out of security reasons? The thing is that it is still convenient to test vanilla javascript in it.

5

No, using the plugin api in script tags (in the header) is deprecated.

1 Like
6

ok if javascript in headers is soon deprecated I have to adapt a few things, maybe this header field could have a notice regarding this incoming situation.

I guess it has its reasons, but it may be a pity since scripts in headers are useful allowing fast tweaks for admin like : closing event registration when a specific number is matched by a javascript function for a specific category

7

sorry I answered to you instead of Jay who says that scripts are going to be deprecated, I imagine he is speaking about header scripts that are just very convenient to use for quick modifications just like in any website CMS.

8

I have found a solution actually that reloads only the “map” page each time you go on it

I wonder now if this is worth sharing to others here if header scripts are going to be deprecated? The script in this post allows color categories according to the content of an event title on the map, this should be changeable quickly not via the api feature.

<script> (function(){function e(){if(location.pathname.includes("/map")){if(!sessionStorage.getItem("map-refreshed")){sessionStorage.setItem("map-refreshed","true");requestAnimationFrame(()=>{setTimeout(()=>{location.reload(!0)},100)})}}}function t(){sessionStorage.removeItem("map-refreshed")}function n(e){const t=history[e];history[e]=function(){const n=t.apply(this,arguments);return window.dispatchEvent(new Event("locationchange")),n}}n("pushState"),n("replaceState"),addEventListener("popstate",()=>dispatchEvent(new Event("locationchange"))),addEventListener("locationchange",function(){location.pathname.includes("/map")?e():t()}),e();})(); </script>

1 Like
9

I think you misunderstood me. I meant that header script tags like <script type="text/discourse-plugin"> and <script type="text/x-handlebars"> are deprecated, not normal <script> tags.

2 Likes
10

yes, thank you for the clarification, I’m happy we can place javascript, check out the code I’ve left if you have time it may still be useful in ember environements, it reloads the page so the js gets applied. It’s not the nicest but it works well for the map plugin page !

2 Likes