Execute Custom JS on Infinite Scroll


  • 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;
    
        }
    
    }
    

  • @aleksei

    Did you take a look at

    https://github.com/NodeBB/NodeBB/wiki/Hooks#client-side-hooks

    maybe something like

    action:posts.loaded
    

    to trigger your function?

  • Global Moderator

    Specifically you want code like this

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

  • 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);
    
  • Global Moderator

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


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

  • Global Moderator

    @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.


  • 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.

  • Global Moderator

    @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.


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

Suggested Topics

  • 10
  • 4
  • 5
  • 7
  • 4
| |