see more/see less in js function; not working yet
This commit is contained in:
parent
f3fd9dc2e8
commit
0ff6a70ba4
224
index.html
224
index.html
@ -2,163 +2,95 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>JustStreamIt</title>
|
<title>JustStreamIt</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.square {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
background-color: lightgray;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rem;
|
||||||
|
height: 8rem;
|
||||||
|
width: 90%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-y: 1rem;
|
||||||
|
margin: 0.1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<center>
|
|
||||||
<header>
|
<header>
|
||||||
<img alt="logo" title="logo" src=None>
|
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
|
||||||
<h1 textalign=center> Vidéos à la demande </h1>
|
<div class="row">
|
||||||
|
<div class="col-md-2">
|
||||||
|
<img alt="logo" title="logo" src="logo.png" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<div class="col align-self-center d-none d-sm-block ms-5">
|
||||||
|
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class=best_film>
|
<!-- best film -->
|
||||||
<h2> Meilleur film </h2>
|
<section>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<h2> Meilleur film </h2></div>
|
||||||
|
<div class="container border border-black border-5 mt-1">
|
||||||
|
<div class="row" id="bestFilm" >
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- best note -->
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Films les mieux notés</h2>
|
||||||
|
<div class="row" id="bestRated">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class=category>
|
<section class="py-5">
|
||||||
<h2> film </h2>
|
<div class="container">
|
||||||
<img src=https://picsum.photos/seed/picsum/200/300 alt="film cover" >
|
<h2>Mystery</h2>
|
||||||
<p> Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus non pellentesque bibendum eu sapien litora neque tortor. Volutpat diam himenaeos risus vitae congue hendrerit elit. Porttitor semper leo pretium mattis bibendum consequat. Tincidunt tincidunt cursus eget aenean senectus pretium consectetur cubilia senectus. Rutrum ex fermentum consectetur parturient ornare. Quam amet maximus potenti ac in penatibus hendrerit lacus. Duis neque non at dictum ligula nullam amet orci. Consequat lectus consequat morbi dis suscipit ridiculus ultricies.
|
<div class="row" id="mystery">
|
||||||
</p>
|
<!-- square block model-->
|
||||||
<button>Details</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5">
|
||||||
<div class=categorie_mystery >
|
<div class="container">
|
||||||
<h2> Mystery </h2>
|
<div id="menu">
|
||||||
<div class=category>
|
<label for="category-select" class="fs-2">Autres : </label>
|
||||||
<ul>
|
|
||||||
<div>Film 1
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=category>
|
|
||||||
<h2> Category2 </h2>
|
|
||||||
<p>
|
|
||||||
<ul>
|
|
||||||
<div>Film 1
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class=category>
|
|
||||||
<h2> Category2 </h2>
|
|
||||||
<p>
|
|
||||||
<ul>
|
|
||||||
<div>Film 1
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=categorie_other>
|
|
||||||
<h2> Other </h2>
|
|
||||||
<div class=category>
|
|
||||||
<ul>
|
|
||||||
<div>Film 1
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class=category>
|
|
||||||
<h2> Category </h2>
|
|
||||||
|
|
||||||
<label for="category-select">Category</label>
|
|
||||||
|
|
||||||
<select name="category" id="category-select">
|
<select name="category" id="category-select">
|
||||||
<option value="Action">Action</option>
|
<option selected id="selected">Category</option>
|
||||||
<option value="Adult">Adult</option>
|
<!-- getCategory() to fill the options -->
|
||||||
<option value="Adventure">Adventure</option>
|
|
||||||
<option value="Animation">Animation</option>
|
|
||||||
<option value="Biography">Biography</option>
|
|
||||||
<option value="Comedy">Comedy</option>
|
|
||||||
<option value="Crime">Crime</option>
|
|
||||||
<option value="Documentary">Documentary</option>
|
|
||||||
<option value="Drama">Drama</option>
|
|
||||||
<option value="Family">Family</option>
|
|
||||||
<option value="Fantasy">Fantasy</option>
|
|
||||||
<option value="Film-Noir">Film-Noir</option>
|
|
||||||
<option value="History">History</option>
|
|
||||||
<option value="Horror">Horror</option>
|
|
||||||
<option value="Music">Music</option>
|
|
||||||
<option value="Musical">Musical</option>
|
|
||||||
<option value="Mystery">Mystery</option>
|
|
||||||
<option value="News">News</option>
|
|
||||||
<option value="Reality-TV">Reality-TV</option>
|
|
||||||
<option value="Romance">Romance</option>
|
|
||||||
<option value="Sci-Fi">Sci-Fi</option>
|
|
||||||
<option value="Sport">Sport</option>
|
|
||||||
<option value="Thriller">Thriller</option>
|
|
||||||
<option value="War">War</option>
|
|
||||||
<option value="Western">Western</option>
|
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
</center>
|
</div>
|
||||||
|
<div class="row" id="other">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="script.js" defer></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
421
script.js
Normal file
421
script.js
Normal file
@ -0,0 +1,421 @@
|
|||||||
|
const url_title = "http://localhost:8000/api/v1/titles/";
|
||||||
|
const url_genre = "http://localhost:8000/api/v1/genres/";
|
||||||
|
|
||||||
|
const blockEnd = `
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
let filmNumber = 10
|
||||||
|
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
|
||||||
|
async function getCategory() {
|
||||||
|
listeGenres = [];
|
||||||
|
for (let i = 1; i<6; i++) {
|
||||||
|
const response = await fetch(`${url_genre}?page=${i}`);
|
||||||
|
const genres = await response.json();
|
||||||
|
for (let j in genres.results) {
|
||||||
|
listeGenres.push(genres.results[j].name);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
let categorySelect = document.getElementById("category-select");
|
||||||
|
for (i in listeGenres) {
|
||||||
|
let option = `
|
||||||
|
<option value="${listeGenres[i]}">${listeGenres[i]}</option>
|
||||||
|
`;
|
||||||
|
categorySelect.innerHTML += option;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the best film block and get a movie from a given ID
|
||||||
|
async function bestFilm(filmId) {
|
||||||
|
const response = await fetch(`${url_title}${filmId}`);
|
||||||
|
const bfilm = await response.json();
|
||||||
|
|
||||||
|
let detail = `
|
||||||
|
<div class="row">
|
||||||
|
<div class="col d-flex justify-content-center my-2" >
|
||||||
|
<img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-block d-md-none" style="background-image: url(${bfilm.image_url}); background-size: cover"></div>
|
||||||
|
<div class="col-sm-12 col-md-9 my-3">
|
||||||
|
<div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
|
||||||
|
<div class="col-12">${bfilm.description}</div>
|
||||||
|
<div class="col-12 d-flex justify-content-end mt-auto">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
let modal = getModalDetail(bfilm, bfilm.id);
|
||||||
|
document.getElementById("bestFilm").innerHTML += detail+modal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the modal HTML block for a given film object
|
||||||
|
function getModalDetail(film, modalId) {
|
||||||
|
let recette = "N/A";
|
||||||
|
let genre = recette;
|
||||||
|
|
||||||
|
if (film.worldwide_gross_income) {
|
||||||
|
recette = film.worldwide_gross_income;
|
||||||
|
}
|
||||||
|
if (film.genre) {
|
||||||
|
genre = film.genre;
|
||||||
|
}
|
||||||
|
let modalContent = `
|
||||||
|
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="${modalId}">Détail du film</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- first part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12-auto col-lg-6 ">
|
||||||
|
<div class="p-2">
|
||||||
|
<div class="py-2 fw-bolder"><h1>${film.title}</h1></div>
|
||||||
|
<div class="fs-4">${film.year} - ${genre}</div>
|
||||||
|
<div class="fs-4">${film.duration} minutes (${film.countries})</div>
|
||||||
|
<div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
|
||||||
|
<div class="fs-4">Recettes au Box-Office : ${recette}</div>
|
||||||
|
<div class="py-3 fs-4">Realisé par:
|
||||||
|
<p class="fs-5">${film.directors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12-auto col-lg-6 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- second part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 order-md-1">
|
||||||
|
<div class="p-3 border bg-light">${film.long_description}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class=" my-3 d-lg-none" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-3 border order-md-3 bg-light mt-3">
|
||||||
|
<strong>Avec: </strong>
|
||||||
|
<p>${film.actors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4 d-none d-lg-block" data-dismiss="modal">Fermer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return modalContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get MovieList, returns a promise
|
||||||
|
async function getMovies3(url) {
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return filmList;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get a movie List and create HTML blocks
|
||||||
|
function createBlock(filmList, id, count) {
|
||||||
|
// get the element to change
|
||||||
|
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" id="${i}">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// add button with requested display
|
||||||
|
function addSeeMore(id, display) {
|
||||||
|
let blockToChange = document.getElementById(id)
|
||||||
|
let blockToAdd = `
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
blockToChange.innerHTML += blockToAdd
|
||||||
|
}
|
||||||
|
|
||||||
|
function addSeeLess(id, display) {
|
||||||
|
let blockToChange = document.getElementById(id)
|
||||||
|
let blockToAdd = `
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
blockToChange.innerHTML += blockToAdd;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add movie block quantity depending on screen size
|
||||||
|
function generateMovies(movieProm, id) {
|
||||||
|
|
||||||
|
if (screen.width < 768 ) {
|
||||||
|
movieProm.then((data) => {
|
||||||
|
createBlock(data, id, 2);
|
||||||
|
addSeeMore(id, "d-block");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
|
||||||
|
movieProm.then((data) => {
|
||||||
|
createBlock(data, id, 4);
|
||||||
|
addSeeMore(id, "d-block");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (screen.width > 992) {
|
||||||
|
movieProm.then((data) => {
|
||||||
|
createBlock(data, id, 6);
|
||||||
|
addSeeMore(id, "d-none");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateMoviesUnsized(movieProm, id) {
|
||||||
|
movieProm.then((data) => {
|
||||||
|
createBlock(data, id, 6);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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 ============
|
||||||
|
// Il Grande Lebowski
|
||||||
|
// bestFilm("118715")
|
||||||
|
bestFilm("101928");
|
||||||
|
|
||||||
|
// ============ Best Rated ============
|
||||||
|
//getMovies("?sort_by=-imdb_score", "bestRated");
|
||||||
|
let bestRated = getMovies3("?sort_by=-imdb_score");
|
||||||
|
// create blocks depending on current screen's size
|
||||||
|
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");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
less.addEventListener("click", ()=> {
|
||||||
|
bestRated.then((data) => {
|
||||||
|
createBlock(data, "bestRated", 6);
|
||||||
|
addSeeMore("bestRated", "d-none");
|
||||||
|
addSeeLess("bestRated", "d-block");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// when the screen changes, regenerate blocks
|
||||||
|
window.addEventListener("resize", ()=> {
|
||||||
|
generateMovies(bestRated, "bestRated")
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// fill the selection menu
|
||||||
|
getCategory();
|
||||||
|
|
||||||
|
// listen for any change in menu
|
||||||
|
let selectedItem = document.getElementById("category-select");
|
||||||
|
selectedItem.addEventListener("change", ()=> {
|
||||||
|
getMovies(`?genre=${selectedItem.value}`, "other");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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) {
|
||||||
|
display = "d-none d-md-block"
|
||||||
|
}
|
||||||
|
if (i === 4 || i === 5) {
|
||||||
|
display = "d-none d-lg-block"
|
||||||
|
}
|
||||||
|
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5 ${display}" id="${i}">
|
||||||
|
<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
|
||||||
|
let modal = getModalDetail(film, film.id);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getMovies2(url, id) {
|
||||||
|
const filmList = [];
|
||||||
|
//let countMovies = 6;
|
||||||
|
|
||||||
|
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 < 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user