j-Part

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

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.

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.

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>