Sebastien/GSDom
1
1
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Redesign de la bibliothèque en classe et diverses améliorations

Browse Source
This commit is contained in:
Sébastien G.
2022-01-05 21:13:56 +01:00
parent d6cad0ecee
commit 1af3899139
1 changed files with 381 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/gsdom.js
View File

@@ -1,39 +1,80 @@
window.$_ = (() => { window.$_ = (() => {
'use strict'; 'use strict';
/** /**
* Création du constructeur * La classe GSDom est une classe écrite en pur Javascript qui permet de simplifier la manipulation du DOM.
*
* @class GSDom
* *
* @example * @example
* # Tous les `a` class `link` contenu dans un `div` id `main` * // Ajout d'une classe `my_class` à tous lel `a`
* $_("a.link", "div#main"); * $_("a").addClass("my_class");
* @example
* // Ajout d'une classe `my_class` à tous les `a` enfants de `div#main`
* $_("a", "div#main").addClass("my_class");
* @example
* // Ajout d'une classe `my_class` à tous les `a` enfants de l'élément `my_scope` du DOM
* let my_scope = document.querySelector("div#main");
* $_("a", my_scope).addClass("my_class");
* @example
* // Instanciation de GSDom avec un élément du DOM et ajout d'une classe `my_class` à cet élément
* let element = document.querySelector("p#intro");
* $_(element).addClass("my_class");
* *
* @param {String} selector Sélecteur utilisé * @param {(String|HTMLElement)} selector Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
* @param {HTMLElement} scope Racine de la recherche * @param {(String|HTMLElement)} [scope=document] Sélecteur utilisé (le 1er élément trouvé est utilisé) ou un élément du DOM
*/ */
let Constructor = function (selector, scope) { class GSDom {
constructor(selector, scope) {
this.shortversion = '2.0.0';
this.longversion = 'GSDom 2.0.0 by Séb';
if (!selector) { if (!selector) {
// On ne va pas plus loin s'il n'y a pas de sélecteur
return; return;
} }
if (selector === 'document') { if (selector === 'document') {
// Cas particulier pour document
this.elems = [document, ]; this.elems = [document, ];
} else if (selector === 'window') { } else if (selector === 'window') {
// CAs particulier pour window
this.elems = [window, ]; this.elems = [window, ];
} else { } else {
let root = scope ? scope : document; if (selector instanceof HTMLElement) {
this.elems = root.querySelectorAll(selector); // Cas où un élément du DOM est fourni
this.elems = [selector, ];
} else {
// Cas ou un sélecteur est fourni
let root = false;
if (!scope) {
// Si pas de scope, on utilise le document
root = document;
} else {
if (!((scope instanceof HTMLElement)) && (typeof scope === 'string')) {
// Si le scope est un selecteur, on utilise le premier élément de DOM correspondant
root = document.querySelector(scope);
} else {
// On utilise l'élément du DOM fourni
root = scope;
}
}
if (root)
this.elems = root.querySelectorAll(selector);
else
this.elems = [];
}
}
} }
};
/** /**
* Application d'une fonction sur chacun des éléments * Parcours de tous les éléments sélectionnés
* *
* @example * @example
* $_(".class").each((item, index) => { * //appliquer une fonction sur tous les éléments ayant `my_class`
* $_(".my_class").each((item, index) => {
* // Do something with item et index * // Do something with item et index
* }); * });
* *
* @param {Function} callback La fonction de rappel * @param {eachCallback} callback La fonction de rappel
*/ */
Constructor.prototype.each = function (callback) { each(callback) {
if (!callback || typeof callback !== 'function') { if (!callback || typeof callback !== 'function') {
return; return;
} }
@@ -41,164 +82,186 @@ window.$_ = (() => {
callback(element, index); callback(element, index);
}); });
return this; return this;
}; }
/**
* Fonction de rappel la méthode each()
* @callback eachCallback
* @see {@link #each}
* @param {HTMLElement} element L'élément du DOM concerné
* @param {number} index L'index de l'élément
*/
/** /**
* Ajout d'une classe aux éléments sélectionnés * Ajout d'une classe aux éléments sélectionnés
* *
* @example * @example
* $_("p","div#main").addClass("myClass"); * $_("p","div#main").addClass("my_class");
* *
* @param {String} className Le nom de la classe à ajouter * @param {String} className Le nom de la classe à ajouter
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.addClass = function (className) { addClass(className) {
this.each(item => { this.each(item => {
item.classList.add(className); item.classList.add(className);
}); });
return this; return this;
}; }
/** /**
* Suppression d'une classe aux éléments sélectionnés * Suppression d'une classe aux éléments sélectionnés
* *
* @example * @example
* $_("p","div#main").removeClass("myClass"); * $_("p","div#main").removeClass("my_class");
* *
* @param {String} className Le nom de la classe à ajouter * @param {String} className Le nom de la classe à ajouter
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.removeClass = function (className) { removeClass(className) {
this.each(item => { this.each(item => {
item.classList.remove(className); item.classList.remove(className);
}); });
return this; return this;
}; }
/** /**
* Remplace une classe par une autre dans les éléments sélectionnés * Suppression de toutes les classes des éléments sélectionnés
* *
* @example * @example
* $_("p","div#main").replaceClass("myOldClass", "myNewClass"); * $_("p","div#main").removeAllClasses("myClass");
*
* @returns {this} Chainage
*/
removeAllClasses() {
this.each(item => {
item.className = "";
});
return this;
}
/**
* Remplace une classe par une autre parmi les éléments sélectionnés
*
* @example
* $_("p","div#main").replaceClass("my_old_class", "my_new_class");
* *
* @param {String} oldClass Nom de la classe à remplacer * @param {String} oldClass Nom de la classe à remplacer
* @param {String} newClass Nom de la classe de remplacement * @param {String} newClass Nom de la classe de remplacement
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.replaceClass = function (oldClass, newClass) { replaceClass(oldClass, newClass) {
this.each(item => { this.each(item => {
item.classList.replace(oldClass, newClass); item.classList.replace(oldClass, newClass);
}); });
return this; return this;
}; }
/** /**
* Définit un attribut et sa valeur * Définit un attribut et sa valeur
* *
* @example * @example
* $_("input.class").setAttr("readonly", ""); * $_("input.my_class").setAttr("readonly", "");
* *
* @param {String} attr Nom de l'attribut * @param {String} attr Nom de l'attribut
* @param {String} value Valeur de l'attribut * @param {String} value Valeur de l'attribut
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.setAttr = function (attr, value) { setAttr(attr, value) {
this.each(item => { this.each(item => {
item.setAttribute(attr, value); item.setAttribute(attr, value);
}); });
return this; return this;
}; }
/** /**
* Supprime un attribut dans les éléments sélectionnés * Supprime un attribut dans les éléments sélectionnés
* *
* @example * @example
* $_(input.class).delAttr("readonly"); * $_(input.my_class).delAttr("readonly");
* *
* @param {String} attr Nom de l'attribut à supprimer * @param {String} attr Nom de l'attribut à supprimer
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.delAttr = function (attr) { delAttr(attr) {
this.each(item => { this.each(item => {
item.removeAttribute(attr); item.removeAttribute(attr);
}); });
return this; return this;
}; }
/** /**
* Ajoute l'attribut hidden aux éléments sélectionnés * Ajoute l'attribut hidden aux éléments sélectionnés
* *
* @example $_("span.class").setHidden(); * @example $_("span.my_class").setHidden();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.setHidden = function () { setHidden() {
this.setAttr('hidden', ''); this.setAttr('hidden', '');
return this; return this;
}; }
/** /**
* Ajoute l'attribut readonly aux éléments sélectionnés * Ajoute l'attribut `readonly` aux éléments sélectionnés
* *
* @example * @example
* $_("input.class").setReadOnly(); * $_("input.my_class").setReadOnly();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.setReadOnly = function () { setReadOnly() {
this.setAttr('readonly', ''); this.setAttr('readonly', '');
return this; return this;
}; }
/** /**
* Ajoute l'attribut disabled aux éléments sélectionnés * Ajoute l'attribut `disabled` aux éléments sélectionnés
* *
* @example * @example
* $_("input.class").setDisabled(); * $_("input.my_class").setDisabled();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.setDisabled = function () { setDisabled() {
this.setAttr('disabled', ''); this.setAttr('disabled', '');
return this; return this;
}; }
/** /**
* Supprime l'attribut hidden aux éléments sélectionnés * Supprime l'attribut `hidden` aux éléments sélectionnés
* *
* @example * @example
* $_("span.class").delHidden(); * $_("span.my_class").delHidden();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.delHidden = function () { delHidden() {
this.delAttr('hidden'); this.delAttr('hidden');
return this; return this;
}; }
/** /**
* Supprime l'attribut readonly aux éléments sélectionnés * Supprime l'attribut `readonly` aux éléments sélectionnés
* *
* @example * @example
* $_("input.class").delReadOnly(); * $_("input.my_class").delReadOnly();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.delReadOnly = function () { delReadOnly() {
this.delAttr('readonly'); this.delAttr('readonly');
return this; return this;
}; }
/** /**
* Supprime l'attribut disabled aux éléments sélectionnés * Supprime l'attribut `disabled` aux éléments sélectionnés
* *
* @example * @example
* $_("input.class").delDisabled(); * $_("input.my_class").delDisabled();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.delDisabled = function () { delDisabled() {
this.delAttr('disabled'); this.delAttr('disabled');
return this; return this;
}; }
/** /**
* switche l'attribut hidden des éléments sélectionnés * switche l'attribut `hidden` des éléments sélectionnés
* *
* @example * @example
* $_("span.class").toggleHidden(); * $_("span.my_class").toggleHidden();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.toggleHidden = function () { toggleHidden() {
this.each(item => { this.each(item => {
if (item.hasAttribute('hidden')) { if (item.hasAttribute('hidden')) {
item.removeAttribute('hidden'); item.removeAttribute('hidden');
@@ -207,16 +270,16 @@ window.$_ = (() => {
} }
}); });
return this; return this;
}; }
/** /**
* switche l'attribut readonly des éléments sélectionnés * switche l'attribut `readonly` des éléments sélectionnés
* *
* @example * @example
* $_("input.class").toggleReadOnly(); * $_("input.my_class").toggleReadOnly();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.toggleReadOnly = function () { toggleReadOnly() {
this.each(item => { this.each(item => {
if (item.hasAttribute('readonly')) { if (item.hasAttribute('readonly')) {
item.removeAttribute('readonly'); item.removeAttribute('readonly');
@@ -225,16 +288,16 @@ window.$_ = (() => {
} }
}); });
return this; return this;
}; }
/** /**
* switche l'attribut disabled des éléments sélectionnés * switche l'attribut `disabled` des éléments sélectionnés
* *
* @example * @example
* $_("input.class").toggleDisabled(); * $_("input.my_class").toggleDisabled();
* *
* @returns {this} Chainage * @returns {this} Chainage
*/ */
Constructor.prototype.toggleDisabled = function () { toggleDisabled() {
this.each(item => { this.each(item => {
if (item.hasAttribute('disabled')) { if (item.hasAttribute('disabled')) {
item.removeAttribute('disabled'); item.removeAttribute('disabled');
@@ -243,9 +306,9 @@ window.$_ = (() => {
} }
}); });
return this; return this;
}; }
/** /**
* Ajout d'un gestionnaire d'événement aux éléments sélectionnés * Ajoute un gestionnaire d'événement aux éléments sélectionnés
* *
* @example * @example
* $_("button#event").on("mouseover", (evt, el) => { * $_("button#event").on("mouseover", (evt, el) => {
@@ -253,18 +316,18 @@ window.$_ = (() => {
* }, false); * }, false);
* *
* @param {String} type Nom de l'événement * @param {String} type Nom de l'événement
* @param {Function} callback Gestionnaire de l'événement * @param {evtCallback} callback Gestionnaire de l'événement
* @param {Boolean} useCapture Propagation de l'événement * @param {Boolean} useCapture Propagation de l'événement
*/ */
Constructor.prototype.on = function (type, callback, useCapture) { on(type, callback, useCapture) {
this.each(item => { this.each(item => {
item.removeEventListener(type, callback, useCapture || false); item.removeEventListener(type, callback, useCapture || false);
item.addEventListener(type, (evt, el) => { item.addEventListener(type, evt => {
callback(evt, el); callback(evt, item);
}, useCapture || false); }, useCapture || false);
}); });
return this; return this;
}; }
/** /**
* Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés * Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
* *
@@ -273,13 +336,22 @@ window.$_ = (() => {
* // Do something with evt and el * // Do something with evt and el
* }, false); * }, false);
* *
* @param {Function} callback Gestionnaire de l'événement * @param {evtCallback} callback Gestionnaire de l'événement
* @param {Boolean} useCapture Propagation de l'événement * @param {Boolean} useCapture Propagation de l'événement
*/ */
Constructor.prototype.onClick = function (callback, useCapture) { onClick(callback, useCapture) {
this.on('click', callback, useCapture || false); this.on('click', callback, useCapture || false);
return this; return this;
}; }
/**
* Fonction de rappel des méthodes on() et onClick()
* @callback evtCallback
* @see {@link #on}
* @see {@link #onclick}
* @param {Event} evt L'événement qui s'est produit
* @param {HTMLElement} item L'élément du DOM concerné par lévénement
*/
/** /**
* Retourne si un élément a été trouvé * Retourne si un élément a été trouvé
* *
@@ -288,48 +360,38 @@ window.$_ = (() => {
* *
* @returns {Boolean} `true` si un élément au moins du DOM trouvé. `false` sinon * @returns {Boolean} `true` si un élément au moins du DOM trouvé. `false` sinon
*/ */
Constructor.prototype.found = function () { found() {
return this.elems.length > 0; return this.elems.length > 0;
}; }
/** /**
* Retourne le premier élément trouvé * Retourne le premier élément trouvé
* *
* @example * @example
* let htmlElement = $_("p.paragraphe").first(); * let htmlElement = $_("p.paragraphe").first();
* *
* @param {Boolean} [isHTMLElement=false] `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom
* @returns {HTMLElement} l'élément du DOM trouvé * @returns {HTMLElement} l'élément du DOM trouvé
*/ */
Constructor.prototype.first = function () { first(isHTMLElement) {
return this.found() ? this.elems[0] : false; return this.found() ? (isHTMLElement === true ? this.elems[0] : new GSDom(this.elems[0])) : false;
}; }
/** /**
* Retourne le dernier élément trouvé * Retourne le dernier élément trouvé
* *
* @example * @example
* let htmlElement = $_("p.paragraphe").last(); * let htmlElement = $_("p.paragraphe").last();
* *
* @returns {HTMLElement} L'élément du DOM trouvé * @param {Boolean} [isHTMLElement=false] `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom
* @returns {(GSDom|HTMLElement)} L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
*/ */
Constructor.prototype.last = function () { last(isHTMLElement) {
return this.found() ? this.elems[this.elems.length - 1] : false; return this.found() ? (isHTMLElement === true ? this.elems[this.elems.length - 1] : new GSDom(this.elems[this.elems.length - 1])) : false;
}
version(long) {
return long === true ? this.longversion : this.shortversion;
}
}
return (selector, root) => {
return new GSDom(selector, root);
}; };
/**
* Instantiation d'un nouveau constructeur
*
* @internal
*
* @param {String} selector Sélecteur utilisé
* @param {HTMLElement} scope Racine de la recherche
*/
let gsd = (selector, root) => {
return new Constructor(selector, root);
};
/**
* Version de la librairie
*/
gsd.version = 'GSD 1.1.1 by Séb';
/**
* @return Retour de la librairie
*/
return gsd;
})(); })();