window.$_ = (() => { 'use strict'; /** * Création du constructeur * * @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 * * @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 * * @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 * * @example * $_("p","div#main").removeClass("myClass"); * * @param {String} className Le nom de la classe à ajouter * @returns {this} Chainage */ 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', ''); } }); 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'); } else { item.setAttribute('readonly', ''); } }); 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', ''); } }); return this; }; /** * 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; })();