# j-Directory

> Het is vergelijkbaar met j-Suggestion, maar heeft een betere ontwerp en ondersteunt meer handige functies.

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

Het is vergelijkbaar met `j-Suggestion`, maar heeft een betere ontwerp en ondersteunt meer handige functies.

- Singleton
- Werken met touches
- Ondersteunt het donkere mode

> __IMPORTANT__: deze component geeft standaard een waarde als tekst uit de eigenschap van `name`.


__Methoden__:

Methode: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` een lijst van items (`String` type betekent een link naar de gegevensbron)
- `options.offsetX {Number}` optioneel, `x` offset (default: `0`)
- `options.offsetY {Number}` optioneel, `y` offset (default: `0`)
- `options.offsetWidth {Number}` optioneel, `width` offset (default: `0`)
- `options.placeholder {String}` optioneel, een plaatshouder voor het zoekveld
- __NEW__ `options.height {Number}` optioneel, een hoogte van de container (default: `180`)
- `options.render {Function}` optioneel, een functie voor aangepaste rendering van het item `function(item, text)` moet `HTML` retourneren
- `options.custom {Boolean/String}` optioneel, een waarde die niet is gedefinieerd in `options.items`, standaard: `false` kan worden teruggekeerd
- `options.minwidth {Number}` optioneel, een minimale breedte, standaard `200`
- `options.maxwidth {Number}` optioneel, een maximale breedte, standaard `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` wordt uitgevoerd wanneer de gebruiker op het item klikt
- `options.key {String}` Optie, een default `key` Voor `text` De waarde (de standaard) `name`)
- `options.empty {String}` optioneel, voegt leeg veld toe
- `options.exclude {Function}` optioneel, kan items uitsluiten en moet een boolean `function(item) { return item.id !== 100 }` retourneren
- `options.close {Function}` optioneel, kan het sluiten van de panelen bepalen
- `options.search {Boolean/String}` optioneel, kan het zoekveld verbergen (default: `true`) of `{String}` (key name) kan een waarde voor het zoeken mappen
- `options.selected {Object}` optioneel, kan een geselecteerde waarde bevatten (default: `undefined`)
- `options.align {String}` optioneel, `left` (default), `right` of `center`
- `options.position {String}` optioneel, `top` (default), `bottom`
- `options.raw {Boolean}` optioneel, deze optie voorkomt het ontsnappen van tekens (met andere woorden: HTML-inhoud wordt toegestaan in etiketten van items, standaard: `false`)
- `options.classname {String}` optioneel, een aangepaste containerklasse voor alle items
- absolute positionering werkt alleen als `options.element` niet is gedefinieerd
	- `options.x {Number}` absolute positie X
	- `options.y {Number}` absolute positie
- `options.checkbox {Boolean}` optioneel, mogelijk checkboxes
- `options.checked {Array String}` optioneel, identificatoren van gecontroleerde items
	- Gericht op `options.items {Function(q, next)}`
	- De callback geeft alleen de grond-ID's `Array {String}`
- __NEW__ `options.template {String}` optioneel, een aangepaste Tangular template bijvoorbeeld `{{ name }}` (default: null)
- __NEW__ `options.fuzzy {Boolean}` optioneel, het kan fuzzy zoeken uit te schakelen (default: `true`)

Methode: `component.hide()`

__Configuratie__:
- `placeholder` - een plaatshouder voor de zoekopdracht
- `create` - een plaatshouder voor het label `Create` (default: `Create`)

__Ondersteunde items__:

- `name {String}` een label naam
- `template {String}` optioneel, een aangepaste Tangular template
- `classname {String}` optioneel, voegt extra klassen toe aan het element `<li>`
- `disabled {Boolean}` optioneel, het kan item uit te schakelen
- `selected {Boolean}` optioneel, het selecteert item

__Formatting via Tangular__:

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

__Formatting via custom function__:

```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>';
};
```

__Toegevoegd aan custom class__:

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

__Server-zijde zoekopdracht__:

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

__Goed om te weten__:

- als `checkboxes:true` dan de component items uitbreidt door een timestamp `selectedts {Number}` toe te voegen als gevolg van bestelling

Gebruik het met `<ui-component name="directory">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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