clean JS, add comments

This commit is contained in:
yann 2025-03-10 12:05:12 +01:00
parent 907d5e7379
commit 3d5eb43884
2 changed files with 44 additions and 38 deletions

View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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://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"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
@ -29,7 +30,8 @@
} }
.full-w { .full-w {
width: 100%; width: 100%;
padding-top: 50%; height: 3rem;
background-image;
} }
</style> </style>
</head> </head>
@ -90,7 +92,6 @@
</div> </div>
</section> </section>
<script src="script.js" defer></script> <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://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/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

View File

@ -1,24 +1,6 @@
const url_title = "http://localhost:8000/api/v1/titles/"; const url_title = "http://localhost:8000/api/v1/titles/";
const url_genre = "http://localhost:8000/api/v1/genres/"; const url_genre = "http://localhost:8000/api/v1/genres/";
// 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 // create the best film block and get a movie from a given ID
async function bestFilm(filmId) { async function bestFilm(filmId) {
@ -30,7 +12,7 @@ async function bestFilm(filmId) {
let detail = ` let detail = `
<div class="row"> <div class="row">
<div class="col d-flex justify-content-center my-2" > <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"> <img class="img-fluid" src="${bfilm.image_url}" alt="film cover">
</div> </div>
<div class="col-sm-12 col-md-9 my-3"> <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 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
@ -41,14 +23,13 @@ async function bestFilm(filmId) {
</div> </div>
</div> </div>
`; `;
//document.getElementById("bestFilm").innerHTML += detail+modal;
blockToLook.innerHTML += detail; blockToLook.innerHTML += detail;
getModalDetail(bfilm, bfilm.id, blockToLook); getModalDetail(bfilm, bfilm.id, blockToLook);
} }
async function getModalDetail(filmData, modalId, blockToLook) {
// call the movie URL, retrieve data and create modal block, then insert it in HTML directly
// avoid to manage a promise object in createBlock()
async function getModalDetail(filmData, modalId, blockToLook) {
const response = await fetch(`${filmData.url}`); const response = await fetch(`${filmData.url}`);
const film = await response.json(); const film = await response.json();
@ -61,6 +42,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
if (film.genre) { if (film.genre) {
genre = film.genre; genre = film.genre;
} }
let modalContent = ` let modalContent = `
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true"> <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
@ -112,12 +94,12 @@ async function getModalDetail(filmData, modalId, blockToLook) {
</div> </div>
` `
blockToLook.innerHTML += modalContent blockToLook.innerHTML += modalContent
//return modalContent;
} }
// get MovieList, returns a promise // get a list of movies from a first general call based on query string;
// -> returns a promise
async function getMovies3(url) { async function getMovies3(url) {
const filmList = []; const filmList = [];
for (let j=1; j<3; j++) { for (let j=1; j<3; j++) {
@ -131,7 +113,9 @@ async function getMovies3(url) {
} }
// get a movie List and create HTML blocks // create HTML blocks from a movie list
// Called by generateMovies (using screen size) and the button "more" to create 6 blocks
// (they've already handled the promise)
function createBlock(filmList, id, count) { function createBlock(filmList, id, count) {
// get the element to change // get the element to change
let blockToLook = document.getElementById(id); let blockToLook = document.getElementById(id);
@ -161,6 +145,26 @@ function createBlock(filmList, id, count) {
} }
} }
// 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;
}
}
// ==================== buttons
// add button with requested display // add button with requested display
function addSeeMore(id, display) { function addSeeMore(id, display) {
let blockToChange = document.getElementById(id) let blockToChange = document.getElementById(id)
@ -181,8 +185,10 @@ function addSeeLess(id, display) {
` `
blockToChange.innerHTML += blockToAdd; blockToChange.innerHTML += blockToAdd;
} }
//==================== end buttons
// functions called by buttons : // ==================== functions called by buttons
//for each container... could be improved (factorized)
function bestRatedMore() { function bestRatedMore() {
bestRated.then((data) => { bestRated.then((data) => {
createBlock(data, "bestRated", 6); createBlock(data, "bestRated", 6);
@ -216,26 +222,24 @@ function otherMore() {
function otherLess() { function otherLess() {
generateMovies(other, "other") generateMovies(other, "other")
} }
// end of functions called by buttons // ==================== end of functions called by buttons
// add movie block quantity depending on screen size // responsive management
// generate the movies block depending on screen size
function generateMovies(movieProm, id) { function generateMovies(movieProm, id) {
if (screen.width < 768 ) { if (screen.width < 768 ) {
movieProm.then((data) => { movieProm.then((data) => {
createBlock(data, id, 2); createBlock(data, id, 2);
addSeeMore(id, "d-block"); addSeeMore(id, "d-block");
}) })
} }
if (screen.width === 768 || screen.width > 768 && screen.width < 992) { if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
movieProm.then((data) => { movieProm.then((data) => {
createBlock(data, id, 4); createBlock(data, id, 4);
addSeeMore(id, "d-block"); addSeeMore(id, "d-block");
}) })
} }
if (screen.width > 992) { if (screen.width > 992) {
movieProm.then((data) => { movieProm.then((data) => {
createBlock(data, id, 6); createBlock(data, id, 6);
@ -244,8 +248,7 @@ function generateMovies(movieProm, id) {
} }
} }
// main
// ============ best film ============ // ============ best film ============
// Il Grande Lebowski // Il Grande Lebowski
@ -259,7 +262,6 @@ let mystery = getMovies3("?genre=mystery")
let other = getMovies3("?genre=action"); let other = getMovies3("?genre=action");
// ============ Best Rated ============ // ============ Best Rated ============
// create blocks depending on current screen's size
generateMovies(bestRated, "bestRated"); generateMovies(bestRated, "bestRated");
// ============ Mystery ============ // ============ Mystery ============
@ -270,14 +272,17 @@ generateMovies(mystery, "mystery")
getCategory(); getCategory();
generateMovies(other, "other"); generateMovies(other, "other");
// Make it dynamic, step 8
// listen for any change in menu // listen for any change in menu
let selectedItem = document.getElementById("category-select"); let selectedItem = document.getElementById("category-select");
selectedItem.addEventListener("change", ()=> { selectedItem.addEventListener("change", ()=> {
// getMovies(`?genre=${selectedItem.value}`, "other");
let block = getMovies3(`?genre=${selectedItem.value}`); let block = getMovies3(`?genre=${selectedItem.value}`);
generateMovies(block, "other"); generateMovies(block, "other");
}); });
// Make it dynamic, step 7
// responsive management
// when the screen changes, regenerate blocks for all // when the screen changes, regenerate blocks for all
window.addEventListener("resize", ()=> { window.addEventListener("resize", ()=> {
generateMovies(bestRated, "bestRated"); generateMovies(bestRated, "bestRated");