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

@@ -57,10 +57,19 @@
     *   [last][53]
         *   [Parameters][54]
         *   [Examples][55]
-*   [eachCallback][56]
+    *   [items][56]
-    *   [Parameters][57]
+        *   [Examples][57]
-*   [evtCallback][58]
+    *   [count][58]
-    *   [Parameters][59]
+        *   [Examples][59]
+    *   [itemAtIndex][60]
+        *   [Parameters][61]
+        *   [Examples][62]
+    *   [version][63]
+        *   [Parameters][64]
+*   [eachCallback][65]
+    *   [Parameters][66]
+*   [evtCallback][67]
+    *   [Parameters][68]
 
 ## GSDom
 
@@ -68,13 +77,13 @@ La classe GSDom est une classe écrite en pur Javascript qui permet de simplifie
 
 ### Parameters
 
-*   `selector` **([String][60] | [HTMLElement][61])** Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
+*   `selector` **([String][69] | [HTMLElement][70])** 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`)
+*   `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 lel `a`
+// Ajout d'une classe `my_class` à tous les `a`
 $_("a").addClass("my_class");
 ```
 
@@ -101,7 +110,7 @@ Parcours de tous les éléments sélectionnés
 
 #### Parameters
 
-*   `callback` **[eachCallback][62]** La fonction de rappel
+*   `callback` **[eachCallback][71]** La fonction de rappel
 
 #### Examples
 
@@ -118,7 +127,7 @@ Ajout d'une classe aux éléments sélectionnés
 
 #### Parameters
 
-*   `className` **[String][60]** Le nom de la classe à ajouter
+*   `className` **[String][69]** Le nom de la classe à ajouter
 
 #### Examples
 
@@ -134,7 +143,7 @@ Suppression d'une classe aux éléments sélectionnés
 
 #### Parameters
 
-*   `className` **[String][60]** Le nom de la classe à ajouter
+*   `className` **[String][69]** Le nom de la classe à ajouter
 
 #### Examples
 
@@ -162,8 +171,8 @@ Remplace une classe par une autre parmi les éléments sélectionnés
 
 #### Parameters
 
-*   `oldClass` **[String][60]** Nom de la classe à remplacer
+*   `oldClass` **[String][69]** Nom de la classe à remplacer
-*   `newClass` **[String][60]** Nom de la classe de remplacement
+*   `newClass` **[String][69]** Nom de la classe de remplacement
 
 #### Examples
 
@@ -179,8 +188,8 @@ Définit un attribut et sa valeur
 
 #### Parameters
 
-*   `attr` **[String][60]** Nom de l'attribut
+*   `attr` **[String][69]** Nom de l'attribut
-*   `value` **[String][60]** Valeur de l'attribut
+*   `value` **[String][69]** Valeur de l'attribut
 
 #### Examples
 
@@ -196,7 +205,7 @@ Supprime un attribut dans les éléments sélectionnés
 
 #### Parameters
 
-*   `attr` **[String][60]** Nom de l'attribut à supprimer
+*   `attr` **[String][69]** Nom de l'attribut à supprimer
 
 #### Examples
 
@@ -320,9 +329,9 @@ Ajoute un gestionnaire d'événement aux éléments sélectionnés
 
 #### Parameters
 
-*   `type` **[String][60]** Nom de l'événement
+*   `type` **[String][69]** Nom de l'événement
-*   `callback` **[evtCallback][63]** Gestionnaire de l'événement
+*   `callback` **[evtCallback][72]** Gestionnaire de l'événement
-*   `useCapture` **[Boolean][64]** Propagation de l'événement
+*   `useCapture` **[Boolean][73]** Propagation de l'événement
 
 #### Examples
 
@@ -338,8 +347,8 @@ Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
 
 #### Parameters
 
-*   `callback` **[evtCallback][63]** Gestionnaire de l'événement
+*   `callback` **[evtCallback][72]** Gestionnaire de l'événement
-*   `useCapture` **[Boolean][64]** Propagation de l'événement
+*   `useCapture` **[Boolean][73]** Propagation de l'événement
 
 #### Examples
 
@@ -359,7 +368,7 @@ Retourne si un élément a été trouvé
 let found = $_("#main").found();
 ```
 
-Returns **[Boolean][64]** `true` si un élément au moins du DOM trouvé. `false` sinon
+Returns **[Boolean][73]** `true` si un élément au moins du DOM trouvé. `false` sinon
 
 ### first
 
@@ -367,15 +376,19 @@ 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`)
+*   `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();
+let htmlElement = $_("p.paragraphe").first(true);
 ```
 
-Returns **[HTMLElement][61]** l'élément du DOM trouvé
+```javascript
+$_("input.my_class").first().setDisabled();
+```
+
+Returns **[HTMLElement][70]** l'élément du DOM trouvé
 
 ### last
 
@@ -383,42 +396,99 @@ 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`)
+*   `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").last();
+let htmlElement = $_("p.paragraphe").last(true);
 ```
 
-Returns **([GSDom][65] | [HTMLElement][61])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
+```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]
+*   **See**: [each][4]
 
 Fonction de rappel la méthode each()
 
-Type: [Function][66]
+Type: [Function][77]
 
 ### Parameters
 
-*   `element` **[HTMLElement][61]** L'élément du DOM concerné
+*   `element` **[HTMLElement][70]** L'élément du DOM concerné
-*   `index` **[number][67]** L'index de l'élément
+*   `index` **[number][76]** L'index de l'élément
 
 ## evtCallback
 
-*   **See**: [#on][42]
+*   **See**: [on][42]
-*   **See**: [#onclick][45]
+*   **See**: [onClick][45]
 
 Fonction de rappel des méthodes on() et onClick()
 
-Type: [Function][66]
+Type: [Function][77]
 
 ### Parameters
 
-*   `evt` **[Event][68]** L'événement qui s'est produit
+*   `evt` **[Event][78]** L'événement qui s'est produit
-*   `item` **[HTMLElement][61]** L'élément du DOM concerné par lévénement
+*   `item` **[HTMLElement][70]** L'élément du DOM concerné par lévénement
 
 [1]: #gsdom
 
@@ -530,28 +600,48 @@ Type: [Function][66]
 
 [55]: #examples-21
 
-[56]: #eachcallback
+[56]: #items
 
-[57]: #parameters-11
+[57]: #examples-22
 
-[58]: #evtcallback
+[58]: #count
 
-[59]: #parameters-12
+[59]: #examples-23
 
-[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[60]: #itematindex
 
-[61]: https://developer.mozilla.org/docs/Web/HTML/Element
+[61]: #parameters-11
 
-[62]: #eachcallback
+[62]: #examples-24
 
-[63]: #evtcallback
+[63]: #version
 
-[64]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[64]: #parameters-12
 
-[65]: #gsdom
+[65]: #eachcallback
 
-[66]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[66]: #parameters-13
 
-[67]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[67]: #evtcallback
 
-[68]: https://developer.mozilla.org/docs/Web/API/Event
+[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

dist/gsdom.min.js

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

@@ -6,7 +6,7 @@ window.$_ = (() => {
    * @class GSDom
    * 
    * @example
-   * // Ajout d'une classe `my_class` à tous lel `a`
+   * // 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`
@@ -25,8 +25,8 @@ window.$_ = (() => {
    */
   class GSDom {
     constructor(selector, scope) {
-      this.shortversion = '2.0.0';
+      this.shortversion = '2.1.0';
-      this.longversion = 'GSDom 2.0.0 by Séb';
+      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;
@@ -86,7 +86,7 @@ window.$_ = (() => {
     /**
      * Fonction de rappel la méthode each()
      * @callback eachCallback
-     * @see {@link #each}
+     * @see {@link #each|each}
      * @param {HTMLElement} element L'élément du DOM concerné
      * @param {number} index L'index de l'élément
      */
@@ -346,8 +346,8 @@ window.$_ = (() => {
     /**
      * Fonction de rappel des méthodes on() et onClick()
      * @callback evtCallback
-     * @see {@link #on}
+     * @see {@link #on|on}
-     * @see {@link #onclick}
+     * @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
      */
@@ -367,7 +367,9 @@ window.$_ = (() => {
      * Retourne le premier élément trouvé
      *
      * @example
-     * let htmlElement = $_("p.paragraphe").first();
+     * 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é
@@ -379,7 +381,9 @@ window.$_ = (() => {
      * Retourne le dernier élément trouvé
      *
      * @example
-     * let htmlElement = $_("p.paragraphe").last();
+     * 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
@@ -387,6 +391,52 @@ window.$_ = (() => {
     last(isHTMLElement) {
       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;
     }

test/index.html

@@ -30,6 +30,9 @@
 
     <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;
@@ -86,7 +89,12 @@
         );
       }, false
     );
-    console.log($_("p").first(true));
+    $_('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>