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

Reviewed-on: #2

DOCUMENTATION.md

@@ -2,65 +2,115 @@
 
 ### Table of Contents
 
--   [Constructor][1]
-    -   [Parameters][2]
-    -   [Examples][3]
-    -   [each][4]
-        -   [Parameters][5]
-    -   [addClass][6]
-        -   [Parameters][7]
-    -   [removeClass][8]
-        -   [Parameters][9]
-    -   [replaceClass][10]
-        -   [Parameters][11]
-    -   [setAttr][12]
-        -   [Parameters][13]
-    -   [delAttr][14]
-        -   [Parameters][15]
-    -   [setHidden][16]
-    -   [setReadOnly][17]
-    -   [setDisabled][18]
-    -   [delHidden][19]
-    -   [delReadOnly][20]
-    -   [delDisabled][21]
-    -   [toggleHidden][22]
-    -   [toggleReadOnly][23]
-    -   [toggleDisabled][24]
-    -   [on][25]
-        -   [Parameters][26]
-    -   [onClick][27]
-        -   [Parameters][28]
-    -   [found][29]
-    -   [first][30]
-    -   [last][31]
--   [gsd][32]
-    -   [Parameters][33]
-    -   [version][34]
--   [gsd][35]
-    -   [version][36]
+*   [GSDom][1]
+    *   [Parameters][2]
+    *   [Examples][3]
+    *   [each][4]
+        *   [Parameters][5]
+        *   [Examples][6]
+    *   [addClass][7]
+        *   [Parameters][8]
+        *   [Examples][9]
+    *   [removeClass][10]
+        *   [Parameters][11]
+        *   [Examples][12]
+    *   [removeAllClasses][13]
+        *   [Examples][14]
+    *   [replaceClass][15]
+        *   [Parameters][16]
+        *   [Examples][17]
+    *   [setAttr][18]
+        *   [Parameters][19]
+        *   [Examples][20]
+    *   [delAttr][21]
+        *   [Parameters][22]
+        *   [Examples][23]
+    *   [setHidden][24]
+        *   [Examples][25]
+    *   [setReadOnly][26]
+        *   [Examples][27]
+    *   [setDisabled][28]
+        *   [Examples][29]
+    *   [delHidden][30]
+        *   [Examples][31]
+    *   [delReadOnly][32]
+        *   [Examples][33]
+    *   [delDisabled][34]
+        *   [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]
+*   [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
 
--   `selector` **[String][37]** Sélecteur utilisé
--   `scope` **[HTMLElement][38]** Racine de la recherche
+*   `selector` **([String][60] | [HTMLElement][61])** Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
+*   `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
 
 ```javascript
-let element = $_("a.link", "div#main");
+// Ajout d'une classe `my_class` à tous lel `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][39]** La fonction de rappel
+*   `callback` **[eachCallback][62]** 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
 
@@ -68,28 +118,58 @@ Ajout d'une classe aux éléments sélectionnés
 
 #### Parameters
 
--   `className` **[String][37]** Le nom de la classe à ajouter
+*   `className` **[String][60]** 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][37]** Le nom de la classe à ajouter
+*   `className` **[String][60]** 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][37]** Nom de la classe à remplacer
--   `newClass` **[String][37]** Nom de la classe de remplacement
+*   `oldClass` **[String][60]** Nom de la classe à remplacer
+*   `newClass` **[String][60]** Nom de la classe de remplacement
+
+#### Examples
+
+```javascript
+$_("p","div#main").replaceClass("my_old_class", "my_new_class");
+```
 
 Returns **this** Chainage
 
@@ -99,8 +179,14 @@ Définit un attribut et sa valeur
 
 #### Parameters
 
--   `attr` **[String][37]** Nom de l'attribut
--   `value` **[String][37]** Valeur de l'attribut
+*   `attr` **[String][60]** Nom de l'attribut
+*   `value` **[String][60]** Valeur de l'attribut
+
+#### Examples
+
+```javascript
+$_("input.my_class").setAttr("readonly", "");
+```
 
 Returns **this** Chainage
 
@@ -110,7 +196,13 @@ Supprime un attribut dans les éléments sélectionnés
 
 #### Parameters
 
--   `attr` **[String][37]** Nom de l'attribut à supprimer
+*   `attr` **[String][60]** Nom de l'attribut à supprimer
+
+#### Examples
+
+```javascript
+$_(input.my_class).delAttr("readonly");
+```
 
 Returns **this** Chainage
 
@@ -118,65 +210,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][37]** Nom de l'événement
--   `callback` **[Function][39]** Gestionnaire de l'événement
--   `useCapture` **[Boolean][40]** Propagation de l'événement
+*   `type` **[String][60]** Nom de l'événement
+*   `callback` **[evtCallback][63]** Gestionnaire de l'événement
+*   `useCapture` **[Boolean][64]** Propagation de l'événement
+
+#### Examples
+
+```javascript
+$_("button#event").on("mouseover", (evt, el) => {
+ // Do something with evt and el
+}, false);
+```
 
 ### onClick
 
@@ -184,50 +338,89 @@ Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
 
 #### Parameters
 
--   `callback` **[Function][39]** Gestionnaire de l'événement
--   `useCapture` **[Boolean][40]** Propagation de l'événement
+*   `callback` **[evtCallback][63]** Gestionnaire de l'événement
+*   `useCapture` **[Boolean][64]** 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][40]** l'élément du DOM trouvé
+#### Examples
+
+```javascript
+let found = $_("#main").found();
+```
+
+Returns **[Boolean][64]** `true` si un élément au moins du DOM trouvé. `false` sinon
 
 ### first
 
 Retourne le premier élément trouvé
 
-Returns **[HTMLElement][38]** l'élément du DOM trouvé
+#### Parameters
+
+*   `isHTMLElement` **[Boolean][64]** `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom (optional, default `false`)
+
+#### Examples
+
+```javascript
+let htmlElement = $_("p.paragraphe").first();
+```
+
+Returns **[HTMLElement][61]** l'élément du DOM trouvé
 
 ### last
 
 Retourne le dernier élément trouvé
 
-Returns **[HTMLElement][38]** L'élément du DOM trouvé
+#### Parameters
 
-## gsd
+*   `isHTMLElement` **[Boolean][64]** `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();
+```
+
+Returns **([GSDom][65] | [HTMLElement][61])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
+
+## eachCallback
+
+*   **See**: [#each][4]
+
+Fonction de rappel la méthode each()
+
+Type: [Function][66]
 
 ### Parameters
 
--   `selector` **[String][37]** Sélecteur utilisé
--   `root`  
--   `scope` **[HTMLElement][38]** Racine de la recherche
+*   `element` **[HTMLElement][61]** L'élément du DOM concerné
+*   `index` **[number][67]** L'index de l'élément
 
-### 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
 
@@ -237,72 +430,128 @@ Version de la librairie
 
 [5]: #parameters-1
 
-[6]: #addclass
+[6]: #examples-1
 
-[7]: #parameters-2
+[7]: #addclass
 
-[8]: #removeclass
+[8]: #parameters-2
 
-[9]: #parameters-3
+[9]: #examples-2
 
-[10]: #replaceclass
+[10]: #removeclass
 
-[11]: #parameters-4
+[11]: #parameters-3
 
-[12]: #setattr
+[12]: #examples-3
 
-[13]: #parameters-5
+[13]: #removeallclasses
 
-[14]: #delattr
+[14]: #examples-4
 
-[15]: #parameters-6
+[15]: #replaceclass
 
-[16]: #sethidden
+[16]: #parameters-4
 
-[17]: #setreadonly
+[17]: #examples-5
 
-[18]: #setdisabled
+[18]: #setattr
 
-[19]: #delhidden
+[19]: #parameters-5
 
-[20]: #delreadonly
+[20]: #examples-6
 
-[21]: #deldisabled
+[21]: #delattr
 
-[22]: #togglehidden
+[22]: #parameters-6
 
-[23]: #togglereadonly
+[23]: #examples-7
 
-[24]: #toggledisabled
+[24]: #sethidden
 
-[25]: #on
+[25]: #examples-8
 
-[26]: #parameters-7
+[26]: #setreadonly
 
-[27]: #onclick
+[27]: #examples-9
 
-[28]: #parameters-8
+[28]: #setdisabled
 
-[29]: #found
+[29]: #examples-10
 
-[30]: #first
+[30]: #delhidden
 
-[31]: #last
+[31]: #examples-11
 
-[32]: #gsd
+[32]: #delreadonly
 
-[33]: #parameters-9
+[33]: #examples-12
 
-[34]: #version
+[34]: #deldisabled
 
-[35]: #gsd-1
+[35]: #examples-13
 
-[36]: #version-1
+[36]: #togglehidden
 
-[37]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[37]: #examples-14
 
-[38]: https://developer.mozilla.org/docs/Web/HTML/Element
+[38]: #togglereadonly
 
-[39]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[39]: #examples-15
 
-[40]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[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]: #eachcallback
+
+[57]: #parameters-11
+
+[58]: #evtcallback
+
+[59]: #parameters-12
+
+[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

README.md

@@ -1,6 +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](DOCUMENTATION.md) est générée automatiquement par le script de build

build_gsdom.sh

@@ -1 +1,2 @@
-terser --ecma=2015 --comments /^!/  --compress --mangle --output dist/gsdom.min.js -- src/gsdom.js
+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.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)})();

src/gsdom.js

@@ -1,246 +1,397 @@
 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 lel `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 {HTMLElement} scope Racine de la recherche
+   * @param {(String|HTMLElement)} selector Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
+   * @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) {
-    if (!selector) {
-      return;
-    }
-    if (selector === 'document') {
-      this.elems = [document, ];
-    } else if (selector === 'window') {
-      this.elems = [window, ];
-    } else {
-      let root = scope ? scope : document;
-      this.elems = root.querySelectorAll(selector);
-    }
-  };
-  /**
-   * Application d'une fonction sur chacun des éléments
-   * @param {Function} callback La fonction de rappel
-   */
-  Constructor.prototype.each = function (callback) {
-    if (!callback || typeof callback !== 'function') {
-      return;
-    }
-    this.elems.forEach((element, index) => {
-      callback(element, index);
-    });
-    return this;
-  };
-  /**
-   * Ajout d'une classe aux éléments sélectionnés
-   * @param {String} className Le nom de la classe à ajouter
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.addClass = function (className) {
-    this.each(item => {
-      item.classList.add(className);
-    });
-    return this;
-  };
-  /**
-   * Ajout d'une classe aux éléments sélectionnés
-   * @param {String} className Le nom de la classe à ajouter
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.removeClass = function (className) {
-    this.each(item => {
-      item.classList.remove(className);
-    });
-    return this;
-  };
-  /**
-   * Remplace une classe par une autre dans les éléments sélectionnés
-   * @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) {
-    this.each(item => {
-      item.classList.replace(oldClass, newClass);
-    });
-    return this;
-  };
-  /**
-   * Définit un attribut et sa valeur
-   * @param {String} attr Nom de l'attribut
-   * @param {String} value Valeur de l'attribut
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.setAttr = function (attr, value) {
-    this.each(item => {
-      item.setAttribute(attr, value);
-    });
-    return this;
-  };
-  /**
-   * Supprime un attribut dans les éléments sélectionnés
-   * @param {String} attr Nom de l'attribut à supprimer
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.delAttr = function (attr) {
-    this.each(item => {
-      item.removeAttribute(attr);
-    });
-    return this;
-  };
-  /**
-   * Ajoute l'attribut hidden aux éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.setHidden = function () {
-    this.setAttr('hidden', '');
-    return this;
-  };
-  /**
-   * Ajoute l'attribut readonly aux éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.setReadOnly = function () {
-    this.setAttr('readonly', '');
-    return this;
-  };
-  /**
-   * Ajoute l'attribut disabled aux éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.setDisabled = function () {
-    this.setAttr('disabled', '');
-    return this;
-  };
-  /**
-   * Supprime l'attribut hidden aux éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.delHidden = function () {
-    this.delAttr('hidden');
-    return this;
-  };
-  /**
-   * Supprime l'attribut readonly aux éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.delReadOnly = function () {
-    this.delAttr('readonly');
-    return this;
-  };
-  /**
-   * Supprime l'attribut disabled aux éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.delDisabled = function () {
-    this.delAttr('disabled');
-    return this;
-  };
-  /**
-   * switche l'attribut hidden des éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.toggleHidden = function () {
-    this.each(item => {
-      if (item.hasAttribute('hidden')) {
-        item.removeAttribute('hidden');
-      } else {
-        item.setAttribute('hidden', '');
+  class GSDom {
+    constructor(selector, scope) {
+      this.shortversion = '2.0.0';
+      this.longversion = 'GSDom 2.0.0 by Séb';
+      if (!selector) {
+        // On ne va pas plus loin s'il n'y a pas de sélecteur
+        return;
       }
-    });
-    return this;
-  };
-  /**
-   * switche l'attribut readonly des éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.toggleReadOnly = function () {
-    this.each(item => {
-      if (item.hasAttribute('readonly')) {
-        item.removeAttribute('readonly');
+      if (selector === 'document') {
+        // Cas particulier pour document
+        this.elems = [document, ];
+      } else if (selector === 'window') {
+        // CAs particulier pour window
+        this.elems = [window, ];
       } else {
-        item.setAttribute('readonly', '');
+        if (selector instanceof HTMLElement) {
+          // 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 = [];
+        }
       }
-    });
-    return this;
-  };
-  /**
-   * switche l'attribut disabled des éléments sélectionnés
-   * @returns {this} Chainage
-   */
-  Constructor.prototype.toggleDisabled = function () {
-    this.each(item => {
-      if (item.hasAttribute('disabled')) {
-        item.removeAttribute('disabled');
-      } else {
-        item.setAttribute('disabled', '');
+    }
+    /**
+     * Parcours de tous les éléments sélectionnés
+     *
+     * @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
+     */
+    each(callback) {
+      if (!callback || typeof callback !== 'function') {
+        return;
       }
-    });
-    return this;
+      this.elems.forEach((element, index) => {
+        callback(element, index);
+      });
+      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
+     *
+     * @example
+     * $_("p","div#main").addClass("my_class");
+     *
+     * @param {String} className Le nom de la classe à ajouter
+     * @returns {this} Chainage
+     */
+    addClass(className) {
+      this.each(item => {
+        item.classList.add(className);
+      });
+      return this;
+    }
+    /**
+     * 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
+     */
+    removeClass(className) {
+      this.each(item => {
+        item.classList.remove(className);
+      });
+      return this;
+    }
+    /**
+     * 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
+     */
+    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
+     */
+    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
+     */
+    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
+     */
+    setHidden() {
+      this.setAttr('hidden', '');
+      return this;
+    }
+    /**
+     * Ajoute l'attribut `readonly` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").setReadOnly();
+     *
+     * @returns {this} Chainage
+     */
+    setReadOnly() {
+      this.setAttr('readonly', '');
+      return this;
+    }
+    /**
+     * Ajoute l'attribut `disabled` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").setDisabled();
+     *
+     * @returns {this} Chainage
+     */
+    setDisabled() {
+      this.setAttr('disabled', '');
+      return this;
+    }
+    /**
+     * Supprime l'attribut `hidden` aux éléments sélectionnés
+     *
+     * @example
+     * $_("span.my_class").delHidden();
+     *
+     * @returns {this} Chainage
+     */
+    delHidden() {
+      this.delAttr('hidden');
+      return this;
+    }
+    /**
+     * Supprime l'attribut `readonly` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").delReadOnly();
+     *
+     * @returns {this} Chainage
+     */
+    delReadOnly() {
+      this.delAttr('readonly');
+      return this;
+    }
+    /**
+     * Supprime l'attribut `disabled` aux éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").delDisabled();
+     *
+     * @returns {this} Chainage
+     */
+    delDisabled() {
+      this.delAttr('disabled');
+      return this;
+    }
+    /**
+     * switche l'attribut `hidden` des éléments sélectionnés
+     *
+     * @example
+     * $_("span.my_class").toggleHidden();
+     *
+     * @returns {this} Chainage
+     */
+    toggleHidden() {
+      this.each(item => {
+        if (item.hasAttribute('hidden')) {
+          item.removeAttribute('hidden');
+        } else {
+          item.setAttribute('hidden', '');
+        }
+      });
+      return this;
+    }
+    /**
+     * switche l'attribut `readonly` des éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").toggleReadOnly();
+     *
+     * @returns {this} Chainage
+     */
+    toggleReadOnly() {
+      this.each(item => {
+        if (item.hasAttribute('readonly')) {
+          item.removeAttribute('readonly');
+        } else {
+          item.setAttribute('readonly', '');
+        }
+      });
+      return this;
+    }
+    /**
+     * switche l'attribut `disabled` des éléments sélectionnés
+     *
+     * @example
+     * $_("input.my_class").toggleDisabled();
+     *
+     * @returns {this} Chainage
+     */
+    toggleDisabled() {
+      this.each(item => {
+        if (item.hasAttribute('disabled')) {
+          item.removeAttribute('disabled');
+        } else {
+          item.setAttribute('disabled', '');
+        }
+      });
+      return this;
+    }
+    /**
+     * 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 {evtCallback} callback Gestionnaire de l'événement
+     * @param {Boolean} useCapture Propagation de l'événement
+     */
+    on(type, callback, useCapture) {
+      this.each(item => {
+        item.removeEventListener(type, callback, useCapture || false);
+        item.addEventListener(type, evt => {
+          callback(evt, item);
+        }, useCapture || false);
+      });
+      return this;
+    }
+    /**
+     * Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
+     *
+     * @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
+     */
+    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}
+     * @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é
+     *
+     * @example
+     * let found = $_("#main").found();
+     *
+     * @returns {Boolean} `true` si un élément au moins du DOM trouvé. `false` sinon
+     */
+    found() {
+      return this.elems.length > 0;
+    }
+    /**
+     * Retourne le premier élément trouvé
+     *
+     * @example
+     * 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é
+     */
+    first(isHTMLElement) {
+      return this.found() ? (isHTMLElement === true ? this.elems[0] : new GSDom(this.elems[0])) : false;
+    }
+    /**
+     * Retourne le dernier élément trouvé
+     *
+     * @example
+     * let htmlElement = $_("p.paragraphe").last();
+     *
+     * @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
+     */
+    last(isHTMLElement) {
+      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);
   };
-  /**
-   * Ajout d'un gestionnaire d'événement aux éléments sélectionnés
-   * @param {String} type Nom de l'événement
-   * @param {Function} callback Gestionnaire de l'événement
-   * @param {Boolean} useCapture Propagation de l'événement
-   */
-  Constructor.prototype.on = function (type, callback, useCapture) {
-    this.each(item => {
-      item.removeEventListener(type, callback, useCapture || false);
-      item.addEventListener(type, (evt, el) => {
-        callback(evt, el);
-      }, 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
-   * @param {Boolean} useCapture Propagation de l'événement
-   */
-  Constructor.prototype.onClick = function (callback, useCapture) {
-    this.on('click', callback, useCapture || false);
-    return this;
-  };
-  /**
-   * Retourne si un élément a été trouvé
-   * @returns {Boolean} l'élément du DOM trouvé
-   */
-  Constructor.prototype.found = function () {
-    return this.elems.length > 0;
-  };
-  /**
-   * Retourne le premier élément trouvé
-   * @returns {HTMLElement} l'élément du DOM trouvé
-   */
-  Constructor.prototype.first = function () {
-    return this.found() ? this.elems[0] : false;
-  };
-  /**
-   * Retourne le dernier élément trouvé
-   * @returns {HTMLElement} L'élément du DOM trouvé
-   */
-  Constructor.prototype.last = function () {
-    return this.found() ? this.elems[this.elems.length - 1] : false;
-  };
-  /**
-   * 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,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>