isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Externalisation des boutons de pagination

Browse Source
This commit is contained in:
William Noris 2021-10-19 16:47:46 +02:00
parent b32e65c82b
commit 5ab2c33e27
2 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
scripts/planets.js
View File

@ -1,4 +1,4 @@
import { api_call, API_URL, getPage } from "./util"; import { api_call, API_URL, createPagination } from "./util";
const planetes = document.getElementById("resultats"); const planetes = document.getElementById("resultats");
@ -49,43 +49,7 @@ function remplissage(results) {
} }
//Pagination //Pagination
console.log("Url précédente : " + previousUrl); createPagination(previousUrl, nextUrl, planetes, remplissage);
console.group("Url suivante : " + nextUrl);
const currentPage = (previousUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(previousUrl)) + 1);
console.log("Page courante : " + currentPage);
let firstPage = false;
let lastPage = false;
if (previousUrl == null) firstPage = true;
if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
planetes.innerHTML += previousButton;
planetes.innerHTML += currentButton;
planetes.innerHTML += nextButton;
if(firstPage){
document.getElementById("prevButton").hidden = true;
}
else{
document.getElementById("prevButton").hidden = false;
}
if(lastPage){
document.getElementById("nextButton").hidden = true;
}
else{
document.getElementById("nextButton").hidden = false;
}
document.getElementById("prevButton").addEventListener("click", () => {
api_call(previousUrl, remplissage);
});
document.getElementById("nextButton").addEventListener("click", () => {
api_call(nextUrl, remplissage);
});
} }
api_call(API_URL + "/planets", remplissage); api_call(API_URL + "/planets", remplissage);

48
scripts/util.js
View File

@ -26,7 +26,7 @@ export const api_call = (url, callback) => {
* @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple) * @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple)
* @returns Le numéro de la page de l'url * @returns Le numéro de la page de l'url
*/ */
export const getPage = (url) => { const getPage = (url) => {
tabUrl = url.split('/'); tabUrl = url.split('/');
pageEgal = tabUrl[tabUrl.length - 1]; pageEgal = tabUrl[tabUrl.length - 1];
tabPageEgal = pageEgal.split('='); tabPageEgal = pageEgal.split('=');
@ -34,3 +34,49 @@ export const getPage = (url) => {
return numeroPage; return numeroPage;
} }
/**
* Ajoutes des boutons de pagination à un élément
* @param {string} prevUrl l'url de la page précédente
* @param {string} nextUrl l'url de la page suivante
* @param {object} elementParent L'objet parent dans lequel ajouter les boutons
*/
export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
console.log("Url précédente : " + prevUrl);
console.group("Url suivante : " + nextUrl);
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
console.log("Page courante : " + currentPage);
let firstPage = false;
let lastPage = false;
if (prevUrl == null) firstPage = true;
if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
elementParent.innerHTML += previousButton;
elementParent.innerHTML += currentButton;
elementParent.innerHTML += nextButton;
if(firstPage){
document.getElementById("prevButton").hidden = true;
}
else{
document.getElementById("prevButton").hidden = false;
}
if(lastPage){
document.getElementById("nextButton").hidden = true;
}
else{
document.getElementById("nextButton").hidden = false;
}
document.getElementById("prevButton").addEventListener("click", () => {
api_call(prevUrl, remplissage);
});
document.getElementById("nextButton").addEventListener("click", () => {
api_call(nextUrl, remplissage);
});
}