Building a Plugin
Designing your Plugin
Before you begin writing the actual code for your plugin you should first create 3 things:
- Usage Scope: Do a few basic deisgns of your plugin API. See which way of organising your code best suites its use.
- Pseudo Code: Write some code which would use your plugin. See what function names and structures works best. You don't need the code to work, but it should at least represent what you want the final implementation to look like.
- Roadmap: Create a roadmap containing everything you can think of for your plugin, no matter how unlikely you think the possibility of including the feature may be. This will aid you in designing your plugin to be future proof. Everyone hates it when an API changes incoherently between versions due to bad planning.
Writing the Code
Once you're ready to build your plugin create the file where you'll write the code. This file should include the plugin name, the current version, a copyright notice and the license details.
/*
* nano Example Plugin v0.1
* http://www.example.com
*
* Copyright (c) 2024 Person/Company. All rights reserved.
*
* This is FREE software, licensed under the GPL
* http://www.gnu.org/licenses/gpl.html
*/
if (nano) {
nano.plugin({
// methods added to the API wrapper are defined here
},
function() {
this.example = {
// global plugin methods are defined here
};
});
}
To begin, check to make sure the nano JavaScript framework has been included in the document. Then, use the nano.plugin() function to add your plugin to the API. This function recieves 2 arguments:
-
methods
[object](object containing the methods to add to the API wrapper) -
setup
[function](function to setup and configure the plugin)
The first argument is an object of methods that will be added to the API wrapper. These methods are made available when wrapping a DOM node with the API. If a method already exists it will be overwritten with the new one. To skip this argument pass null or an empty object.
The second argument is a function which creates the plugin namespace (if required) and sets up the plugin with any additional resources. The scope of this within this function is the framework API, the global nano object.
The documentation for the nano.plugin() function can be found here.
Registering Parameters
The framework provides a method to register parameters which are available when creating new elements. These parameters can modify the DOM node thats created or add new features. For example, the following parameter adds the attribute "example" to the node with the value passed with the parameter:
nano.reg({example: function(value) { this.attr({example: value}); }});
To use this parameter, you would add it to your parameters object when creating the node, for example:
var span = new nano({tag: 'span', parent: nano.body(), example: 'This is a test'});
The SPAN that was created now has an attribute named "example" with the value "This is a test".
