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

placeholder made

Browse source
This commit is contained in:
Данил 2022-10-08 10:58:23 +03:00
parent cdca6b9619
commit 18a07f3902
2 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
web/static/image/placeholder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

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

@ -39,11 +39,6 @@ $(document).ready(function() {
}); });
}); });
const myModal = new bootstrap.Modal('#Wallpaper', {
keyboard: false
});
myModal.show();
function wallpaper(data) { function wallpaper(data) {
$(".preloader").hide(); $(".preloader").hide();
data = data.reverse(); data = data.reverse();
@ -51,32 +46,52 @@ function wallpaper(data) {
for (let i = 0; i < data.length; i++, id++) { for (let i = 0; i < data.length; i++, id++) {
ids.push(data[i]); ids.push(data[i]);
if (ids.filter((item) => item.url === data[i].url).length > 1) { if (ids.filter((item) => item['url'] === data[i]['url']).length > 1) {
continue; continue;
} }
let image = new Image();
image.src = ids[id]['media_type'] === "video" ?
`https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg` :
ids[id]['url'];
image.onload = function() {
if(image.width+image.height !== 210) {
$(`img[data-src="${image.src}"]`).attr("src", `${image.src}`);
}
}
if (ids[id]['media_type'] === "image") { 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="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" idi="${id}"> <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" id="${id}">
</a> </a>
</div> </div>
`); `);
} else { } else {
$(".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/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg" alt="${ids[id]['title']}" class="card-img-top" idi="${id}"> <img src="http://localhost:4662/static/image/placeholder.png"
</a> data-src="https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg"
</div> alt="${ids[id]['title']}"
`); class="card-img-top"
id="${id}">
</a>
</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"); if (event.target === button_modal) {
return;
}
let id = event.target.getAttribute("id");
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");
@ -87,6 +102,7 @@ function wallpaper(data) {
ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright']; ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
if (ids[id]['media_type'] === "image") { if (ids[id]['media_type'] === "image") {
title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
img.innerHTML = ` img.innerHTML = `
<img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img"> <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img">
<p><strong>Author:</strong> ${ids[id]['copyright']}</p> <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
@ -94,27 +110,32 @@ function wallpaper(data) {
<p><strong>Explanation:</strong> ${ids[id]['explanation']}</p> <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
`; `;
title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
wallpaperUpdate(ids[id]['hdurl']); wallpaperUpdate(ids[id]['hdurl']);
}); });
} else { } else {
title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
img.innerHTML = ` img.innerHTML = `
<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> <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> ${ids[id]['copyright']}</p> <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${ids[id]['date']}</p> <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
<p><strong>Explanation:</strong> ${ids[id]['explanation']}</p> <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
`; `;
title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg`); wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg`);
}); });
} }
}); });
$(window).scroll(function () { $(window).scroll(function () {
if (($(window).scrollTop() > $(document).height() - $(window).height() - 100)) { if (($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
$(".preloader").show(); $(".preloader").show();
$(window).off("scroll"); $(window).off("scroll");