# j-Page

> Este componente puede manejar diferentes contenidos de forma asincrónica. El componente tiene la misma funcionalidad que j-Part. Si el elemento no contiene ningún contenido, el componente descarga el contenido de acuerdo

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 503a2537d824ba8e5c129843fe9aa4244c67c63206adc5273621c2f9c06c3e53
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Este componente puede manejar diferentes contenidos de forma asincrónica. El componente tiene la misma funcionalidad que `j-Part`. __Si el elemento no contiene ningún contenido__ entonces el componente descarga el contenido de acuerdo con el `url` definido en la configuración.

- __NEW__ `path` puede contener `{String Array}`

__Configuración__:

- Se requiere `url {String}`, una dirección URL relativa
- Se requiere `if {String}`, condición, se compara con el valor dentro de `path` (__NEW__: admite múltiples rutas divididas por `comma`)
- `reload {String}` opcional, un enlace a la función `function(init) {}`, se ejecuta cuando la página está visible (siempre)
- `hidden {String}` opcional, un enlace para funcionar, se ejecuta cuando la página está oculta (siempre)
- `init {String}` opcional, un enlace para funcionar, se ejecuta cuando la página es visible y una vez
- `default {String}` opcional, un alias corto para `DEFAULT(default)`
- `hide {Boolean}` elemento opcional que se oculta automáticamente si la condición `if` no es válida (predeterminado: `true`)
- `cleaner {Number}` opcional, tiempo de inactividad (en minutos) para la ejecución de la limpieza (predeterminado: `0`)
- `clean {String}` opcional, un enlace para funcionar, se ejecuta antes de que se limpie la página
- `loading {Boolean}` opcional, habilita la carga mediante `SETTER('loading')` (predeterminado: `true`)
- `path {String}` opcional, el componente reemplaza todas las frases `~PATH~` y `CLASS` por el valor de `path` en la plantilla descargada.
- `replace {String}` opcional, un enlace al método `function(content) { return content }` que puede modificar la plantilla descargada
- `absolute {Boolean}` opcional, habilita la posición absoluta (por defecto `false`)
- `check {String}` opcional, un enlace a la función `function(next) { next(); }`, se ejecuta cuando la página quiere mostrarse
- `invisible {Boolean}` permite agregar la clase `invisible` cuando la página se va a ocultar (predeterminado: `false`)
- `delay {Number}` un retraso (en ms) para eliminar la clase `invisible` y ocultar `loading` (predeterminado: `500`)
- `autofocus {Boolean/String}` enfoca la primera entrada, área de texto (predeterminado: `false`)
- `delayloading {Number}` un retraso (en ms) para ocultar `loading` (predeterminado: `800`)
- `id {String}` un identificador personalizado para reemplazar frases `~ID~` en el HTML importado (predeterminado: vacío)

__Es bueno saberlo 1__:

- todas las frases `CLASS` y `~PATH~` serán reemplazadas por `config.path` o `config.if` automáticamente
- todas las frases `~ID~` serán reemplazadas por `config.id` automáticamente

__Es bueno saberlo 2__:

El componente de página emite un `event` con el formato: `pages.` + `config.if` para ampliar las páginas. Esto puede resultar muy útil para algunos sistemas de complementos. Ejemplo:

__Es bueno saberlo 3__:

Si el componente de la página no está dentro del alcance, entonces el valor de `config.if` reemplazará los caracteres `?` en todas las claves de configuración.

```js
ON('pages.YOURIFCONDITION', function(element, pagecomponent) {
	// It's executed only when the page is initialized
});
```

Úselo con `<ui-component name="page">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<ui-component name="page" path="currentpage" config="if:home;url:/bla/bla/home.html"></ui-component>
<ui-component name="page" path="currentpage" config="if:services;url:/bla/bla/services.html;reload:services_reload"></ui-component>
<ui-component name="page" path="currentpage" config="if:contact;url:/bla/bla/contact.html;reload:contact_reload"></ui-component>

<pre><code>SET(&#39;currentpage&#39;, &#39;home&#39;);</code></pre>

<script>
	var currentpage = '';
</script>
```