Custom modules

One of the newest features of the BuboBox platform is that you can write custom front-end modules. These modules will make writing custom functionality on top of our platform easier. Another advantage is that you can reuse these modules in your next challenge.

Real life examples

Below are some examples of modules that could be useful for your challenge and/or company.

• Form data submit callback: Post the form data a users submitted to your own server/database.
• Company logins form: Add a login form that leverages the user accounts of your custom platform or website to authenticate users.
• Entry view like gate: Let users like your company before they can view a challenge entry.

These are just some examples but of course the sky is the limit.

Bootstrap module

In this bootstrap module you’ll get an overview of the building blocks of a BuboBox module.

/**
 * This is an example BBBX widget module
 * It can be used to add additional functionallity to the BuboBox platform in a modularized way
 */
window.bbbx_modules = window.bbbx_modules || []; // Make modules array if not yet exists
window.bbbx_modules.push(function(sandbox, $) {

	var NAME = 'custommodule';

	var exports = {
		NAME: NAME,

		/**
		 * Module is registered inside the BuboBox widget
		 */
		init: function() {
			console.error('Custom module initialized');
		},

		/**
		 * All modules are loaded
		 */
		ready: function() {
			console.error('Custom module ready, all other modules are also loaded at this point');
		},

		/**
		 * Add listeners for certain actions that happen
		 * in the BuboBox widgets
		 */
		bind: function() {
			//sandbox.subscribe('x', function);
		},

		/**
		 * Remove listeners we create in the bind function
		 */
		unbind: function() {
			//sandbox.unsubscribe(['x', function]);
		},

		/**
		 * Clean up all stuff this module has created
		 * - DOM elements
		 * - Bindings
		 */
		destroy: function() {
			// this.unbind();
			// remove some left over DOM elments
		}
	};

	return exports;

});

• NAME: Variable that will specify the name of your module. Keep it all lowercase and don’t uses spaces. Some valid names could be form, company-login, mycallback
• init function: Initialization function, in this method you can do stuff that doesn’t rely on other modules BuboBox core modules.
• ready function: Ready is automatically called when all modules are loaded and initialized.
• bind function: Bind is also automatically called when the module is initialized and can be used to subscribe to events.
• unbind function: This function is not required but to keep things clean it’s best to add an unsubscribe for every event you subscribed to in the bind function. If you don’t need any event binding in your module you can remove the bind and unbind functions.
• destroy function: When a Javascript error occurs in your module BuboBox will automatically call the destroy function. Make it a habit to use this function to remove any elements that you added to the DOM.

Loading of a module is as simple as putting:

<script src="module.js"></script>

on the page where you want to use the module. All the rest is handled by our BuboBox widget.

The code above is also available as a gist. Feel free to fork, modify and spread the code.

Module settings

It’s also possible to use module settings in your module that can be overwritten by the developer that uses your module without him needing to change any of the module internals. This is done using data properties on the script element that you use to load the module.

For example:

<script src="module.js" data-callback="http://mysite.com"></script>

A good example of module settings can be found in the custom form callback module source. Notice how the script element has a data-callback property. This property is then queried in the javascript module itself by using the bbbx_form_callback_tag object.

Events

There are a lot of internal BuboBox events that you can subscribe to and use to throw your own functionality into the mix. To get a full overview of what events can be used you should check out our events overview table on the help page.

Are you missing some events that could be useful to you? Let use know. This will give us a better understanding of what other developers expect from our Javascript API.