ACP: JavaScript

Nicolas

What is the proper way to use ACP JavaScript?
I'm using plugin ACP Js as link in template for ACP section. And I have found issue, that if I return to the same page, without page refresh, it seems, ACP doesn't unload scripts.

yariplus

For me, I put a client script in plugin.json, which properly inserts and reloads that script on every page. In the script, I check for a specific tag such as <div id="myplugindiv"> Then if it exists, I require() a separate script that has the actual logic. If that script would access data that is admin or user specific, I use socket calls I added to the socket.io/plugins module to verify the viewer is the intended user.

julian

Can you show your code?

Every time you ajaxify (ACP included), NodeBB will try to load the client side module with the same name as the template, via require.js. It will then execute init().

There is no facility to remove event handlers on page change... not sure if there's is really a good way to do it.

Nicolas

@julian

Here is a template, I'm talking about: https://github.com/NicolasSiver/nodebb-plugin-ns-awards/blob/a87a53ad14b151fe106d2f64adbbf581296ac55f/public/templates/admin/plugins/awards.tpl

PitaJ

@julian - You shouldn't have to remove any event handlers as long as they apply to only elements specific to that page. The garbage collector should handle that (after seeing that the DOM element doesn't exist, the event handlers are removed).

I just include the script in the template. Meh

It would be nice if there was some way in the plugin.json or something to declare only certain locations where scripts or styles should apply, maybe? I'm not exactly sure how difficult it would be to accomplish that...

julian

admin/plugins/awards... this is your template, from what I can tell.

So, if you create a new js file with this inside:

define('admin/plugins/awards', function() {
  var Awards = {};

  Awards.init = function() {
    // Stuff here is run every time the page is loaded
  };

  return Awards;
});

There's no need to include the script tag at the bottom of the template

PitaJ

@julian said:

There's no need to include the script tag at the bottom of the template

Except for the require call, right?

julian

Not even that, NodeBB automatically tries to load a plugin that is associated with that template, and executes .init(); if there is one.

So with that template above, create a client-side js file (of any name) with the module name defined as I have defined in my last post's code block. Then add it to the scripts array in your plugin.json so it gets minified on NodeBB start, and then it will be automatically called.

Nicolas

@julian Thanks. I will try to use it

Nicolas

@julian It works, but...

It increases on 700kb nodebb.min.js

PitaJ

@Nicolas said:

@julian It works, but...

It increases on 700kb nodebb.min.js

Yeah, and that's the problem. If I were to include all of my styles and scripts in the main minified files, they would be huge.

yariplus

  Awards.init = function() {
    require(['my/public/path/myjs']);
  };

PitaJ

@yariplus said:

  Awards.init = function() {
    require(['my/public/path/myjs']);
  };

That isn't any different from including the script manually, though.

yariplus

@pitaj How so? For me, it keeps it out of nodebb.min.js and loads it automatically on the 'admin/plugins/awards' template.

yariplus

Oh, i see the problem. Dang. There has to be another way then just putting everything in nodebb.min.js though, right?

Nicolas

Also I have found another problem - It's a development.
Minification is part of nodebb startup. So after every single change in client JS, you should restart NodeBB, It takes time...
Maybe NodeBB could borrow ideas from Wordpress and handle JS includes for particular pages?
I'm OK with single minified script for production.

PitaJ

@Nicolas there is a grunt thing that only does what is necessary. You should try it out.

Nicolas

grunt --verbose? It will restart nodebb, nothing very special...

julian

@Nicolas Grunt will detect if assets like css or js need to be recompiled, and redo those only.

pichalite

@julian I had issues with using grunt. It complains about too many files opened if I have a plugin folder open in an editor.

./nodebb watch worked better for me