Plugins
Contents |
About
Plugins are the most efficient and reusable way to package functionality for use in AtKit. Plugins can utilise any AtKit function (see Documentation), and often contain one or more toolbar buttons, language translations and functions.
An example plugin
Below is an example plugin for AtKit for the Readability extension.
(function(){ var pluginName = "readability"; var plugin = function(){ // Plugin code goes here AtKit.addButton( "readability", "Start Readability", "", function(dialogs, functions){ window.readabilityToken=""; AtKit.addScript(document.location.protocol + "//www.readability.com/bookmarklet/read.js"); } ); } if(typeof window['AtKit'] == "undefined"){ window.AtKitLoaded = function(){ var eventAction = null; this.subscribe = function(fn) { eventAction = fn; }; this.fire = function(sender, eventArgs) { if (eventAction != null) { eventAction(sender, eventArgs); } }; } window['AtKitLoaded'] = new AtKitLoaded(); window['AtKitLoaded'].subscribe(function(){ AtKit.registerPlugin(pluginName, plugin); }); } else { AtKit.registerPlugin(pluginName, plugin); } })();
The anatomy of a plugin
A template for a plugin can be found at the bottom of this page.
the value stored in pluginName is the plugin's allocated name in AtKit. This must be unique.
All of the plugin code lives inside the anonymous function allocated to plugin.
var plugin = function(){ }
The rest of the code in boilerplate to load the plugin into AtKit - it's best not to touch this.
Loading a plugin
If you wish to use plugins in your toolbar, you must put your toolbar code into an anonymous function and pass into AtKit.importPlugins(). An example has been given below:
(function (window, AtKit) { $ = AtKit.lib(); var settings = { 'baseURL': 'http://c.atbar.org/ATBar/', 'version': '2.0.070d' }; var onLoad = function(){ // Set our logo AtKit.setLogo(settings.baseURL + "images/atbar.png"); AtKit.setName("ATBar"); // Set language to Arabic AtKit.setLanguage("ar"); AtKit.setAbout("Version " + settings.version); // Add all the plugins to the toolbar AtKit.addPlugin("ftw"); AtKit.addPlugin("resize"); AtKit.addPlugin("fonts"); AtKit.addPlugin("spell"); AtKit.addPlugin("dictionary"); AtKit.addPlugin("gtts"); AtKit.addPlugin("css"); AtKit.addResetFn('reset-saved', function(){ AtKit.clearStorage(); }); // Run AtKit.render(); }; AtKit.importPlugins(["ftw", "resize", "fonts", "spell", "dictionary", "gtts", "css"], onLoad); }(window, AtKit));
In this example we have put our toolbar loading code into the anonymous function allocated to onLoad. This is passed into importPlugins as the second argument as a callback to run once the plugins (specified as an array as argument 1) have been loaded. Once the plugins have been loaded they can be added in order to the toolbar by using the addPlugin function.
Note that this example toolbar does not have the bootstrap code included. For a full example see Toolbars.
Blank plugin
(function(){ var pluginName = "readability"; var plugin = function(){ // Plugin code goes here } if(typeof window['AtKit'] == "undefined"){ window.AtKitLoaded = function(){ var eventAction = null; this.subscribe = function(fn) { eventAction = fn; }; this.fire = function(sender, eventArgs) { if (eventAction != null) { eventAction(sender, eventArgs); } }; } window['AtKitLoaded'] = new AtKitLoaded(); window['AtKitLoaded'].subscribe(function(){ AtKit.registerPlugin(pluginName, plugin); }); } else { AtKit.registerPlugin(pluginName, plugin); } })();