Manual de JuncoCMS (Javascript)

Este es el manual de la sección javascript de JuncoCMS.

Tabla de contenidos

Introducción

JuncoCMS tiene su propio framework de javascript. Esta decisión de diseño no tiene un motivo en particular, sino que ha sido consecuencia de varios años de desarrollo.

En realidad, después de varias "mudanzas" de frameworks, se optó por no tener un framework en sí, sino un conjunto de librerías, lo más independientes unas de otras. Como podrán imaginar, un objetivo así, dificilmente puede ser cumplido.

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:

Nota: En caso de no declarar a url, esta se genera internamente utilizando la clave.

Modal

Genera cuadros de diálogos.

Ejemplo 1

Modal

Modal({
 size: 'small',
 title: 'Modal test',
 content: 'Hello world!',
 buttons:[{type:'close',caption:'Close'}]
});

Opciones

Request modal

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:

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>