Update documentation to customize JavaScript

Note that, while it doesn't really affect the way the application
behaves (as long as the JavaScript code doesn't rely on the order it's
loaded) we're requiring `app/assets/javascripts/custom.js` after
requiring any files in the `app/assets/javascripts/custom/` folder. This
is done for consistency, since we load the content of
`app/assets/javascripts/application.js` after requiring everything else.
This commit is contained in:
Javi Martín
2024-08-30 17:00:48 +02:00
parent a8250a6f46
commit ced834200a
8 changed files with 116 additions and 26 deletions

View File

@@ -32,7 +32,7 @@
* [Traducciones y Textos](customization/translations.md)
* [Imágenes](customization/images.md)
* [Estilos con CSS](customization/css.md)
* [Javascript](customization/javascript.md)
* [JavaScript](customization/javascript.md)
* [Modelos](customization/models.md)
* [Controladores](customization/controllers.md)
* [Vistas y HTML](customization/views.md)

View File

@@ -1,10 +1,10 @@
# Customization
# Personalización del código
* [Introducción](introduction.md)
* [Traducciones y Textos](translations.md)
* [Imágenes](images.md)
* [Estilos con CSS](css.md)
* [Javascript](javascript.md)
* [JavaScript](javascript.md)
* [Modelos](models.md)
* [Controladores](controllers.md)
* [Vistas y HTML](views.md)

View File

@@ -1,15 +1,52 @@
# Javascript
# Personalización de JavaScript
Si quieres agregar código Javascript puedes hacerlo en el fichero `app/assets/javascripts/custom.js`. Por ejemplo si quieres que salga una alerta puedes poner lo siguiente:
Para añadir código de JavaScript personalizado, crea un fichero en `app/assets/javascripts/custom/`.
## Añadir nuevas funciones
Para crear una nueva función, necesitas definirla y hacer que se llame cuando el navegador carga una página.
Por ejemplo, para crear una alerta, podemos crear el fichero `app/assets/javascripts/custom/alert.js` con el siguiente contenido:
```js
$(function(){
alert('foobar');
});
(function() {
"use strict";
App.Alert = {
initialize: function() {
alert("foobar");
}
};
}).call(this);
```
Si trabajas con código coffeescript puedes revisarlo con [coffeelint](http://www.coffeelint.org/) (instalalo con `npm install -g coffeelint`) :
A continuación, edita la función `initialize_modules` del fichero `app/assets/javascripts/custom.js`:
```bash
coffeelint .
```js
var initialize_modules = function() {
"use strict";
// Add calls to your custom code here; this will be called when
// loading a page
App.Alert.initialize();
};
```
## Sobrescribir funciones existentes
En Consul Democracy, las funciones de JavaScript se definen como propiedades de un objeto. Esto quiere decir que, para sobrescribir una función, basta con redefinir la propiedad del objeto que la contiene. Siempre que sea posible, recomendamos que tu código personalizado llame al código original y solamente modifique los casos en que debería comportarse de forma diferente. De este modo, al actualizar a una versión de Consul Democracy que actualice las funciones originales, tus funciones personalizadas incluirán las modificaciones del código original automáticamente. En ocasiones, hacer esto no será posible, con lo que tendrás que cambiar tu función personalizada al actualizar.
Como ejemplo, vamos a cambiar la función `generatePassword` del fichero `app/assets/javascripts/managers.js`. Para ello, crea el fichero `app/assets/javascripts/custom/managers.js` con el siguiente contenido:
```js
(function() {
"use strict";
App.Managers.consulGeneratePassword = App.Managers.generatePassword;
App.Managers.generatePassword = function() {
return App.Managers.consulGeneratePassword() + "custom";
};
}).call(this);
```
Esto devolverá lo que devuelve la función original seguida del texto "custom".