clean JS, add comments
This commit is contained in:
parent
907d5e7379
commit
3d5eb43884
@ -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>
|
||||||
|
77
script.js
77
script.js
@ -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");
|
||||||
|
Loading…
x
Reference in New Issue
Block a user