# j-Directory

> Je to podobný komponent ako j-Suggestion, ale má vylepšený dizajn a podporuje viac praktických funkcií.

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

Je to podobný komponent ako `j-Suggestion`, ale má vylepšený dizajn a podporuje viac praktických funkcií.

- singleton
- pracuje s dotykmi
- podporuje __tmavý režim__

> __IMPORTANT__: štandardne tento komponent vykresľuje hodnotu ako text z vlastnosti `name`.


__Metódy__:

Metóda: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` zoznam položiek (typ `String` znamená prepojenie na zdroj údajov)
- `options.offsetX {Number}` voliteľné, posun `x` (predvolené: `0`)
- `options.offsetY {Number}` voliteľné, posun `y` (predvolené: `0`)
- `options.offsetWidth {Number}` voliteľné, posun `width` (predvolené: `0`)
- `options.placeholder {String}` voliteľné, zástupný symbol pre vyhľadávacie pole
- __NEW__ `options.height {Number}` voliteľné, výška kontajnera (predvolené: `180`)
- `options.render {Function}` voliteľné, funkcia na prispôsobené vykreslenie položky `function(item, text)` musí vrátiť `HTML`
- `options.custom {Boolean/String}` voliteľné, umožňuje vrátiť hodnotu, ktorá nie je definovaná v `options.items`, predvolené: `false`
- `options.minwidth {Number}` voliteľné, minimálna šírka, predvolená `200`
- `options.maxwidth {Number}` voliteľné, maximálna šírka, predvolená `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` sa spustí, keď používateľ klikne na položku
- `options.key {String}` voliteľné, predvolená hodnota `key` pre hodnotu `text` (predvolená: `name`)
- `options.empty {String}` voliteľné, pridá prázdne pole
- `options.exclude {Function}` voliteľné, môže vylúčiť položky a musí vrátiť booleovskú hodnotu `function(item) { return item.id !== 100 }`
- `options.close {Function}` voliteľné, môže určiť uzavretie panelu
- `options.search {Boolean/String}` voliteľné, môže skryť vyhľadávacie pole (predvolené: `true`) alebo `{String}` (názov kľúča) môže mapovať hodnotu pre vyhľadávanie
- `options.selected {Object}` voliteľné, môže obsahovať vybranú hodnotu (predvolené: `undefined`)
- `options.align {String}` voliteľné, `left` (predvolené), `right` alebo `center`
- `options.position {String}` voliteľné, `top` (predvolené), `bottom`
- `options.raw {Boolean}` voliteľné, táto možnosť zakáže escapovanie znakov (inými slovami: v štítkoch položiek bude povolený obsah HTML, predvolené: `false`)
- `options.classname {String}` voliteľné, vlastná trieda kontajnera pre všetky položky
- absolútne polohovanie funguje len vtedy, ak nie je definované `options.element`
	- `options.x {Number}` absolútna poloha X
	- `options.y {Number}` absolútna poloha r
- `options.checkbox {Boolean}` voliteľné, umožňuje zaškrtávacie políčka
- `options.checked {Array String}` voliteľné, identifikátory kontrolovaných položiek
	- zamerané na `options.items {Function(q, next)}`
	- spätné volanie vráti iba nespracované identifikátory `Array {String}`
- __NOVINKA__ `options.template {String}` voliteľné, vlastná šablóna Tangular, napr. `{{ name }}` (predvolená hodnota: null)
- __NEW__ `options.fuzzy {Boolean}` voliteľné, môže zakázať fuzzy vyhľadávanie (predvolené: `true`)

Metóda: `component.hide()`

__Konfigurácia__:
- `placeholder` - zástupný znak pre vstup vyhľadávania
- `create` - zástupný symbol pre štítok `Create` (predvolené: `Create`)

__Podporované polia položiek__:

- `name {String}` názov štítku
- `template {String}` voliteľné, vlastná šablóna Tangular
- `classname {String}` voliteľné, pridáva ďalšie triedy do prvku `<li>`
- `disabled {Boolean}` voliteľné, môže zakázať položku
- `selected {Boolean}` voliteľné, vyberie položku

__Formátovanie cez Tangular__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });
```

__Formátovanie pomocou vlastnej funkcie__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
	return '<b>' + name + '</b>';
};
```

__Pridanie vlastnej triedy__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });
```

__Vyhľadávanie na strane servera__:

```js

var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
	next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
	console.log(selected);
};

SETTER('directory/show', opt);
```

__Je dobré vedieť__:

- ak `checkboxes:true`, potom komponent rozširuje položky pridaním časovej pečiatky `selectedts {Number}` kvôli objednávke

Použite ho so `<ui-component name="directory">`. 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 { background-color: #F0F0F0; }
</style>

<ui-component name="directory" config="placeholder:Search ..."></ui-component>

<div class="container">
	<div><a href="javascript:void(0)" data-name="classic">Open directory - classic</a></div>
	<div><a href="javascript:void(0)" data-name="checkboxes">Open directory - checkboxes</a></div>
</div>

<script>
	$(document).on('click', 'a', function() {


		var opt = {};
		opt.element = $(this);

		if (opt.element.attrd('name') === 'checkboxes') {
			opt.checkbox = true;
			opt.items = [{ name: 'Total.js', selected: true }, { name: 'Express.js', selected: true }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];
		} else
			opt.items = [{ name: 'Total.js', template: '<b>{{ name }}</b>' }, { name: 'Express.js' }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];

		opt.callback = function(value) {
			if (opt.checkbox)
				console.log('SELECTED:', value);
			else
				console.log('CLICKED:', value);
		};

		SETTER('directory/show', opt);
	});
</script>
```