# j-Spotlight

> j-Spotlight : singleton ; fonctionne avec Bootstrap Grid System

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

- singleton
- fonctionne avec le système Bootstrap Grid

__Configuration__ :

- `height` {Numéro} une hauteur par défaut de chaque élément (defaut: `40`, doit être défini dans le CSS aussi)
- `placeholder` {String} un locataire par défaut (defaut: `Search`)

__Méthodes__ :

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

- `opt.id {String}` optionnel, un identifiant pour les articles récents (defaut: `empty`)
- `opt.recent {String}` permet des articles récents, doit contenir un format d'expiration (defaut: `3 days`, `empty` signifie désactivé)
- `opt.callback(selected_item) {Function}` est déclenché lorsque l'utilisateur clique sur l'élément
- `opt.cancel {Function}` est déclenché puis l'utilisateur annule le composant
- L'adresse URL `opt.search {String}` pour la recherche de valeurs dans le formulaire `GET /api/search/?={0}`
- ou `opt.search {Function}` un lien vers `function(search, next(ARR_ITEMS))` pour la recherche
- `opt.cache {String}` permet la cache, peut contenir un format d'expiration par exemple `1 day` ou `session`
- `opt.remap {Function}` peut réparer les résultats `items => items.map(...)`
- `opt.clear {Boolean}` Il nettoie les résultats précédents (defaut: `false`)
- `opt.init {Boolean}` fait une recherche vide lorsque le composant est appelé (defaut: `false`)
- `opt.delay {Number}` un retard dans `ms` pour effectuer la recherche (défaut: `100`)
- `opt.height {Number}` une hauteur de l'élément (defaut: `config.height`)
- `opt.class {String}` ajoute une classe personnalisée au conteneur
- __NEW__ `opt.placeholder` {String} locuteur de recherche (defaut: `config.placeholder`)

__Bon à savoir__ :

- `.items = [{ html }]` -> le champ `html` (en éléments) sera rendu en tant que HTML

Utilisez-le avec `<ui-component name="spotlight">`. 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="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>
```