# j-Spotlight

> j-Spotlight: singleton; pracuje s systémem Bootstrap Grid

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

- singleton
- Systém Bootstrap Grid

__Konfigurace__:

- `height` {Číslo} předvolená výška každého položky (předvolená: `40`, musí být také definována v CSS)
- `placeholder` {String} předvolený držitel místa (předvolený: `Search`)

__Metody__:

Metoda: `component.show(opt)`

- `opt.id {String}` volitelně, identifikátor pro poslední položky (podmínkou: `empty`)
- `opt.recent {String}` aktivuje poslední položky, musí obsahovat formát vypršení (předvolený: `3 days`, `empty` znamená vypnutý)
- `opt.callback(selected_item) {Function}` je vyvolán, když uživatel klikne na položku
- `opt.cancel {Function}` je vyvolán, pak uživatel zruší složku
- URL adresy `opt.search {String}` pro vyhledávání hodnot ve formě `GET /api/search/?={0}`
- nebo `opt.search {Function}` odkaz na `function(search, next(ARR_ITEMS))` pro vyhledávání
- `opt.cache {String}` umožňuje cache, může obsahovat formát vypršení, např. `1 day` nebo `session`
- `opt.remap {Function}` může odstranit výsledky `items => items.map(...)`
- `opt.clear {Boolean}` to čistí předchozí výsledky (default: `false`)
- `opt.init {Boolean}` provádí prázdné vyhledávání, když je složka volána (předvolené: `false`)
- `opt.delay {Number}` zpoždění v `ms` pro provádění vyhledávání (předvolené: `100`)
- `opt.height {Number}` - výška položky (předvolená hodnota: `config.height`)
- `opt.class {String}` přidává do kontejneru třídu
- __NEW__ `opt.placeholder` {String} vyhledávací místo (předvolené: `config.placeholder`)

__Dobré vědět__:

- `.items = [{ html }]` -> `html` pole (v položkách) bude přenášeno jako plochý HTML

Použijte ji s `<ui-component name="spotlight">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

```html example.html
<style>
	body { background-color: #F0F0F0; }
</style>

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

<div class="container">
	<a href="javascript:spotlight()">Show Spotlight</a>
</div>

<script>
	function spotlight() {

		var opt = {};

		opt.search = function(value, next) {
			// console.log(value);
			next([{ name: 'Dashboard' }, { name: 'Invoices' }, { name: 'Orders' }, { name: 'Products' }, { name: 'Pages' }, { name: 'Notes' }, { name: 'Users' }, { name: 'Settings' }]);
		};

		opt.callback = function(item) {
			console.log('Selected item:', item);
		};

		SETTER('spotlight/show', opt);
	}

	setTimeout(spotlight, 500);
</script>
```