Bonjour à tous,
Ceci est mon premier billet de blog personnel. Aujourd'hui, je vais vous parler de quelque chose d'assez exceptionnel que Wikia nous offre, c'est la programmation de nos wikias. Cette personnalisation m'a fait découvrir encore plus le mode de la programmation virtuelle. En effet, sur les wikias, il y a deux languages de programmations que vous pouvez utiliser : le CSS (Feuilles de styles) et le Javascript (dynamisme) offert avec son compagnon, jQuery qui en est une librairie. Dans ce billet, je vais plus vous parler du jQuery, même si il y aura un peu de Javascript car Javascript est nécessaire pour utiliser jQuery. J'essayerai ainsi de vous offrir le résultat final de la manière la plus optimisée possible.
La syntaxe du jQuery[]
Le jQuery étant un language de dynamisme, on va donc interagir sur les objets de la page courante par une syntaxe assez classique qu'on retrouvera souvent :
$(selecteur).(action);
Ainsi, si vous voulez utiliser et manier les élements, il vous faut le sélecteur, soit leur classe ou leur id.
- Comment trouver les classes ou/et les id ?
Pour les trouver, nous allons utiliser la console du navigateur. Dès que vous trouvez l’élément que vous cherchez, faites un click-droit dessus et « Examiner l’élément ».
On obtient donc ce code :
<div class="button" id="more-data">Plus d'informations</div>
Ainsi, on obtient la classe et l'id de l'objet. Si on ne veut agir que sur lui seul, le mieux est d'utiliser l'id. Notre sélecteur s'appelle donc more-data.
- Changement du texte du bouton
Pour changer le texte du bouton, on va récupérer la syntaxe habituelle et changer le sélecteur et l'action tel que :
$('more-data').text('Salut à tous !');
more-data, c'est l'id du bouton, cela indique de quel bouton on parle..text('Salut à tous !'), c'est le code qui nous permet de changer le texte d'un bouton.' ', ils servent à signaler que ce n'est pas une variable mais bien une valeur; ici, l'id du sélecteur voulu.
Oui, mais un problème persiste...
Ainsi, on obtient donc la classe et l'id de l'objet.
- Comment jQuery différencie une classe d'un id ?
C'est une excellente question, cette différence se jouera au niveau du sélecteur. Si on parle d'une classe, il faut précéder le sélecteur d'un point '.' et si on parle d'un id, d'un dièse '#'. Ainsi, comme on parle de l'id du bouton, pour changer son texte, on utilisera le code :
$('#more-data').text('Salut à tous !');
Voici le résultat :
Création d'un code : Supprimer toutes les pages d'une catégorie[]
Avant de démarrer le code, nous allons écrire le code en language brut, c'est-à-dire en français, je l'ai fait sous la forme d'une organigramme donc voici comment nous allons procéder pour notre code :
Voici donc notre organigramme. Comme vous pouvez le contaster, on va appeler l'API pour deux requêtes différentes, une suppression et une demande de contenu. Pour mieux faire tout cela, afin de vous faciliter ces requêtes, nous allons utiliser APICall, un script que j'ai crée.
Nous allons commencer le code, en apportant le bouton, demander à l'utilisateur une catégorie au clic et tester si il en a rentré une ou pas.
importScriptPage('APICall/code.js', 'dev'); // Importer le script APICall essentiel au bon déroulement du script
$('#my-tools-menu').prepend('<li class="custom"><a style="cursor:pointer" id="deletecategorypages">Supprimer les pages d\'une catégorie</a></li>'); // Ajout du bouton dans « Mes outils » dans la barre inférieur de l'écran
$('#deletecategorypages').click(function () { // Au clic du bouton (on utilise l'id qu'on lui attribué plus haut
var category = prompt('Catégorie :'); // Demander à l'utilisateur de rentrer une valeur pour « Catégorie : » et la mettre dans la variable category
if (category && category !== '') { // Si la variable est définie, non nulle, et non vide
// Continuer le code ici
} // Fin de la condition
}); // Fin de la fonction « au clic »
Très bien, on est sur la bonne voie. Maintenant, il va falloir faire la requête vers l'API de Wikia. Pour cela, nous allons utiliser une fonction intégrée dans le script que j'ai cité plus haut qui nous retournera toutes les pages dans un tableau. Cette fonction s'appelle
apipagesincategory(le nom de la categorie ici)
Ainsi, pour récupérer ce tableau des pages de la catégorie souhaitée, il faudra écrire
var pages = apipagesincategory(category);
Et le tour est joué ! Voici le code avec cette ajout :
importScriptPage('APICall/code.js', 'dev'); // Importer le script APICall essentiel au bon déroulement du script
$('#my-tools-menu').prepend('<li class="custom"><a style="cursor:pointer" id="deletecategorypages">Supprimer les pages d\'une catégorie</a></li>'); // Ajout du bouton dans « Mes outils » dans la barre inférieur de l'écran
$('#deletecategorypages').click(function () { // Au clic du bouton (on utilise l'id qu'on lui attribué plus haut
var category = prompt('Catégorie :'); // Demander à l'utilisateur de rentrer une valeur pour « Catégorie : » et la mettre dans la variable category
if (category && category !== '') { // Si la variable est définie, non nulle, et non vide
var pages = apipagesincategory(category);
if (console) {console.log(pages);} // Je vous affiche le tableau dans votre console du navigateur si elle existe
} // Fin de la condition
}); // Fin de la fonction « au clic »
Très bien, maintenant, nous devons vérifier que ce tableau contient des pages, car on ne va pas supprimer rien. Donc, pour vérifier cela, nous allons vérifier que sa longueur est supérieur à 0 en faisant :
if (pages.length > 0) {
Et voilà, on aura donc ici dans cette seconde condition la certitude que la tableau contient au moins une page. Maintenant, passons à la suppression des pages via l'API encore une fois et une fonction est encore à notre disposition pour cela :
apideletepage(la page, la raison, onSuccess, onFail);
onSuccess et onFail sont des fonctions exécutées en cas d'échec ou de réussite de la suppression, nous les utiliserons pour le savoir.
Cependant, il y a un problème, le nom de la page doit être un « string », c'est-à-dire un texte et non un tableau ! Il va donc falloir transformer notre tableau en textes. Pour cela, on va faire une boucle qui tournera x fois et qui enregistrera la valeur enregistrée à 0,1,2... du tableau. Voici comment on va s'y prendre :
for (i=0;i < pages.length;i++) { // Pour i allant de 0 à la longueur du tableau, i est croissant
alert(pages[i]); // Afficher la valeur enregistrée à la valeur i du tableau
}
// Ainsi, si dans votre tableau, vous avez "Page1,Page2,Page3", vous recevrez trois alertes avec respectivement "Page1", "Page2" et "Page3". Et vous pourrez ainsi maintenant supprimer ces trois pages.
Cependant, on ne veut pas les montrer mais les supprimer via la fonction donc, voici ce qu'on va faire.
for (i=0;i < pages.length;i++) { // Pour i allant de 0 à la longueur du tableau, i est croissant
apideletepage(pages[i], 'Suppression des pages de la catégorie', function () { console.log('Page : ' + pages[i] + ' supprimée')}, function (message) {alert('La page : ' + pages[i] + ' a rencontré une erreur lors de sa suppression : ' + message)}); // Afficher la valeur enregistrée à la valeur i du tableau
}
alert('Toutes les pages ont été supprimés');
Donc, si on recolle tout notre code, voici ce que ça donne :
importScriptPage('APICall/code.js', 'dev'); // Importer le script APICall essentiel au bon déroulement du script
$('#my-tools-menu').prepend('<li class="custom"><a style="cursor:pointer" id="deletecategorypages">Supprimer les pages d\'une catégorie</a></li>'); // Ajout du bouton dans « Mes outils » dans la barre inférieur de l'écran
$('#deletecategorypages').click(function () { // Au clic du bouton (on utilise l'id qu'on lui attribué plus haut
var category = prompt('Catégorie :'); // Demander à l'utilisateur de rentrer une valeur pour « Catégorie : » et la mettre dans la variable category
if (category && category !== '') { // Si la variable est définie, non nulle, et non vide
var pages = apipagesincategory(category);
if (console) {console.log(pages);} // Je vous affiche le tableau dans votre console du navigateur si elle existe
if (pages.length > 0) {
for (i=0;i < pages.length;i++) { // Pour i allant de 0 à la longueur du tableau, i est croissant
apideletepage(pages[i], 'Suppression des pages de la catégorie', function () { console.log('Page : ' + pages[i] + ' supprimée')}, function (message) {alert('La page : ' + pages[i] + ' a rencontré une erreur lords de sa suppression : ' + message)}); // Afficher la valeur enregistrée à la valeur i du tableau
}
alert('Toutes les pages ont été supprimés');
}
} // Fin de la condition
}); // Fin de la fonction « au clic »
Et voilà, notre code est terminé et permet de supprimer toutes les pages d'une catégorie. Comme je l'ai dit plus haut, le bouton se situera dans la barre inférieure de votre écran, dans le menu déroulant de "Mes outils".
J’espère que ce blog vous aura plus et qu'il vous aura permis de mieux comprendre l'interface dynamique qu'offre JavaScript et sa librairie jQuery.