mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-28 16:55:32 +00:00
BUGFIX: lots of small things
This commit is contained in:
@@ -101,7 +101,7 @@ func handlePreferredTitleEntry(
|
||||
if band.Jahr == 0 {
|
||||
jahr = "[o. J.]"
|
||||
} else {
|
||||
jahr = "(" + jahr + ")"
|
||||
jahr = jahr
|
||||
}
|
||||
|
||||
bevti := slices.IndexFunc(rels, func(r xmlmodels.Relation_Band_Reihe) bool { return r.Relation == "1" })
|
||||
|
||||
@@ -15,9 +15,9 @@ const (
|
||||
P_DANK_NAME = "danksagungen"
|
||||
P_KONTAKT_NAME = "kontakt"
|
||||
P_LIT_NAME = "literatur"
|
||||
P_EINFUEHRUNG_NAME = "einfuehrung"
|
||||
P_EINFUEHRUNG_NAME = "einleitung"
|
||||
|
||||
P_DOK_NAME = "dokumentation"
|
||||
P_DOK_NAME = "benutzerhinweise"
|
||||
T_ABK_NAME = "abkuerzungen"
|
||||
|
||||
F_ABK = "Abkuerzung"
|
||||
|
||||
@@ -12,7 +12,7 @@ import (
|
||||
m "github.com/pocketbase/pocketbase/migrations"
|
||||
)
|
||||
|
||||
const BESCHREIBUNG = "Musenalm: Verzeichnis deutschsprachiger Almanache des 18. und 19. Jahrhunderts. Dokumentation zur Sortierung und Struktur der Almanache."
|
||||
const BESCHREIBUNG = "Musenalm: Verzeichnis deutschsprachiger Almanache des 18. und 19. Jahrhunderts. Dokumentation der Sortierung und Struktur der Almanache."
|
||||
|
||||
const START = `<h3>Sortierung der Reihentitel</h3>
|
||||
<p>Wir sortieren die Reihentitel nach dem Kopf der Nominalphrase, den wir zu diesem Zweck ggf. an den Anfang stellen und mit Kommas abtrennen.</p>
|
||||
@@ -494,7 +494,7 @@ func init() {
|
||||
}
|
||||
|
||||
record := pagemodels.NewTextPage(core.NewRecord(collection))
|
||||
record.SetTitle("Dokumentation")
|
||||
record.SetTitle("Benutzerhinweise")
|
||||
record.SetText(START)
|
||||
record.SetDescription(BESCHREIBUNG)
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ func init() {
|
||||
}
|
||||
|
||||
record := pagemodels.NewTextPage(core.NewRecord(collection))
|
||||
record.SetTitle("Einführung")
|
||||
record.SetTitle("Einleitung")
|
||||
record.SetText(START)
|
||||
record.SetDescription(BESCHREIBUNG)
|
||||
|
||||
|
||||
@@ -11,8 +11,8 @@ func init() {
|
||||
RegisterTextPage("/redaktion/kontakt/", pagemodels.P_KONTAKT_NAME)
|
||||
RegisterTextPage("/redaktion/danksagungen/", pagemodels.P_DANK_NAME)
|
||||
RegisterTextPage("/redaktion/literatur/", pagemodels.P_LIT_NAME)
|
||||
RegisterTextPage("/redaktion/einfuehrung/", pagemodels.P_EINFUEHRUNG_NAME)
|
||||
RegisterTextPage("/redaktion/dokumentation/", pagemodels.P_DOK_NAME)
|
||||
RegisterTextPage("/redaktion/einleitung/", pagemodels.P_EINFUEHRUNG_NAME)
|
||||
RegisterTextPage("/redaktion/benutzerhinweise/", pagemodels.P_DOK_NAME)
|
||||
RegisterTextPage("/redaktion/lesekabinett/", pagemodels.P_KABINETT_NAME)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
var x = (r) => {
|
||||
var T = (r) => {
|
||||
throw TypeError(r);
|
||||
};
|
||||
var _ = (r, t, e) => t.has(r) || x("Cannot " + e);
|
||||
var c = (r, t, e) => (_(r, t, "read from private field"), e ? e.call(r) : t.get(r)), n = (r, t, e) => t.has(r) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), u = (r, t, e, i) => (_(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e), g = (r, t, e) => (_(r, t, "access private method"), e);
|
||||
const S = "script[xslt-onload]", w = "xslt-template", k = "xslt-transformed", M = "filter-list", m = "filter-list-list", C = "filter-list-item", I = "filter-list-input", y = "filter-list-searchable", B = "scroll-button", q = "tool-tip", P = "abbrev-tooltips", H = "int-link", R = "popup-image", $ = "tab-list", N = "filter-pill", F = "image-reel";
|
||||
var _ = (r, t, e) => t.has(r) || T("Cannot " + e);
|
||||
var c = (r, t, e) => (_(r, t, "read from private field"), e ? e.call(r) : t.get(r)), l = (r, t, e) => t.has(r) ? T("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), u = (r, t, e, i) => (_(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e), g = (r, t, e) => (_(r, t, "access private method"), e);
|
||||
const k = "script[xslt-onload]", y = "xslt-template", S = "xslt-transformed", M = "filter-list", m = "filter-list-list", B = "filter-list-item", C = "filter-list-input", w = "filter-list-searchable", I = "scroll-button", q = "tool-tip", P = "abbrev-tooltips", R = "int-link", H = "popup-image", $ = "tab-list", O = "filter-pill", N = "image-reel";
|
||||
var d, b, E;
|
||||
class V {
|
||||
constructor() {
|
||||
n(this, b);
|
||||
n(this, d);
|
||||
l(this, b);
|
||||
l(this, d);
|
||||
u(this, d, /* @__PURE__ */ new Map());
|
||||
}
|
||||
setup() {
|
||||
let t = htmx.findAll(S);
|
||||
let t = htmx.findAll(k);
|
||||
for (let e of t)
|
||||
g(this, b, E).call(this, e);
|
||||
}
|
||||
@@ -23,9 +23,9 @@ class V {
|
||||
}
|
||||
}
|
||||
d = new WeakMap(), b = new WeakSet(), E = function(t) {
|
||||
if (t.getAttribute(k) === "true" || !t.hasAttribute(w))
|
||||
if (t.getAttribute(S) === "true" || !t.hasAttribute(y))
|
||||
return;
|
||||
let e = "#" + t.getAttribute(w), i = c(this, d).get(e);
|
||||
let e = "#" + t.getAttribute(y), i = c(this, d).get(e);
|
||||
if (!i) {
|
||||
let h = htmx.find(e);
|
||||
if (h) {
|
||||
@@ -34,10 +34,10 @@ d = new WeakMap(), b = new WeakSet(), E = function(t) {
|
||||
} else
|
||||
throw new Error("Unknown XSLT template: " + e);
|
||||
}
|
||||
let s = new DOMParser().parseFromString(t.innerHTML, "application/xml"), a = i.transformToFragment(s, document), l = new XMLSerializer().serializeToString(a);
|
||||
t.outerHTML = l;
|
||||
let s = new DOMParser().parseFromString(t.innerHTML, "application/xml"), a = i.transformToFragment(s, document), n = new XMLSerializer().serializeToString(a);
|
||||
t.outerHTML = n;
|
||||
};
|
||||
class O extends HTMLElement {
|
||||
class F extends HTMLElement {
|
||||
constructor() {
|
||||
super(), this._value = "", this.render();
|
||||
}
|
||||
@@ -106,13 +106,13 @@ class O extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
}
|
||||
var o, T, f, L;
|
||||
var o, x, f, L;
|
||||
class U extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
n(this, f);
|
||||
n(this, o, !1);
|
||||
n(this, T, "");
|
||||
l(this, f);
|
||||
l(this, o, !1);
|
||||
l(this, x, "");
|
||||
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this._queryparam = "", this._startparams = null, this.render();
|
||||
}
|
||||
static get observedAttributes() {
|
||||
@@ -157,7 +157,7 @@ class U extends HTMLElement {
|
||||
let e = this.querySelector("#" + m);
|
||||
if (!e)
|
||||
return;
|
||||
let i = new Mark(e.querySelectorAll("." + y));
|
||||
let i = new Mark(e.querySelectorAll("." + w));
|
||||
this._filter && i.mark(this._filter, {
|
||||
separateWordSearch: !0
|
||||
});
|
||||
@@ -197,7 +197,7 @@ class U extends HTMLElement {
|
||||
}
|
||||
getLinkText(e) {
|
||||
let i = this.getSearchText(e);
|
||||
return i === "" ? "" : `<span class="${y}">${i}</span>`;
|
||||
return i === "" ? "" : `<span class="${w}">${i}</span>`;
|
||||
}
|
||||
getURL(e) {
|
||||
if (this._queryparam) {
|
||||
@@ -232,7 +232,7 @@ class U extends HTMLElement {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="${this._placeholder}"
|
||||
class="${I} w-full placeholder:italic px-2 py-0.5" />
|
||||
class="${C} w-full placeholder:italic px-2 py-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -256,7 +256,7 @@ class U extends HTMLElement {
|
||||
hx-swap="outerHTML show:none"
|
||||
hx-select="main"
|
||||
hx-target="main"
|
||||
class="${C} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
|
||||
class="${B} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
|
||||
${g(this, f, L).call(this, i) ? 'aria-current="page"' : ""}>
|
||||
${this.ActiveDot(i)}
|
||||
${this.getLinkText(i)}
|
||||
@@ -268,7 +268,7 @@ class U extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
}
|
||||
o = new WeakMap(), T = new WeakMap(), f = new WeakSet(), L = function(e) {
|
||||
o = new WeakMap(), x = new WeakMap(), f = new WeakSet(), L = function(e) {
|
||||
if (!e)
|
||||
return !1;
|
||||
let i = this.getHREF(e);
|
||||
@@ -420,16 +420,27 @@ class z extends HTMLElement {
|
||||
}
|
||||
class G extends HTMLElement {
|
||||
constructor() {
|
||||
super(), this.overlay = null, this._preview = null, this._description = null, this._imageURL = "", this._hideDLButton = !1;
|
||||
super(), this.overlay = null, this._others = null, this._thisindex = -1, this._preview = null, this._description = null, this._imageURL = "", this._hideDLButton = !1;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.classList.add("cursor-pointer"), this.classList.add("select-none"), this._imageURL = this.getAttribute("data-image-url") || "", this._hideDLButton = this.getAttribute("data-hide-dl-button") || !1, this._preview = this.querySelector("img"), this._description = this.querySelector(".image-description"), this._preview && this._preview.addEventListener("click", () => {
|
||||
this.showOverlay();
|
||||
});
|
||||
let t = this.closest("image-reel, .image-reel");
|
||||
t || (t = document), this._others = Array.from(t.querySelectorAll("popup-image:not(.hidden)")), this._thisindex = this._others.indexOf(this);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.overlay && this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay);
|
||||
}
|
||||
Keys(t) {
|
||||
t.repeat || (t.preventDefault(), t.key === "ArrowRight" ? this.next() : t.key === "ArrowLeft" ? this.prev() : t.key === "Escape" && this.hideOverlay());
|
||||
}
|
||||
next() {
|
||||
this._others[this._thisindex + 1] ? (this.hideOverlay(), this._others[this._thisindex + 1].showOverlay()) : document.addEventListener("keydown", this.Keys.bind(this), { once: !0 });
|
||||
}
|
||||
prev() {
|
||||
this._others[this._thisindex - 1] ? (this.hideOverlay(), this._others[this._thisindex - 1].showOverlay()) : document.addEventListener("keydown", this.Keys.bind(this), { once: !0 });
|
||||
}
|
||||
showOverlay() {
|
||||
this.overlay = document.createElement("div"), this.overlay.classList.add(
|
||||
"fixed",
|
||||
@@ -444,10 +455,12 @@ class G 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}"
|
||||
@@ -458,16 +471,40 @@ class G extends HTMLElement {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const t = this.overlay.querySelector("button");
|
||||
const t = this.overlay.querySelector("#closebutton");
|
||||
t && t.addEventListener("click", () => {
|
||||
this.hideOverlay();
|
||||
}), this.overlay.addEventListener("click", (e) => {
|
||||
e.target === this.overlay && this.hideOverlay();
|
||||
}), document.body.appendChild(this.overlay);
|
||||
});
|
||||
const e = this.overlay.querySelector("#nextbtn");
|
||||
e && e.addEventListener("click", this.next.bind(this));
|
||||
const i = this.overlay.querySelector("#prevbtn");
|
||||
i && i.addEventListener("click", this.prev.bind(this)), this.overlay.addEventListener("click", (s) => {
|
||||
s.target === this.overlay && this.hideOverlay();
|
||||
}), document.addEventListener("keydown", this.Keys.bind(this), { once: !0 }), document.body.appendChild(this.overlay);
|
||||
}
|
||||
descriptionImgClass() {
|
||||
return this.description ? "" : "0";
|
||||
}
|
||||
nextButton() {
|
||||
return this._others[this._thisindex + 1] ? `
|
||||
<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() {
|
||||
return this._others[this._thisindex - 1] ? `
|
||||
<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() {
|
||||
return this._description ? `
|
||||
<div class="font-serif text-left description-content mt-3 text-slate-900 ">
|
||||
@@ -489,7 +526,7 @@ class G extends HTMLElement {
|
||||
this.overlay.parentNode.removeChild(this.overlay), this.overlay = null;
|
||||
}
|
||||
}
|
||||
class j extends HTMLElement {
|
||||
class K extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
}
|
||||
constructor() {
|
||||
@@ -523,11 +560,11 @@ class j extends HTMLElement {
|
||||
this._showall = !0, this.shown = -1, this.disable(), this._contents.forEach((t, e) => {
|
||||
t.classList.remove("hidden");
|
||||
let i = this._headings[e], s = i.querySelectorAll(".show-opened");
|
||||
for (let l of s)
|
||||
l.classList.add("hidden");
|
||||
for (let n of s)
|
||||
n.classList.add("hidden");
|
||||
let a = i.querySelectorAll(".show-closed");
|
||||
for (let l of a)
|
||||
l.classList.add("hidden");
|
||||
for (let n of a)
|
||||
n.classList.add("hidden");
|
||||
});
|
||||
}
|
||||
default() {
|
||||
@@ -675,17 +712,17 @@ class p extends HTMLElement {
|
||||
}
|
||||
const a = this.findLongestAbbrevAt(t, s, e);
|
||||
if (a) {
|
||||
const { match: l, meaning: h } = a;
|
||||
const { match: n, meaning: h } = a;
|
||||
i += `
|
||||
<tool-tip position="top" class="!inline" timeout="300">
|
||||
<div class="data-tip p-2 text-sm text-white bg-gray-700 rounded shadow">
|
||||
${h}
|
||||
</div>
|
||||
<span class="cursor-help text-blue-900 hover:text-slate-800">
|
||||
${l}
|
||||
${n}
|
||||
</span>
|
||||
</tool-tip>
|
||||
`, s += l.length;
|
||||
`, s += n.length;
|
||||
} else
|
||||
i += t[s], s++;
|
||||
}
|
||||
@@ -693,15 +730,15 @@ class p extends HTMLElement {
|
||||
}
|
||||
findLongestAbbrevAt(t, e, i) {
|
||||
let s = null, a = 0;
|
||||
for (const l of Object.keys(i))
|
||||
t.startsWith(l, e) && l.length > a && (s = l, a = l.length);
|
||||
for (const n of Object.keys(i))
|
||||
t.startsWith(n, e) && n.length > a && (s = n, a = n.length);
|
||||
return s ? { match: s, meaning: i[s] } : null;
|
||||
}
|
||||
isSpaceOrPunct(t) {
|
||||
return /\s|[.,;:!?]/.test(t);
|
||||
}
|
||||
}
|
||||
class K extends HTMLElement {
|
||||
class j extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@@ -723,7 +760,7 @@ var v;
|
||||
class X extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
n(this, v, 176);
|
||||
l(this, v, 176);
|
||||
this._images = [];
|
||||
}
|
||||
connectedCallback() {
|
||||
@@ -745,15 +782,15 @@ class X extends HTMLElement {
|
||||
}
|
||||
}
|
||||
v = new WeakMap();
|
||||
customElements.define(H, K);
|
||||
customElements.define(R, j);
|
||||
customElements.define(P, p);
|
||||
customElements.define(M, U);
|
||||
customElements.define(B, D);
|
||||
customElements.define(I, D);
|
||||
customElements.define(q, z);
|
||||
customElements.define(R, G);
|
||||
customElements.define($, j);
|
||||
customElements.define(N, O);
|
||||
customElements.define(F, X);
|
||||
customElements.define(H, G);
|
||||
customElements.define($, K);
|
||||
customElements.define(O, F);
|
||||
customElements.define(N, X);
|
||||
export {
|
||||
p as AbbreviationTooltips,
|
||||
U as FilterList,
|
||||
|
||||
@@ -63,18 +63,18 @@
|
||||
class="submenu flex flex-row justify-end pt-3.5 gap-x-4 font-bold font-serif
|
||||
[&>a]:no-underline [&>*]:-mb-1.5 w-full pr-2.5 [&>*]:px-1.5">
|
||||
<a
|
||||
href="/redaktion/einfuehrung/"
|
||||
{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/einfuehrung") -}}
|
||||
href="/redaktion/einleitung/"
|
||||
{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/einleitung") -}}
|
||||
aria-current="page"
|
||||
{{- end -}}
|
||||
>Einführung</a
|
||||
>Einleitung</a
|
||||
>
|
||||
<a
|
||||
href="/redaktion/dokumentation/"
|
||||
{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/dokumentation") -}}
|
||||
href="/redaktion/benutzerhinweise/"
|
||||
{{ if and $model.page (HasPrefix $model.page.Path "/redaktion/benutzerhinweise") -}}
|
||||
aria-current="page"
|
||||
{{- end -}}
|
||||
>Dokumentation</a
|
||||
>Benutzerhinweise</a
|
||||
>
|
||||
<a
|
||||
href="/redaktion/literatur/"
|
||||
|
||||
@@ -56,13 +56,18 @@
|
||||
<span class="">
|
||||
{{ $model.result.Agent.BiographicalData }}
|
||||
</span>
|
||||
{{- if $model.result.Agent.References }}
|
||||
<span class="inline-block bg-stone-200 px-2 mx-1 font-sans text-base rounded ">
|
||||
{{ $model.result.Agent.References }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span class="">
|
||||
{{- $arr := $model.result.Agent.ProfessionArray -}}
|
||||
{{- if $arr -}}
|
||||
{{- range $i, $p := $arr -}}
|
||||
<a
|
||||
href="/personen/?letter={{- Upper (First $model.result.Agent.Name) -}}&filter={{ Lower $p }}#{{- $model.result.Agent.Id -}}"
|
||||
class="inline-block align-middle bg-slate-200 px-2 font-sans text-sm py-0.5 rounded mx-1
|
||||
class="inline-block bg-slate-200 px-2 text-base font-sans rounded mx-1
|
||||
hover:text-slate-900 no-underline">
|
||||
{{- $p -}}
|
||||
</a>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
Die Suche durchsucht ganze Datensätze nach dem Vorkommen aller eingegebenen Suchbegriffe. Felder
|
||||
können oben einzeln aus der Suche ausgeschlossen werden. Auch partielle Treffer in Worten werden
|
||||
angezeigt. Wörter mit weniger als drei Zeichen, Sonderzeichen – auch Satzzeichen –
|
||||
sowie Groß- und Kleinschreibung werden dabei ignoriert. Mit einem Minus [-] können Begiffe
|
||||
ausgeschlossen, mit Anfühungsstrichen [""] zusammenhängende Phrasen gesucht werden
|
||||
sowie Groß- und Kleinschreibung werden dabei ignoriert. Mit einem Minus [-] können Begriffe
|
||||
ausgeschlossen, mit Anführungsstrichen [""] zusammenhängende Phrasen gesucht werden
|
||||
{{- if $extendable }}
|
||||
(für eine genaue Eingenzung von Feldern s. die →
|
||||
(für eine genaue Eingrenzung von Feldern s. die →
|
||||
<a href="?extended=true">erweiterte Suche</a>)
|
||||
{{- end -}}.
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,11 @@
|
||||
name="almstring"
|
||||
id="almstring"
|
||||
value="{{ $p }}"
|
||||
placeholder="Alm-Nummer"
|
||||
placeholder="{{- if eq $t "baende" -}}
|
||||
Alm-Nummer
|
||||
{{- else -}}
|
||||
Inhalts-Nummer
|
||||
{{- end -}}"
|
||||
class="w-full col-span-3 placeholder:italic placeholder:font-sans" />
|
||||
<button id="submitbutton" type="submit" class="col-span-2">Nachschlagen</button>
|
||||
</form>
|
||||
|
||||
@@ -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 "";
|
||||
|
||||
Reference in New Issue
Block a user