Changement d'état via JS

Petit plugin simple pour appliquer une classe sur un élément au clic. La classe est ensuite retirée si on clique sur tout autre élément de la page. L'affichage et les modifications se font via CSS en fonction de la classe appliquée. Utilisé pour afficher un menu, un moteur de recherche, etc...

by oilvier

HTML

<button type="button" class="js-foo js-trigger">foo</button>

CSS

html.foo {background-color:tomato;}

JavaScript

var switchState = function switchState(options) {
  	var self			= this;
	var defaultOptions 	= {
		switchRoot: 			$('html'), 			// Reçoit la classe permettant d'appliquer le changement d'état
		switchTrigger: 			$('.js-trigger'), 	// Permet d'activer le changement d'état
		switchState_active: 	false, 				// Définit le statut du changement d'état
		switchState_class: 		'is-open', 		 	// Classe appliquée lors du changement d'état
		switchTrigger_active: 	'is-active', 		// Classe pour signaler l'état actif sur le trigger
		switchState_events: 	'click touchstart',	// Événements sur lesquels s'applique le changement d'état
		onSwitchOpen: 			function() { return true; }, // Callback sur l'ouverture
		onSwitchClose: 			function() { return true; } // Callback sur la fermeture
	};
	
	self.config = $.extend({}, defaultOptions, options);
	
	// Autorise le clic sur le trigger
	// Cette classe peut être ajoutée à la main, mais en cas d'oubli on prend pas de risques 
	self.config.switchTrigger.addClass('js-no-close');
	
}

switchState.prototype = {
	switchToClose: function switchToClose(options) {
		this.config.switchRoot.removeClass(this.config.switchState_class);
		this.config.switchTrigger.removeClass(this.config.switchTrigger_active);
		this.config.switchState_active = false;
		
		// Callback
		this.config.onSwitchClose.call(this, this.config.switchRoot, this.config.switchTrigger);
	},
	switchToOpen: function switchToOpen(options) {
		if (this.config.switchState_active) {
			return;
		}
		this.config.switchRoot.addClass(this.config.switchState_class);
		this.config.switchTrigger.addClass(this.config.switchTrigger_active);
		this.config.switchState_active = true;
		
		// Callback
		this.config.onSwitchOpen.call(this, this.config.switchRoot, this.config.switchTrigger);
	},
	/* Switch entre l'état ouvert/fermé */
	switchToToggle: function switchToToggle(options) {
		if (this.config.switchState_active && this.config.switchRoot.hasClass(this.config.switchState_class))...