84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
import {File} from "./file.js";
|
|
|
|
class ImagesDisplay {
|
|
files: File[];
|
|
index = 0;
|
|
constructor(files: File[], index = 0) {
|
|
this.files = files;
|
|
this.index = index;
|
|
}
|
|
weakbg = new WeakRef<HTMLElement>(document.createElement("div"));
|
|
get background(): HTMLElement | undefined {
|
|
return this.weakbg.deref();
|
|
}
|
|
set background(e: HTMLElement) {
|
|
this.weakbg = new WeakRef(e);
|
|
}
|
|
makeHTML(): HTMLElement {
|
|
//TODO this should be able to display more than one image at a time lol
|
|
const image = this.files[this.index].getHTML(false, true);
|
|
image.classList.add("imgfit", "centeritem");
|
|
return image;
|
|
}
|
|
show() {
|
|
this.background = document.createElement("div");
|
|
this.background.classList.add("background");
|
|
let cur = this.makeHTML();
|
|
if (this.files.length !== 1) {
|
|
const right = document.createElement("span");
|
|
right.classList.add("rightArrow", "svg-intoMenu");
|
|
right.onclick = (e) => {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
this.index++;
|
|
this.index %= this.files.length;
|
|
cur.remove();
|
|
cur = this.makeHTML();
|
|
if (this.background) {
|
|
this.background.appendChild(cur);
|
|
}
|
|
};
|
|
|
|
const left = document.createElement("span");
|
|
left.onclick = (e) => {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
this.index += this.files.length - 1;
|
|
this.index %= this.files.length;
|
|
cur.remove();
|
|
cur = this.makeHTML();
|
|
if (this.background) {
|
|
this.background.appendChild(cur);
|
|
}
|
|
};
|
|
left.classList.add("leftArrow", "svg-leftArrow");
|
|
this.background.append(right, left);
|
|
this.background.addEventListener("keydown", (e) => {
|
|
if (e.key === "ArrowRight") {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
right.click();
|
|
}
|
|
if (e.key === "ArrowLeft") {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
right.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.background.appendChild(cur);
|
|
this.background.onclick = (_) => {
|
|
this.hide();
|
|
};
|
|
document.body.append(this.background);
|
|
this.background.setAttribute("tabindex", "0");
|
|
this.background.focus();
|
|
}
|
|
hide() {
|
|
if (this.background) {
|
|
this.background.remove();
|
|
}
|
|
}
|
|
}
|
|
export {ImagesDisplay};
|