Merge pull request 'Correction du fichier de test' (#4 ) from Fix-Test into master

Reviewed-on: #4
Correction du fichier de test
2022-02-15 17:35:05 +01:00 · 2022-02-15 17:33:34 +01:00 · 2022-01-06 10:04:34 +01:00 · 2022-01-06 10:00:52 +01:00 · 2022-01-06 10:00:01 +01:00 · 2022-01-06 09:59:43 +01:00
5 changed files with 229 additions and 63 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -57,10 +57,19 @@
    *   [last][53]
        *   [Parameters][54]
        *   [Examples][55]
-*   [eachCallback][56]
-    *   [Parameters][57]
-*   [evtCallback][58]
-    *   [Parameters][59]
+    *   [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]

 ## 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é)
-*   `scope` **([String][60] | [HTMLElement][61])** Sélecteur utilisé (le 1er élément trouvé est utilisé) ou un élément du DOM (optional, default `document`)
+*   `selector` **([String][69] | [HTMLElement][70])** Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
+*   `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
-*   `newClass` **[String][60]** Nom de la classe de remplacement
+*   `oldClass` **[String][69]** Nom de la classe à remplacer
+*   `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
-*   `value` **[String][60]** Valeur de l'attribut
+*   `attr` **[String][69]** Nom 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
-*   `callback` **[evtCallback][63]** Gestionnaire de l'événement
-*   `useCapture` **[Boolean][64]** Propagation de l'événement
+*   `type` **[String][69]** Nom de l'événement
+*   `callback` **[evtCallback][72]** Gestionnaire 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
-*   `useCapture` **[Boolean][64]** Propagation de l'événement
+*   `callback` **[evtCallback][72]** Gestionnaire 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é
-*   `index` **[number][67]** L'index de l'élément
+*   `element` **[HTMLElement][70]** L'élément du DOM concerné
+*   `index` **[number][76]** L'index de l'élément

 ## evtCallback

-*   **See**: [#on][42]
-*   **See**: [#onclick][45]
+*   **See**: [on][42]
+*   **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
-*   `item` **[HTMLElement][61]** L'élément du DOM concerné par lévénement
+*   `evt` **[Event][78]** L'événement qui s'est produit
+*   `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
--- a/dist/gsdom.min.js
+++ b/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)})();
--- a/src/gsdom.js
+++ b/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.longversion = 'GSDom 2.0.0 by Séb';
+      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;
@@ -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 #onclick}
+     * @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
     */
@@ -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;
    }
--- a/test/index.html
+++ b/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;
@@ -50,10 +53,10 @@
  <script src="../src/gsdom.js"></script>
  <script>
    $_('a.bleu').onClick((evt, el) => {
-      $_(el.parentElement).removeAllClass().addClass("blue");
+      $_(el.parentElement).removeAllClasses().addClass("blue");
    }, true);
    $_('a.rouge').onClick((evt, el) => {
-      $_(el.parentElement).removeAllClass().addClass("red");
+      $_(el.parentElement).removeAllClasses().addClass("red");
    }, true);
    $_('a.swap').onClick((evt, el) => {
      if (el.parentElement.classList.contains("blue")) {
@@ -63,10 +66,10 @@
      }
    }, true);
    $_("a.allgreen").onClick((evt, el) => {
-      $_("p", "div").removeAllClass().addClass("green");
+      $_("p", "div").removeAllClasses().addClass("green");
    }, false);
    $_("a.lastpurple").onClick((evt, el) => {
-      $_("p", "div#main").last().removeAllClass().addClass("purple");
+      $_("p", "div#main").last().removeAllClasses().addClass("purple");
    }, false);
    $_("a.bold").onClick(
      (evt, el) => {
@@ -86,7 +89,12 @@
        );
      }, false
    );
-    console.log($_("p").first(true));
+    $_('button#version').onClick((evt, elem) => {
+
+      // $_("input#shortVersion").first(true).value = $_().version();
+      $_("input#shortVersion").first().setAttr("value", $_().version());
+      $_("input#longVersion").first(true).value = $_().version(true);
+    }, false);
  </script>
 </body>
Author	SHA1	Message	Date
Sebastien	82ecdc5fb2	Merge pull request 'Correction du fichier de test' (#4 ) from Fix-Test into master Reviewed-on: #4	2022-02-15 17:35:05 +01:00
Sebastien	6088af4997	Correction du fichier de test Le fichier de test n'était plus fonctionnel à cause d'un changement de nom dans GSDom	2022-02-15 17:33:34 +01:00
Sebastien	12539f500e	Merge pull request 'Ajout des méthodes d'accès aux éléments sélectionnés' (#3 ) from Dev into master Reviewed-on: #3	2022-01-06 10:04:34 +01:00
Sebastien	9dc314f1eb	Ajout des méthodes items, itemsAtIndex et count	2022-01-06 10:00:52 +01:00
Sebastien	9d5d9ef35f	Enrichissement du fichier de test	2022-01-06 10:00:01 +01:00
Sebastien	b41c2c2065	Compilation de la doc et du fichier min	2022-01-06 09:59:43 +01:00
Sebastien	cee3d2328b	Ajout du changelog	2022-01-06 09:59:14 +01:00