Plugins

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);
	}

})();