# j-Directory

> Es un componente similar a j-Suggestion, pero tiene un diseño mejorado y admite funciones más útiles.

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

Es un componente similar a `j-Suggestion`, pero tiene un diseño mejorado y admite funciones más útiles.

- singleton
- funciona con toques
- admite __modo oscuro__

> __IMPORTANTE__: de forma predeterminada, este componente representa un valor como texto de la propiedad `name`.


__Métodos__:

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

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` una lista de elementos (el tipo `String` significa un enlace a la fuente de datos)
- `options.offsetX {Number}` opcional, desplazamiento `x` (predeterminado: `0`)
- `options.offsetY {Number}` opcional, desplazamiento `y` (predeterminado: `0`)
- `options.offsetWidth {Number}` opcional, desplazamiento `width` (predeterminado: `0`)
- `options.placeholder {String}` opcional, un marcador de posición para el campo de búsqueda
- __NEW__ `options.height {Number}` opcional, una altura del contenedor (por defecto: `180`)
- `options.render {Function}` opcional, una función para la representación personalizada del artículo `function(item, text)` debe devolver `HTML`
- `options.custom {Boolean/String}` opcional, permite devolver un valor no definido en `options.items`, predeterminado: `false`
- `options.minwidth {Number}` opcional, ancho mínimo, predeterminado `200`
- `options.maxwidth {Number}` opcional, ancho máximo, predeterminado `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` se activa cuando el usuario hace clic en el elemento
- `options.key {String}` opcional, un valor predeterminado `key` para `text` (predeterminado: `name`)
- `options.empty {String}` opcional, agrega campo vacío
- `options.exclude {Function}` opcional, puede excluir elementos y debe devolver un valor booleano `function(item) { return item.id !== 100 }`
- `options.close {Function}` opcional, puede determinar el cierre del panel
- `options.search {Boolean/String}` opcional, puede ocultar el campo de búsqueda (predeterminado: `true`) o `{String}` (nombre de clave) puede asignar un valor para la búsqueda
- `options.selected {Object}` opcional, puede contener un valor seleccionado (predeterminado: `undefined`)
- `options.align {String}` opcional, `left` (predeterminado), `right` o `center`
- `options.position {String}` opcional, `top` (predeterminado), `bottom`
- `options.raw {Boolean}` opcional, esta opción desactiva el escape de caracteres (en otras palabras: se permitirá contenido HTML en las etiquetas de los elementos, predeterminado: `false`)
- `options.classname {String}` opcional, una clase de contenedor personalizada para todos los artículos
- el posicionamiento absoluto funciona sólo si `options.element` no está definido
	- `options.x {Number}` posición absoluta X
	- `options.y {Number}` posición absoluta y
- `options.checkbox {Boolean}` opcional, habilita casillas de verificación
- `options.checked {Array String}` opcional, identificadores de artículos marcados
	- dirigido a `options.items {Function(q, next)}`
	- la devolución de llamada devuelve sólo identificadores sin formato `Array {String}`
- __NEW__ `options.template {String}` opcional, una plantilla personalizada Tangular, p. `{{ name }}` (predeterminado: nulo)
- __NEW__ `options.fuzzy {Boolean}` opcional, puede desactivar la búsqueda difusa (predeterminado: `true`)

Método: `component.hide()`

__Configuración__:
- `placeholder` - un marcador de posición para la entrada de búsqueda
- `create` - un marcador de posición para la etiqueta `Create` (predeterminado: `Create`)

__Campos de elementos admitidos__:

- `name {String}` un nombre de etiqueta
- `template {String}` opcional, una plantilla Tangular personalizada
- `classname {String}` opcional, agrega clases adicionales al elemento `<li>`
- `disabled {Boolean}` opcional, puede desactivar el elemento
- `selected {Boolean}` opcional, selecciona item

__Formato vía Tangular__:

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

__Formateo mediante función personalizada__:

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

__Adición de clase personalizada__:

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

__Búsqueda del lado del servidor__:

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

__Es bueno saberlo__:

- si `checkboxes:true` entonces el componente extiende los elementos agregando una marca de tiempo `selectedts {Number}` debido al pedido

Úselo con `<ui-component name="directory">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>
```