The JS code stops working when the page is refreshed

Dev
1

Hello,

How can we fix that please help me :pray:

<script>
let intervalId = setInterval(() => {
  const tags = document.querySelectorAll('.discourse-tag');
  if (tags.length > 0) {
    Array.prototype.forEach.call(tags, (tag) => {
      const tagClone = tag.cloneNode(true);
      tagClone.style.fontSize = 'var(--font-down-2)';
      tagClone.style.backgroundColor = '#1f1f33';
      tagClone.style.margin = '1px';
      tagClone.style.borderRadius = '7px';
      tagClone.style.padding = '2px 8px';
      const title = tag.closest('.main-link').querySelector('.title');
      title.parentNode.insertBefore(tagClone, title);
      tag.remove();
    });
    clearInterval(intervalId);
  }
}, 100);
</script>
2

Why are you doing this with JS instead of applying CCS styles?

2 Likes
3

Tags were not positioned as I wanted with CSS

4

How so? Manually injecting styles should have the same result as a CSS change.

5

I am not a professional. I can only make edits with the codes I find. I cannot write code from scratch.
You can check my forum

My priority is always to edit with CSS. My first JS codes.

6

I think you want something like that:

  1. Move the tags using topic-list-before-status plugin outlet.
<script type="text/x-handlebars" data-template-name="/connectors/topic-list-before-status/tag.raw">
  {{discourse-tags context.topic mode="list" tagsForUser=context.tagsForUser}}
</script>
  1. Use CSS to hide the original tag and style them (you might need to adjust it)
.link-bottom-line .discourse-tags {
    display: none;
}

.link-top-line .discourse-tags {
    column-gap: 5px;
    vertical-align: text-top;
    
    .discourse-tag {
        font-size: var(--font-down-2);
        border-radius: 7px;
        padding: 2px 8px;
        background-color: #1f1f33;
    }

    .discourse-tag::after {
        content: '' !important;
        margin: none !important;
    }
}
1 Like
7

Thanks for your help. :pray:
I am using these codes right now and it works.

<script>
function moveTagsToTitle() {
    const mainLinks = document.querySelectorAll('.main-link');
    mainLinks.forEach(mainLink => {
        const discourseTags = mainLink.querySelector('.discourse-tags');
        const titleElement = mainLink.querySelector('.title');

        if (discourseTags && titleElement) {
            const tags = discourseTags.querySelectorAll('.discourse-tag');

            tags.forEach(tag => {
                const tagSpan = document.createElement('span');
                tagSpan.className = 'discourse-tag box';
                tagSpan.textContent = tag.textContent;
                tagSpan.style.fontSize = 'var(--font-down-2)';
                tagSpan.style.borderRadius = '10px';
                tagSpan.style.border = '1px solid #444460';
                tagSpan.style.backgroundColor = '#1f1f33';
                tagSpan.style.color = 'white';
                tagSpan.style.margin = '2px';
                tagSpan.style.padding = '2px 8px';
                tagSpan.style.display = 'inline-block';
                tagSpan.style.overflow = 'hidden';
                tagSpan.style.whiteSpace = 'nowrap';
                tagSpan.style.textOverflow = 'ellipsis';
                tagSpan.style.verticalAlign = 'middle';
                tagSpan.style.marginRight = '5px';
                titleElement.insertBefore(tagSpan, titleElement.firstChild);
            });

            if (discourseTags.parentNode) {
                discourseTags.parentNode.removeChild(discourseTags);
            }
        }
    });
}

window.addEventListener('load', moveTagsToTitle);
const observer = new MutationObserver(moveTagsToTitle);
const targetNode = document.body;
const observerOptions = {
    childList: true,
    subtree: true
};
observer.observe(targetNode, observerOptions);
</script>
8

I’m glad it works for you. Yes, using plain JavaScript can work. However, I highly suggest using the Discourse API and plugin outlet to achieve your goal. It’s cleaner and more resilient to changes. :+1:

1 Like
9

My English is inadequate in many subjects.
I don’t want any codes to harm the site.
For example, I don’t want these JS codes to slow down the site. (i hope :grin:)
Thank you for your help :heart:

10

I think that’s not a good way to do what you’re trying to do.

What are you trying to do?

1 Like
11

I moved the tags to the left of the topic title.
This worked, but I have no choice. Because I can’t write code with CSS.
You can visit my site. I wrote the link above.

12

In my previous post #6, I gave you a cleaner way to do it.

Ideally, you would want to update the template directly, but that is not a good practice as it will lead to maintenance and compatibility issues.

1 Like
13

I have uploaded the codes you gave to the required places. But it didn’t work the way it works now.

The codes you gave are now active on the site. Would you like to take a look?

14

I see the issue!

That’s odd; no plugin outlet exists on the “latest topic list” template on the category page. :thinking:

So, yes, you’re right. Unfortunately, my code doesn’t work that page.

It should work on /latest, though.

what I see on my local discourse

image

2 Likes
15

If I ever write code, I’ll do it with CSS.
Or a hero will come and help me. :smiley: