Brackets es un flexible editor de texto/IDE creado especialmente para el desarrollo web e implementado con Javascript. Lo que hace flexible a Brackets son sus extensiones que pueden ser creadas por cualquier, incluso por nosotros mismos. Podemos crear extensiones que nos ayuden a nuestras necesidades a la hora de programar, y publicarlas para que otros puedan aprovecharse de nuestro esfuerzo.
Puedes instalar Brackets desde http://brackets.io. Para ver todas las extensiones en su respectiva carpeta haz clic en Help, y luego en Show Extension Folder (Help → Show Extension Folder). En la carpeta de usuario, puedes crear tu nueva carpeta con una nueva extensión, y esta será visible en el editor Brackets. Una vez finalizado, puedes añadir tu extensión para que pueda ser utilizada por todo el mundo en https://brackets-registry.aboutweb.com
¿Qué vamos a implementar?
Vamos a crea una extensión que muestre tantos gifs de gatitos y perritos, como el usuario quiera.
Desarrollando la extensión
Creamos un fichero package.json que contenga la información necesaria de nuestra extensión. En él, introducimos el nombre, el título, la descripción, homepage, autor, licencia de la extensión... y estipulamos qué versión de Brackets es necesaria para ejecutar la extensión.
{
"name": "dimoffx.kitten-cat-gifs",
"title": "Kitten Cat Dog Gifs for Relaxation",
"description": "This extension adds an icon in the right menu that allows you to see as many cat and dog gifs as you want whenever coding becomes overwhelming",
"homepage": "https://github.com/DimoffX/catsndogs",
"version": "1.0.2",
"author": "Ivan Dimov <[email protected]> (http://dimoff.biz)",
"license": "MIT",
"engines": {
"brackets": ">=0.24.0"
},
"i18n": [ "en"]
}
Después, creamos nuestro fichero principal (llamado main.js)
En él, cargamos nuestro icon service utilizando la función require y pasándole la ruta del fichero. Utilizamos ./ para indicar que empezamos a construir la ruta desde el directorio actual (donde esta el fichero que queremos)
var iconService = require('./services/icon'),
Más tarde, cargamos el módulo Dialogs incorporado utilizando la función brackets.getModule
Dialogs = brackets.getModule('widgets/Dialogs'),
Después de eso, cargamos nuestra vista HTML en una variable utilizando require.
view = require('text!templates/modal.html'),
Ahora, cargamos otros módulo nativo que utilizaremos para incluir nuestra hoja de estilos personalizada.
ExtensionUtils = brackets.getModule('utils/ExtensionUtils'),
Cargamos nuestra hoja de estilos utilizando el módulo ExtensionUtils que ya hemos incluido:
ExtensionUtils.loadStyleSheet(module, 'styles/styles.css');
Inicializamos nuestro propio módulo iconService
iconService.init();
Utilizamos la función click de nuestro módulo iconService y le añadimos un parámetro de devolución que abrirá el diálogo de Brackets con sus contenidos (recuerda que hemos almacenado los contenidos de HTML dentro de una variable)
iconService.click(function () {
Dialogs.showModalDialogUsingTemplate(view, true);
});
Nuestra hoja de estilo solamente añade un icono de fondo al enlace que utilizaremos el menú de Brackets que inicializará nuestra extensión, y añade un cursor pointer a nuestros botones.
#kitten-btn {
content: "";
cursor: pointer;
background: url("../images/logo.png");
width: 40px;
}
.my-cats .btn {
cursor: pointer;
}
La función init de nuestro iconService que hemos llamado en el archivo principal, añade un enlace al toolbar de Brackets.
function init(){
//var imagePath = config.path + 'images/icon.png';
icon = $('<a title="Watch cats and relax" id="kitten-btn"></a>');
//icon.css('background', 'url(' + config.path + 'images/icon.png)');
icon.appendTo($("#main-toolbar .buttons"));
}
Su función click comprueba si el icono se ha cargado en el menú, y si es así, define un detector del evento clic que ejecutará todo lo que le pasemos a nuestra función personalizada de click. Por último, exporta estas dos funciones para que cada vez que te haga falta este módulo en otro módulo, seas capaz de utilizar las dos funciones.
function click(handler){
if (icon === null){
throw new Error('Icon is not initialized');
}
icon.on('click', handler);
}
exports.init = init;
exports.click = click;
});
La vista
Nuestra vista solo mostrará un modal con un botón de cierre, una imagen, y dos botones para cargar nuevos gifs. Añadimos JavaScript, para detectar el evento click y volver a llamar a la API de los gifs de gatos que estamos utilizando. Haciendo clic en el botón de Load New Dog, mostraremos un gif al azar dentro de una colección de 150, pasándole un número aleatorio a la URI.
<div class="modal my-cats">
<div class="modal-dialog">
<div class="modal-header">
<h1 class="modal-title">Cats 'N Dogs <span class="pull-right"><button class="dialog-button btn primary close-button" data-button-id="ok">X</button></span></h1>
</div>
<div class="modal-body">
<div class="text-center my-cat">
<img id="the-cat" src="http://thecatapi.com/api/images/get?format=src&type=gif">
</div>
<script>
jQuery(function($) {
$(".my-cats #cat-refresh").click(function() {
$("#the-cat").attr("src", "http://thecatapi.com/api/images/get?format=src&type=gif&rand=" + Math.random() * 9999);
})
$(".my-cats #dog-refresh").click(function() {
var dogN = Math.floor(Math.random() * (146 - 1) + 1);
$("#the-cat").attr("src", "http://www.doggifpage.com/gifs/"+dogN+".gif");
})
})
</script>
</div>
<div class="modal-footer">
<button id="cat-refresh" class="btn btn-success">Load A New Cat</button>
<button id="dog-refresh" class="btn btn-success">Load A New Dog</button>
</div>
<p class="text-center">
Ivan Dimov
</p>
</div>
</div>
Fuente: phpgang.com