Extensiones
Las librerías de javascript se encuentran en la ruta cms/scripts/, todas organizadas en carpetas con el nombre de la extensión a la que pertenecen.
El directorio, puede verse similar a:
Backend
Permite agregar funcionalidades a la plantilla de Backend. Internamente, utiliza un objeto Controls.
Uso básico
Backend.attach('hello', (el) => { '...' });De esta manera, al cargar la plantilla backend, buscará todos los elementos con el atributo data-tpl="hello" y, por cada uno de ellos, ejecutará la función callbak, pasándolos como parámetro.
Métodos
.attach
Agrega una control.
Backend.attach( name, fn )name
Un nombre único que identifique al control.
fn
La función a ejecutar cuando encuentra un elemento.
.attachAll
Agrega varios controles a la vez.
Backend.attachAll( obj )obj
Un objeto con los pares name: fn.
Backlist
Lo primero, es crear un objeto Backlist. El único parámetro será, opcionalmente, el identificador de la lista.
const _backlist = Backlist(ID);
Uso básico
_backlist
.url(fn)
.data({key:value})
.allowHistory()
.load();url()
Incluye una función para manejar internamente el constructor de urls (opcional).
data()
Datos que serán incluidos en todas las consultas que realice la lista (opcional).
allowHistory()
Agrega un control de "back bottom" a través del hash de la página (opcional).
load()
Carga la lista.
Agregar controles
Los controles permiten realizar acciones sobre la lista, sobre todo, consultas asincrónicas.
El control esta definido por una clave. El valor puede ser una función, sin embargo, se logra el mayor provecho si es un objeto.
_backlist
.url($U)
.controls({
add: {
modalOptions: {...},
},
edit: {
url: '...',
numRows: '1',
modalOptions: {...},
},
status: fn
})
.load();Basicamente, el control recibe las opciones del objeto JsRequest.
Además, tiene las siguientes opciones propias:
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| numRows | string | '+' | Indica el número de filas necesarias para que esté activo. Opciones: '0' = 0, '1' = 1, '+' = 1 o más, '?' = 0 o 1, '*' = 0 o más. |
| onlyRows | string|true | - | Permite ejecutar la tarea, solo si estan seleccionadas las filas que contienen una etiqueta con el nombre que se pasa como parámetro. Por ejemplo, si tenemos un administrador de archivos y queremos crear la opción de descomprimir o editar archivos, estas estarán disponibles solo si se seleccionan, respectivamente, archivos comprimidos o editables. |
| onSubmit | function | null | Agrega una comprobación, en caso de retornar false el control no realiza se detiene. |
Nota: En caso de no declarar a url, esta se genera internamente utilizando la clave.
Modal
Genera cuadros de diálogos.
Ejemplo 1
Modal({
size: 'small',
title: 'Modal test',
content: 'Hello world!',
buttons:[{type:'close',caption:'Close'}]
});
Opciones
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| type | string | 'default' | Cambia la vista. |
| size | string | 'small' | Cambia el tamaño. Valores: 'x-large', 'large', 'medium', 'small' |
| title | string | ||
| content | string | ||
| footer_html | string | Agrega html al pié del modal. | |
| form | array | undefined | Crea un formulario e incluye sólo elementos ocultos. |
| buttons | array | undefined | Agrega botones. |
| target | object | document.dody | Elemento donde se inserta el modal. |
| overlay | boolean | true | El modal se crea sobre una capa que cubre la página principal. |
| draggagle | boolean | false | El modal puede arrastrarse. |
| destroy | boolean | true | Al cerrar el modal se destruye. |
| onLoad | function | null | Ejecuta la función al cargar el modal. |
| onClose | function | null | Ejecuta la función al cerrar el modal. |
Request modal
JsRequest.modal({
url: 'media/docs/modal.json',
modalOptions: {
'size': 'large'
}
});System
En esta extensión se encuentra lo más parecido a un framewok javascript.
En realidad, se trata de un conjunto de librerías, más o menos independientes. Esta decisión se ha tomado a partir de los cambios que se han producido en el javascript, y que han ido quitando relevancia a muchos framework conocidos.
El archivo system
El archivo principal, contiene algunas funciones de uso común y polyfills. Aunque cada vez son menos.
JsControls
Agrega eventos javascript a una página html.
JsElement
JsElement()
Crea un elemento del DOM.
let el = JsElement('div.class-name#id-name', { text: 'Hello' });En el ejemplo, creará un div, le agregará una clase y un identificador. Por último, le colocará un texto de contenido.
Además de las propiedades y atributos comunes, es posible utilizar:
| Atributos | Descripción |
|---|---|
| className | Agrega el atributo class. |
| text | Agrega un texto a través de textContent. |
| html | Agrega un html a través de innerHTML. |
| styles | Agrega valores al atributo style. |
| events | Agrega eventos. |
JsForm
Manejador javascript de formularios.
Basicamente, es una implementación de varias librerías javascript del sistema: JsRequest, JsControl, JsFelem, JsSpinner, JsNotify.
Ejemplo inicial
Lo más sencillo, es pasar una cadena con la acción del formulario y una función de retorno. El formulario se enviará de forma asincrónica.
JsForm('#my-form').request('the_url', function() { alert('ok') });
JsRequest
Gestor javascript de consultas sincrónicas y asincrónicas.
Ejemplos
Consulta asincrónica, envia los datos de un formulario, devuelve un texto que actualiza en el objeto DOM señalado.
JsRequest.text({
url: 'the_url',
data: '#my-form',
update: '#inner-html'
})
Consulta asincrónica, envia los datos, devuelve un json, ejecuta una función de retorno.
JsRequest.json({
url: 'the_url',
data: {'key1':value1,'key2':value2},
onSuccess: function(json) { console.log(json) }
})
Consulta sincrónica, envia los datos del formulario.
JsRequest.post({
url: 'the_url',
data: '#my-form'
})
Consulta sincrónica, envia el valor del elemento de formulario seleccionado.
JsRequest.get({
url: 'the_url',
data: '#my-form-element'
})
El parámetro «data»
El parámetro «data» puede ser un formulario; un elemento de formulario; una cadena con el selector de DOM; un objeto con los pares valor, clave; un array con varias de las opciones anteriores; una función que devuelve cualquiera de las opciones anteriores y se ejecuta cuando se envía la consulta.
JsTooltip
Crea los clásicos tooltip personalizados.
Ejemplos
Tooltip on left | Tooltip on top | Tooltip on bottom | Tooltip on right
<a title="Tooltip" data-tooltip="left">Tooltip on left</a> |
<a title="Tooltip" data-tooltip="">Tooltip on top</a> |
<a title="Tooltip" data-tooltip="bottom">Tooltip on bottom</a> |
<a title="Tooltip" data-tooltip="right">Tooltip on right</a>