diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index 93202bc..0d8aa50 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -19,29 +19,45 @@ - [Examples][15] - [setAttr][16] - [Parameters][17] - - [delAttr][18] - - [Parameters][19] - - [setHidden][20] - - [setReadOnly][21] - - [setDisabled][22] - - [delHidden][23] - - [delReadOnly][24] - - [delDisabled][25] - - [toggleHidden][26] - - [toggleReadOnly][27] - - [toggleDisabled][28] - - [on][29] - - [Parameters][30] - - [onClick][31] - - [Parameters][32] - - [found][33] - - [first][34] - - [last][35] -- [gsd][36] - - [Parameters][37] - - [version][38] -- [gsd][39] - - [version][40] + - [Examples][18] + - [delAttr][19] + - [Parameters][20] + - [Examples][21] + - [setHidden][22] + - [Examples][23] + - [setReadOnly][24] + - [Examples][25] + - [setDisabled][26] + - [Examples][27] + - [delHidden][28] + - [Examples][29] + - [delReadOnly][30] + - [Examples][31] + - [delDisabled][32] + - [Examples][33] + - [toggleHidden][34] + - [Examples][35] + - [toggleReadOnly][36] + - [Examples][37] + - [toggleDisabled][38] + - [Examples][39] + - [on][40] + - [Parameters][41] + - [Examples][42] + - [onClick][43] + - [Parameters][44] + - [Examples][45] + - [found][46] + - [Examples][47] + - [first][48] + - [Examples][49] + - [last][50] + - [Examples][51] +- [gsd][52] + - [Parameters][53] + - [version][54] +- [gsd][55] + - [version][56] ## Constructor @@ -49,8 +65,8 @@ Création du constructeur ### Parameters -- `selector` **[String][41]** Sélecteur utilisé -- `scope` **[HTMLElement][42]** Racine de la recherche +- `selector` **[String][57]** Sélecteur utilisé +- `scope` **[HTMLElement][58]** Racine de la recherche ### Examples @@ -65,7 +81,7 @@ Application d'une fonction sur chacun des éléments #### Parameters -- `callback` **[Function][43]** La fonction de rappel +- `callback` **[Function][59]** La fonction de rappel #### Examples @@ -81,7 +97,7 @@ Ajout d'une classe aux éléments sélectionnés #### Parameters -- `className` **[String][41]** Le nom de la classe à ajouter +- `className` **[String][57]** Le nom de la classe à ajouter #### Examples @@ -97,7 +113,7 @@ Suppression d'une classe aux éléments sélectionnés #### Parameters -- `className` **[String][41]** Le nom de la classe à ajouter +- `className` **[String][57]** Le nom de la classe à ajouter #### Examples @@ -113,8 +129,8 @@ Remplace une classe par une autre dans les éléments sélectionnés #### Parameters -- `oldClass` **[String][41]** Nom de la classe à remplacer -- `newClass` **[String][41]** Nom de la classe de remplacement +- `oldClass` **[String][57]** Nom de la classe à remplacer +- `newClass` **[String][57]** Nom de la classe de remplacement #### Examples @@ -130,8 +146,14 @@ Définit un attribut et sa valeur #### Parameters -- `attr` **[String][41]** Nom de l'attribut -- `value` **[String][41]** Valeur de l'attribut +- `attr` **[String][57]** Nom de l'attribut +- `value` **[String][57]** Valeur de l'attribut + +#### Examples + +```javascript +$_("input.class").setAttr("readonly", ""); +``` Returns **this** Chainage @@ -141,7 +163,13 @@ Supprime un attribut dans les éléments sélectionnés #### Parameters -- `attr` **[String][41]** Nom de l'attribut à supprimer +- `attr` **[String][57]** Nom de l'attribut à supprimer + +#### Examples + +```javascript +$_(input.class).delAttr("readonly"); +``` Returns **this** Chainage @@ -149,54 +177,108 @@ Returns **this** Chainage Ajoute l'attribut hidden aux éléments sélectionnés +#### Examples + +```javascript +$_("span.class").setHidden(); +``` + Returns **this** Chainage ### setReadOnly Ajoute l'attribut readonly aux éléments sélectionnés +#### Examples + +```javascript +$_("input.class").setReadOnly(); +``` + Returns **this** Chainage ### setDisabled Ajoute l'attribut disabled aux éléments sélectionnés +#### Examples + +```javascript +$_("input.class").setDisabled(); +``` + Returns **this** Chainage ### delHidden Supprime l'attribut hidden aux éléments sélectionnés +#### Examples + +```javascript +$_("span.class").delHidden(); +``` + Returns **this** Chainage ### delReadOnly Supprime l'attribut readonly aux éléments sélectionnés +#### Examples + +```javascript +$_("input.class").delReadOnly(); +``` + Returns **this** Chainage ### delDisabled Supprime l'attribut disabled aux éléments sélectionnés +#### Examples + +```javascript +$_("input.class").delDisabled(); +``` + Returns **this** Chainage ### toggleHidden switche l'attribut hidden des éléments sélectionnés +#### Examples + +```javascript +$_("span.class").toggleHidden(); +``` + Returns **this** Chainage ### toggleReadOnly switche l'attribut readonly des éléments sélectionnés +#### Examples + +```javascript +$_("input.class").toggleReadOnly(); +``` + Returns **this** Chainage ### toggleDisabled switche l'attribut disabled des éléments sélectionnés +#### Examples + +```javascript +$_("input.class").toggleDisabled(); +``` + Returns **this** Chainage ### on @@ -205,9 +287,17 @@ Ajout d'un gestionnaire d'événement aux éléments sélectionnés #### Parameters -- `type` **[String][41]** Nom de l'événement -- `callback` **[Function][43]** Gestionnaire de l'événement -- `useCapture` **[Boolean][44]** Propagation de l'événement +- `type` **[String][57]** Nom de l'événement +- `callback` **[Function][59]** Gestionnaire de l'événement +- `useCapture` **[Boolean][60]** Propagation de l'événement + +#### Examples + +```javascript +$_("button#event").on("mouseover", (evt, el) => { + // Do something with evt and el +}, false); +``` ### onClick @@ -215,26 +305,52 @@ Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés #### Parameters -- `callback` **[Function][43]** Gestionnaire de l'événement -- `useCapture` **[Boolean][44]** Propagation de l'événement +- `callback` **[Function][59]** Gestionnaire de l'événement +- `useCapture` **[Boolean][60]** Propagation de l'événement + +#### Examples + +```javascript +$_("button#event").onClick( (evt, el) => { + // Do something with evt and el +}, false); +``` ### found Retourne si un élément a été trouvé -Returns **[Boolean][44]** l'élément du DOM trouvé +#### Examples + +```javascript +let found = $_("#main").found(); +``` + +Returns **[Boolean][60]** l'élément du DOM trouvé ### first Retourne le premier élément trouvé -Returns **[HTMLElement][42]** l'élément du DOM trouvé +#### Examples + +```javascript +let htmlElement = $_("p.paragraphe").first(); +``` + +Returns **[HTMLElement][58]** l'élément du DOM trouvé ### last Retourne le dernier élément trouvé -Returns **[HTMLElement][42]** L'élément du DOM trouvé +#### Examples + +```javascript +let htmlElement = $_("p.paragraphe").last(); +``` + +Returns **[HTMLElement][58]** L'élément du DOM trouvé ## gsd @@ -242,9 +358,9 @@ Instantiation d'un nouveau constructeur ### Parameters -- `selector` **[String][41]** Sélecteur utilisé +- `selector` **[String][57]** Sélecteur utilisé - `root` -- `scope` **[HTMLElement][42]** Racine de la recherche +- `scope` **[HTMLElement][58]** Racine de la recherche ### version @@ -292,56 +408,88 @@ Version de la librairie [17]: #parameters-5 -[18]: #delattr +[18]: #examples-5 -[19]: #parameters-6 +[19]: #delattr -[20]: #sethidden +[20]: #parameters-6 -[21]: #setreadonly +[21]: #examples-6 -[22]: #setdisabled +[22]: #sethidden -[23]: #delhidden +[23]: #examples-7 -[24]: #delreadonly +[24]: #setreadonly -[25]: #deldisabled +[25]: #examples-8 -[26]: #togglehidden +[26]: #setdisabled -[27]: #togglereadonly +[27]: #examples-9 -[28]: #toggledisabled +[28]: #delhidden -[29]: #on +[29]: #examples-10 -[30]: #parameters-7 +[30]: #delreadonly -[31]: #onclick +[31]: #examples-11 -[32]: #parameters-8 +[32]: #deldisabled -[33]: #found +[33]: #examples-12 -[34]: #first +[34]: #togglehidden -[35]: #last +[35]: #examples-13 -[36]: #gsd +[36]: #togglereadonly -[37]: #parameters-9 +[37]: #examples-14 -[38]: #version +[38]: #toggledisabled -[39]: #gsd-1 +[39]: #examples-15 -[40]: #version-1 +[40]: #on -[41]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[41]: #parameters-7 -[42]: https://developer.mozilla.org/docs/Web/HTML/Element +[42]: #examples-16 -[43]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function +[43]: #onclick -[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[44]: #parameters-8 + +[45]: #examples-17 + +[46]: #found + +[47]: #examples-18 + +[48]: #first + +[49]: #examples-19 + +[50]: #last + +[51]: #examples-20 + +[52]: #gsd + +[53]: #parameters-9 + +[54]: #version + +[55]: #gsd-1 + +[56]: #version-1 + +[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String + +[58]: https://developer.mozilla.org/docs/Web/HTML/Element + +[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function + +[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/README.md b/README.md index 8f30a9c..30645cf 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,27 @@ GSDom - Bibliothèque Javascript =============================== +GSDom est une petite bibliothèque javascript permettant d'effectuer des manipulations de base sur le DOM d'une page HTML. + +GSDOM est compatible Emac2005 (ES6) et ne nécessite aucune bibliothèque externe. + +GSDom permet de se passer de bibliothèques lourdes telles que jQuery pour les manipulations basiques + Installation ------------ +Pour utiliser GSDom, il suffit de copier le fichier dist/gsdom.min.js dans l'arborescence de son projet et de l'intégrer dans sa page web de manière classique +```html + +``` + Documentation ------------- -La documentation est générée automatiquement -[Documentation](DOCUMENTATION.md) \ No newline at end of file +La [documentation](DOCUMENTATION.md) est générée automatiquement par le script de build diff --git a/build_gsdom.sh b/build_gsdom.sh index b66c05b..9d4d5bc 100755 --- a/build_gsdom.sh +++ b/build_gsdom.sh @@ -1 +1,2 @@ -terser --ecma=2015 --comments /^!/ --compress --mangle --output dist/gsdom.min.js -- src/gsdom.js \ No newline at end of file +terser --ecma=2015 --comments /^!/ --compress --mangle --output dist/gsdom.min.js -- src/gsdom.js +documentation build src/GSDom.js -f md > DOCUMENTATION.md diff --git a/src/gsdom.js b/src/gsdom.js index edceefa..c5e8db4 100644 --- a/src/gsdom.js +++ b/src/gsdom.js @@ -90,6 +90,10 @@ window.$_ = (() => { }; /** * 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 @@ -102,6 +106,10 @@ window.$_ = (() => { }; /** * 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 */ @@ -113,6 +121,9 @@ window.$_ = (() => { }; /** * Ajoute l'attribut hidden aux éléments sélectionnés + * + * @example $_("span.class").setHidden(); + * * @returns {this} Chainage */ Constructor.prototype.setHidden = function () { @@ -121,6 +132,10 @@ window.$_ = (() => { }; /** * Ajoute l'attribut readonly aux éléments sélectionnés + * + * @example + * $_("input.class").setReadOnly(); + * * @returns {this} Chainage */ Constructor.prototype.setReadOnly = function () { @@ -129,6 +144,10 @@ window.$_ = (() => { }; /** * Ajoute l'attribut disabled aux éléments sélectionnés + * + * @example + * $_("input.class").setDisabled(); + * * @returns {this} Chainage */ Constructor.prototype.setDisabled = function () { @@ -137,6 +156,10 @@ window.$_ = (() => { }; /** * Supprime l'attribut hidden aux éléments sélectionnés + * + * @example + * $_("span.class").delHidden(); + * * @returns {this} Chainage */ Constructor.prototype.delHidden = function () { @@ -145,6 +168,10 @@ window.$_ = (() => { }; /** * Supprime l'attribut readonly aux éléments sélectionnés + * + * @example + * $_("input.class").delReadOnly(); + * * @returns {this} Chainage */ Constructor.prototype.delReadOnly = function () { @@ -153,6 +180,10 @@ window.$_ = (() => { }; /** * Supprime l'attribut disabled aux éléments sélectionnés + * + * @example + * $_("input.class").delDisabled(); + * * @returns {this} Chainage */ Constructor.prototype.delDisabled = function () { @@ -161,6 +192,10 @@ window.$_ = (() => { }; /** * switche l'attribut hidden des éléments sélectionnés + * + * @example + * $_("span.class").toggleHidden(); + * * @returns {this} Chainage */ Constructor.prototype.toggleHidden = function () { @@ -175,6 +210,10 @@ window.$_ = (() => { }; /** * switche l'attribut readonly des éléments sélectionnés + * + * @example + * $_("input.class").toggleReadOnly(); + * * @returns {this} Chainage */ Constructor.prototype.toggleReadOnly = function () { @@ -189,6 +228,10 @@ window.$_ = (() => { }; /** * switche l'attribut disabled des éléments sélectionnés + * + * @example + * $_("input.class").toggleDisabled(); + * * @returns {this} Chainage */ Constructor.prototype.toggleDisabled = function () { @@ -203,6 +246,12 @@ window.$_ = (() => { }; /** * 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 @@ -218,6 +267,12 @@ window.$_ = (() => { }; /** * 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 */ @@ -227,6 +282,10 @@ window.$_ = (() => { }; /** * Retourne si un élément a été trouvé + * + * @example + * let found = $_("#main").found(); + * * @returns {Boolean} l'élément du DOM trouvé */ Constructor.prototype.found = function () { @@ -234,6 +293,10 @@ window.$_ = (() => { }; /** * Retourne le premier élément trouvé + * + * @example + * let htmlElement = $_("p.paragraphe").first(); + * * @returns {HTMLElement} l'élément du DOM trouvé */ Constructor.prototype.first = function () { @@ -241,6 +304,10 @@ window.$_ = (() => { }; /** * Retourne le dernier élément trouvé + * + * @example + * let htmlElement = $_("p.paragraphe").last(); + * * @returns {HTMLElement} L'élément du DOM trouvé */ Constructor.prototype.last = function () { @@ -248,6 +315,9 @@ window.$_ = (() => { }; /** * Instantiation d'un nouveau constructeur + * + * @internal + * * @param {String} selector Sélecteur utilisé * @param {HTMLElement} scope Racine de la recherche */