# j-Page

> This component can handle different contents asynchronously. The component has same functionality like j-Part. If the element doesn't contain any content then the component downloads the content accor

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 4c9bc3a6b340c84cf238488d0ffc2d0c9cd1f737c3ad50b2f5d0a66615ebc92a
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

This component can handle different contents asynchronously. The component has same functionality like `j-Part`. __If the element doesn't contain any content__ then the component downloads the content according to the `url` defined in configuration.

- __NEW__ `path` can contain `{String Array}`

__Configuration__:

- `url {String}` required, a relative URL address
- `if {String}` required, condition, it's compared with the value within of `path` (__NEW__: supports multiple paths divided by the `comma`)
- `reload {String}` optional, a link to function `function(init) {}`, it's executed when the page is visible (always)
- `hidden {String}` optional, a link to function, it's executed when the page is hidden (always)
- `init {String}` optional, a link to function, it's executed when the page is visible and onetime
- `default {String}` optional, a short alias for `DEFAULT(default)`
- `hide {Boolean}` optional, auto-hide element if the `if` condition is not valid (default: `true`)
- `cleaner {Number}` optional, idle time (in minutes) for running of cleaning (default: `0`)
- `clean {String}` optional, a link to function, it's executed before the page is cleaned
- `loading {Boolean}` optional, enables loading via `SETTER('loading')` (default: `true`)
- `path {String}` optional, the component replace all `~PATH~` and `CLASS` phrases for the value of the `path` in the downloaded template
- `replace {String}` optional, a link to method `function(content) { return content }` which can modify downloaded template
- `absolute {Boolean}` optional, enables absolute position (default `false`)
- `check {String}` optional, a link to function `function(next) { next(); }`, it's executed when the page is wanting to show
- `invisible {Boolean}` enables adding of `invisible` class when the page is going to hide (default: `false`)
- `delay {Number}` a delay (in ms) for removing of `invisible` class and hiding of `loading` (default: `500`)
- `autofocus {Boolean/String}` focuses the first input, textarea (default: `false`)
- `delayloading {Number}` a delay (in ms) for hiding of of `loading` (default: `800`)
- `id {String}` a custom identifier for replacing `~ID~` phrases in the imported HTML (default: empty)

__Good to know 1__:

- all `CLASS` and `~PATH~` phrases will be replaced by `config.path` or `config.if` automatically
- all `~ID~` phrases will be replaced by `config.id` automatically

__Good to know 2__:

Page component emits an `event` in the form: `pages.` + `config.if` for extending of pages. This can be very usefull for some plugin systems. Example:

__Good to know 3__:

If the page component isn't within scope then the value from the `config.if` will replace `?` characters in all config keys.

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

Use it with `<ui-component name="page">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```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>
```