Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 82ecdc5fb2 | |||
| 6088af4997 | |||
| 12539f500e | |||
| 9dc314f1eb | |||
| 9d5d9ef35f | |||
| b41c2c2065 | |||
| cee3d2328b | |||
| 1a1e980902 | |||
| 92866574ea | |||
| 1af3899139 | |||
| d6cad0ecee |
18
CHANGELOG.md
Normal file
18
CHANGELOG.md
Normal file
@@ -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
|
||||
418
DOCUMENTATION.md
418
DOCUMENTATION.md
@@ -2,7 +2,7 @@
|
||||
|
||||
### Table of Contents
|
||||
|
||||
* [Constructor][1]
|
||||
* [GSDom][1]
|
||||
* [Parameters][2]
|
||||
* [Examples][3]
|
||||
* [each][4]
|
||||
@@ -14,79 +14,109 @@
|
||||
* [removeClass][10]
|
||||
* [Parameters][11]
|
||||
* [Examples][12]
|
||||
* [replaceClass][13]
|
||||
* [Parameters][14]
|
||||
* [Examples][15]
|
||||
* [setAttr][16]
|
||||
* [Parameters][17]
|
||||
* [Examples][18]
|
||||
* [delAttr][19]
|
||||
* [Parameters][20]
|
||||
* [Examples][21]
|
||||
* [setHidden][22]
|
||||
* [removeAllClasses][13]
|
||||
* [Examples][14]
|
||||
* [replaceClass][15]
|
||||
* [Parameters][16]
|
||||
* [Examples][17]
|
||||
* [setAttr][18]
|
||||
* [Parameters][19]
|
||||
* [Examples][20]
|
||||
* [delAttr][21]
|
||||
* [Parameters][22]
|
||||
* [Examples][23]
|
||||
* [setReadOnly][24]
|
||||
* [setHidden][24]
|
||||
* [Examples][25]
|
||||
* [setDisabled][26]
|
||||
* [setReadOnly][26]
|
||||
* [Examples][27]
|
||||
* [delHidden][28]
|
||||
* [setDisabled][28]
|
||||
* [Examples][29]
|
||||
* [delReadOnly][30]
|
||||
* [delHidden][30]
|
||||
* [Examples][31]
|
||||
* [delDisabled][32]
|
||||
* [delReadOnly][32]
|
||||
* [Examples][33]
|
||||
* [toggleHidden][34]
|
||||
* [delDisabled][34]
|
||||
* [Examples][35]
|
||||
* [toggleReadOnly][36]
|
||||
* [toggleHidden][36]
|
||||
* [Examples][37]
|
||||
* [toggleDisabled][38]
|
||||
* [toggleReadOnly][38]
|
||||
* [Examples][39]
|
||||
* [on][40]
|
||||
* [Parameters][41]
|
||||
* [Examples][42]
|
||||
* [onClick][43]
|
||||
* [Parameters][44]
|
||||
* [Examples][45]
|
||||
* [found][46]
|
||||
* [toggleDisabled][40]
|
||||
* [Examples][41]
|
||||
* [on][42]
|
||||
* [Parameters][43]
|
||||
* [Examples][44]
|
||||
* [onClick][45]
|
||||
* [Parameters][46]
|
||||
* [Examples][47]
|
||||
* [first][48]
|
||||
* [found][48]
|
||||
* [Examples][49]
|
||||
* [last][50]
|
||||
* [Examples][51]
|
||||
* [gsd][52]
|
||||
* [Parameters][53]
|
||||
* [version][54]
|
||||
* [gsd][55]
|
||||
* [version][56]
|
||||
* [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][57]** Sélecteur utilisé
|
||||
* `scope` **[HTMLElement][58]** Racine de la recherche
|
||||
* `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
|
||||
# Tous les `a` class `link` contenu dans un `div` id `main`
|
||||
$_("a.link", "div#main");
|
||||
// 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][59]** La fonction de rappel
|
||||
* `callback` **[eachCallback][71]** La fonction de rappel
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_(".class").each((item, index) => {
|
||||
//appliquer une fonction sur tous les éléments ayant `my_class`
|
||||
$_(".my_class").each((item, index) => {
|
||||
// Do something with item et index
|
||||
});
|
||||
```
|
||||
@@ -97,12 +127,12 @@ Ajout d'une classe aux éléments sélectionnés
|
||||
|
||||
#### Parameters
|
||||
|
||||
* `className` **[String][57]** Le nom de la classe à ajouter
|
||||
* `className` **[String][69]** Le nom de la classe à ajouter
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_("p","div#main").addClass("myClass");
|
||||
$_("p","div#main").addClass("my_class");
|
||||
```
|
||||
|
||||
Returns **this** Chainage
|
||||
@@ -113,29 +143,41 @@ Suppression d'une classe aux éléments sélectionnés
|
||||
|
||||
#### Parameters
|
||||
|
||||
* `className` **[String][57]** Le nom de la classe à ajouter
|
||||
* `className` **[String][69]** Le nom de la classe à ajouter
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_("p","div#main").removeClass("myClass");
|
||||
$_("p","div#main").removeClass("my_class");
|
||||
```
|
||||
|
||||
Returns **this** Chainage
|
||||
|
||||
### removeAllClasses
|
||||
|
||||
Suppression de toutes les classes des éléments sélectionnés
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_("p","div#main").removeAllClasses("myClass");
|
||||
```
|
||||
|
||||
Returns **this** Chainage
|
||||
|
||||
### 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][57]** Nom de la classe à remplacer
|
||||
* `newClass` **[String][57]** Nom de la classe de remplacement
|
||||
* `oldClass` **[String][69]** Nom de la classe à remplacer
|
||||
* `newClass` **[String][69]** Nom de la classe de remplacement
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_("p","div#main").replaceClass("myOldClass", "myNewClass");
|
||||
$_("p","div#main").replaceClass("my_old_class", "my_new_class");
|
||||
```
|
||||
|
||||
Returns **this** Chainage
|
||||
@@ -146,13 +188,13 @@ Définit un attribut et sa valeur
|
||||
|
||||
#### Parameters
|
||||
|
||||
* `attr` **[String][57]** Nom de l'attribut
|
||||
* `value` **[String][57]** Valeur de l'attribut
|
||||
* `attr` **[String][69]** Nom de l'attribut
|
||||
* `value` **[String][69]** Valeur de l'attribut
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_("input.class").setAttr("readonly", "");
|
||||
$_("input.my_class").setAttr("readonly", "");
|
||||
```
|
||||
|
||||
Returns **this** Chainage
|
||||
@@ -163,12 +205,12 @@ Supprime un attribut dans les éléments sélectionnés
|
||||
|
||||
#### Parameters
|
||||
|
||||
* `attr` **[String][57]** Nom de l'attribut à supprimer
|
||||
* `attr` **[String][69]** Nom de l'attribut à supprimer
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_(input.class).delAttr("readonly");
|
||||
$_(input.my_class).delAttr("readonly");
|
||||
```
|
||||
|
||||
Returns **this** Chainage
|
||||
@@ -180,116 +222,116 @@ Ajoute l'attribut hidden aux éléments sélectionnés
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
$_("span.class").setHidden();
|
||||
$_("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.class").setReadOnly();
|
||||
$_("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.class").setDisabled();
|
||||
$_("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.class").delHidden();
|
||||
$_("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.class").delReadOnly();
|
||||
$_("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.class").delDisabled();
|
||||
$_("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.class").toggleHidden();
|
||||
$_("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.class").toggleReadOnly();
|
||||
$_("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.class").toggleDisabled();
|
||||
$_("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][57]** Nom de l'événement
|
||||
* `callback` **[Function][59]** Gestionnaire de l'événement
|
||||
* `useCapture` **[Boolean][60]** 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
|
||||
|
||||
@@ -305,8 +347,8 @@ Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
|
||||
|
||||
#### Parameters
|
||||
|
||||
* `callback` **[Function][59]** Gestionnaire de l'événement
|
||||
* `useCapture` **[Boolean][60]** Propagation de l'événement
|
||||
* `callback` **[evtCallback][72]** Gestionnaire de l'événement
|
||||
* `useCapture` **[Boolean][73]** Propagation de l'événement
|
||||
|
||||
#### Examples
|
||||
|
||||
@@ -326,55 +368,129 @@ Retourne si un élément a été trouvé
|
||||
let found = $_("#main").found();
|
||||
```
|
||||
|
||||
Returns **[Boolean][60]** `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
|
||||
|
||||
Retourne le premier élément 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();
|
||||
let htmlElement = $_("p.paragraphe").first(true);
|
||||
```
|
||||
|
||||
Returns **[HTMLElement][58]** l'élément du DOM trouvé
|
||||
```javascript
|
||||
$_("input.my_class").first().setDisabled();
|
||||
```
|
||||
|
||||
Returns **[HTMLElement][70]** l'élément du DOM trouvé
|
||||
|
||||
### last
|
||||
|
||||
Retourne le dernier élément 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").last();
|
||||
let htmlElement = $_("p.paragraphe").last(true);
|
||||
```
|
||||
|
||||
Returns **[HTMLElement][58]** L'élément du DOM trouvé
|
||||
```javascript
|
||||
$_("input.my_class").last().setDisabled();
|
||||
```
|
||||
|
||||
## gsd
|
||||
Returns **([GSDom][74] | [HTMLElement][70])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
|
||||
|
||||
Instantiation d'un nouveau constructeur
|
||||
### 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][57]** Sélecteur utilisé
|
||||
* `root`
|
||||
* `scope` **[HTMLElement][58]** Racine de la recherche
|
||||
* `element` **[HTMLElement][70]** L'élément du DOM concerné
|
||||
* `index` **[number][76]** 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][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
|
||||
|
||||
@@ -398,98 +514,134 @@ Version de la librairie
|
||||
|
||||
[12]: #examples-3
|
||||
|
||||
[13]: #replaceclass
|
||||
[13]: #removeallclasses
|
||||
|
||||
[14]: #parameters-4
|
||||
[14]: #examples-4
|
||||
|
||||
[15]: #examples-4
|
||||
[15]: #replaceclass
|
||||
|
||||
[16]: #setattr
|
||||
[16]: #parameters-4
|
||||
|
||||
[17]: #parameters-5
|
||||
[17]: #examples-5
|
||||
|
||||
[18]: #examples-5
|
||||
[18]: #setattr
|
||||
|
||||
[19]: #delattr
|
||||
[19]: #parameters-5
|
||||
|
||||
[20]: #parameters-6
|
||||
[20]: #examples-6
|
||||
|
||||
[21]: #examples-6
|
||||
[21]: #delattr
|
||||
|
||||
[22]: #sethidden
|
||||
[22]: #parameters-6
|
||||
|
||||
[23]: #examples-7
|
||||
|
||||
[24]: #setreadonly
|
||||
[24]: #sethidden
|
||||
|
||||
[25]: #examples-8
|
||||
|
||||
[26]: #setdisabled
|
||||
[26]: #setreadonly
|
||||
|
||||
[27]: #examples-9
|
||||
|
||||
[28]: #delhidden
|
||||
[28]: #setdisabled
|
||||
|
||||
[29]: #examples-10
|
||||
|
||||
[30]: #delreadonly
|
||||
[30]: #delhidden
|
||||
|
||||
[31]: #examples-11
|
||||
|
||||
[32]: #deldisabled
|
||||
[32]: #delreadonly
|
||||
|
||||
[33]: #examples-12
|
||||
|
||||
[34]: #togglehidden
|
||||
[34]: #deldisabled
|
||||
|
||||
[35]: #examples-13
|
||||
|
||||
[36]: #togglereadonly
|
||||
[36]: #togglehidden
|
||||
|
||||
[37]: #examples-14
|
||||
|
||||
[38]: #toggledisabled
|
||||
[38]: #togglereadonly
|
||||
|
||||
[39]: #examples-15
|
||||
|
||||
[40]: #on
|
||||
[40]: #toggledisabled
|
||||
|
||||
[41]: #parameters-7
|
||||
[41]: #examples-16
|
||||
|
||||
[42]: #examples-16
|
||||
[42]: #on
|
||||
|
||||
[43]: #onclick
|
||||
[43]: #parameters-7
|
||||
|
||||
[44]: #parameters-8
|
||||
[44]: #examples-17
|
||||
|
||||
[45]: #examples-17
|
||||
[45]: #onclick
|
||||
|
||||
[46]: #found
|
||||
[46]: #parameters-8
|
||||
|
||||
[47]: #examples-18
|
||||
|
||||
[48]: #first
|
||||
[48]: #found
|
||||
|
||||
[49]: #examples-19
|
||||
|
||||
[50]: #last
|
||||
[50]: #first
|
||||
|
||||
[51]: #examples-20
|
||||
[51]: #parameters-9
|
||||
|
||||
[52]: #gsd
|
||||
[52]: #examples-20
|
||||
|
||||
[53]: #parameters-9
|
||||
[53]: #last
|
||||
|
||||
[54]: #version
|
||||
[54]: #parameters-10
|
||||
|
||||
[55]: #gsd-1
|
||||
[55]: #examples-21
|
||||
|
||||
[56]: #version-1
|
||||
[56]: #items
|
||||
|
||||
[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
|
||||
[57]: #examples-22
|
||||
|
||||
[58]: https://developer.mozilla.org/docs/Web/HTML/Element
|
||||
[58]: #count
|
||||
|
||||
[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
|
||||
[59]: #examples-23
|
||||
|
||||
[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
|
||||
[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
|
||||
|
||||
2
dist/gsdom.min.js
vendored
2
dist/gsdom.min.js
vendored
@@ -1 +1 @@
|
||||
window.$_=(()=>{"use strict";let t=function(t,e){if(t)if("document"===t)this.elems=[document];else if("window"===t)this.elems=[window];else{let i=e||document;this.elems=i.querySelectorAll(t)}};t.prototype.each=function(t){if(t&&"function"==typeof t)return this.elems.forEach(((e,i)=>{t(e,i)})),this},t.prototype.addClass=function(t){return this.each((e=>{e.classList.add(t)})),this},t.prototype.removeClass=function(t){return this.each((e=>{e.classList.remove(t)})),this},t.prototype.replaceClass=function(t,e){return this.each((i=>{i.classList.replace(t,e)})),this},t.prototype.setAttr=function(t,e){return this.each((i=>{i.setAttribute(t,e)})),this},t.prototype.delAttr=function(t){return this.each((e=>{e.removeAttribute(t)})),this},t.prototype.setHidden=function(){return this.setAttr("hidden",""),this},t.prototype.setReadOnly=function(){return this.setAttr("readonly",""),this},t.prototype.setDisabled=function(){return this.setAttr("disabled",""),this},t.prototype.delHidden=function(){return this.delAttr("hidden"),this},t.prototype.delReadOnly=function(){return this.delAttr("readonly"),this},t.prototype.delDisabled=function(){return this.delAttr("disabled"),this},t.prototype.toggleHidden=function(){return this.each((t=>{t.hasAttribute("hidden")?t.removeAttribute("hidden"):t.setAttribute("hidden","")})),this},t.prototype.toggleReadOnly=function(){return this.each((t=>{t.hasAttribute("readonly")?t.removeAttribute("readonly"):t.setAttribute("readonly","")})),this},t.prototype.toggleDisabled=function(){return this.each((t=>{t.hasAttribute("disabled")?t.removeAttribute("disabled"):t.setAttribute("disabled","")})),this},t.prototype.on=function(t,e,i){return this.each((r=>{r.removeEventListener(t,e,i||!1),r.addEventListener(t,((t,i)=>{e(t,i)}),i||!1)})),this},t.prototype.onClick=function(t,e){return this.on("click",t,e||!1),this},t.prototype.found=function(){return this.elems.length>0},t.prototype.first=function(){return!!this.found()&&this.elems[0]},t.prototype.last=function(){return!!this.found()&&this.elems[this.elems.length-1]};let e=(e,i)=>new t(e,i);return e.version="GSD 1.1.1 by Séb",e})();
|
||||
window.$_=(()=>{"use strict";class e{constructor(e,t){if(this.shortversion="2.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)})();
|
||||
750
src/gsdom.js
750
src/gsdom.js
@@ -1,335 +1,447 @@
|
||||
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
|
||||
* # Tous les `a` class `link` contenu dans un `div` id `main`
|
||||
* $_("a.link", "div#main");
|
||||
*
|
||||
* @param {String} selector Sélecteur utilisé
|
||||
* @param {HTMLElement} scope Racine de la recherche
|
||||
*/
|
||||
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
|
||||
*
|
||||
* // Ajout d'une classe `my_class` à tous les `a`
|
||||
* $_("a").addClass("my_class");
|
||||
* @example
|
||||
* $_(".class").each((item, index) => {
|
||||
* // Do something with item et index
|
||||
* });
|
||||
*
|
||||
* @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
|
||||
*
|
||||
* // Ajout d'une classe `my_class` à tous les `a` enfants de `div#main`
|
||||
* $_("a", "div#main").addClass("my_class");
|
||||
* @example
|
||||
* $_("p","div#main").addClass("myClass");
|
||||
*
|
||||
* @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;
|
||||
};
|
||||
/**
|
||||
* Suppression d'une classe aux éléments sélectionnés
|
||||
*
|
||||
* // 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
|
||||
* $_("p","div#main").removeClass("myClass");
|
||||
* // 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} className Le nom de la classe à ajouter
|
||||
* @returns {this} Chainage
|
||||
* @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
|
||||
*/
|
||||
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
|
||||
*
|
||||
* @example
|
||||
* $_("p","div#main").replaceClass("myOldClass", "myNewClass");
|
||||
*
|
||||
* @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
|
||||
*
|
||||
* @example
|
||||
* $_("input.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) {
|
||||
this.each(item => {
|
||||
item.setAttribute(attr, value);
|
||||
});
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* Supprime un attribut dans les éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_(input.class).delAttr("readonly");
|
||||
*
|
||||
* @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
|
||||
*
|
||||
* @example $_("span.class").setHidden();
|
||||
*
|
||||
* @returns {this} Chainage
|
||||
*/
|
||||
Constructor.prototype.setHidden = function () {
|
||||
this.setAttr('hidden', '');
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* Ajoute l'attribut readonly aux éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("input.class").setReadOnly();
|
||||
*
|
||||
* @returns {this} Chainage
|
||||
*/
|
||||
Constructor.prototype.setReadOnly = function () {
|
||||
this.setAttr('readonly', '');
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* Ajoute l'attribut disabled aux éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("input.class").setDisabled();
|
||||
*
|
||||
* @returns {this} Chainage
|
||||
*/
|
||||
Constructor.prototype.setDisabled = function () {
|
||||
this.setAttr('disabled', '');
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* Supprime l'attribut hidden aux éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("span.class").delHidden();
|
||||
*
|
||||
* @returns {this} Chainage
|
||||
*/
|
||||
Constructor.prototype.delHidden = function () {
|
||||
this.delAttr('hidden');
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* Supprime l'attribut readonly aux éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("input.class").delReadOnly();
|
||||
*
|
||||
* @returns {this} Chainage
|
||||
*/
|
||||
Constructor.prototype.delReadOnly = function () {
|
||||
this.delAttr('readonly');
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* Supprime l'attribut disabled aux éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("input.class").delDisabled();
|
||||
*
|
||||
* @returns {this} Chainage
|
||||
*/
|
||||
Constructor.prototype.delDisabled = function () {
|
||||
this.delAttr('disabled');
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* switche l'attribut hidden des éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("span.class").toggleHidden();
|
||||
*
|
||||
* @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.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;
|
||||
}
|
||||
});
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* switche l'attribut readonly des éléments sélectionnés
|
||||
*
|
||||
* @example
|
||||
* $_("input.class").toggleReadOnly();
|
||||
*
|
||||
* @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
|
||||
*
|
||||
* @example
|
||||
* $_("input.class").toggleDisabled();
|
||||
*
|
||||
* @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|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|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é
|
||||
*
|
||||
* @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(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é
|
||||
*/
|
||||
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(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
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
return (selector, root) => {
|
||||
return new GSDom(selector, root);
|
||||
};
|
||||
/**
|
||||
* Ajout d'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 {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
|
||||
*
|
||||
* @example
|
||||
* $_("button#event").onClick( (evt, el) => {
|
||||
* // Do something with evt and el
|
||||
* }, false);
|
||||
*
|
||||
* @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é
|
||||
*
|
||||
* @example
|
||||
* let found = $_("#main").found();
|
||||
*
|
||||
* @returns {Boolean} `true` si un élément au moins du DOM trouvé. `false` sinon
|
||||
*/
|
||||
Constructor.prototype.found = function () {
|
||||
return this.elems.length > 0;
|
||||
};
|
||||
/**
|
||||
* Retourne le premier élément trouvé
|
||||
*
|
||||
* @example
|
||||
* let htmlElement = $_("p.paragraphe").first();
|
||||
*
|
||||
* @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é
|
||||
*
|
||||
* @example
|
||||
* let htmlElement = $_("p.paragraphe").last();
|
||||
*
|
||||
* @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
|
||||
*
|
||||
* @internal
|
||||
*
|
||||
* @param {String} selector Sélecteur utilisé
|
||||
* @param {HTMLElement} scope Racine de la recherche
|
||||
*/
|
||||
let gsd = (selector, root) => {
|
||||
return new Constructor(selector, root);
|
||||
};
|
||||
/**
|
||||
* Version de la librairie
|
||||
*/
|
||||
gsd.version = 'GSD 1.1.1 by Séb';
|
||||
/**
|
||||
* @return Retour de la librairie
|
||||
*/
|
||||
return gsd;
|
||||
})();
|
||||
101
test/index.html
Normal file
101
test/index.html
Normal file
@@ -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).removeAllClasses().addClass("blue");
|
||||
}, true);
|
||||
$_('a.rouge').onClick((evt, el) => {
|
||||
$_(el.parentElement).removeAllClasses().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").removeAllClasses().addClass("green");
|
||||
}, false);
|
||||
$_("a.lastpurple").onClick((evt, el) => {
|
||||
$_("p", "div#main").last().removeAllClasses().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) => {
|
||||
|
||||
// $_("input#shortVersion").first(true).value = $_().version();
|
||||
$_("input#shortVersion").first().setAttr("value", $_().version());
|
||||
$_("input#longVersion").first(true).value = $_().version(true);
|
||||
}, false);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user