Protoplasm

Developer Documentation

API Reference
Adding New Controls
Github Repository

Adding New Controls

Adding your own controls into the Protoplasm loading framework is pretty straightforward. Just make sure your control meets the following requirements:

1. Ensure that your control's constructor takes a DOM Element as the first parameter.

   var NewsTicker = Class.create({ initialize: function(element, arg2, arg3, ...) { // Constructor } }

2. Put your control in a subdirectory next to protoplasm.js, and make the directory name the same as your main source filename. For example, if your control source is in newsticker.js, put it in <protoplasm.js-dir>/newsticker/newsticker.js
3. Have your control register itself with Protoplasm.register() at the bottom of your source file. The control identifier (the first parameter) must much the directory name.

   if (typeof Protoplasm != 'undefined') Protoplasm.register('newsticker', NewsTicker);

4. Start using your control like you would any other Protoplasm control.

   Protoplasm.use('newsticker').transform('div.newsticker');

   This will find all <div> elements with a class of newsticker and call new NewsTicker(element) on them when the page loads.

Protoplasm has some handy helper functions for control authors as well. Protoplasm.loadStylesheet() and Protoplasm.base() are particularly useful for loading bundled stylesheets and images from your control's directory. Check the Protoplasm API reference for more details.

Github Repository

The latest snapshot is available from the Github repository at:

https://github.com/jjongsma/protoplasm