mirror of
https://github.com/t404owo/t404null.git
synced 2025-12-12 18:08:47 +00:00
Made highlights to start dyamically
This commit is contained in:
Glitch (t404null-unstable)
@@ -18,24 +18,6 @@ const supabaseKey =
|
||||
//the moment you notice you need an API endpoint.
|
||||
const supabase = createClient(supabaseUrl, supabaseKey);
|
||||
|
||||
//prototype
|
||||
let img = [
|
||||
"https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
|
||||
"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
|
||||
"https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
|
||||
],
|
||||
pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"],
|
||||
title = [
|
||||
"This page is still under construction.",
|
||||
"Oblitus Requiem \\\\Against the Forsaken Legacy//",
|
||||
"A Lake With Endless Stars",
|
||||
],
|
||||
desc = [
|
||||
"The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
|
||||
'"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
|
||||
'"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
|
||||
];
|
||||
|
||||
if (!document) console.log("press f");
|
||||
if (!next) console.log("Class next missing.");
|
||||
if (!prev) console.log("Class prev missing.");
|
||||
@@ -45,10 +27,38 @@ if (!carousel) console.log("Class carousel missing.");
|
||||
let slider_index = 0;
|
||||
let touchstartX = 0;
|
||||
let touchendX = 0;
|
||||
let highlights = [],
|
||||
releases = [],
|
||||
activities = [],
|
||||
default_highlights = [
|
||||
{
|
||||
img_url:
|
||||
"https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
|
||||
url: "/",
|
||||
title: "This page is still under construction.",
|
||||
context:
|
||||
"The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
|
||||
},
|
||||
{
|
||||
img_url:
|
||||
"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
|
||||
url: "release/Oblitus_Requiem",
|
||||
title: "Oblitus Requiem \\\\Against the Forsaken Legacy//",
|
||||
context:
|
||||
'"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
|
||||
},
|
||||
{
|
||||
img_url:
|
||||
"https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
|
||||
url: "release/A_Lake_With_Endless_Stars",
|
||||
title: "A Lake With Endless Stars",
|
||||
context:
|
||||
'"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
|
||||
},
|
||||
];
|
||||
|
||||
//create pages and add buttons
|
||||
init_page();
|
||||
pg_ctrl();
|
||||
start_page();
|
||||
|
||||
pgctrl.push(document.querySelectorAll(".pgctrl li"));
|
||||
if (pgctrl[1])
|
||||
@@ -60,24 +70,6 @@ if (pgctrl[1])
|
||||
})
|
||||
);
|
||||
|
||||
//refresh
|
||||
reset();
|
||||
set();
|
||||
|
||||
|
||||
let highlights, releases, activities;
|
||||
|
||||
async function fetch_highlights() {
|
||||
let { data, error } = await supabase
|
||||
.from("events")
|
||||
.select("url, title, subtitle, context, img_src")
|
||||
.eq("event_type", "highlight"); //note it only shows u public stuffs
|
||||
if (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} else {
|
||||
return (highlights = data);
|
||||
}
|
||||
}
|
||||
async function fetch_releases() {
|
||||
let { data, error } = await supabase
|
||||
.from("events")
|
||||
@@ -101,33 +93,70 @@ async function fetch_activities() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function start_page() {
|
||||
fetch_releases();
|
||||
fetch_activities();
|
||||
supabase
|
||||
.from("events")
|
||||
.select("url, title, subtitle, context, img_src")
|
||||
.eq("event_type", "highlight")
|
||||
.then(init_page);
|
||||
}
|
||||
|
||||
console.log(releases);
|
||||
function init_page(d) {
|
||||
if (d.error) {
|
||||
console.error("Error fetching data:", d.error);
|
||||
} else {
|
||||
highlights = d.data;
|
||||
|
||||
if (d.data.length === 0) highlights = default_highlights;
|
||||
|
||||
function init_page() {
|
||||
for (var i = 0; i < 3; i++) {
|
||||
highlights.forEach((a) => {
|
||||
let _pg = document.createElement("section"),
|
||||
_div = document.createElement("div"),
|
||||
_desc = desc[i],
|
||||
_title = title[i];
|
||||
_div = document.createElement("div");
|
||||
let _h1 = document.createElement("h1"),
|
||||
_p = document.createElement("p");
|
||||
|
||||
_h1.classList.add("title");
|
||||
_h1.textContent = _title;
|
||||
_h1.textContent = a.title;
|
||||
|
||||
_p.classList.add("desc");
|
||||
_p.textContent = _desc;
|
||||
_p.textContent = a.context;
|
||||
|
||||
_div.appendChild(_h1);
|
||||
_div.appendChild(_p);
|
||||
_pg.appendChild(_div);
|
||||
pages.appendChild(_pg);
|
||||
});
|
||||
pg_ctrl();
|
||||
|
||||
//refresh
|
||||
reset();
|
||||
set();
|
||||
|
||||
//next
|
||||
if (next) {
|
||||
next.addEventListener("click", nxt);
|
||||
setInterval(nxt, 30000);
|
||||
}
|
||||
|
||||
//previous
|
||||
if (prev) prev.addEventListener("click", prv);
|
||||
|
||||
slider.onclick = function () {
|
||||
location.assign(highlights[slider_index].url);
|
||||
};
|
||||
//slider.children.forEach((carousel, num) => {
|
||||
carousel.addEventListener("touchstart", (e) => {
|
||||
touchstartX = e.changedTouches[0].screenX;
|
||||
});
|
||||
carousel.addEventListener("touchend", (e) => {
|
||||
touchendX = e.changedTouches[0].screenX;
|
||||
checkX();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function pg_ctrl() {
|
||||
for (var i = 0; i < slider.children.length; i++) {
|
||||
let button = document.createElement("li");
|
||||
@@ -141,16 +170,10 @@ function set() {
|
||||
slider.children[slider_index].style.opacity = 1;
|
||||
slider.children[slider_index].style.zIndex = 1;
|
||||
pgctrl[0].children[slider_index].style.opacity = 1;
|
||||
if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
|
||||
if (bg)
|
||||
bg.style.backgroundImage = `url('${highlights[slider_index].img_src}')`;
|
||||
}
|
||||
|
||||
// setInterval(getinfo, 60000);
|
||||
// async function getinfo() {
|
||||
// let res = await fetch("");
|
||||
// const info = await res.json();
|
||||
// if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`;
|
||||
// }
|
||||
|
||||
function reset() {
|
||||
for (var i = 0; i < slider.children.length; i++) {
|
||||
slider.children[i].style.opacity = 0;
|
||||
@@ -182,31 +205,8 @@ function prv() {
|
||||
set();
|
||||
}
|
||||
|
||||
//next
|
||||
if (next) {
|
||||
next.addEventListener("click", nxt);
|
||||
setInterval(nxt, 30000);
|
||||
}
|
||||
|
||||
//previous
|
||||
if (prev) prev.addEventListener("click", prv);
|
||||
|
||||
slider.onclick = function () {
|
||||
location.assign(pg[slider_index]);
|
||||
};
|
||||
|
||||
//touchswipe control
|
||||
function checkX() {
|
||||
if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt();
|
||||
if (touchendX > touchstartX && touchendX - touchstartX > 60) prv();
|
||||
}
|
||||
//slider.children.forEach((carousel, num) => {
|
||||
carousel.addEventListener("touchstart", (e) => {
|
||||
touchstartX = e.changedTouches[0].screenX;
|
||||
});
|
||||
carousel.addEventListener("touchend", (e) => {
|
||||
touchendX = e.changedTouches[0].screenX;
|
||||
checkX();
|
||||
});
|
||||
|
||||
//location.reload(true);
|
||||
|
||||
@@ -7,6 +7,9 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
|
||||
<link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" />
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>eruda.init();</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
|
||||
Reference in New Issue
Block a user