# j-Directory

> Il s'agit d'un composant similaire au j-Suggestion, mais il a une conception améliorée et prend en charge des fonctionnalités plus pratiques.

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

Il s'agit d'un composant similaire au `j-Suggestion`, mais il a une conception améliorée et prend en charge des fonctionnalités plus pratiques.

- singleton
- fonctionne avec des touches
- prend en charge le __mode sombre__

> __IMPORTANT__: par défaut, ce composant rend une valeur en tant que texte de la propriété `name`.


__Méthodes__ :

Méthode : `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` une liste d'articles (type `String` signifie un lien vers la source de données)
- `options.offsetX {Number}` optionnel, `x` offset (défaut: `0`)
- `options.offsetY {Number}` optionnel, `y` offset (défaut: `0`)
- `options.offsetWidth {Number}` optionnel, `width` offset (défaut: `0`)
- `options.placeholder {String}` optionnel, un locataire pour le champ de recherche
- __NEW__ `options.height {Number}` optionnel, une hauteur du conteneur (defaut: `180`)
- `options.render {Function}` facultatif, une fonction de rendement personnalisé de l'article `function(item, text)` doit retourner `HTML`
- `options.custom {Boolean/String}` facultatif, permettant de retourner une valeur non définie dans `options.items`, par défaut: `false`
- `options.minwidth {Number}` optionnel, une largeur minimale, standard `200`
- `options.maxwidth {Number}` optionnel, largeur maximale, standard `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` est déclenché lorsque l'utilisateur clique sur l'élément
- `options.key {String}` en option, un `key` par défaut pour la valeur `text` (par défaut : `name`)
- `options.empty {String}` optionnel, ajoute un champ vide
- `options.exclude {Function}` optionnel, peut exclure les articles et doit retourner un boolean `function(item) { return item.id !== 100 }`
- `options.close {Function}` optionnel, peut déterminer la fermeture du panneau
- `options.search {Boolean/String}` optionnel, peut cacher le champ de recherche (defaut: `true`) ou `{String}` (nom clé) peut cartographier une valeur pour la recherche
- `options.selected {Object}` optionnel, peut contenir une valeur sélectionnée (defaut: `undefined`)
- `options.align {String}` optionnel, `left` (defaut), `right` ou `center`
- `options.position {String}` optionnel, `top` (defaut), `bottom`
- `options.raw {Boolean}` facultatif, cette option empêche l'échappement des caractères (d'autres termes: le contenu HTML sera autorisé dans les étiquettes d'articles, par défaut: `false`)
- `options.classname {String}` optionnel, une classe de conteneur personnalisée pour tous les articles
- La positionnation absolue ne fonctionne que si le `options.element` n'est pas défini
	- `options.x {Number}` position absolue X
	- `options.y {Number}` Position absolue
- `options.checkbox {Boolean}` optionnel, permettant les boîtes de vérification
- `options.checked {Array String}` optionnel, identifiants d'objets vérifiés
	- Objectif pour `options.items {Function(q, next)}`
	- La récupération de l'appel ne remet que les identifiants `Array {String}`
- __NEW__ `options.template {String}` optionnel, un modèle Tangular personnalisé par exemple `{{ name }}` (defaut: null)
- __NEW__ `options.fuzzy {Boolean}` optionnel, il peut désactiver la recherche fuzzy (defaut: `true`)

Méthode : `component.hide()`

__Configuration__ :
- `placeholder` - un locataire pour l'entrée de recherche
- `create` - un locataire pour l'étiquette `Create` (défaut: `Create`)

__Les champs d'objets soutenus__:

- `name {String}` un nom d'étiquette
- `template {String}` optionnel, un modèle personnalisé Tangular
- `classname {String}` optionnel, ajoute des classes supplémentaires à l'élément `<li>`
- `disabled {Boolean}` optionnel, il peut désactiver l'élément
- `selected {Boolean}` optionnel, il sélectionne l'élément

__Formatisation par Tangular__:

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

__Formatage via une fonction personnalisée__ :

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

__Ajout d'une classe personnalisée__ :

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

__Recherche côté serveur__ :

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

__Bon à savoir__ :

- si `checkboxes:true` alors le composant étend les éléments en ajoutant un horodatage `selectedts {Number}` en raison de la commande

Utilisez-le avec `<ui-component name="directory">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```