Plugin Question: Composer hooks + adding JS to head

a_5mith

@psychobunny I'll get to work then. Question, how do I add js to the head of a page from a plugin?

psychobunny

https://github.com/NodeBB/nodebb-plugin-quickstart/blob/master/plugin.json#L21-L23

and

https://github.com/NodeBB/nodebb-plugin-quickstart/blob/master/static/lib/main.js

gets minified into nodebb.min.js, located in the head

a_5mith

Ok, last question then, everything is done, except the plugin doesn't fire until after a refresh, is their a better way to do this than .on('action:widgets.loaded',

When you submit a post, nothing appears.

Is there an on post submit, or post edit, or the composer.

psychobunny

Nope. Adding one in now

psychobunny

There you go: https://github.com/NodeBB/NodeBB/commit/eb297d7eab2969766117a2d119ad2f77fb7726e0

Forking this thread I think we've hijacked this one far enough

a_5mith

@psychobunny Right, I'm now in the right topic, thanks for correcting me on the action, however, still nothing, thinking I might be missing a step.

Also issue 2, doing it through the console stops all other videos playing and resets them. Could get annoying. Unless it only happens for that one user.

a_5mith

Right, I have made a bit of progress here, I'm now using

$(window).trigger('action:ajaxify.end', function() {

which works on new topics, but not on new posts. So I don't really know what to do at this point, this is the last thing, everything else is working fine. I've even stopped it from refreshing youtube videos that are currently playing etc.

<baris>

When a post is entered into the dom $(window).trigger('action:posts.loaded'); is fired.

$(window).on('action:posts.loaded', function(){
    alert('foo');
});

Keep in mind this gets triggered when posting a new post as well when scrolling down to reveal new posts.

a_5mith

@baris Hi Baris, thanks for that, I believe that was what I used before changing to ajaxify, it works on new topics / first post. But when you post a reply to a topic, it seems to run before the div is ready to load the video. If I put $('.js-lazyYT').lazyYT(); into my console and run it, the video loads, would it be possible to add a delay to when it gets fired? If that would even help...

EDIT: Changed it to $('.js-lazyYT').delay(500).lazyYT(); and it now works. Probably a bit hacky though.

<baris>

You can always do

$(window).on('action:posts.loaded', function(){
    setTimeout(function() {
        $('.js-lazyYT').lazyYT();
    }, 1000);    
});

Saw your edit and yeah they are both hacky. Maybe it's the fade in that causing the issue, you can try removing that and the delay and see if it works. Try removing this.

a_5mith

@baris Removing the fade makes the site a lot faster, I like it. However removing the delay stops it loading again. So think the delay may be a necessary thing.

I'd also like the plugin to work on all sites, so unless you guys were planning on removing the fade at any point, I think for now, a delay may be the best option?

julian

That's weird. the action:posts.loaded hook is only fired after the post has been put into the DOM, so it should work...

What error do you get when a post is lazyloaded w/o the delay?

a_5mith

@julian No error, I added some logging in to test when things fired, so can confirm that it does, and it refreshes any non playing videos already in the topic as expected (when you click play it remove the class that the script looks for to stop playing videos reloading), but the new one isn't loaded. Unless they're both happening at exactly the same time. I may have a play with the delay timer, to see how far down I can go until it stops loading.

Currently set to 500ms.