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

Merge pull request 'Conversion de la bibliothèque en class' (#2) from ConvertToClass into master

Browse Source 
Reviewed-on: #2
This commit is contained in:
Sébastien G.
2022-01-05 21:21:29 +01:00
parent 7cb8d50e7d 92866574ea
commit 1a1e980902
4 changed files with 668 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
DOCUMENTATION.md
View File

@@ -2,7 +2,7 @@
### Table of Contents ### Table of Contents
* [Constructor][1] * [GSDom][1]
* [Parameters][2] * [Parameters][2]
* [Examples][3] * [Examples][3]
* [each][4] * [each][4]
@@ -14,79 +14,100 @@
* [removeClass][10] * [removeClass][10]
* [Parameters][11] * [Parameters][11]
* [Examples][12] * [Examples][12]
* [replaceClass][13] * [removeAllClasses][13]
* [Parameters][14] * [Examples][14]
* [Examples][15] * [replaceClass][15]
* [setAttr][16] * [Parameters][16]
* [Parameters][17] * [Examples][17]
* [Examples][18] * [setAttr][18]
* [delAttr][19] * [Parameters][19]
* [Parameters][20] * [Examples][20]
* [Examples][21] * [delAttr][21]
* [setHidden][22] * [Parameters][22]
* [Examples][23] * [Examples][23]
* [setReadOnly][24] * [setHidden][24]
* [Examples][25] * [Examples][25]
* [setDisabled][26] * [setReadOnly][26]
* [Examples][27] * [Examples][27]
* [delHidden][28] * [setDisabled][28]
* [Examples][29] * [Examples][29]
* [delReadOnly][30] * [delHidden][30]
* [Examples][31] * [Examples][31]
* [delDisabled][32] * [delReadOnly][32]
* [Examples][33] * [Examples][33]
* [toggleHidden][34] * [delDisabled][34]
* [Examples][35] * [Examples][35]
* [toggleReadOnly][36] * [toggleHidden][36]
* [Examples][37] * [Examples][37]
* [toggleDisabled][38] * [toggleReadOnly][38]
* [Examples][39] * [Examples][39]
* [on][40] * [toggleDisabled][40]
* [Parameters][41] * [Examples][41]
* [Examples][42] * [on][42]
* [onClick][43] * [Parameters][43]
* [Parameters][44] * [Examples][44]
* [Examples][45] * [onClick][45]
* [found][46] * [Parameters][46]
* [Examples][47] * [Examples][47]
* [first][48] * [found][48]
* [Examples][49] * [Examples][49]
* [last][50] * [first][50]
* [Examples][51] * [Parameters][51]
* [gsd][52] * [Examples][52]
* [Parameters][53] * [last][53]
* [version][54] * [Parameters][54]
* [gsd][55] * [Examples][55]
* [version][56] * [eachCallback][56]
* [Parameters][57]
* [evtCallback][58]
* [Parameters][59]
## Constructor ## GSDom
Création du constructeur La classe GSDom est une classe écrite en pur Javascript qui permet de simplifier la manipulation du DOM.
### Parameters ### Parameters
* `selector` **[String][57]** Sélecteur utilisé * `selector` **([String][60] | [HTMLElement][61])** Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
* `scope` **[HTMLElement][58]** Racine de la recherche * `scope` **([String][60] | [HTMLElement][61])** Sélecteur utilisé (le 1er élément trouvé est utilisé) ou un élément du DOM (optional, default `document`)
### Examples ### Examples
```javascript ```javascript
# 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");
```
```javascript
// Ajout d'une classe `my_class` à tous les `a` enfants de `div#main`
$_("a", "div#main").addClass("my_class");
```
```javascript
// 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");
```
```javascript
// 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");
``` ```
### each ### each
Application d'une fonction sur chacun des éléments Parcours de tous les éléments sélectionnés
#### Parameters #### Parameters
* `callback` **[Function][59]** La fonction de rappel * `callback` **[eachCallback][62]** La fonction de rappel
#### Examples #### Examples
```javascript ```javascript
$_(".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
}); });
``` ```
@@ -97,12 +118,12 @@ Ajout d'une classe aux éléments sélectionnés
#### Parameters #### Parameters
* `className` **[String][57]** Le nom de la classe à ajouter * `className` **[String][60]** Le nom de la classe à ajouter
#### Examples #### Examples
```javascript ```javascript
$_("p","div#main").addClass("myClass"); $_("p","div#main").addClass("my_class");
``` ```
Returns **this** Chainage Returns **this** Chainage
@@ -113,29 +134,41 @@ Suppression d'une classe aux éléments sélectionnés
#### Parameters #### Parameters
* `className` **[String][57]** Le nom de la classe à ajouter * `className` **[String][60]** Le nom de la classe à ajouter
#### Examples #### Examples
```javascript ```javascript
$_("p","div#main").removeClass("myClass"); $_("p","div#main").removeClass("my_class");
```
Returns **this** Chainage
### removeAllClasses
Suppression de toutes les classes des éléments sélectionnés
#### Examples
```javascript
$_("p","div#main").removeAllClasses("myClass");
``` ```
Returns **this** Chainage Returns **this** Chainage
### replaceClass ### replaceClass
Remplace une classe par une autre dans les éléments sélectionnés Remplace une classe par une autre parmi les éléments sélectionnés
#### Parameters #### Parameters
* `oldClass` **[String][57]** Nom de la classe à remplacer * `oldClass` **[String][60]** Nom de la classe à remplacer
* `newClass` **[String][57]** Nom de la classe de remplacement * `newClass` **[String][60]** Nom de la classe de remplacement
#### Examples #### Examples
```javascript ```javascript
$_("p","div#main").replaceClass("myOldClass", "myNewClass"); $_("p","div#main").replaceClass("my_old_class", "my_new_class");
``` ```
Returns **this** Chainage Returns **this** Chainage
@@ -146,13 +179,13 @@ Définit un attribut et sa valeur
#### Parameters #### Parameters
* `attr` **[String][57]** Nom de l'attribut * `attr` **[String][60]** Nom de l'attribut
* `value` **[String][57]** Valeur de l'attribut * `value` **[String][60]** Valeur de l'attribut
#### Examples #### Examples
```javascript ```javascript
$_("input.class").setAttr("readonly", ""); $_("input.my_class").setAttr("readonly", "");
``` ```
Returns **this** Chainage Returns **this** Chainage
@@ -163,12 +196,12 @@ Supprime un attribut dans les éléments sélectionnés
#### Parameters #### Parameters
* `attr` **[String][57]** Nom de l'attribut à supprimer * `attr` **[String][60]** Nom de l'attribut à supprimer
#### Examples #### Examples
```javascript ```javascript
$_(input.class).delAttr("readonly"); $_(input.my_class).delAttr("readonly");
``` ```
Returns **this** Chainage Returns **this** Chainage
@@ -180,116 +213,116 @@ Ajoute l'attribut hidden aux éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("span.class").setHidden(); $_("span.my_class").setHidden();
``` ```
Returns **this** Chainage Returns **this** Chainage
### setReadOnly ### setReadOnly
Ajoute l'attribut readonly aux éléments sélectionnés Ajoute l'attribut `readonly` aux éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("input.class").setReadOnly(); $_("input.my_class").setReadOnly();
``` ```
Returns **this** Chainage Returns **this** Chainage
### setDisabled ### setDisabled
Ajoute l'attribut disabled aux éléments sélectionnés Ajoute l'attribut `disabled` aux éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("input.class").setDisabled(); $_("input.my_class").setDisabled();
``` ```
Returns **this** Chainage Returns **this** Chainage
### delHidden ### delHidden
Supprime l'attribut hidden aux éléments sélectionnés Supprime l'attribut `hidden` aux éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("span.class").delHidden(); $_("span.my_class").delHidden();
``` ```
Returns **this** Chainage Returns **this** Chainage
### delReadOnly ### delReadOnly
Supprime l'attribut readonly aux éléments sélectionnés Supprime l'attribut `readonly` aux éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("input.class").delReadOnly(); $_("input.my_class").delReadOnly();
``` ```
Returns **this** Chainage Returns **this** Chainage
### delDisabled ### delDisabled
Supprime l'attribut disabled aux éléments sélectionnés Supprime l'attribut `disabled` aux éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("input.class").delDisabled(); $_("input.my_class").delDisabled();
``` ```
Returns **this** Chainage Returns **this** Chainage
### toggleHidden ### toggleHidden
switche l'attribut hidden des éléments sélectionnés switche l'attribut `hidden` des éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("span.class").toggleHidden(); $_("span.my_class").toggleHidden();
``` ```
Returns **this** Chainage Returns **this** Chainage
### toggleReadOnly ### toggleReadOnly
switche l'attribut readonly des éléments sélectionnés switche l'attribut `readonly` des éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("input.class").toggleReadOnly(); $_("input.my_class").toggleReadOnly();
``` ```
Returns **this** Chainage Returns **this** Chainage
### toggleDisabled ### toggleDisabled
switche l'attribut disabled des éléments sélectionnés switche l'attribut `disabled` des éléments sélectionnés
#### Examples #### Examples
```javascript ```javascript
$_("input.class").toggleDisabled(); $_("input.my_class").toggleDisabled();
``` ```
Returns **this** Chainage Returns **this** Chainage
### on ### on
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
#### Parameters #### Parameters
* `type` **[String][57]** Nom de l'événement * `type` **[String][60]** Nom de l'événement
* `callback` **[Function][59]** Gestionnaire de l'événement * `callback` **[evtCallback][63]** Gestionnaire de l'événement
* `useCapture` **[Boolean][60]** Propagation de l'événement * `useCapture` **[Boolean][64]** Propagation de l'événement
#### Examples #### Examples
@@ -305,8 +338,8 @@ Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
#### Parameters #### Parameters
* `callback` **[Function][59]** Gestionnaire de l'événement * `callback` **[evtCallback][63]** Gestionnaire de l'événement
* `useCapture` **[Boolean][60]** Propagation de l'événement * `useCapture` **[Boolean][64]** Propagation de l'événement
#### Examples #### Examples
@@ -326,55 +359,68 @@ Retourne si un élément a été trouvé
let found = $_("#main").found(); let found = $_("#main").found();
``` ```
Returns **[Boolean][60]** `true` si un élément au moins du DOM trouvé. `false` sinon Returns **[Boolean][64]** `true` si un élément au moins du DOM trouvé. `false` sinon
### first ### first
Retourne le premier élément trouvé Retourne le premier élément trouvé
#### Parameters
* `isHTMLElement` **[Boolean][64]** `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom (optional, default `false`)
#### Examples #### Examples
```javascript ```javascript
let htmlElement = $_("p.paragraphe").first(); let htmlElement = $_("p.paragraphe").first();
``` ```
Returns **[HTMLElement][58]** l'élément du DOM trouvé Returns **[HTMLElement][61]** l'élément du DOM trouvé
### last ### last
Retourne le dernier élément trouvé Retourne le dernier élément trouvé
#### Parameters
* `isHTMLElement` **[Boolean][64]** `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom (optional, default `false`)
#### Examples #### Examples
```javascript ```javascript
let htmlElement = $_("p.paragraphe").last(); let htmlElement = $_("p.paragraphe").last();
``` ```
Returns **[HTMLElement][58]** L'élément du DOM trouvé Returns **([GSDom][65] | [HTMLElement][61])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
## gsd ## eachCallback
Instantiation d'un nouveau constructeur * **See**: [#each][4]
Fonction de rappel la méthode each()
Type: [Function][66]
### Parameters ### Parameters
* `selector` **[String][57]** Sélecteur utilisé * `element` **[HTMLElement][61]** L'élément du DOM concerné
* `root` * `index` **[number][67]** L'index de l'élément
* `scope` **[HTMLElement][58]** Racine de la recherche
### version ## evtCallback
Version de la librairie * **See**: [#on][42]
* **See**: [#onclick][45]
## gsd Fonction de rappel des méthodes on() et onClick()
Returns **any** Retour de la librairie Type: [Function][66]
### version ### Parameters
Version de la librairie * `evt` **[Event][68]** L'événement qui s'est produit
* `item` **[HTMLElement][61]** L'élément du DOM concerné par lévénement
[1]: #constructor [1]: #gsdom
[2]: #parameters [2]: #parameters
@@ -398,98 +444,114 @@ Version de la librairie
[12]: #examples-3 [12]: #examples-3
[13]: #replaceclass [13]: #removeallclasses
[14]: #parameters-4 [14]: #examples-4
[15]: #examples-4 [15]: #replaceclass
[16]: #setattr [16]: #parameters-4
[17]: #parameters-5 [17]: #examples-5
[18]: #examples-5 [18]: #setattr
[19]: #delattr [19]: #parameters-5
[20]: #parameters-6 [20]: #examples-6
[21]: #examples-6 [21]: #delattr
[22]: #sethidden [22]: #parameters-6
[23]: #examples-7 [23]: #examples-7
[24]: #setreadonly [24]: #sethidden
[25]: #examples-8 [25]: #examples-8
[26]: #setdisabled [26]: #setreadonly
[27]: #examples-9 [27]: #examples-9
[28]: #delhidden [28]: #setdisabled
[29]: #examples-10 [29]: #examples-10
[30]: #delreadonly [30]: #delhidden
[31]: #examples-11 [31]: #examples-11
[32]: #deldisabled [32]: #delreadonly
[33]: #examples-12 [33]: #examples-12
[34]: #togglehidden [34]: #deldisabled
[35]: #examples-13 [35]: #examples-13
[36]: #togglereadonly [36]: #togglehidden
[37]: #examples-14 [37]: #examples-14
[38]: #toggledisabled [38]: #togglereadonly
[39]: #examples-15 [39]: #examples-15
[40]: #on [40]: #toggledisabled
[41]: #parameters-7 [41]: #examples-16
[42]: #examples-16 [42]: #on
[43]: #onclick [43]: #parameters-7
[44]: #parameters-8 [44]: #examples-17
[45]: #examples-17 [45]: #onclick
[46]: #found [46]: #parameters-8
[47]: #examples-18 [47]: #examples-18
[48]: #first [48]: #found
[49]: #examples-19 [49]: #examples-19
[50]: #last [50]: #first
[51]: #examples-20 [51]: #parameters-9
[52]: #gsd [52]: #examples-20
[53]: #parameters-9 [53]: #last
[54]: #version [54]: #parameters-10
[55]: #gsd-1 [55]: #examples-21
[56]: #version-1 [56]: #eachcallback
[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [57]: #parameters-11
[58]: https://developer.mozilla.org/docs/Web/HTML/Element [58]: #evtcallback
[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [59]: #parameters-12
[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[61]: https://developer.mozilla.org/docs/Web/HTML/Element
[62]: #eachcallback
[63]: #evtcallback
[64]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[65]: #gsdom
[66]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[67]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[68]: https://developer.mozilla.org/docs/Web/API/Event

2
dist/gsdom.min.js vendored
View File

@@ -1 +1 @@
window.$_=(()=>{"use strict";let t=function(t,e){if(t)if("document"===t)this.elems=[document];else if("window"===t)this.elems=[window];else{let i=e||document;this.elems=i.querySelectorAll(t)}};t.prototype.each=function(t){if(t&&"function"==typeof t)return this.elems.forEach(((e,i)=>{t(e,i)})),this},t.prototype.addClass=function(t){return this.each((e=>{e.classList.add(t)})),this},t.prototype.removeClass=function(t){return this.each((e=>{e.classList.remove(t)})),this},t.prototype.replaceClass=function(t,e){return this.each((i=>{i.classList.replace(t,e)})),this},t.prototype.setAttr=function(t,e){return this.each((i=>{i.setAttribute(t,e)})),this},t.prototype.delAttr=function(t){return this.each((e=>{e.removeAttribute(t)})),this},t.prototype.setHidden=function(){return this.setAttr("hidden",""),this},t.prototype.setReadOnly=function(){return this.setAttr("readonly",""),this},t.prototype.setDisabled=function(){return this.setAttr("disabled",""),this},t.prototype.delHidden=function(){return this.delAttr("hidden"),this},t.prototype.delReadOnly=function(){return this.delAttr("readonly"),this},t.prototype.delDisabled=function(){return this.delAttr("disabled"),this},t.prototype.toggleHidden=function(){return this.each((t=>{t.hasAttribute("hidden")?t.removeAttribute("hidden"):t.setAttribute("hidden","")})),this},t.prototype.toggleReadOnly=function(){return this.each((t=>{t.hasAttribute("readonly")?t.removeAttribute("readonly"):t.setAttribute("readonly","")})),this},t.prototype.toggleDisabled=function(){return this.each((t=>{t.hasAttribute("disabled")?t.removeAttribute("disabled"):t.setAttribute("disabled","")})),this},t.prototype.on=function(t,e,i){return this.each((r=>{r.removeEventListener(t,e,i||!1),r.addEventListener(t,((t,i)=>{e(t,i)}),i||!1)})),this},t.prototype.onClick=function(t,e){return this.on("click",t,e||!1),this},t.prototype.found=function(){return this.elems.length>0},t.prototype.first=function(){return!!this.found()&&this.elems[0]},t.prototype.last=function(){return!!this.found()&&this.elems[this.elems.length-1]};let e=(e,i)=>new t(e,i);return e.version="GSD 1.1.1 by Séb",e})(); window.$_=(()=>{"use strict";class e{constructor(e,t){if(this.shortversion="2.0.0",this.longversion="GSDom 2.0.0 by Séb",e)if("document"===e)this.elems=[document];else if("window"===e)this.elems=[window];else if(e instanceof HTMLElement)this.elems=[e];else{let s=!1;s=t?t instanceof HTMLElement||"string"!=typeof t?t:document.querySelector(t):document,this.elems=s?s.querySelectorAll(e):[]}}each(e){if(e&&"function"==typeof e)return this.elems.forEach(((t,s)=>{e(t,s)})),this}addClass(e){return this.each((t=>{t.classList.add(e)})),this}removeClass(e){return this.each((t=>{t.classList.remove(e)})),this}removeAllClasses(){return this.each((e=>{e.className=""})),this}replaceClass(e,t){return this.each((s=>{s.classList.replace(e,t)})),this}setAttr(e,t){return this.each((s=>{s.setAttribute(e,t)})),this}delAttr(e){return this.each((t=>{t.removeAttribute(e)})),this}setHidden(){return this.setAttr("hidden",""),this}setReadOnly(){return this.setAttr("readonly",""),this}setDisabled(){return this.setAttr("disabled",""),this}delHidden(){return this.delAttr("hidden"),this}delReadOnly(){return this.delAttr("readonly"),this}delDisabled(){return this.delAttr("disabled"),this}toggleHidden(){return this.each((e=>{e.hasAttribute("hidden")?e.removeAttribute("hidden"):e.setAttribute("hidden","")})),this}toggleReadOnly(){return this.each((e=>{e.hasAttribute("readonly")?e.removeAttribute("readonly"):e.setAttribute("readonly","")})),this}toggleDisabled(){return this.each((e=>{e.hasAttribute("disabled")?e.removeAttribute("disabled"):e.setAttribute("disabled","")})),this}on(e,t,s){return this.each((i=>{i.removeEventListener(e,t,s||!1),i.addEventListener(e,(e=>{t(e,i)}),s||!1)})),this}onClick(e,t){return this.on("click",e,t||!1),this}found(){return this.elems.length>0}first(t){return!!this.found()&&(!0===t?this.elems[0]:new e(this.elems[0]))}last(t){return!!this.found()&&(!0===t?this.elems[this.elems.length-1]:new e(this.elems[this.elems.length-1]))}version(e){return!0===e?this.longversion:this.shortversion}}return(t,s)=>new e(t,s)})();

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;
})(); })();

93
test/index.html Normal file
View File

@@ -0,0 +1,93 @@
<html>
<head>
<title>
Page de test de la bibliothèque GSDom
</title>
</head>
<body>
<h1>Page de test de la bibliothèque GSDom</h1>
<div id="main">
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
</div>
<a href="#" class="allgreen">Toutes les lignes en vert</a><br>
<a href="#" class="lastpurple">Dernière ligne en violet</a><br>
<a href="#" class="numerote">Numéroter les lignes</a><br>
<a href="#" class="bold">Texte en gras</a><br>
<div id="other">
<h3>2ème Div</h3>
<p>Un autre paragraphe</p>
</div>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.purple {
color: purple;
}
</style>
<script src="../src/gsdom.js"></script>
<script>
$_('a.bleu').onClick((evt, el) => {
$_(el.parentElement).removeAllClass().addClass("blue");
}, true);
$_('a.rouge').onClick((evt, el) => {
$_(el.parentElement).removeAllClass().addClass("red");
}, true);
$_('a.swap').onClick((evt, el) => {
if (el.parentElement.classList.contains("blue")) {
$_(el.parentElement).replaceClass("blue", "red");
} else if (el.parentElement.classList.contains("red")) {
$_(el.parentElement).replaceClass("red", "blue");
}
}, true);
$_("a.allgreen").onClick((evt, el) => {
$_("p", "div").removeAllClass().addClass("green");
}, false);
$_("a.lastpurple").onClick((evt, el) => {
$_("p", "div#main").last().removeAllClass().addClass("purple");
}, false);
$_("a.bold").onClick(
(evt, el) => {
$_("p span.texte", "div#main").each(
(item, index) => {
item.style.fontWeight = "bold";
}
);
}, false
);
$_("a.numerote").onClick(
(evt, el) => {
$_("p span.number", "div#main").each(
(item, index) => {
item.textContent = index + 1;
}
);
}, false
);
console.log($_("p").first(true));
</script>
</body>
</html>