# j-Directory

> É um componente semelhante ao j-Suggestion, mas tem um design melhorado e suporta recursos mais úteis.

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

É um componente semelhante ao `j-Suggestion`, mas tem um design melhorado e suporta recursos mais úteis.

- Singularidade
- Trabalhando com toques
- Apresentação - Modo escuro

> __IMPORTANT__: por padrão, este componente torna um valor como texto da propriedade `name`.


__Métodos__:

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

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` uma lista de itens (tipo `String` significa um link para a fonte de dados)
- `options.offsetX {Number}` opcional, `x` offset (default: `0`)
- `options.offsetY {Number}` opcional, `y` offset (default: `0`)
- `options.offsetWidth {Number}` opcional, `width` offset (default: `0`)
- `options.placeholder {String}` opcional, um local para o campo de pesquisa
- __NEW__ `options.height {Number}` opcional, uma altura do recipiente (default: `180`)
- `options.render {Function}` opcional, uma função para renderização personalizada do item `function(item, text)` deve retornar `HTML`
- `options.custom {Boolean/String}` opcional, permite a devolução de um valor não definido em `options.items`, padrão: `false`
- `options.minwidth {Number}` opcional, uma largura mínima, padrão `200`
- `options.maxwidth {Number}` opcional, uma largura máxima, padrão `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` é desativado quando o usuário clique no item
- `options.key {String}` opcional, um valor padrão de `key` para `text` (default: `name`)
- `options.empty {String}` opcional, adiciona campo vazio
- `options.exclude {Function}` opcional, pode excluir itens e deve devolver um boolean `function(item) { return item.id !== 100 }`
- `options.close {Function}` opcional, pode determinar o fechamento do painel
- `options.search {Boolean/String}` opcional, pode esconder o campo de pesquisa (default: `true`) ou `{String}` (nome chave) pode mapear um valor para a busca
- `options.selected {Object}` opcional, pode conter um valor selecionado (default: `undefined`)
- `options.align {String}` opcional, `left` (default), `right` ou `center`
- `options.position {String}` opcional, `top` (default), `bottom`
- `options.raw {Boolean}` opcional, esta opção impede a fuga de caracteres (em outras palavras: conteúdo HTML será permitido em rótulos de itens, padrão: `false`)
- `options.classname {String}` opcional, uma classe de contêiner personalizada para todos os itens
- Posicionamento absoluto funciona apenas se o `options.element` não for definido
	- `options.x {Number}` posição absoluta X
	- `options.y {Number}` posição absoluta e
- `options.checkbox {Boolean}` opcional, permitindo caixas de verificação
- `options.checked {Array String}` opcional, identificadores de itens verificados
	- Objetivo para `options.items {Function(q, next)}`
	- A chamada de volta só retorna os identificadores crus `Array {String}`
- __NEW__ `options.template {String}` opcional, um modelo personalizado Tangular por exemplo `{{ name }}` (default: null)
- __NEW__ `options.fuzzy {Boolean}` opcional, pode desativar a busca fuzzy (default: `true`)

Método: `component.hide()`

__Configuração__:
- `placeholder` - um local para a entrada de pesquisa
- `create` - um local para o rótulo `Create` (default: `Create`)

__Áreas de item suportadas__:

- `name {String}` - Nome da etiqueta
- `template {String}` opcional, um padrão personalizado de Tangular
- `classname {String}` opcional, adiciona classes adicionais ao elemento `<li>`
- `disabled {Boolean}` opcional, pode desativar o item
- `selected {Boolean}` opcional, ele seleciona item

__Formato através de Tangular__:

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

__Formato através da função 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>';
};
```

__Adicionar a classe custom__:

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

__Serviço de busca__:

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

__Bom para saber__:

- se o `checkboxes:true` então o componente estende os itens adicionando um timestamp `selectedts {Number}` devido à ordem

Use-o com `<ui-component name="directory">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>
```