This commit is contained in:
Flummi
2019-05-19 01:45:45 +00:00
parent 1ba52a8361
commit 2a5651c00a
9 changed files with 169 additions and 119 deletions

View File

@@ -2,15 +2,15 @@ import rt from "./rt.js";
import lib from "./lib.js";
const events = {};
events.wheel = {
page: async e => {
if(rt.scroll)
events.wheel = async e => {
if(rt.tmp.events.page) { // Pageevents
if(rt.tmp.scroll)
return;
rt.scroll = true;
const deltaY = e.target.id === "up" ? -1 : e.deltaY < 0 ? -1: 1; // -1 up, 1 down
if((deltaY === -1 && rt.items.first === rt.items.newest) || (deltaY === 1 && rt.items.last === rt.items.oldest))
return rt.scroll = false;
return rt.tmp.scroll = false;
rt.tmp.scroll = true;
rt.items.eps = 0;
await lib.getItems({
el: rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2],
@@ -18,34 +18,40 @@ events.wheel = {
});
rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
rt.ct.wrapper.pages[1].innerHTML = rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].innerHTML;
rt.ct.wrapper.pages[1].scrollIntoView({ block: rt.vars.block });
rt.scroll = false;
},
item: async e => {
if(rt.scroll)
document.querySelector("div#p_items").removeChild(rt.ct.wrapper.pages[deltaY === -1 ? 2 : 0]);
const newdiv = document.createElement("div");
newdiv.classList.add("p_item");
document.querySelector("div#p_items").insertAdjacentElement((deltaY === -1 ? "afterbegin" : "beforeend"), newdiv);
rt.ct.wrapper.pages = document.querySelectorAll("div.p_item");
lib.calcItems();
lib.scrolltomiddle(rt.ct.wrapper.pages);
rt.ct.wrapper.pages[0].innerHTML = "";
rt.ct.wrapper.pages[2].innerHTML = "";
}
if(rt.tmp.events.item) { // Itemevents
if(rt.tmp.scroll)
return;
const deltaY = e.target.id === "left" ? -1 : e.deltaY < 0 ? -1: 1; // -1 left, 1 right
if((deltaY === -1 && rt.items.act === rt.items.first) || (deltaY === 1 && rt.items.act === rt.items.last))
return rt.scroll = false;
window.location = `${window.location.pathname}#${rt.items.act - deltaY}`;
if((deltaY === -1 && rt.items.act === rt.items.oldest) || (deltaY === 1 && rt.items.act === rt.items.newest))
return;
window.location = `${window.location.pathname}#${deltaY === -1 ? rt.items.next : rt.items.prev}`;
}
rt.tmp.scroll = false;
};
events.resize = {
page: async e => {
e.preventDefault();
clearTimeout(rt.tmp.resize);
lib.calcItems();
rt.tmp.resize = setTimeout(() => lib.getItems({
el: rt.ct.wrapper.pages[1],
opt: `id=${rt.items.first + 1}&order=desc`
}), rt.vars.cd);
lib.scrolltomiddle(rt.ct.wrapper.pages);
},
item: async e => {
events.resize = async e => {
e.preventDefault();
clearTimeout(rt.tmp.resize);
lib.calcItems();
rt.tmp.resize = setTimeout(() => lib.getItems({
el: rt.ct.wrapper.pages[1],
opt: `id=${rt.items.first + 1}&order=desc`
}), rt.vars.cd);
lib.scrolltomiddle(rt.ct.wrapper.pages);
if(rt.tmp.events.item) {
lib.scrolltomiddle(rt.ct.wrapper.items);
}
};
@@ -53,19 +59,23 @@ events.volumechange = e => {
localStorage.setItem("volume", e.target.volume);
};
events.hashchange = async e => {
if(rt.scroll)
return;
rt.scroll = true;
if(!rt.tmp.hash)
if(rt.tmp.scroll || !rt.tmp.hash)
return rt.tmp.hash = true;
rt.tmp.scroll = true;
console.log("hashchange lol");
if(rt.tmp.layer !== "item")
rt.ct.wrapper.items[1].innerHTML = "";
const itemid = parseInt((e.newURL?e.newURL:e.detail.newURL).split("#").slice(-1));
if(!itemid || itemid <= 0) // failover oder so
return lib.showLayer("page");
return lib.closeItemview();
const next = rt.items.act === null || rt.items.act === itemid ? 1 : rt.items.act > itemid ? 2 : 0;
lib.showLayer("item", next === 1);
rt.ct.header.itempos.innerHTML = `item ${itemid}`;
const item = await (await fetch(`${rt.api}/item/${itemid}`)).json();
const item = await lib.getItem(itemid);
item.dest = item.dest.replace(/^\./, "");
rt.ct.header.infos.source.href = item.src;
@@ -74,12 +84,28 @@ events.hashchange = async e => {
rt.ct.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
rt.ct.header.infos.nick.innerHTML = item.username;
lib.showLayer("item", next === 1);
// <test>
if(itemid > rt.items.first || itemid < rt.items.last) { // Scroll to next Page
rt.items.eps = 0;
await lib.getItems({
el: rt.ct.wrapper.pages[1],
opt: next === 0 ? `id=${itemid-1}&order=asc` : `id=${itemid+1}&order=desc`
});
rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(e => {
e.style.boxShadow = null;
e.style.borderRadius = null;
e.style.transition = ".1s ease-out";
/*rt.tmp.scroll = false;
events.wheel.page({
target: {
id: next === 0 ? "up" : "down"
}
});
rt.tmp.scroll = true;*/
}
// </test>
rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(f => {
f.style.boxShadow = null;
f.style.borderRadius = null;
f.style.transition = ".1s ease-out";
});
setTimeout(() => {
rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.boxShadow = "0px 0px 0px 2px #dac8d2";
@@ -100,7 +126,7 @@ events.hashchange = async e => {
el.controls = true;
el.loop = true;
el.volume = localStorage.getItem("volume") || 1;
el.addEventListener("volumechange", events.volumechange);
el.addEventListener("volumechange", ev => events.volumechange(ev));
break;
case "image/gif":
case "image/jpeg":
@@ -119,7 +145,7 @@ events.hashchange = async e => {
el.controls = true;
el.loop = true;
el.volume = localStorage.getItem("volume") || 1;
el.addEventListener("volumechange", events.volumechange);
el.addEventListener("volumechange", ev => events.volumechange(ev));
break;
default:
alert("lol hacker");
@@ -127,9 +153,7 @@ events.hashchange = async e => {
}
el.classList.add("item");
rt.ct.wrapper.items[next].insertAdjacentElement("afterbegin", el);
rt.ct.wrapper.items[next].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
rt.items.prev = item.prev;
@@ -143,7 +167,6 @@ events.hashchange = async e => {
const newdiv = document.createElement("div");
newdiv.classList.add("i_item");
document.querySelector("div#i_items").insertAdjacentElement((next === 0 ? "afterbegin" : "beforeend"), newdiv);
rt.ct.wrapper.items = document.querySelectorAll("div.i_item");
}
@@ -151,7 +174,7 @@ events.hashchange = async e => {
rt.ct.wrapper.items[0].innerHTML = "";
rt.ct.wrapper.items[2].innerHTML = "";
rt.scroll = false;
rt.tmp.scroll = false;
};
export default events;