add onclick to function on generated buttons : works
This commit is contained in:
parent
14cd793643
commit
211dc5640d
200
script.js
200
script.js
@ -10,51 +10,8 @@ const blockEnd = `
|
|||||||
let filmNumber = 10
|
let filmNumber = 10
|
||||||
let categoryMovieBlock = 6
|
let categoryMovieBlock = 6
|
||||||
|
|
||||||
async function getMovies(url, id, type) {
|
|
||||||
const filmList = [];
|
|
||||||
|
|
||||||
for (let j=1; j<3; j++) {
|
|
||||||
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
|
||||||
const film1 = await response.json();
|
|
||||||
for (i in film1.results) {
|
|
||||||
filmList.push(film1.results[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let blockToLook = document.getElementById(id);
|
|
||||||
blockToLook.innerHTML = "";
|
|
||||||
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
film = filmList[i];
|
|
||||||
let id = i+1
|
|
||||||
|
|
||||||
let movieBlock = `
|
|
||||||
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
|
||||||
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
|
||||||
</div>
|
|
||||||
<div class="overlay row">
|
|
||||||
<div class="col-12">
|
|
||||||
<h4 style="color: white">${film.title}</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex justify-content-end">
|
|
||||||
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
|
||||||
|
|
||||||
`;
|
|
||||||
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
|
||||||
const response2 = await fetch(`${url_title}${film.id}`);
|
|
||||||
const film2 = await response2.json();
|
|
||||||
let modal = getModalDetail(film2, film2.id);
|
|
||||||
|
|
||||||
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// tried to make some dynamic pagination browsing... nok
|
|
||||||
async function getCount(type) {
|
|
||||||
const response = await fetch(`http://localhost:8000/api/v1/${type}`);
|
|
||||||
const result = await response.json();
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get categories and create the options in select menu
|
// get categories and create the options in select menu
|
||||||
async function getCategory() {
|
async function getCategory() {
|
||||||
@ -209,7 +166,7 @@ function addSeeMore(id, display) {
|
|||||||
let blockToChange = document.getElementById(id)
|
let blockToChange = document.getElementById(id)
|
||||||
let blockToAdd = `
|
let blockToAdd = `
|
||||||
<div id="seeMore" class="row d-flex justify-content-center">
|
<div id="seeMore" class="row d-flex justify-content-center">
|
||||||
<button class="col-4 btn btn-danger rounded-4 ${display}" id="more" type="button" >Voir plus</button>
|
<button onclick="${id}More()" class="col-4 btn btn-danger rounded-4 ${display}" id="more" type="button" >Voir plus</button>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
blockToChange.innerHTML += blockToAdd
|
blockToChange.innerHTML += blockToAdd
|
||||||
@ -219,12 +176,15 @@ function addSeeLess(id, display) {
|
|||||||
let blockToChange = document.getElementById(id)
|
let blockToChange = document.getElementById(id)
|
||||||
let blockToAdd = `
|
let blockToAdd = `
|
||||||
<div id="seeLess" class="row d-flex justify-content-center">
|
<div id="seeLess" class="row d-flex justify-content-center">
|
||||||
<button class="col-4 btn btn-danger rounded-4 ${display}" id="less" type="button" >Voir moins</button>
|
<button onclick="${id}Less()" class="col-4 btn btn-danger rounded-4 ${display}" id="less" type="button" >Voir moins</button>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
blockToChange.innerHTML += blockToAdd;
|
blockToChange.innerHTML += blockToAdd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// add movie block quantity depending on screen size
|
// add movie block quantity depending on screen size
|
||||||
function generateMovies(movieProm, id) {
|
function generateMovies(movieProm, id) {
|
||||||
|
|
||||||
@ -256,29 +216,7 @@ function generateMoviesUnsized(movieProm, id) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function listenButton(blockId) {
|
|
||||||
let more = document.querySelector("#blockId button");
|
|
||||||
// when the button is clicked ; regenerate blocks and hide button
|
|
||||||
more.addEventListener("click", ()=> {
|
|
||||||
blockId.then((data) => {
|
|
||||||
createBlock(data, "blockId", 6);
|
|
||||||
addSeeMore("blockId", "d-none");
|
|
||||||
addSeeLess("blockId", "d-block");
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
let less = document.querySelector("#bockId button");
|
|
||||||
less.addEventListener("click", ()=> {
|
|
||||||
blockId.then((data) => {
|
|
||||||
generateMovies(blockId, "blockId");
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// when the screen changes, regenerate blocks
|
|
||||||
window.addEventListener("resize", ()=> {
|
|
||||||
generateMovies(bestRated, "bestRated")
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============ best film ============
|
// ============ best film ============
|
||||||
// Il Grande Lebowski
|
// Il Grande Lebowski
|
||||||
@ -291,30 +229,14 @@ let bestRated = getMovies3("?sort_by=-imdb_score");
|
|||||||
// create blocks depending on current screen's size
|
// create blocks depending on current screen's size
|
||||||
generateMovies(bestRated, "bestRated");
|
generateMovies(bestRated, "bestRated");
|
||||||
|
|
||||||
//retrieve the button when it exists (better than getElementById which could raise an error
|
|
||||||
let more = document.querySelector("#bestRated");
|
|
||||||
console.log(more)
|
|
||||||
// when the button is clicked ; regenerate blocks and hide button
|
|
||||||
more.addEventListener("click", ()=> {
|
|
||||||
bestRated.then((data) => {
|
|
||||||
createBlock(data, "bestRated", 6);
|
|
||||||
addSeeMore("bestRated", "d-none");
|
|
||||||
addSeeLess("bestRated", "d-block");
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let less = document.getElementById("bestRated");
|
|
||||||
|
|
||||||
less.addEventListener("click", ()=> {
|
|
||||||
bestRated.then((data) => {
|
|
||||||
createBlock(data, "bestRated", 6);
|
|
||||||
addSeeMore("bestRated", "d-none");
|
|
||||||
addSeeLess("bestRated", "d-block");
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// when the screen changes, regenerate blocks
|
// when the screen changes, regenerate blocks
|
||||||
window.addEventListener("resize", ()=> {
|
window.addEventListener("resize", ()=> {
|
||||||
generateMovies(bestRated, "bestRated")
|
generateMovies(bestRated, "bestRated");
|
||||||
|
generateMovies(mystery, "mystery");
|
||||||
|
generateMovies(other, "other");
|
||||||
|
|
||||||
})
|
})
|
||||||
// ============ Mystery ============
|
// ============ Mystery ============
|
||||||
let mystery = getMovies3("?genre=mystery")
|
let mystery = getMovies3("?genre=mystery")
|
||||||
@ -335,91 +257,35 @@ selectedItem.addEventListener("change", ()=> {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function bestRatedMore() {
|
||||||
|
bestRated.then((data) => {
|
||||||
|
createBlock(data, "bestRated", 6);
|
||||||
|
addSeeMore("bestRated", "d-none");
|
||||||
|
addSeeLess("bestRated", "d-block");
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function createBlock2(filmList, id, count) {
|
|
||||||
let blockToLook = document.getElementById(id);
|
|
||||||
blockToLook.innerHTML = "";
|
|
||||||
let display = "d-block"
|
|
||||||
|
|
||||||
for (let i = 0; i < count; i++) {
|
|
||||||
film = filmList[i];
|
|
||||||
let id = i+1
|
|
||||||
|
|
||||||
if (i === 0 || i === 1 ) {
|
|
||||||
display = "d-block"
|
|
||||||
}
|
}
|
||||||
if (i === 2 || i === 3) {
|
function bestRatedLess() {
|
||||||
display = "d-none d-md-block"
|
generateMovies(bestRated, "bestRated")
|
||||||
}
|
|
||||||
if (i === 4 || i === 5) {
|
|
||||||
display = "d-none d-lg-block"
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let movieBlock = `
|
function mysteryMore() {
|
||||||
<div class="col-12 col-md-6 col-lg-4 pb-5 ${display}" id="${i}">
|
mystery.then((data) => {
|
||||||
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
createBlock(data, "mystery", 6);
|
||||||
</div>
|
addSeeMore("mystery", "d-none");
|
||||||
<div class="overlay row">
|
addSeeLess("mystery", "d-block");
|
||||||
<div class="col-12">
|
})
|
||||||
<h4 style="color: white">${film.title}</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex justify-content-end">
|
|
||||||
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
|
||||||
|
|
||||||
`;
|
|
||||||
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
|
||||||
let modal = getModalDetail(film, film.id);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
|
||||||
}
|
}
|
||||||
|
function mysteryLess() {
|
||||||
|
generateMovies(mystery, "mystery")
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getMovies2(url, id) {
|
function otherMore() {
|
||||||
const filmList = [];
|
other.then((data) => {
|
||||||
//let countMovies = 6;
|
createBlock(data, "other", 6);
|
||||||
|
addSeeMore("other", "d-none");
|
||||||
for (let j=1; j<3; j++) {
|
addSeeLess("other", "d-block");
|
||||||
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
})
|
||||||
const film1 = await response.json();
|
|
||||||
for (i in film1.results) {
|
|
||||||
filmList.push(film1.results[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let blockToLook = document.getElementById(id);
|
|
||||||
blockToLook.innerHTML = "";
|
|
||||||
|
|
||||||
for (let i = 0; i < count; i++) {
|
|
||||||
film = filmList[i];
|
|
||||||
let movieBlock = `
|
|
||||||
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
|
||||||
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
|
||||||
</div>
|
|
||||||
<div class="overlay row">
|
|
||||||
<div class="col-12">
|
|
||||||
<h4 style="color: white">${film.title}</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col d-flex justify-content-end">
|
|
||||||
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
|
||||||
|
|
||||||
`;
|
|
||||||
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
|
||||||
const response2 = await fetch(`${url_title}${film.id}`);
|
|
||||||
const film2 = await response2.json();
|
|
||||||
let modal = getModalDetail(film2, film2.id);
|
|
||||||
|
|
||||||
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
|
||||||
}
|
}
|
||||||
|
function otherLess() {
|
||||||
|
generateMovies(other, "other")
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user