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:
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.
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;
}
}
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);
@aleksei these events are virtual events which jQuery handled internally. They aren't actual events triggered on the document.
@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.
@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.
