Plugins
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", "", 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); } })();