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