Starlio/Starlio-web
1
0
Fork 0
mirror of https://github.com/Starlio-app/Starlio-web.git synced 2024-11-25 01:46:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

An endless loading of images has been made

Browse source
This commit is contained in:
Данил 2022-10-04 11:50:37 +03:00
parent 29eedade9a
commit cdca6b9619
1 changed files with 78 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
web/static/scripts/gallery.js
View file

@ -1,33 +1,39 @@
$(document).ready(function() { let prev_date = Number(new Date().toLocaleString().slice(0,2))-1;
let today = new Date(); let today = new Date();
let date = today.setDate(today.getDate() - 31); let endDate = new Date();
date = new Date(date);
let ids = [];
let id = 0;
const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et"; const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
today.setDate(today.getDate() - 17);
$(document).ready(function() {
$.ajax({ $.ajax({
url: "https://api.nasa.gov/planetary/apod", url: "https://api.nasa.gov/planetary/apod",
type: "GET", type: "GET",
data: { data: {
api_key: apiKEY, api_key: apiKEY,
start_date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`, start_date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
end_date: `${new Date().toLocaleString().slice(6, 10)}-${new Date().toLocaleString().slice(3, 5)}-${new Date().toLocaleString().slice(0, 2)}`, end_date: `${new Date().toLocaleString().slice(6, 10)}-${new Date().toLocaleString().slice(3, 5)}-${new Date().toLocaleString().slice(0, 2)}`,
}, },
success: function(data) { success: function(data) {
wallpaper(data); wallpaper(data);
}, },
error: function() { error: function() {
let prev_date = Number(new Date().toLocaleString().slice(0,2))-1;
$.ajax({ $.ajax({
url: "https://api.nasa.gov/planetary/apod", url: "https://api.nasa.gov/planetary/apod",
data: { data: {
api_key: apiKEY, api_key: apiKEY,
start_date: `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`, start_date: `${today.getFullYear()}-${today.getMonth()+1}-${today.getDate()}`,
end_date: `${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${prev_date}`, end_date: `${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${prev_date}`,
}, },
success: function (data) { success: function (data) {
wallpaper(data); wallpaper(data);
} },
error: function (data) {
console.error(data);
},
}); });
}, },
}); });
@ -42,12 +48,18 @@ function wallpaper(data) {
$(".preloader").hide(); $(".preloader").hide();
data = data.reverse(); data = data.reverse();
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++, id++) {
if (data[i]['media_type'] === "image") { ids.push(data[i]);
if (ids.filter((item) => item.url === data[i].url).length > 1) {
continue;
}
if (ids[id]['media_type'] === "image") {
$(".header-row").append(` $(".header-row").append(`
<div class="card"> <div class="card">
<a data-bs-toggle="modal" href="#WallpaperModal" role="button"> <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
<img src="${data[i].url}" alt="${data[i]['title']}" class="card-img-top" idi="${i + 1}"> <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" idi="${id}">
</a> </a>
</div> </div>
`); `);
@ -55,15 +67,16 @@ function wallpaper(data) {
$(".header-row").append(` $(".header-row").append(`
<div class="card"> <div class="card">
<a data-bs-toggle="modal" href="#WallpaperModal" role="button"> <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
<img src="https://img.youtube.com/vi/${data[i]['url'].slice(30,41)}/maxresdefault.jpg" alt="${data[i]['title']}" class="card-img-top" idi="${i+1}"> <img src="https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg" alt="${ids[id]['title']}" class="card-img-top" idi="${id}">
</a> </a>
</div> </div>
`); `);
} }
} }
let button_modal = document.querySelector(".header-row"); let button_modal = document.querySelector(".header-row");
button_modal.addEventListener("click", function (event) { button_modal.addEventListener("click", function (event) {
let id = event.target.getAttribute("idi") - 1; let id = event.target.getAttribute("idi");
let img = document.querySelector(".modal-body"); let img = document.querySelector(".modal-body");
let title = document.querySelector(".w-modal-title"); let title = document.querySelector(".w-modal-title");
@ -71,31 +84,56 @@ function wallpaper(data) {
button.innerHTML = `<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>`; button.innerHTML = `<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>`;
let setWallpaper = document.querySelector("#setWallpaper"); let setWallpaper = document.querySelector("#setWallpaper");
data[id]['copyright'] = data[id]['copyright'] === undefined ? "NASA" : data[id]['copyright']; ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
if (data[id]['media_type'] === "image") { if (ids[id]['media_type'] === "image") {
img.innerHTML = ` img.innerHTML = `
<img src="${data[id].url}" alt="${data[id]['title']}" class="card-img"> <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img">
<p><strong>Author:</strong> ${data[id]['copyright']}</p> <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${data[id]['date']}</p> <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
<p><strong>Explanation:</strong> ${data[id]['explanation']}</p> <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
`; `;
title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`; title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
wallpaperUpdate(data[id]['hdurl']); wallpaperUpdate(ids[id]['hdurl']);
}); });
} else { } else {
img.innerHTML = ` img.innerHTML = `
<iframe width="460" height="315" src="${data[id]['url']}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe> <iframe width="460" height="315" src="${ids[id]['url']}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<p><strong>Author:</strong> ${data[id]['copyright']}</p> <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${data[id]['date']}</p> <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
<p><strong>Explanation:</strong> ${data[id]['explanation']}</p> <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
`; `;
title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`; title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
wallpaperUpdate(`https://img.youtube.com/vi/${data[id]['url'].slice(30,41)}/maxresdefault.jpg`); wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg`);
});
}
});
$(window).scroll(function () {
if (($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
$(".preloader").show();
$(window).off("scroll");
today.setDate(today.getDate() - 1);
endDate.setDate(endDate.getDate() - 15);
endDate.setMonth(endDate.getMonth() - 1);
$.ajax({
url: "https://api.nasa.gov/planetary/apod",
data: {
api_key: apiKEY,
start_date: `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`,
end_date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
},
success: function (data) {
wallpaper(data);
$(window).on("scroll");
},
}); });
} }
}); });