Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 17:25:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

BUGFIX: lots of small things

Browse Source
This commit is contained in:
Simon Martens
2025-03-07 12:44:53 +01:00
parent 39537a8ebb
commit ec32aca0bb
15 changed files with 199 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
views/transform/main.js
View File

@@ -730,6 +730,8 @@ class PopupImage extends HTMLElement {
constructor() {
super();
this.overlay = null;
this._others = null;
this._thisindex = -1;
this._preview = null;
this._description = null;
this._imageURL = "";
@@ -749,6 +751,14 @@ class PopupImage extends HTMLElement {
this.showOverlay();
});
}
let enclosing = this.closest("image-reel, .image-reel");
if (!enclosing) {
enclosing = document;
}
this._others = Array.from(enclosing.querySelectorAll("popup-image:not(.hidden)"));
this._thisindex = this._others.indexOf(this);
}
disconnectedCallback() {
@@ -758,6 +768,38 @@ class PopupImage extends HTMLElement {
}
}
Keys(evt) {
if (evt.repeat) {
return;
}
evt.preventDefault();
if (evt.key === "ArrowRight") {
this.next();
} else if (evt.key === "ArrowLeft") {
this.prev();
} else if (evt.key === "Escape") {
this.hideOverlay();
}
}
next() {
if (this._others[this._thisindex + 1]) {
this.hideOverlay();
this._others[this._thisindex + 1].showOverlay();
} else {
document.addEventListener("keydown", this.Keys.bind(this), { once: true });
}
}
prev() {
if (this._others[this._thisindex - 1]) {
this.hideOverlay();
this._others[this._thisindex - 1].showOverlay();
} else {
document.addEventListener("keydown", this.Keys.bind(this), { once: true });
}
}
showOverlay() {
this.overlay = document.createElement("div");
this.overlay.classList.add(
@@ -775,10 +817,12 @@ class PopupImage extends HTMLElement {
<div class="relative w-max max-w-dvw max-h-dvh shadow-lg flex flex-col items-center justify-center gap-4">
<div>
<div class="absolute -right-16 text-white text-4xl flex flex-col">
<button class="hover:text-gray-300 cursor-pointer focus:outline-none" aria-label="Close popup">
<button class="hover:text-gray-300 cursor-pointer focus:outline-none" aria-label="Close popup" id="closebutton">
<i class="ri-close-fill text-4xl"></i>
</button>
${this.downloadButton()}
${this.downloadButton()}
${this.nextButton()}
${this.prevButton()}
</div>
<img
src="${this._imageURL}"
@@ -790,19 +834,30 @@ class PopupImage extends HTMLElement {
</div>
`;
const closeButton = this.overlay.querySelector("button");
const closeButton = this.overlay.querySelector("#closebutton");
if (closeButton) {
closeButton.addEventListener("click", () => {
this.hideOverlay();
});
}
const nextButton = this.overlay.querySelector("#nextbtn");
if (nextButton) {
nextButton.addEventListener("click", this.next.bind(this));
}
const prevButton = this.overlay.querySelector("#prevbtn");
if (prevButton) {
prevButton.addEventListener("click", this.prev.bind(this));
}
this.overlay.addEventListener("click", (evt) => {
if (evt.target === this.overlay) {
this.hideOverlay();
}
});
document.addEventListener("keydown", this.Keys.bind(this), { once: true });
document.body.appendChild(this.overlay);
}
@@ -813,6 +868,36 @@ class PopupImage extends HTMLElement {
return "";
}
nextButton() {
if (!this._others[this._thisindex + 1]) {
return "";
}
return `
<tool-tip position="right">
<button class="hover:text-gray-300 cursor-pointer focus:outline-none" aria-label="Next image" id="nextbtn">
<i class="ri-arrow-right-box-line"></i>
</button>
<div class="data-tip">Nächstes Bild</div>
</tool-tip>
`;
}
prevButton() {
if (!this._others[this._thisindex - 1]) {
return "";
}
return `
<tool-tip position="right">
<button class="hover:text-gray-300 cursor-pointer focus:outline-none" aria-label="Previous image" id="prevbtn">
<i class="ri-arrow-left-box-line"></i>
</button>
<div class="data-tip">Vorheriges Bild</div>
</tool-tip>
`;
}
description() {
if (!this._description) {
return "";