Frontend lul

This commit is contained in:
Flummi
2019-05-11 09:20:48 +00:00
parent 1058d313a1
commit be29734fa4
5 changed files with 157 additions and 32 deletions

View File

@ -120,7 +120,7 @@ const resize = e => {
// events
swiper.init(rt.container.wrapper, e => scroll({ target: { id: e.direction }}));
document.querySelectorAll("div.pscroll").forEach(p => p.addEventListener("click", scroll));
[...document.querySelectorAll("div.arrow")].filter(e => ["up", "down"].includes(e.id)).forEach(p => p.addEventListener("click", scroll));
document.addEventListener("wheel", scroll);
(() => { // init
@ -137,13 +137,32 @@ document.addEventListener("wheel", scroll);
window.addEventListener("hashchange", e => {
window.addEventListener("hashchange", async e => {
const itemid = parseInt(e.newURL.split("#").slice(-1));
if(itemid === "NaN")
return rt.container.itemview.style.display = "none";
if(itemid <= 0) { // failover
rt.container.itemview.style.display = "none";
return false;
}
rt.container.itemview.style.display = "flex"; // show itemview
rt.container.header.itempos.style.display = "block";
rt.container.header.pagepos.style.display = "none";
rt.container.header.iteminfo.style.display = "block";
rt.container.header.itempos.innerHTML = `item ${itemid}`;
const item = await (await fetch(`/api/item/${itemid}`)).json();
console.log(item);
rt.container.header.infos.source.href = item.src;
rt.container.header.infos.source.innerHTML = item.srchost;
rt.container.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
rt.container.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
rt.container.header.infos.nick.innerHTML = item.username;
rt.container.items[1].innerHTML = `<img src="${rt.url}${item.dest}" class="item" />`;
rt.container.items[1].scrollIntoView({ block: rt.st.block }); // mitte
rt.container.itemview.style.display = "block"; // show itemview
// remove page events
document.removeEventListener("wheel", scroll);

View File

@ -17,6 +17,19 @@ export default {
container: {
wrapper: document.querySelector("div#wrapper"),
itemview: document.querySelector("div#itemview"),
header: {
iteminfo: document.querySelector("div#itemInfo"),
pagepos: document.querySelector("div#pagePosition"),
itempos: document.querySelector("div#itemPosition"),
infos: {
title: document.querySelector("span#itemTitle"),
source: document.querySelector("a#itemSource"),
time: document.querySelector("span#itemTime"),
nick: document.querySelector("span#itemNick"),
channel: document.querySelector("span#itemChannel")
}
},
items: document.querySelectorAll("div.items"),
posts: document.querySelectorAll("div.posts")
},
items: {