j-Spotlight

• singleton
• pracuje s Bootstrap Grid System

Konfigurácia:

• height {Number} predvolená výška každej položky (predvolená: 40, musí byť definovaná aj v CSS)
• placeholder {String} predvolený zástupný symbol (predvolené: Search)

Metódy:

Metóda: component.show(opt)

• opt.id {String} voliteľné, identifikátor pre posledné položky (predvolené: empty)
• opt.recent {String} umožňuje posledné položky, musí obsahovať formát vypršania platnosti (predvolené: 3 days, empty znamená zakázané)
• opt.callback(selected_item) {Function} sa spustí, keď používateľ klikne na položku
• Spustí sa opt.cancel {Function}, potom užívateľ zruší komponent
• opt.search {String} URL adresa pre vyhľadávanie hodnôt v tvare GET /api/search/?={0}
• alebo opt.search {Function} odkaz na function(search, next(ARR_ITEMS)) na vyhľadávanie
• opt.cache {String} umožňuje vyrovnávaciu pamäť, môže obsahovať formát expirácie napr. 1 day alebo session
• opt.remap {Function} môže premapovať výsledky items => items.map(...)
• opt.clear {Boolean} vymaže predchádzajúce výsledky (predvolené: false)
• opt.init {Boolean} vykoná pri volaní komponentu prázdne vyhľadávanie (predvolené: false)
• opt.delay {Number} oneskorenie v ms na vykonanie vyhľadávania (predvolené: 100)
• opt.height {Number} výška položky (predvolené: config.height)
• opt.class {String} pridá do kontajnera vlastnú triedu
• NEW opt.placeholder {String} zástupný symbol vyhľadávania (predvolené: config.placeholder)

Je dobré vedieť:

• .items = [{ html }] -> Pole html (v položkách) sa vykreslí ako obyčajný HTML

Použite ho so <ui-component name="spotlight">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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