How to properly define a JS file for a plugins ACP page

pichalite

If I want to get some data other than the plugins settings on a plugin's ACP page (e.g., get members of a group and display the list of members). What's the proper way of defining this script file so that it runs when you open the plugin's ACP page?

yariplus

Not sure if it is proper, but I use define call with the page's route. I put this in my client.js.

define('admin/plugins/plugin-id', function () { // 'admin/plugins/plugin-id' is the route for the admin page
    return { init: function(){
        // do stuff here, like call socket.emit, and setup settings as normal.
    }};
});

I usually require a separate module, so that the full script isn't loaded on every page load.

define('admin/plugins/plugin-id', function () {
	return { init: function () {
		require(['/route/to/plugin/js/acp.js'], function (acp) {
			acp.doThings();
		});
	}};
});

acp.js

define(['settings', 'translator'], function (settings, translator) {

	var acp = { };

	acp.doThings = function () {
		// This is where I would call socket.emit('mySocketEvent') so that I can get the additional data I need.
	};

	return acp;
});

I'm certain this is not the best way to do it, and the additional require is not necessary now that we have acpScripts now. There was some other reason I separated the scripts too, i don't remember at the moment.

pichalite

@yariplus how do I require modules (groups, users...) so I can use their methods?

yariplus

You can't call them directly from the client. I usually use socket.io, you define an event in your library file where you get the data, and then call it in the acp script.

library.js

var socketAdmin = module.parent.require('./socket.io/admin');
var Groups = module.parent.require('./groups');
var User = module.parent.require('./user');

socketAdmin.yourplugin = {

  // This function is now exposed as the event 'admin.yourplugin.someevent'
  someevent: function (socket, data, callback) {
    // Use the data from the client to grab member objects.
    Groups.getMembers(data.groupName, data.start, data.stop, function (err, uids) {
        if (err) return console.log(err);
        User.getUsersData(uids, function (err, members){
            callback(null, {members: members});
        });
    });
  }

};

acp.js

// Send the group name with the amount of members we want to the server.
socket.emit('admin.yourplugin.someevent', {groupName: "GroupName", start: 0, stop: 200}, function (err, data) {
    // Log the response, should be an array of user objects.
    console.log(data.members);
});