Q.lib.js : Création d'une bibliothèque jQuery like, plus efficiente - Part.02 - Opérations sur les classes CSS

Méthodes

• .addClass()
Cette méthode permet d'ajouter une ou plusieurs classes à un élément ou une liste d'éléments sélectionnés.
• jQuery
$("#myid").addClass("top active");
• Q.lib.js
$_.id("myid").addClass("top", "active");
• .hasClass()
Cette méthode renvoie true si l'élément possède la classe recherchée, sinon renvoie false. Si le sélecteur est une liste d'éléments, elle renvoie true si au moins un élément possède la classe recherchée.
• jQuery
$("#myid").hasClass("top");
• Q.lib.js
$_.id("myid").hasClass("top");
• .removeClass()
Cette méthode permet de supprimer une ou plusieurs classes à un élément ou une liste d'éléments sélectionnés.
• jQuery
$("p").removeClass("top active");
• Q.lib.js
$_.tn("p").removeClass("top", "active");
• .replaceClass()
Cette méthode permet de remplacer une classe par une autre d'un élément ou d'une liste d'éléments sélectionnés.
• jQuery
$("#myid").removeClass("old").addClass("new");
• Q.lib.js
$_.id("myid").replaceClass("old", "new");
ou
$_.id("myid").removeClass("old").addClass("new");
• .toggleClass()
Ajoute ou supprime une ou plusieurs classes d'un élément ou d'une liste d'éléments sélectionnés selon la présence ou non de la ou des classes dans le ou les éléments sélectionnés ou de la valeur du second.
Les second paramètres optionels [switch] pour jQuery et [force] pour Q.lib.js fonctionnent de manière identique:true force l'ajout, false force la suppression.
• jQuery
$("p").toggleClass("highlight blue");
• Q.lib.js
$_.tn("p").toggleClass("highlight blue");

Code

// ==== NODE
Node.prototype.addClass = function() {
	var args = [].slice.apply(arguments);
	var cl = this.classList;
	cl.add.apply(cl, args);
	return this;
};

Node.prototype.hasClass = function(c) {
	return this.classList.contains(c);
};

Node.prototype.removeClass = function() {
	var args = [].slice.apply(arguments);
	var cl = this.classList;
	cl.remove.apply(cl, args);
	return this;
};

Node.prototype.replaceClass = function(p, n) {
	this.classList.remove(p);
	this.classList.add(n);
	return this;
};

Node.prototype.toggleClass=function(c, force) {
	var cl = c.split(' '),
		 ii = cl.length;

	if (arguments.length == 1) {
		for(var i=0; i<ii; i++) {
			this.classList.toggle(cl[i]);
		}
		return this;
	}

	for(var i=0; i<ii; i++) {
		this.classList.toggle(cl[i], force);
	}
	return this;
};

// ==== NODELIST
NodeList.prototype.addClass = function() {
	var args = [].slice.apply(arguments);
	var L = this.length;
	for (var i=0; i < L; i++) {
		var cl = this[i].classList;
		cl.add.apply(cl, args);
	}
	return this;
};

NodeList.prototype.hasClass = function() {
	var args = [].slice.apply(arguments);
	var L = this.length;
	for (var i=0; i < L; i++) {
		var cl = this[i].classList;
		if (cl.contains.apply(cl, args) === true) {
			return true;
		}
	}
	return false;
};

NodeList.prototype.removeClass = function() {
	var args = [].slice.apply(arguments);
	var L = this.length;
	for (var i=0; i < L; i++) {
		this[i].classList.remove.apply(this[i].classList, args);
	}
	return this;
};

NodeList.prototype.toggleClass = function(c, force) {
	var L = this.length;
	
	if (arguments.length == 1) {
		for (var i=0; i < L; i++) {
			this[i].toggleClass(c);
		}
		return this;
	}

	for (var i=0; i < L; i++) {
		this[i].toggleClass(c, force);
	}
	return this;
};

// ==== HTMLCOLLECTION
HTMLCollection.prototype.addClass = NodeList.prototype.addClass;
HTMLCollection.prototype.hasClass = NodeList.prototype.hasClass;
HTMLCollection.prototype.removeClass = NodeList.prototype.removeClass;
HTMLCollection.prototype.toggleClass = NodeList.prototype.toggleClass;

Résumé

Q.lib.js possède les mêmes méthodes (plus .replaceClass) que jQuery pour gérer les classes CSS, que ce soit au niveau syntaxique, sémantique et fonctionnel, en plus rapide bien sûr.
Si vous désirez et pouvez améliorer le code, faites moi signe \0.