# j-Section

> j-Section: udržiava pevnú percentuálnu výšku; skvelé využitie pre intranetové aplikácie

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 3ae91d0b04b2098c9683ec7ab75c0c38f07437044402ddd172e553a3ee6e217d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- udržiava pevnú percentuálnu výšku
- skvelé využitie pre intranetové aplikácie
- podporuje `releasing`

__Konfigurácia__:

- `height {Number}` percento výšky
- `parent {String}` voliteľné, kontajner s pevnou výškou, môže byť `window`. Predvolená hodnota: Prvok `parent`.
- `minheight {Number}` minimálna výška v pixeloch (predvolené: `0` - vypnuté)
- `scroll {Boolean}` umožňuje vertikálne posúvanie (predvolené: `false` - vypnuté)
- `scrollbar {Boolean}` zobrazuje posuvník (predvolené: `false`)
- `delay {Number}` `msec.` znova zmení veľkosť poľa, ak sa hodnota zmení podľa cesty (predvolené: `100`)
- `visibleY {Boolean}` stále zobrazuje posúvač `Y` (predvolené: `false`)
- `visibleX {Boolean}` stále zobrazuje posúvač `X` (predvolené: `false`)
- `scrolltop {Boolean}` sa automaticky posunie nahor, ak sa zmení `path` (predvolené: `false`)
- `margin {Number}` voliteľné, horný/dolný okraj spolu (podporuje `auto`, ktorý sa počíta od `offset.top`, predvolené: `0`)
- `marginxs {Number}` voliteľné, horný/dolný okraj spolu pre šírku obrazovky `xs`
- `marginsm` voliteľné, horný/dolný okraj spolu pre šírku obrazovky `sm`
- `marginmd` voliteľné, horný/dolný okraj spolu pre šírku obrazovky `md`
- `marginlg` voliteľné, horný/dolný okraj spolu pre šírku obrazovky `lg`
- `invisible {Boolean}`, ak `true`, sekcia nastaví triedu `invisible` pri vykresľovaní (predvolené: `true`)
- `autofocus {Boolean/String}` môže zamerať vstup. `String` === `jQuery selector` pre vstup
- `back {String}` názov pre tlačidlo Späť (predvolené: `Back`)
- Oneskorenie animácie `delayanim {Number}` (predvolené: `100`)
- `scrollbarshadow {Boolean}` pridáva tieň pre posuvníky (predvolené: `false`)
- `backexec {String}` odkaz na `function(parent)`, ktorý zachytáva tlačidlo Späť (bráni štandardnému správaniu)

__Metódy__:

- `component.scrolltop(val)` zvitky Y
- `component.scrollbottom(val)` roluje Y zo spodnej strany
- `component.resize()` zmení veľkosť kontajnera (automaticky reaguje na udalosti `resize`)
- `component.resizescrollbar()` mení veľkosť vlastného posúvača (zamerané na špeciálne prípady)
- __NEW__: `component.import(url)` importuje novú sekciu z URL adresy, odpoveď musí byť v tvare `<section data-if="...."`
- __NEW__: `component.import(html)` importuje novú sekciu z HTML v tvare `<section data-if="...."`
- __NOVINKA__: `component.import(element)` importuje novú sekciu zo surového prvku `SECTION`
- __NOVINKA__: `component.cancel([id])` dynamicky odstraňuje sekciu

__Definícia__:

```html
<ui-component name="section" path="path">

	<!-- path must have same value as "data-if" attribute -->
	<section data-if="1" data-title="A title">

	</section>

	<!-- path must have same value as "data-if" attribute -->
	<!-- "data-parent" enables Back button in the header and after click the component sets value from "data-parent" attribute -->
	<section data-if="2" data-parent="1" data-title="A title">

	</section>

	<!-- GOOD TO KNOW: Dynamic compilation -->
	<section data-if="3" data-parent="2" data-title="A title" data-back="link_to_function">

		<!-- SCRIPT or TEMPLATE -->
		<script type="text/html">
			Will be compiled and rendered when the section will be displayed
		</script>

	</section>

	<!-- Template from URL address -->
	<section data-if="4" data-parent="2" data-title="A title" data-url="LINK_TO_HTML_TEMPLATE"></section>

</ui-component>
```

__Atribúty sekcie__:

- `data-if` musí obsahovať podmienku pre zobrazenie
- `data-parent` môže obsahovať nadradený `data-if`
- `data-title` obsahuje označenie/nadpis pre sekciu
- `data-reload` môže obsahovať prepojenie na `function(el)` (voliteľné)
- `data-id` obsahuje vlastný identifikátor na nahradenie všetkých fráz `~ID~` v obsahu (voliteľné)
- `data-url` môže obsahovať odkaz na šablónu (voliteľné)

__Je dobré vedieť__:

- Ak chcete pridať ďalší obsah do hlavičky na pravú stranu, stačí pridať dovnútra komponentu napr. `<div>BUTTON</div>`.
- Môžete dynamicky vkladať/odstraňovať sekcie pomocou metód `component.import()` alebo `component.cancel()`.
- Všetky atribúty sekcie je možné dynamicky meniť (napr. `data-title`, `data-parent` atď.).
- všetky frázy `~PATH~` budú nahradené hodnotou atribútu `data-if`
- všetky frázy `~ID~` budú nahradené hodnotou atribútu `data-if`
- `SET('path', 'if', 'right')` animuje obsah na pravú stranu

Použite ho so `<ui-component name="section">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```html example.html
<style>
	body { padding: 0; margin: 0; overflow: hidden; }
</style>

<ui-component name="section" path="common.section" config="parent:window;scrollbar:1" default="''">

	<section class="hidden invisible" data-if="1" data-title="Section 1">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				<div>SECTION 1</div>
				<div class="exec link" data-exec="showsection2">Show section 2</div>
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2">
		<script type="text/html">
			<div class="padding">
				<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
					SECTION 2
				</div>
			</div>
		</script>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2" data-url="LINK_TO_TEMPLATE"></section>
</ui-component>

<script>

	function showsection2() {
		SET('common.section', '2');
	}

	setTimeout(showsection2, 1000);

</script>
```