need some help with my first plugin

[arasbm]

So I have started developing a simple plugin called who is in?. Before I get to the technical problems, let me explain what it will do (when finished), it will look something like this mockup:

The idea is to easily embed a signup or RSVP button into a post by using a magic phrase such as "who is in?". The plugin would then insert a button in place. Others viewing the post see the call to join and can add their avatar to a list next to the button by pressing it. This I hope will be a really simple and light way to ask people to signup for something.

I started based off of the quickstart plugin but did not make it very far. I have only got as far as displaying the button. Here is the code: https://github.com/modlabca/nodebb-plugin-whoisin

I am a little stuck now, and could not find my way in the docs or examples I have looked at so far. Here are a couple of questions I have so far:

1. How can I load a template+JS file where the who is in button will be displayed? I tried doing something like below but I could not figure out how to get this working:

        whoisin.parse = function(postContent, callback) {
		postContent = postContent.replace(/Who is in\?/gi, mainTemplate);
		/*
		app.render('templates/views/main', {title: 'who is in test'}, function(err, html) {
			if (err) {
				console.log('ERROR rendering template: ', err);
			}
			console.log('rendering the whoisin template: ', html);
		});
		*/
		callback(null, postContent);
};

where templates/views/main.tpl is the template I want to use instead of the hard coded mainTemplate value above. I am not sure how to connect the two here. In other words, I think I need to render the template with the right context and JS file in place of "Who is in". Is that the right approach? If so, how can I do that?

2. Is there a way for me to add some custom data to a post?

In this case I will be getting the id of current logged in user, and when they click on the button I would need to store that id somewhere. I could not find this in the docs. How would you suggest I store this data?

I am fairly new to all of this, so any help will be appreciated

[miluo]

@arasbm This is awesome plugin -- i can not wait to try it when it's ready. thanks.

[meetdilip]

Nice feature to have.

[psychobunny]

Hey, had a quick look at your repo. You defined your templates directory as

static/templates

so your code should read:

app.render('views/main' ...

Although I suggest namespacing this to your own plugin, ex.

app.render('my-plugin/views/main' ...

EDIT: good luck on the plugin competition, if you are competing

[julian]

@arasbm said:

2. Is there a way for me to add some custom data to a post?

In this case I will be getting the id of current logged in user, and when they click on the button I would need to store that id somewhere. I could not find this in the docs. How would you suggest I store this data?

I would suggest not putting the user data into the button, but instead, letting NodeBB handle the determination of user login.

• The button should only have its id (let's call it the imin-id)
• You'll have a client-side js file that registers the button's event
• When clicked, it makes a socket call to plugins.imin.commit or something
  • That method will be called with the following arguments: socket, data, callback
  • Here's an example of a plugin adding socket listeners, server-side. In that example, the client ends up calling it by executing socket.emit('plugins.pushbullet.settings.save');

Also:

[arasbm]

@psychobunny said:

EDIT: good luck on the plugin competition, if you are competing

Yes! I am hoping to finish this plugin in a couple of weeks. I am guessing as long as I submit it before the end of month, it will count as an entry, right?

@julian I saw the call to socket in a couple of other plugins but didn't understand what it was for. So it is a way for client side code to call into server side JS right?

I still have a question about this:

You'll have a client-side js file that registers the button's event

Last time I tried, I had trouble figuring out how to do this. That is, how to load the client side JS at the right time, so it can register the button onclick event. I looked through a bunch of plugins, but did not find how to do this. Can you explain a bit more how that is done, or point me to an example that does this?

Thanks for the help guys. Also, classy appearance right there @julian!

[psychobunny]

That is actually @julian. He doesn't usually smoke but he does for show.

You can add your JS either inline in your template or preferably in the ajaxify hook:

$(window).on('action:ajaxify.end', function(ev, data) {
			var url = data.url;

I am guessing as long as I submit it before the end of month, it will count as an entry, right?

Deadline is Oct 31st

[julian]

Yes, the action:ajaxify.end client-side hook will be fired every time a page changes (not sure about cold load, but I believe so...).

data.url will contain the url of the page, so check that it matches the regex /^topic/[\d]+/ to ensure you're adding event handlers on the correct page.