Plugins

De ATbar Wiki
Edição feita às 20h16min de 28 de julho de 2014 por Renanmach (Discussão | contribs)

(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para: navegação, pesquisa


Sobre

Plugins são a forma mais eficiente e reutilizável para empacotar a funcionalidade para uso do AtKit. Plugins podem utilizar qualquer função do AtKit (ver Documentação), e muitas vezes contêm um ou mais botões da barra de ferramentas, traduções e funções

Um exemplo de plugin

Abaixo está um exemplo do plugin para AtKit para a extensão Legibilidade.

(function(){

	var pluginName = "readability";
	var plugin = function(){

		// Plugin code goes here

		AtKit.addButton(
			"readability", 
			"Start Readability",
			"readability.png",
			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);
	}

})();

A anatomia do plugin

Um modelo para um plugin pode ser encontrado na parte inferior desta página.

o valor guardado em pluginName é o nome alocado para o plgin no AtKit. Ele deve ser único.

Todo o código do plugin vive no interior da função anônima alocada para plugin.

var plugin = function(){

}

O resto do código padronizado é para carregar o plugin em AtKit - é melhor não tocar isso.


Carregando o Plugin

Se você quiser usar plugins na barra de ferramentas, você deve colocar o seu código em uma função anônima e passar para AtKit.importPlugins (). Segue um exemplo:

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

Neste exemplo temos que colocar nosso código de carga da barra de ferramentas em uma função anônima alocada para onLoad. Isso é passado para importPlugins como o segundo argumento como um callback para executar uma vez que os plugins (especificados como uma matriz como argumento 1) forem carregados. Uma vez que os plugins forem carregados eles podem ser adicionados a fim de a barra de ferramentas com a função addPlugin.

Note que este exemplo da barra de ferramentas não tem o código de inicialização incluído. Para um exemplo completo ver Barras.

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

})();