diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index c18d71c..e52cd62 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -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 diff --git a/dist/gsdom.min.js b/dist/gsdom.min.js index 8dbb91d..cdd50e7 100644 --- a/dist/gsdom.min.js +++ b/dist/gsdom.min.js @@ -1 +1 @@ -window.$_=(()=>{"use strict";let t=function(t,e){if(t)if("document"===t)this.elems=[document];else if("window"===t)this.elems=[window];else{let i=e||document;this.elems=i.querySelectorAll(t)}};t.prototype.each=function(t){if(t&&"function"==typeof t)return this.elems.forEach(((e,i)=>{t(e,i)})),this},t.prototype.addClass=function(t){return this.each((e=>{e.classList.add(t)})),this},t.prototype.removeClass=function(t){return this.each((e=>{e.classList.remove(t)})),this},t.prototype.replaceClass=function(t,e){return this.each((i=>{i.classList.replace(t,e)})),this},t.prototype.setAttr=function(t,e){return this.each((i=>{i.setAttribute(t,e)})),this},t.prototype.delAttr=function(t){return this.each((e=>{e.removeAttribute(t)})),this},t.prototype.setHidden=function(){return this.setAttr("hidden",""),this},t.prototype.setReadOnly=function(){return this.setAttr("readonly",""),this},t.prototype.setDisabled=function(){return this.setAttr("disabled",""),this},t.prototype.delHidden=function(){return this.delAttr("hidden"),this},t.prototype.delReadOnly=function(){return this.delAttr("readonly"),this},t.prototype.delDisabled=function(){return this.delAttr("disabled"),this},t.prototype.toggleHidden=function(){return this.each((t=>{t.hasAttribute("hidden")?t.removeAttribute("hidden"):t.setAttribute("hidden","")})),this},t.prototype.toggleReadOnly=function(){return this.each((t=>{t.hasAttribute("readonly")?t.removeAttribute("readonly"):t.setAttribute("readonly","")})),this},t.prototype.toggleDisabled=function(){return this.each((t=>{t.hasAttribute("disabled")?t.removeAttribute("disabled"):t.setAttribute("disabled","")})),this},t.prototype.on=function(t,e,i){return this.each((r=>{r.removeEventListener(t,e,i||!1),r.addEventListener(t,((t,i)=>{e(t,i)}),i||!1)})),this},t.prototype.onClick=function(t,e){return this.on("click",t,e||!1),this},t.prototype.found=function(){return this.elems.length>0},t.prototype.first=function(){return!!this.found()&&this.elems[0]},t.prototype.last=function(){return!!this.found()&&this.elems[this.elems.length-1]};let e=(e,i)=>new t(e,i);return e.version="GSD 1.1.1 by Séb",e})(); \ No newline at end of file +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)})(); \ No newline at end of file diff --git a/src/gsdom.js b/src/gsdom.js index c09e8b2..95d4b31 100644 --- a/src/gsdom.js +++ b/src/gsdom.js @@ -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; })(); \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..6a0570e --- /dev/null +++ b/test/index.html @@ -0,0 +1,93 @@ + + + + + Page de test de la bibliothèque GSDom + + + + +

Page de test de la bibliothèque GSDom

+
+

n°# : Première ligne de texte En + bleu En rouge Swappe bleu/rouge

+

n°# : Première ligne de texte En + bleu En rouge Swappe bleu/rouge

+

n°# : Première ligne de texte En + bleu En rouge Swappe bleu/rouge

+

n°# : Première ligne de texte En + bleu En rouge Swappe bleu/rouge

+

n°# : Première ligne de texte En + bleu En rouge Swappe bleu/rouge

+
+ Toutes les lignes en vert
+ Dernière ligne en violet
+ Numéroter les lignes
+ Texte en gras
+ +
+

2ème Div

+ +

Un autre paragraphe

+
+ + + + + + \ No newline at end of file