j-Spotlight

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

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