Merge pull request 'Ajout des méthodes d'accès aux éléments sélectionnés' (#3) from Dev into master

Reviewed-on: #3

CHANGELOG.md

@@ -0,0 +1,18 @@
+2.1.0
+=====
+
+Nouveautés
+----------
+- GSDom peut-être initialisé à partir d'un élément du DOM
+- Les méthodes `first` et `last` ont la possibilité d'être chainées
+- Ajout de la méthode `items` pour récupérer la liste des items sélectionnés
+- Ajout de la méthode `itemAtIndex` pour récupérer un élément particulier
+- Ajout de la méthode `count` pour récupérer le nombre d'éléments
+- Ajout d'un fichier de test
+- Ajout du fichier CHANGELOG.md
+
+Améliorations
+-------------
+
+- Correction mineures dans la documentation
+- Refactorisation de la bibliothèque en classe

DOCUMENTATION.md

@@ -2,58 +2,124 @@
 
 ### Table of Contents
 
--   [Constructor][1]
+*   [GSDom][1]
-    -   [Parameters][2]
+    *   [Parameters][2]
-    -   [each][3]
+    *   [Examples][3]
-        -   [Parameters][4]
+    *   [each][4]
-    -   [addClass][5]
+        *   [Parameters][5]
-        -   [Parameters][6]
+        *   [Examples][6]
-    -   [removeClass][7]
+    *   [addClass][7]
-        -   [Parameters][8]
+        *   [Parameters][8]
-    -   [replaceClass][9]
+        *   [Examples][9]
-        -   [Parameters][10]
+    *   [removeClass][10]
-    -   [setAttr][11]
+        *   [Parameters][11]
-        -   [Parameters][12]
+        *   [Examples][12]
-    -   [delAttr][13]
+    *   [removeAllClasses][13]
-        -   [Parameters][14]
+        *   [Examples][14]
-    -   [setHidden][15]
+    *   [replaceClass][15]
-    -   [setReadOnly][16]
+        *   [Parameters][16]
-    -   [setDisabled][17]
+        *   [Examples][17]
-    -   [delHidden][18]
+    *   [setAttr][18]
-    -   [delReadOnly][19]
+        *   [Parameters][19]
-    -   [delDisabled][20]
+        *   [Examples][20]
-    -   [toggleHidden][21]
+    *   [delAttr][21]
-    -   [toggleReadOnly][22]
+        *   [Parameters][22]
-    -   [toggleDisabled][23]
+        *   [Examples][23]
-    -   [on][24]
+    *   [setHidden][24]
-        -   [Parameters][25]
+        *   [Examples][25]
-    -   [onClick][26]
+    *   [setReadOnly][26]
-        -   [Parameters][27]
+        *   [Examples][27]
-    -   [found][28]
+    *   [setDisabled][28]
-    -   [first][29]
+        *   [Examples][29]
-    -   [last][30]
+    *   [delHidden][30]
--   [gsd][31]
+        *   [Examples][31]
-    -   [Parameters][32]
+    *   [delReadOnly][32]
-    -   [version][33]
+        *   [Examples][33]
--   [gsd][34]
+    *   [delDisabled][34]
-    -   [version][35]
+        *   [Examples][35]
+    *   [toggleHidden][36]
+        *   [Examples][37]
+    *   [toggleReadOnly][38]
+        *   [Examples][39]
+    *   [toggleDisabled][40]
+        *   [Examples][41]
+    *   [on][42]
+        *   [Parameters][43]
+        *   [Examples][44]
+    *   [onClick][45]
+        *   [Parameters][46]
+        *   [Examples][47]
+    *   [found][48]
+        *   [Examples][49]
+    *   [first][50]
+        *   [Parameters][51]
+        *   [Examples][52]
+    *   [last][53]
+        *   [Parameters][54]
+        *   [Examples][55]
+    *   [items][56]
+        *   [Examples][57]
+    *   [count][58]
+        *   [Examples][59]
+    *   [itemAtIndex][60]
+        *   [Parameters][61]
+        *   [Examples][62]
+    *   [version][63]
+        *   [Parameters][64]
+*   [eachCallback][65]
+    *   [Parameters][66]
+*   [evtCallback][67]
+    *   [Parameters][68]
 
-## 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
 
--   `selector` **[String][36]** Sélecteur utilisé
+*   `selector` **([String][69] | [HTMLElement][70])** Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
--   `scope` **[HTMLElement][37]** Racine de la recherche
+*   `scope` **([String][69] | [HTMLElement][70])** Sélecteur utilisé (le 1er élément trouvé est utilisé) ou un élément du DOM (optional, default `document`)
+
+### Examples
+
+```javascript
+// Ajout d'une classe `my_class` à tous les `a`
+$_("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
 
-Application d'une fonction sur chacun des éléments
+Parcours de tous les éléments sélectionnés
 
 #### Parameters
 
--   `callback` **[Function][38]** La fonction de rappel
+*   `callback` **[eachCallback][71]** La fonction de rappel
+
+#### Examples
+
+```javascript
+//appliquer une fonction sur tous les éléments ayant `my_class`
+$_(".my_class").each((item, index) => {
+ // Do something with item et index
+});
+```
 
 ### addClass
 
@@ -61,28 +127,58 @@ Ajout d'une classe aux éléments sélectionnés
 
 #### Parameters
 
--   `className` **[String][36]** Le nom de la classe à ajouter
+*   `className` **[String][69]** Le nom de la classe à ajouter
+
+#### Examples
+
+```javascript
+$_("p","div#main").addClass("my_class");
+```
 
 Returns **this** Chainage
 
 ### removeClass
 
-Ajout d'une classe aux éléments sélectionnés
+Suppression d'une classe aux éléments sélectionnés
 
 #### Parameters
 
--   `className` **[String][36]** Le nom de la classe à ajouter
+*   `className` **[String][69]** Le nom de la classe à ajouter
+
+#### Examples
+
+```javascript
+$_("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
 
 ### 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
 
--   `oldClass` **[String][36]** Nom de la classe à remplacer
+*   `oldClass` **[String][69]** Nom de la classe à remplacer
--   `newClass` **[String][36]** Nom de la classe de remplacement
+*   `newClass` **[String][69]** Nom de la classe de remplacement
+
+#### Examples
+
+```javascript
+$_("p","div#main").replaceClass("my_old_class", "my_new_class");
+```
 
 Returns **this** Chainage
 
@@ -92,8 +188,14 @@ Définit un attribut et sa valeur
 
 #### Parameters
 
--   `attr` **[String][36]** Nom de l'attribut
+*   `attr` **[String][69]** Nom de l'attribut
--   `value` **[String][36]** Valeur de l'attribut
+*   `value` **[String][69]** Valeur de l'attribut
+
+#### Examples
+
+```javascript
+$_("input.my_class").setAttr("readonly", "");
+```
 
 Returns **this** Chainage
 
@@ -103,7 +205,13 @@ Supprime un attribut dans les éléments sélectionnés
 
 #### Parameters
 
--   `attr` **[String][36]** Nom de l'attribut à supprimer
+*   `attr` **[String][69]** Nom de l'attribut à supprimer
+
+#### Examples
+
+```javascript
+$_(input.my_class).delAttr("readonly");
+```
 
 Returns **this** Chainage
 
@@ -111,65 +219,127 @@ Returns **this** Chainage
 
 Ajoute l'attribut hidden aux éléments sélectionnés
 
+#### Examples
+
+```javascript
+$_("span.my_class").setHidden();
+```
+
 Returns **this** Chainage
 
 ### setReadOnly
 
-Ajoute l'attribut readonly aux éléments sélectionnés
+Ajoute l'attribut `readonly` aux éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("input.my_class").setReadOnly();
+```
 
 Returns **this** Chainage
 
 ### setDisabled
 
-Ajoute l'attribut disabled aux éléments sélectionnés
+Ajoute l'attribut `disabled` aux éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("input.my_class").setDisabled();
+```
 
 Returns **this** Chainage
 
 ### delHidden
 
-Supprime l'attribut hidden aux éléments sélectionnés
+Supprime l'attribut `hidden` aux éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("span.my_class").delHidden();
+```
 
 Returns **this** Chainage
 
 ### delReadOnly
 
-Supprime l'attribut readonly aux éléments sélectionnés
+Supprime l'attribut `readonly` aux éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("input.my_class").delReadOnly();
+```
 
 Returns **this** Chainage
 
 ### delDisabled
 
-Supprime l'attribut disabled aux éléments sélectionnés
+Supprime l'attribut `disabled` aux éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("input.my_class").delDisabled();
+```
 
 Returns **this** Chainage
 
 ### toggleHidden
 
-switche l'attribut hidden des éléments sélectionnés
+switche l'attribut `hidden` des éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("span.my_class").toggleHidden();
+```
 
 Returns **this** Chainage
 
 ### toggleReadOnly
 
-switche l'attribut readonly des éléments sélectionnés
+switche l'attribut `readonly` des éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("input.my_class").toggleReadOnly();
+```
 
 Returns **this** Chainage
 
 ### toggleDisabled
 
-switche l'attribut disabled des éléments sélectionnés
+switche l'attribut `disabled` des éléments sélectionnés
+
+#### Examples
+
+```javascript
+$_("input.my_class").toggleDisabled();
+```
 
 Returns **this** Chainage
 
 ### 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
 
--   `type` **[String][36]** Nom de l'événement
+*   `type` **[String][69]** Nom de l'événement
--   `callback` **[Function][38]** Gestionnaire de l'événement
+*   `callback` **[evtCallback][72]** Gestionnaire de l'événement
--   `useCapture` **[Boolean][39]** Propagation de l'événement
+*   `useCapture` **[Boolean][73]** Propagation de l'événement
+
+#### Examples
+
+```javascript
+$_("button#event").on("mouseover", (evt, el) => {
+ // Do something with evt and el
+}, false);
+```
 
 ### onClick
 
@@ -177,123 +347,301 @@ Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
 
 #### Parameters
 
--   `callback` **[Function][38]** Gestionnaire de l'événement
+*   `callback` **[evtCallback][72]** Gestionnaire de l'événement
--   `useCapture` **[Boolean][39]** Propagation de l'événement
+*   `useCapture` **[Boolean][73]** Propagation de l'événement
+
+#### Examples
+
+```javascript
+$_("button#event").onClick( (evt, el) => {
+ // Do something with evt and el
+}, false);
+```
 
 ### found
 
 Retourne si un élément a été trouvé
 
-Returns **[Boolean][39]** l'élément du DOM trouvé
+#### Examples
+
+```javascript
+let found = $_("#main").found();
+```
+
+Returns **[Boolean][73]** `true` si un élément au moins du DOM trouvé. `false` sinon
 
 ### first
 
 Retourne le premier élément trouvé
 
-Returns **[HTMLElement][37]** l'élément du DOM trouvé
+#### Parameters
+
+*   `isHTMLElement` **[Boolean][73]** `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom (optional, default `false`)
+
+#### Examples
+
+```javascript
+let htmlElement = $_("p.paragraphe").first(true);
+```
+
+```javascript
+$_("input.my_class").first().setDisabled();
+```
+
+Returns **[HTMLElement][70]** l'élément du DOM trouvé
 
 ### last
 
 Retourne le dernier élément trouvé
 
-Returns **[HTMLElement][37]** L'élément du DOM trouvé
+#### Parameters
 
-## gsd
+*   `isHTMLElement` **[Boolean][73]** `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom (optional, default `false`)
 
-Instantiation d'un nouveau constructeur
+#### Examples
+
+```javascript
+let htmlElement = $_("p.paragraphe").last(true);
+```
+
+```javascript
+$_("input.my_class").last().setDisabled();
+```
+
+Returns **([GSDom][74] | [HTMLElement][70])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
+
+### items
+
+Retourne un tableau des éléments du Dom sélectionnés
+
+#### Examples
+
+```javascript
+let my_HTMLElements = $_("p.my_class").items();
+```
+
+Returns **[Array][75]<[HTMLElement][70]>** les éléments du DOM sélectionnés
+
+### count
+
+Retourne le nombre d'éléments du DOM sélectionnés
+
+#### Examples
+
+```javascript
+let count = $_("p.my_class").count();
+```
+
+### itemAtIndex
+
+Retourne l'élément à l'index `index` parmi les éléments sélectionnés;
+
+#### Parameters
+
+*   `index` **[Number][76]** Index de l'élément souhaité
+*   `isHTMLElement` **[Boolean][73]** `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom (optional, default `false`)
+
+#### Examples
+
+```javascript
+let htmlElement = $_("p.paragraphe").itemAtIndex(2,true);
+```
+
+```javascript
+$_("input.my_class").itemAtIndex(2).setDisabled();
+```
+
+Returns **([GSDom][74] | [HTMLElement][70])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
+
+### version
+
+Retourne la version de la bibliothèque
+
+#### Parameters
+
+*   `long` **[Boolean][73]** `true` pour obtenir la version longue
+
+Returns **[String][69]** Le numéro de version
+
+## eachCallback
+
+*   **See**: [each][4]
+
+Fonction de rappel la méthode each()
+
+Type: [Function][77]
 
 ### Parameters
 
--   `selector` **[String][36]** Sélecteur utilisé
+*   `element` **[HTMLElement][70]** L'élément du DOM concerné
--   `root`  
+*   `index` **[number][76]** L'index de l'élément
--   `scope` **[HTMLElement][37]** 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][77]
 
-### version
+### Parameters
 
-Version de la librairie
+*   `evt` **[Event][78]** L'événement qui s'est produit
+*   `item` **[HTMLElement][70]** L'élément du DOM concerné par lévénement
 
-[1]: #constructor
+[1]: #gsdom
 
 [2]: #parameters
 
-[3]: #each
+[3]: #examples
 
-[4]: #parameters-1
+[4]: #each
 
-[5]: #addclass
+[5]: #parameters-1
 
-[6]: #parameters-2
+[6]: #examples-1
 
-[7]: #removeclass
+[7]: #addclass
 
-[8]: #parameters-3
+[8]: #parameters-2
 
-[9]: #replaceclass
+[9]: #examples-2
 
-[10]: #parameters-4
+[10]: #removeclass
 
-[11]: #setattr
+[11]: #parameters-3
 
-[12]: #parameters-5
+[12]: #examples-3
 
-[13]: #delattr
+[13]: #removeallclasses
 
-[14]: #parameters-6
+[14]: #examples-4
 
-[15]: #sethidden
+[15]: #replaceclass
 
-[16]: #setreadonly
+[16]: #parameters-4
 
-[17]: #setdisabled
+[17]: #examples-5
 
-[18]: #delhidden
+[18]: #setattr
 
-[19]: #delreadonly
+[19]: #parameters-5
 
-[20]: #deldisabled
+[20]: #examples-6
 
-[21]: #togglehidden
+[21]: #delattr
 
-[22]: #togglereadonly
+[22]: #parameters-6
 
-[23]: #toggledisabled
+[23]: #examples-7
 
-[24]: #on
+[24]: #sethidden
 
-[25]: #parameters-7
+[25]: #examples-8
 
-[26]: #onclick
+[26]: #setreadonly
 
-[27]: #parameters-8
+[27]: #examples-9
 
-[28]: #found
+[28]: #setdisabled
 
-[29]: #first
+[29]: #examples-10
 
-[30]: #last
+[30]: #delhidden
 
-[31]: #gsd
+[31]: #examples-11
 
-[32]: #parameters-9
+[32]: #delreadonly
 
-[33]: #version
+[33]: #examples-12
 
-[34]: #gsd-1
+[34]: #deldisabled
 
-[35]: #version-1
+[35]: #examples-13
 
-[36]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[36]: #togglehidden
 
-[37]: https://developer.mozilla.org/docs/Web/HTML/Element
+[37]: #examples-14
 
-[38]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[38]: #togglereadonly
 
-[39]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[39]: #examples-15
+
+[40]: #toggledisabled
+
+[41]: #examples-16
+
+[42]: #on
+
+[43]: #parameters-7
+
+[44]: #examples-17
+
+[45]: #onclick
+
+[46]: #parameters-8
+
+[47]: #examples-18
+
+[48]: #found
+
+[49]: #examples-19
+
+[50]: #first
+
+[51]: #parameters-9
+
+[52]: #examples-20
+
+[53]: #last
+
+[54]: #parameters-10
+
+[55]: #examples-21
+
+[56]: #items
+
+[57]: #examples-22
+
+[58]: #count
+
+[59]: #examples-23
+
+[60]: #itematindex
+
+[61]: #parameters-11
+
+[62]: #examples-24
+
+[63]: #version
+
+[64]: #parameters-12
+
+[65]: #eachcallback
+
+[66]: #parameters-13
+
+[67]: #evtcallback
+
+[68]: #parameters-14
+
+[69]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[70]: https://developer.mozilla.org/docs/Web/HTML/Element
+
+[71]: #eachcallback
+
+[72]: #evtcallback
+
+[73]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[74]: #gsdom
+
+[75]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[76]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[77]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[78]: https://developer.mozilla.org/docs/Web/API/Event

README.md

@@ -1,10 +1,26 @@
 GSDom - Bibliothèque Javascript
 ===============================
 
+GSDom est une petite bibliothèque javascript permettant d'effectuer des manipulations de base sur le DOM d'une page HTML.
+
+- Elle est compatible Emac2005 (ES6) et ne nécessite aucune bibliothèque externe.
+- Elle permet de se passer de bibliothèques lourdes telles que jQuery pour les manipulations basiques 
+
 Installation
 ------------
 
+Pour utiliser GSDom, il suffit de copier le fichier dist/gsdom.min.js dans l'arborescence de son projet et de l'intégrer dans sa page web de manière classique
+```html
+<script src="js/gsdom.min.js">
+```
+GSDom exporte le symbole `$_` pour toute manipulation du DOM
+```html
+<script>
+  // Sélectionne tous les a du document et ajoute la classe myClass
+  $_("a").addClass("myClass");
+</script>
+```
+
 Documentation
 -------------
-La documentation est générée automatiquement  
+La [documentation](DOCUMENTATION.md) est générée automatiquement par le script de build
-[Documentation](DOCUMENTATION.md)

build_gsdom.sh

@@ -1 +1,2 @@
 terser --ecma=2015 --comments /^!/  --compress --mangle --output dist/gsdom.min.js -- src/gsdom.js
+documentation build src/GSDom.js -f md > DOCUMENTATION.md

dist/gsdom.min.js

@@ -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.0  by Séb",e})();
+window.$_=(()=>{"use strict";class e{constructor(e,t){if(this.shortversion="2.1.0",this.longversion=`GSDom ${this.shortversion} 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]))}items(){return this.elems}count(){return this.elems.length}itemAtIndex(t,s){let i=parseInt(t);return!(i>=this.count()||i<0)&&(!0===s?this.elems[i]:new e(this.elems[i]))}version(e){return!0===e?this.longversion:this.shortversion}}return(t,s)=>new e(t,s)})();

src/gsdom.js

@@ -1,32 +1,80 @@
 window.$_ = (() => {
   '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
-   * let element = $_("a.link", "div#main");
+   * // Ajout d'une classe `my_class` à tous les `a`
+   * $_("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.1.0';
+      this.longversion = `GSDom ${this.shortversion} by Séb`;
       if (!selector) {
+        // On ne va pas plus loin s'il n'y a pas de sélecteur
         return;
       }
       if (selector === 'document') {
+        // Cas particulier pour document
         this.elems = [document, ];
       } else if (selector === 'window') {
+        // CAs particulier pour window
         this.elems = [window, ];
       } 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
-   * @param {Function} callback La fonction de rappel
+     *
+     * @example
+     * //appliquer une fonction sur tous les éléments ayant `my_class`
+     * $_(".my_class").each((item, index) => {
+     *  // Do something with item et index
+     * });
+     *
+     * @param {eachCallback} callback La fonction de rappel
      */
-  Constructor.prototype.each = function (callback) {
+    each(callback) {
       if (!callback || typeof callback !== 'function') {
         return;
       }
@@ -34,117 +82,186 @@ window.$_ = (() => {
         callback(element, index);
       });
       return this;
-  };
+    }
+    /**
+     * Fonction de rappel la méthode each()
+     * @callback eachCallback
+     * @see {@link #each|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
+     *
+     * @example
+     * $_("p","div#main").addClass("my_class");
+     *
      * @param {String} className Le nom de la classe à ajouter
      * @returns {this} Chainage
      */
-  Constructor.prototype.addClass = function (className) {
+    addClass(className) {
       this.each(item => {
         item.classList.add(className);
       });
       return this;
-  };
+    }
     /**
-   * Ajout d'une classe aux éléments sélectionnés
+     * Suppression d'une classe aux éléments sélectionnés
+     *
+     * @example
+     * $_("p","div#main").removeClass("my_class");
+     *
      * @param {String} className Le nom de la classe à ajouter
      * @returns {this} Chainage
      */
-  Constructor.prototype.removeClass = function (className) {
+    removeClass(className) {
       this.each(item => {
         item.classList.remove(className);
       });
       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
+     * $_("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} newClass Nom de la classe de remplacement
      * @returns {this} Chainage
      */
-  Constructor.prototype.replaceClass = function (oldClass, newClass) {
+    replaceClass(oldClass, newClass) {
       this.each(item => {
         item.classList.replace(oldClass, newClass);
       });
       return this;
-  };
+    }
     /**
      * Définit un attribut et sa valeur
+     *
+     * @example
+     * $_("input.my_class").setAttr("readonly", "");
+     *
      * @param {String} attr Nom de l'attribut
      * @param {String} value Valeur de l'attribut
      * @returns {this} Chainage
      */
-  Constructor.prototype.setAttr = function (attr, value) {
+    setAttr(attr, value) {
       this.each(item => {
         item.setAttribute(attr, value);
       });
       return this;
-  };
+    }
     /**
      * Supprime un attribut dans les éléments sélectionnés
+     *
+     * @example
+     * $_(input.my_class).delAttr("readonly");
+     *
      * @param {String} attr Nom de l'attribut à supprimer
      * @returns {this} Chainage
      */
-  Constructor.prototype.delAttr = function (attr) {
+    delAttr(attr) {
       this.each(item => {
         item.removeAttribute(attr);
       });
       return this;
-  };
+    }
     /**
      * Ajoute l'attribut hidden aux éléments sélectionnés
+     *
+     * @example $_("span.my_class").setHidden();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.setHidden = function () {
+    setHidden() {
       this.setAttr('hidden', '');
       return this;
-  };
+    }
     /**
-   * Ajoute l'attribut readonly aux éléments sélectionnés
+     * Ajoute l'attribut `readonly` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").setReadOnly();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.setReadOnly = function () {
+    setReadOnly() {
       this.setAttr('readonly', '');
       return this;
-  };
+    }
     /**
-   * Ajoute l'attribut disabled aux éléments sélectionnés
+     * Ajoute l'attribut `disabled` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").setDisabled();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.setDisabled = function () {
+    setDisabled() {
       this.setAttr('disabled', '');
       return this;
-  };
+    }
     /**
-   * Supprime l'attribut hidden aux éléments sélectionnés
+     * Supprime l'attribut `hidden` aux éléments sélectionnés
+     *
+     * @example
+     * $_("span.my_class").delHidden();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.delHidden = function () {
+    delHidden() {
       this.delAttr('hidden');
       return this;
-  };
+    }
     /**
-   * Supprime l'attribut readonly aux éléments sélectionnés
+     * Supprime l'attribut `readonly` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").delReadOnly();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.delReadOnly = function () {
+    delReadOnly() {
       this.delAttr('readonly');
       return this;
-  };
+    }
     /**
-   * Supprime l'attribut disabled aux éléments sélectionnés
+     * Supprime l'attribut `disabled` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").delDisabled();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.delDisabled = function () {
+    delDisabled() {
       this.delAttr('disabled');
       return this;
-  };
+    }
     /**
-   * switche l'attribut hidden des éléments sélectionnés
+     * switche l'attribut `hidden` des éléments sélectionnés
+     *
+     * @example
+     * $_("span.my_class").toggleHidden();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.toggleHidden = function () {
+    toggleHidden() {
       this.each(item => {
         if (item.hasAttribute('hidden')) {
           item.removeAttribute('hidden');
@@ -153,12 +270,16 @@ window.$_ = (() => {
         }
       });
       return this;
-  };
+    }
     /**
-   * switche l'attribut readonly des éléments sélectionnés
+     * switche l'attribut `readonly` des éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").toggleReadOnly();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.toggleReadOnly = function () {
+    toggleReadOnly() {
       this.each(item => {
         if (item.hasAttribute('readonly')) {
           item.removeAttribute('readonly');
@@ -167,12 +288,16 @@ window.$_ = (() => {
         }
       });
       return this;
-  };
+    }
     /**
-   * switche l'attribut disabled des éléments sélectionnés
+     * switche l'attribut `disabled` des éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").toggleDisabled();
+     *
      * @returns {this} Chainage
      */
-  Constructor.prototype.toggleDisabled = function () {
+    toggleDisabled() {
       this.each(item => {
         if (item.hasAttribute('disabled')) {
           item.removeAttribute('disabled');
@@ -181,66 +306,142 @@ window.$_ = (() => {
         }
       });
       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
+     * $_("button#event").on("mouseover", (evt, el) => {
+     *  // Do something with evt and el
+     * }, false);
+     *
      * @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
      */
-  Constructor.prototype.on = function (type, callback, useCapture) {
+    on(type, callback, useCapture) {
       this.each(item => {
         item.removeEventListener(type, callback, useCapture || false);
-      item.addEventListener(type, (evt, el) => {
+        item.addEventListener(type, evt => {
-        callback(evt, el);
+          callback(evt, item);
         }, useCapture || false);
       });
       return this;
-  };
+    }
     /**
      * Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
-   * @param {Function} callback Gestionnaire de l'événement
+     *
+     * @example
+     * $_("button#event").onClick( (evt, el) => {
+     *  // Do something with evt and el
+     * }, false);
+     *
+     * @param {evtCallback} callback Gestionnaire 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);
       return this;
-  };
+    }
+    /**
+     * Fonction de rappel des méthodes on() et onClick()
+     * @callback evtCallback
+     * @see {@link #on|on}
+     * @see {@link #onclick|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é
-   * @returns {Boolean} l'élément du DOM trouvé
+     *
+     * @example
+     * let found = $_("#main").found();
+     *
+     * @returns {Boolean} `true` si un élément au moins du DOM trouvé. `false` sinon
      */
-  Constructor.prototype.found = function () {
+    found() {
       return this.elems.length > 0;
-  };
+    }
     /**
      * Retourne le premier élément trouvé
+     *
+     * @example
+     * let htmlElement = $_("p.paragraphe").first(true);
+     * @example 
+     * $_("input.my_class").first().setDisabled();
+     * 
+     * @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é
      */
-  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é
-   * @returns {HTMLElement} L'élément du DOM trouvé
+     *
+     * @example
+     * let htmlElement = $_("p.paragraphe").last(true);
+     * @example 
+     * $_("input.my_class").last().setDisabled();
+     *
+     * @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;
+    }
+    /**
+     * Retourne un tableau des éléments du Dom sélectionnés
+     * 
+     * @example
+     * let my_HTMLElements = $_("p.my_class").items();
+     * 
+     * @returns {HTMLElement[]} les éléments du DOM sélectionnés
+     */
+    items() {
+      return this.elems;
+    }
+    /**
+     * Retourne le nombre d'éléments du DOM sélectionnés
+     * 
+     * @example
+     * let count = $_("p.my_class").count();
+     * 
+     * @returns 
+     */
+    count() {
+      return this.elems.length;
+    }
+    /**
+     * Retourne l'élément à l'index `index` parmi les éléments sélectionnés;
+     * 
+     * @example
+     * let htmlElement = $_("p.paragraphe").itemAtIndex(2,true);
+     * @example 
+     * $_("input.my_class").itemAtIndex(2).setDisabled();
+     * 
+     * @param {Number} index Index de l'élément souhaité
+     * @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
+     */
+    itemAtIndex(index, isHTMLElement) {
+      let i = parseInt(index);
+      if (i >= this.count() || i < 0)
+        return false;
+      return isHTMLElement === true ? this.elems[i] : new GSDom(this.elems[i]);
+    }
+    /**
+     * Retourne la version de la bibliothèque
+     * 
+     * @param {Boolean} long `true` pour obtenir la version longue
+     * @returns {String} Le numéro de version
+     */
+    version(long) {
+      return long === true ? this.longversion : this.shortversion;
+    }
+  }
+  return (selector, root) => {
+    return new GSDom(selector, root);
   };
-  /**
-   * Instantiation d'un nouveau constructeur
-   * @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.0  by Séb';
-  /**
-   * @return Retour de la librairie
-   */
-  return gsd;
 })();

test/index.html

@@ -0,0 +1,101 @@
+<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>
+  <p>Version courte : <input type="text" id="shortVersion"></p>
+  <p>Version longue : <input type="text" id="longVersion"></p>
+  <p><button id="version">get versions</button></p>
+  <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
+    );
+    $_('button#version').onClick((evt, elem) => {
+      long = $_().version(true);
+      short = $_().version();
+      $_("input#shortVersion").first(true).value = short;
+      $_("input#longVersion").first(true).value = long;
+    }, false);
+  </script>
+</body>
+
+</html>