Execute Custom JS on Infinite Scroll

Aleksei

Hi,
I've made some custom styling to the file links shared in posts. Instead of looking like simple links, with a help of JS code, I've made them to look like this:

file links

In my case, the custom JS function looks through all the file links on the page and applies custom CSS to all found <a> tags.

But there are a few problems with this approach

When you enter a topic somewhere below (at a post in the bottom of the topic) and then scroll up, the JS function doesn't work, because it was called only once on page load. I assume this happens because of the dynamic posts load.
Is there a way to trigger JS function on page scroll or on the dynamic load events?

Test page: https://forum.c4d.space/topic/74/морф/18?_=1609934812169

Here is the JS function itself:

new PretifyFileLinks();

function PretifyFileLinks() {

    const extensionPattern = /\.[0-9a-z]+$/i;
    const extensions = ['.c4d', '.zip', '.7z'];
    const allLinks = document.querySelectorAll('[component="post"] a');

    allLinks.forEach(link => {
        const ext = link.href.match(extensionPattern);
        if (ext === null) return;

        extensions.forEach(extension => {
            if (extension === ext[0]) beautifyLink(link);
        });

    });

    function beautifyLink(obj) {

        const css = `Some custom CSS.`;
        obj.style.cssText = css;

    }

}

dogs

@aleksei

Did you take a look at

Hooks

Node.js based forum software built for the modern web - Hooks · NodeBB/NodeBB Wiki

GitHub (github.com)

maybe something like

action:posts.loaded

to trigger your function?

PitaJ

Specifically you want code like this

$(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function () {
  // Your code here
});

Aleksei

Thanks for the information guys! This worked! And this was my first step into the NodeBB hooks.

But now I have another question: why jQuery version of the event listener works, but Vanilla JS doesn't?
I tried this, but the pretifyFileLinks function doesn't trigger:

window.addEventListener('action:posts.loaded', pretifyFileLinks);
window.addEventListener('action:ajaxify.end', pretifyFileLinks);
window.addEventListener('action:composer.preview', pretifyFileLinks);

PitaJ

@aleksei these events are virtual events which jQuery handled internally. They aren't actual events triggered on the document.

Aleksei

Got it. And is there a way to develop, for example, a custom plugin of that kind without using jQuery library?

PitaJ

@aleksei I'm not sure exactly what you're asking. Anything is really possible, it's all just Javascript. But NodeBB uses jQuery exclusively to emit these events, so you'll have to interface with jQuery on the front end somehow.

Please note that hooks on the backend (server-side) do not use jQuery, they use a custom NodeBB interface.

Aleksei

NodeBB uses jQuery exclusively to emit these events

Now this explains everything.

so you'll have to interface with jQuery

I was just wondering whether it is possible to develop any (related to the front-end) plugins with just vanilla JS? Because I never used jQuery and not familiar with its syntax.

PitaJ

@aleksei well you can use vanilla JS for everything and then just interface with jQuery sparingly. jQuery is just a library, not a different language or anything.

Aleksei

I've got the point. Thanks for all the help.