Sebastien/GSDom
1
1
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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

Browse Source 
Reviewed-on: #2
This commit is contained in:
Sébastien G.
2022-01-05 21:21:29 +01:00
parent 7cb8d50e7d 92866574ea
commit 1a1e980902
4 changed files with 668 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
DOCUMENTATION.md
View File

@@ -2,7 +2,7 @@
### Table of Contents
* [Constructor][1]
* [GSDom][1]
* [Parameters][2]
* [Examples][3]
* [each][4]
@@ -14,79 +14,100 @@
* [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]
* [eachCallback][56]
* [Parameters][57]
* [evtCallback][58]
* [Parameters][59]
## Constructor
## GSDom
Création du constructeur
La classe GSDom est une classe écrite en pur Javascript qui permet de simplifier la manipulation du DOM.
### Parameters
* `selector` **[String][57]** Sélecteur utilisé
* `scope` **[HTMLElement][58]** Racine de la recherche
* `selector` **([String][60] | [HTMLElement][61])** Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
* `scope` **([String][60] | [HTMLElement][61])** Sélecteur utilisé (le 1er élément trouvé est utilisé) ou un élément du DOM (optional, default `document`)
### Examples
```javascript
# Tous les `a` class `link` contenu dans un `div` id `main`
$_("a.link", "div#main");
// Ajout d'une classe `my_class` à tous lel `a`
$_("a").addClass("my_class");
```
```javascript
// Ajout d'une classe `my_class` à tous les `a` enfants de `div#main`
$_("a", "div#main").addClass("my_class");
```
```javascript
// Ajout d'une classe `my_class` à tous les `a` enfants de l'élément `my_scope` du DOM
let my_scope = document.querySelector("div#main");
$_("a", my_scope).addClass("my_class");
```
```javascript
// Instanciation de GSDom avec un élément du DOM et ajout d'une classe `my_class` à cet élément
let element = document.querySelector("p#intro");
$_(element).addClass("my_class");
```
### each
Application d'une fonction sur chacun des éléments
Parcours de tous les éléments sélectionnés
#### Parameters
* `callback` **[Function][59]** La fonction de rappel
* `callback` **[eachCallback][62]** 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 +118,12 @@ Ajout d'une classe aux éléments sélectionnés
#### Parameters
* `className` **[String][57]** Le nom de la classe à ajouter
* `className` **[String][60]** Le nom de la classe à ajouter
#### Examples
```javascript
$_("p","div#main").addClass("myClass");
$_("p","div#main").addClass("my_class");
```
Returns **this** Chainage
@@ -113,29 +134,41 @@ Suppression d'une classe aux éléments sélectionnés
#### Parameters
* `className` **[String][57]** Le nom de la classe à ajouter
* `className` **[String][60]** 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][60]** Nom de la classe à remplacer
* `newClass` **[String][60]** 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 +179,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][60]** Nom de l'attribut
* `value` **[String][60]** Valeur de l'attribut
#### Examples
```javascript
$_("input.class").setAttr("readonly", "");
$_("input.my_class").setAttr("readonly", "");
```
Returns **this** Chainage
@@ -163,12 +196,12 @@ Supprime un attribut dans les éléments sélectionnés
#### Parameters
* `attr` **[String][57]** Nom de l'attribut à supprimer
* `attr` **[String][60]** Nom de l'attribut à supprimer
#### Examples
```javascript
$_(input.class).delAttr("readonly");
$_(input.my_class).delAttr("readonly");
```
Returns **this** Chainage
@@ -180,116 +213,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][60]** Nom de l'événement
* `callback` **[evtCallback][63]** Gestionnaire de l'événement
* `useCapture` **[Boolean][64]** Propagation de l'événement
#### Examples
@@ -305,8 +338,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][63]** Gestionnaire de l'événement
* `useCapture` **[Boolean][64]** Propagation de l'événement
#### Examples
@@ -326,55 +359,68 @@ 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][64]** `true` si un élément au moins du DOM trouvé. `false` sinon
### first
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`)
#### Examples
```javascript
let htmlElement = $_("p.paragraphe").first();
```
Returns **[HTMLElement][58]** l'élément du DOM trouvé
Returns **[HTMLElement][61]** l'élément du DOM trouvé
### last
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`)
#### Examples
```javascript
let htmlElement = $_("p.paragraphe").last();
```
Returns **[HTMLElement][58]** L'élément du DOM trouvé
Returns **([GSDom][65] | [HTMLElement][61])** L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
## gsd
## eachCallback
Instantiation d'un nouveau constructeur
* **See**: [#each][4]
Fonction de rappel la méthode each()
Type: [Function][66]
### Parameters
* `selector` **[String][57]** Sélecteur utilisé
* `root`
* `scope` **[HTMLElement][58]** Racine de la recherche
* `element` **[HTMLElement][61]** L'élément du DOM concerné
* `index` **[number][67]** L'index de l'élément
### version
## evtCallback
Version de la librairie
* **See**: [#on][42]
* **See**: [#onclick][45]
## gsd
Fonction de rappel des méthodes on() et onClick()
Returns **any** Retour de la librairie
Type: [Function][66]
### version
### Parameters
Version de la librairie
* `evt` **[Event][68]** L'événement qui s'est produit
* `item` **[HTMLElement][61]** L'élément du DOM concerné par lévénement
[1]: #constructor
[1]: #gsdom
[2]: #parameters
@@ -398,98 +444,114 @@ 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]: #eachcallback
[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[57]: #parameters-11
[58]: https://developer.mozilla.org/docs/Web/HTML/Element
[58]: #evtcallback
[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[59]: #parameters-12
[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[61]: https://developer.mozilla.org/docs/Web/HTML/Element
[62]: #eachcallback
[63]: #evtcallback
[64]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[65]: #gsdom
[66]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[67]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[68]: https://developer.mozilla.org/docs/Web/API/Event

2
dist/gsdom.min.js vendored
View File

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

700
src/gsdom.js
View File

@@ -1,335 +1,397 @@
window.$_ = (() => {
'use strict';
/**
* Création du constructeur
* La classe GSDom est une classe écrite en pur Javascript qui permet de simplifier la manipulation du DOM.
*
* @class GSDom
*
* @example
* # 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 lel `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.0.0';
this.longversion = 'GSDom 2.0.0 by Séb';
if (!selector) {
// On ne va pas plus loin s'il n'y a pas de sélecteur
return;
}
});
return this;
};
/**
* switche l'attribut readonly des éléments sélectionnés
*
* @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}
* @param {HTMLElement} element L'élément du DOM concerné
* @param {number} index L'index de l'élément
*/
/**
* Ajout d'une classe aux éléments sélectionnés
*
* @example
* $_("p","div#main").addClass("my_class");
*
* @param {String} className Le nom de la classe à ajouter
* @returns {this} Chainage
*/
addClass(className) {
this.each(item => {
item.classList.add(className);
});
return this;
}
/**
* Suppression d'une classe aux éléments sélectionnés
*
* @example
* $_("p","div#main").removeClass("my_class");
*
* @param {String} className Le nom de la classe à ajouter
* @returns {this} Chainage
*/
removeClass(className) {
this.each(item => {
item.classList.remove(className);
});
return this;
}
/**
* Suppression de toutes les classes des éléments sélectionnés
*
* @example
* $_("p","div#main").removeAllClasses("myClass");
*
* @returns {this} Chainage
*/
removeAllClasses() {
this.each(item => {
item.className = "";
});
return this;
}
/**
* Remplace une classe par une autre parmi les éléments sélectionnés
*
* @example
* $_("p","div#main").replaceClass("my_old_class", "my_new_class");
*
* @param {String} oldClass Nom de la classe à remplacer
* @param {String} newClass Nom de la classe de remplacement
* @returns {this} Chainage
*/
replaceClass(oldClass, newClass) {
this.each(item => {
item.classList.replace(oldClass, newClass);
});
return this;
}
/**
* Définit un attribut et sa valeur
*
* @example
* $_("input.my_class").setAttr("readonly", "");
*
* @param {String} attr Nom de l'attribut
* @param {String} value Valeur de l'attribut
* @returns {this} Chainage
*/
setAttr(attr, value) {
this.each(item => {
item.setAttribute(attr, value);
});
return this;
}
/**
* Supprime un attribut dans les éléments sélectionnés
*
* @example
* $_(input.my_class).delAttr("readonly");
*
* @param {String} attr Nom de l'attribut à supprimer
* @returns {this} Chainage
*/
delAttr(attr) {
this.each(item => {
item.removeAttribute(attr);
});
return this;
}
/**
* Ajoute l'attribut hidden aux éléments sélectionnés
*
* @example $_("span.my_class").setHidden();
*
* @returns {this} Chainage
*/
setHidden() {
this.setAttr('hidden', '');
return this;
}
/**
* Ajoute l'attribut `readonly` aux éléments sélectionnés
*
* @example
* $_("input.my_class").setReadOnly();
*
* @returns {this} Chainage
*/
setReadOnly() {
this.setAttr('readonly', '');
return this;
}
/**
* Ajoute l'attribut `disabled` aux éléments sélectionnés
*
* @example
* $_("input.my_class").setDisabled();
*
* @returns {this} Chainage
*/
setDisabled() {
this.setAttr('disabled', '');
return this;
}
/**
* Supprime l'attribut `hidden` aux éléments sélectionnés
*
* @example
* $_("span.my_class").delHidden();
*
* @returns {this} Chainage
*/
delHidden() {
this.delAttr('hidden');
return this;
}
/**
* Supprime l'attribut `readonly` aux éléments sélectionnés
*
* @example
* $_("input.my_class").delReadOnly();
*
* @returns {this} Chainage
*/
delReadOnly() {
this.delAttr('readonly');
return this;
}
/**
* Supprime l'attribut `disabled` aux éléments sélectionnés
*
* @example
* $_("input.my_class").delDisabled();
*
* @returns {this} Chainage
*/
delDisabled() {
this.delAttr('disabled');
return this;
}
/**
* switche l'attribut `hidden` des éléments sélectionnés
*
* @example
* $_("span.my_class").toggleHidden();
*
* @returns {this} Chainage
*/
toggleHidden() {
this.each(item => {
if (item.hasAttribute('hidden')) {
item.removeAttribute('hidden');
} else {
item.setAttribute('hidden', '');
}
});
return this;
}
/**
* switche l'attribut `readonly` des éléments sélectionnés
*
* @example
* $_("input.my_class").toggleReadOnly();
*
* @returns {this} Chainage
*/
toggleReadOnly() {
this.each(item => {
if (item.hasAttribute('readonly')) {
item.removeAttribute('readonly');
} else {
item.setAttribute('readonly', '');
}
});
return this;
}
/**
* switche l'attribut `disabled` des éléments sélectionnés
*
* @example
* $_("input.my_class").toggleDisabled();
*
* @returns {this} Chainage
*/
toggleDisabled() {
this.each(item => {
if (item.hasAttribute('disabled')) {
item.removeAttribute('disabled');
} else {
item.setAttribute('disabled', '');
}
});
return this;
}
/**
* Ajoute un gestionnaire d'événement aux éléments sélectionnés
*
* @example
* $_("button#event").on("mouseover", (evt, el) => {
* // Do something with evt and el
* }, false);
*
* @param {String} type Nom de l'événement
* @param {evtCallback} callback Gestionnaire de l'événement
* @param {Boolean} useCapture Propagation de l'événement
*/
on(type, callback, useCapture) {
this.each(item => {
item.removeEventListener(type, callback, useCapture || false);
item.addEventListener(type, evt => {
callback(evt, item);
}, useCapture || false);
});
return this;
}
/**
* Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés
*
* @example
* $_("button#event").onClick( (evt, el) => {
* // Do something with evt and el
* }, false);
*
* @param {evtCallback} callback Gestionnaire de l'événement
* @param {Boolean} useCapture Propagation de l'événement
*/
onClick(callback, useCapture) {
this.on('click', callback, useCapture || false);
return this;
}
/**
* Fonction de rappel des méthodes on() et onClick()
* @callback evtCallback
* @see {@link #on}
* @see {@link #onclick}
* @param {Event} evt L'événement qui s'est produit
* @param {HTMLElement} item L'élément du DOM concerné par lévénement
*/
/**
* Retourne si un élément a été trouvé
*
* @example
* let found = $_("#main").found();
*
* @returns {Boolean} `true` si un élément au moins du DOM trouvé. `false` sinon
*/
found() {
return this.elems.length > 0;
}
/**
* Retourne le premier élément trouvé
*
* @example
* let htmlElement = $_("p.paragraphe").first();
*
* @param {Boolean} [isHTMLElement=false] `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom
* @returns {HTMLElement} l'élément du DOM trouvé
*/
first(isHTMLElement) {
return this.found() ? (isHTMLElement === true ? this.elems[0] : new GSDom(this.elems[0])) : false;
}
/**
* Retourne le dernier élément trouvé
*
* @example
* let htmlElement = $_("p.paragraphe").last();
*
* @param {Boolean} [isHTMLElement=false] `true` pour obtenir un élément du DOM, `false` pour un Objet GSDom
* @returns {(GSDom|HTMLElement)} L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage
*/
last(isHTMLElement) {
return this.found() ? (isHTMLElement === true ? this.elems[this.elems.length - 1] : new GSDom(this.elems[this.elems.length - 1])) : false;
}
version(long) {
return long === true ? this.longversion : this.shortversion;
}
}
return (selector, root) => {
return new GSDom(selector, root);
};
/**
* Ajout d'un gestionnaire d'événement aux éléments sélectionnés
*
* @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;
})();

93
test/index.html Normal file
View File

@@ -0,0 +1,93 @@
<html>
<head>
<title>
Page de test de la bibliothèque GSDom
</title>
</head>
<body>
<h1>Page de test de la bibliothèque GSDom</h1>
<div id="main">
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
<p>n°<span class="number">#</span> : Première ligne de <span class="texte">texte</span> <a href="#" class="bleu">En
bleu</a> <a href="#" class="rouge">En rouge</a> <a href="#" class="swap">Swappe bleu/rouge</a></p>
</div>
<a href="#" class="allgreen">Toutes les lignes en vert</a><br>
<a href="#" class="lastpurple">Dernière ligne en violet</a><br>
<a href="#" class="numerote">Numéroter les lignes</a><br>
<a href="#" class="bold">Texte en gras</a><br>
<div id="other">
<h3>2ème Div</h3>
<p>Un autre paragraphe</p>
</div>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.purple {
color: purple;
}
</style>
<script src="../src/gsdom.js"></script>
<script>
$_('a.bleu').onClick((evt, el) => {
$_(el.parentElement).removeAllClass().addClass("blue");
}, true);
$_('a.rouge').onClick((evt, el) => {
$_(el.parentElement).removeAllClass().addClass("red");
}, true);
$_('a.swap').onClick((evt, el) => {
if (el.parentElement.classList.contains("blue")) {
$_(el.parentElement).replaceClass("blue", "red");
} else if (el.parentElement.classList.contains("red")) {
$_(el.parentElement).replaceClass("red", "blue");
}
}, true);
$_("a.allgreen").onClick((evt, el) => {
$_("p", "div").removeAllClass().addClass("green");
}, false);
$_("a.lastpurple").onClick((evt, el) => {
$_("p", "div#main").last().removeAllClass().addClass("purple");
}, false);
$_("a.bold").onClick(
(evt, el) => {
$_("p span.texte", "div#main").each(
(item, index) => {
item.style.fontWeight = "bold";
}
);
}, false
);
$_("a.numerote").onClick(
(evt, el) => {
$_("p span.number", "div#main").each(
(item, index) => {
item.textContent = index + 1;
}
);
}, false
);
console.log($_("p").first(true));
</script>
</body>
</html>