# j-Part

> This component can handle different contents asynchronously. If the element doesn't contain any content then the component downloads the content according to the url defined in configuration.

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

This component can handle different contents asynchronously. __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 part is visible (always)
- `hidden {String}` optional, a link to function, it's executed when the part is hidden (always)
- `init {String}` optional, a link to function, it's executed when the part 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 part 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 part is wanting to show
- `invisible {Boolean}` enables adding of `invisible` class when the part 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__:

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

__Good to know 3__:

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

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

Use it with `<ui-component name="part">`. 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="part" path="currentpart" config="if:home;url:/bla/bla/home.html"></ui-component>
<ui-component name="part" path="currentpart" config="if:services;url:/bla/bla/services.html;reload:services_reload"></ui-component>
<ui-component name="part" path="currentpart" config="if:contact;url:/bla/bla/contact.html;reload:contact_reload"></ui-component>

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

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