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

added alpine ajax - started conversion of the proj

Browse Source
This commit is contained in:
Simon Martens
2025-05-28 23:14:01 +02:00
parent fb8ac1b723
commit 168a733af1
24 changed files with 1412 additions and 1451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,6 +1,7 @@
pb_data/
backup/
_tmp/
import/
import/Almanach-Bilder/
Almanach-Bilder/
musenalm
node_modules

3
app/pb.go
View File

@@ -168,7 +168,8 @@ func (app *App) setWatchers(engine *templating.Engine) {
func (app *App) bindPages(engine *templating.Engine) ServeFunc {
return func(e *core.ServeEvent) error {
e.Router.GET("/assets/{path...}", apis.Static(views.StaticFS, true))
r := e.Router.GET("/assets/{path...}", apis.Static(views.StaticFS, true))
r.Bind(apis.Gzip())
// INFO: Global middleware to get the authenticated user:
e.Router.BindFunc(middleware.Authenticated(e.App))

1
dbmodels/db_data.go
View File

@@ -365,6 +365,7 @@ var MUSENALM_MIME_TYPES = []string{
"image/png",
"image/vnd.mozilla.apng",
"image/jpeg",
"image/jpg",
"image/jp2",
"image/jpx",
"image/jpm",

13
pages/almanach.go
View File

@@ -34,9 +34,14 @@ type AlmanachPage struct {
}
func (p *AlmanachPage) Setup(router *router.Router[*core.RequestEvent], app core.App, engine *templating.Engine) error {
router.GET(p.URL, func(e *core.RequestEvent) error {
router.GET(p.URL, p.GET(engine, app))
return nil
}
func (p *AlmanachPage) GET(engine *templating.Engine, app core.App) HandleFunc {
return func(e *core.RequestEvent) error {
id := e.Request.PathValue("id")
data := make(map[string]interface{})
data := make(map[string]any)
filters := NewBeitraegeFilterParameters(e)
result, err := NewAlmanachResult(app, id, filters)
if err != nil {
@@ -51,9 +56,7 @@ func (p *AlmanachPage) Setup(router *router.Router[*core.RequestEvent], app core
}
return engine.Response200(e, p.Template, data)
})
return nil
}
}
type AlmanachResult struct {

15
pages/almanach_edit.go
View File

@@ -39,8 +39,21 @@ func (p *AlmanachEditPage) Setup(router *router.Router[*core.RequestEvent], app
func (p *AlmanachEditPage) GET(engine *templating.Engine, app core.App) HandleFunc {
return func(e *core.RequestEvent) error {
id := e.Request.PathValue("id")
data := make(map[string]any)
filters := NewBeitraegeFilterParameters(e)
result, err := NewAlmanachResult(app, id, filters)
if err != nil {
engine.Response404(e, err, nil)
}
data["result"] = result
data["filters"] = filters
return engine.Response200(e, p.Template, data)
abbrs, err := pagemodels.GetAbks(app)
if err == nil {
data["abbrs"] = abbrs
}
return engine.Response200(e, p.Template, data, p.Layout)
}
}

0
scripts/build.sh Normal file → Executable file
View File

1
views/assets/js/alpine.ajax.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

136
views/assets/scripts.js
View File

@@ -1,43 +1,9 @@
var T = (r) => {
var v = (r) => {
throw TypeError(r);
};
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() {
l(this, b);
l(this, d);
u(this, d, /* @__PURE__ */ new Map());
}
setup() {
let t = htmx.findAll(k);
for (let e of t)
g(this, b, E).call(this, e);
}
hookupHTMX() {
htmx.on("htmx:load", (t) => {
this.setup();
});
}
}
d = new WeakMap(), b = new WeakSet(), E = function(t) {
if (t.getAttribute(S) === "true" || !t.hasAttribute(y))
return;
let e = "#" + t.getAttribute(y), i = c(this, d).get(e);
if (!i) {
let h = htmx.find(e);
if (h) {
let A = h.innerHTML ? new DOMParser().parseFromString(h.innerHTML, "application/xml") : h.contentDocument;
i = new XSLTProcessor(), i.importStylesheet(A), c(this, d).set(e, i);
} else
throw new Error("Unknown XSLT template: " + e);
}
let s = new DOMParser().parseFromString(t.innerHTML, "application/xml"), a = i.transformToFragment(s, document), n = new XMLSerializer().serializeToString(a);
t.outerHTML = n;
};
class F extends HTMLElement {
var f = (r, t, e) => t.has(r) || v("Cannot " + e);
var g = (r, t, e) => (f(r, t, "read from private field"), e ? e.call(r) : t.get(r)), d = (r, t, e) => t.has(r) ? v("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), c = (r, t, e, i) => (f(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e), m = (r, t, e) => (f(r, t, "access private method"), e);
class x extends HTMLElement {
constructor() {
super(), this._value = "", this.render();
}
@@ -106,13 +72,13 @@ class F extends HTMLElement {
`;
}
}
var o, x, f, L;
class U extends HTMLElement {
const u = "filter-list-list", y = "filter-list-item", T = "filter-list-input", _ = "filter-list-searchable";
var l, h, b;
class w extends HTMLElement {
constructor() {
super();
l(this, f);
l(this, o, !1);
l(this, x, "");
d(this, h);
d(this, l, !1);
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this._queryparam = "", this._startparams = null, this.render();
}
static get observedAttributes() {
@@ -125,7 +91,7 @@ class U extends HTMLElement {
return this._items;
}
connectedCallback() {
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._queryparam = this.getAttribute("data-queryparam") || "", this._queryparam, this._filterstart && u(this, o, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._queryparam = this.getAttribute("data-queryparam") || "", this._queryparam, this._filterstart && c(this, l, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
}
attributeChangedCallback(e, i, s) {
e === "data-url" && i !== s && (this._url = s, this.render()), e === "data-filterstart" && i !== s && (this._filterstart = s === "true", this.render()), e === "data-placeholder" && i !== s && (this._placeholder = s, this.render()), e === "data-queryparam" && i !== s && (this._queryparam = s, this.render());
@@ -134,14 +100,14 @@ class U extends HTMLElement {
e.target && e.target.tagName.toLowerCase() === "input" && (this._filter = e.target.value, this.renderList());
}
onGainFocus(e) {
e.target && e.target.tagName.toLowerCase() === "input" && (u(this, o, !1), this.renderList());
e.target && e.target.tagName.toLowerCase() === "input" && (c(this, l, !1), this.renderList());
}
onLoseFocus(e) {
let i = this.querySelector("input");
if (e.target && e.target === i) {
if (relatedElement = e.relatedTarget, relatedElement && this.contains(relatedElement))
return;
i.value = "", this._filter = "", this._filterstart && u(this, o, !0), this.renderList();
i.value = "", this._filter = "", this._filterstart && c(this, l, !0), this.renderList();
}
}
onEnter(e) {
@@ -154,10 +120,10 @@ class U extends HTMLElement {
mark() {
if (typeof Mark != "function")
return;
let e = this.querySelector("#" + m);
let e = this.querySelector("#" + u);
if (!e)
return;
let i = new Mark(e.querySelectorAll("." + w));
let i = new Mark(e.querySelectorAll("." + _));
this._filter && i.mark(this._filter, {
separateWordSearch: !0
});
@@ -197,7 +163,7 @@ class U extends HTMLElement {
}
getLinkText(e) {
let i = this.getSearchText(e);
return i === "" ? "" : `<span class="${w}">${i}</span>`;
return i === "" ? "" : `<span class="${_}">${i}</span>`;
}
getURL(e) {
if (this._queryparam) {
@@ -207,7 +173,7 @@ class U extends HTMLElement {
return this._url + this.getHREFEncoded(e);
}
renderList() {
let e = this.querySelector("#" + m);
let e = this.querySelector("#" + u);
e && (e.outerHTML = this.List()), this.mark();
}
render() {
@@ -219,7 +185,7 @@ class U extends HTMLElement {
`, htmx && htmx.process(this);
}
ActiveDot(e) {
return g(this, f, L).call(this, e), "";
return m(this, h, b).call(this, e), "";
}
NoItems(e) {
return e.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
@@ -232,7 +198,7 @@ class U extends HTMLElement {
<input
type="text"
placeholder="${this._placeholder}"
class="${C} w-full placeholder:italic px-2 py-0.5" />
class="${T} w-full placeholder:italic px-2 py-0.5" />
</div>
</div>
`;
@@ -247,7 +213,7 @@ class U extends HTMLElement {
e = this._items.filter((s) => i.every((a) => this.getSearchText(s).toLowerCase().includes(a.toLowerCase())));
}
return `
<div id="${m}" class="${m} pt-1 max-h-60 overflow-auto bg-stone-50 ${c(this, o) ? "hidden" : ""}">
<div id="${u}" class="${u} pt-1 max-h-60 overflow-auto bg-stone-50 ${g(this, l) ? "hidden" : ""}">
${e.map(
(i, s) => `
<a
@@ -256,8 +222,8 @@ class U extends HTMLElement {
hx-swap="outerHTML show:none"
hx-select="main"
hx-target="main"
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"' : ""}>
class="${y} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
${m(this, h, b).call(this, i) ? 'aria-current="page"' : ""}>
${this.ActiveDot(i)}
${this.getLinkText(i)}
</a>
@@ -268,13 +234,13 @@ class U extends HTMLElement {
`;
}
}
o = new WeakMap(), x = new WeakMap(), f = new WeakSet(), L = function(e) {
l = new WeakMap(), h = new WeakSet(), b = function(e) {
if (!e)
return !1;
let i = this.getHREF(e);
return i === "" ? !1 : this._queryparam && (new URLSearchParams(window.location.search).get(this._queryparam) || "") === i ? !0 : !!window.location.href.endsWith(i);
};
class D extends HTMLElement {
class E extends HTMLElement {
constructor() {
super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
}
@@ -310,7 +276,7 @@ class D extends HTMLElement {
window.scrollTo({ top: 0, behavior: "smooth" });
}
}
class z extends HTMLElement {
class A extends HTMLElement {
static get observedAttributes() {
return ["position", "timeout"];
}
@@ -411,7 +377,7 @@ class z extends HTMLElement {
}
}
}
class G extends HTMLElement {
class k extends HTMLElement {
constructor() {
super(), this.overlay = null, this._others = null, this._thisindex = -1, this._preview = null, this._description = null, this._imageURL = "", this._hideDLButton = !1;
}
@@ -519,7 +485,7 @@ class G extends HTMLElement {
this.overlay.parentNode.removeChild(this.overlay), this.overlay = null;
}
}
class K extends HTMLElement {
class S extends HTMLElement {
static get observedAttributes() {
}
constructor() {
@@ -602,7 +568,7 @@ class K extends HTMLElement {
return null;
}
}
class p extends HTMLElement {
class o extends HTMLElement {
static get observedAttributes() {
return ["data-text", "data-abbrevmap"];
}
@@ -665,7 +631,7 @@ class p extends HTMLElement {
};
}
constructor() {
super(), this._abbrevMap = p.defaultAbbrevMap;
super(), this._abbrevMap = o.defaultAbbrevMap;
}
connectedCallback() {
this.render();
@@ -675,13 +641,13 @@ class p extends HTMLElement {
}
_parseAndSetAbbrevMap(t) {
if (!t) {
this._abbrevMap = p.defaultAbbrevMap;
this._abbrevMap = o.defaultAbbrevMap;
return;
}
try {
this._abbrevMap = JSON.parse(t);
} catch {
this._abbrevMap = p.defaultAbbrevMap;
this._abbrevMap = o.defaultAbbrevMap;
}
}
setAbbrevMap(t) {
@@ -705,11 +671,11 @@ class p extends HTMLElement {
}
const a = this.findLongestAbbrevAt(t, s, e);
if (a) {
const { match: n, meaning: h } = a;
const { match: n, meaning: L } = 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}
${L}
</div>
<span class="cursor-help text-blue-900 hover:text-slate-800">
${n}
@@ -731,7 +697,7 @@ class p extends HTMLElement {
return /\s|[.,;:!?]/.test(t);
}
}
class j extends HTMLElement {
class B extends HTMLElement {
constructor() {
super();
}
@@ -749,11 +715,11 @@ class j extends HTMLElement {
}
}
}
var v;
class X extends HTMLElement {
var p;
class M extends HTMLElement {
constructor() {
super();
l(this, v, 176);
d(this, p, 176);
this._images = [];
}
connectedCallback() {
@@ -769,24 +735,24 @@ class X extends HTMLElement {
calculateShownImages() {
const e = this.getBoundingClientRect();
console.log(e);
const i = Math.floor(e.width / (c(this, v) + 10));
const i = Math.floor(e.width / (g(this, p) + 10));
for (let s = 0; s < this._images.length; s++)
s < i - 1 ? this._images[s].classList.remove("hidden") : this._images[s].classList.add("hidden");
}
}
v = new WeakMap();
customElements.define(R, j);
customElements.define(P, p);
customElements.define(M, U);
customElements.define(I, D);
customElements.define(q, z);
customElements.define(H, G);
customElements.define($, K);
customElements.define(O, F);
customElements.define(N, X);
p = new WeakMap();
const C = "filter-list", I = "scroll-button", q = "tool-tip", R = "abbrev-tooltips", P = "int-link", $ = "popup-image", H = "tab-list", N = "filter-pill", O = "image-reel";
customElements.define(P, B);
customElements.define(R, o);
customElements.define(C, w);
customElements.define(I, E);
customElements.define(q, A);
customElements.define($, k);
customElements.define(H, S);
customElements.define(N, x);
customElements.define(O, M);
export {
p as AbbreviationTooltips,
U as FilterList,
D as ScrollButton,
V as XSLTParseProcess
o as AbbreviationTooltips,
w as FilterList,
E as ScrollButton
};

1
views/layouts/default/root.gohtml
View File

@@ -21,6 +21,7 @@
{{ end }}
<script src="/assets/js/alpine.ajax.min.js" defer></script>
<script src="/assets/js/alpine.min.js" defer></script>
<script src="/assets/js/htmx.min.js" defer></script>
<script src="/assets/js/htmx-response-targets.js" defer></script>

1
views/public/js/alpine.ajax.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

31
views/routes/almanach/edit/body.gohtml
View File

@@ -0,0 +1,31 @@
{{ $model := . }}
<!-- Data:
type AlmanachResult struct {
Entry *dbmodels.Entry
Places []*dbmodels.Place
Series []*dbmodels.Series
Contents []*dbmodels.Content
Agents map[string]*dbmodels.Agent // <- Key is agent id
EntriesSeries map[string]*dbmodels.REntriesSeries // <- Key is series id
EntriesAgents []*dbmodels.REntriesAgents
ContentsAgents map[string][]*dbmodels.RContentsAgents // <- Key is content id
Types []string
HasScans bool
}
-->
<div class="flex container-normal bg-slate-100 mx-auto !pt-36 px-8">
<div class="flex-col w-full">
{{ if $model.redirect_url }}
<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950">
<i class="ri-arrow-left-s-line"></i> Zurück
</a>
{{ else }}
<a href="/" class="text-gray-700 hover:text-slate-950">
<i class="ri-arrow-left-s-line"></i> Startseite
</a>
{{ end }}
<h1 class="text-2xl self-baseline w-full my-6 font-bold text-slate-900">Almanach bearbeiten</h1>
</div>
</div>

46
views/routes/personen/components/searchbox.gohtml
View File

@@ -1,5 +1,11 @@
{{ $model := . }}
{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq
$model.filter "text") (eq $model.filter "graphik") (eq $model.filter "hrsg"))
}}
{{ $isOrg := and $model.filter (eq $model.filter "org") }}
<div class="ml-12 shrink-0 grow-0 mr-2.5">
<div class="min-w-[22.5rem] max-w-96 flex flex-row relative ml-auto">
@@ -7,20 +13,32 @@
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
</div>
<div class="pb-0 border-b-4 border-zinc-300 grow">
<input
class="px-1.5 font-serif placeholder:italic w-full"
type="search"
name="search"
value="{{ $model.search }}"
placeholder="Suchbegriff"
x-model="search"
hx-get=""
hx-trigger="input delay:1000ms, keyup[enter]"
hx-select="#searchresults"
hx-target="#searchresults"
hx-swap="outerHTML"
autocomplete="off"
{{ if $model.search }}disabled="true"{{ end }} />
<form
method="GET"
hx-boost="false"
x-target="searchresults"
role="search"
aria-label="Personensuche">
{{- if $model.filter -}}
<input type="hidden" name="filter" value="{{- $model.filter -}}" />
{{- end -}}
{{- if $model.letter -}}
<input type="hidden" name="letter" value="{{- $model.letter -}}" />
{{- end -}}
<input
value="{{ $model.search }}"
placeholder="Suchbegriff"
type="search"
name="search"
class="px-1.5 font-serif placeholder:italic w-full"
aria-label="Personensuche"
x-model="search"
autocomplete="off"
@input.debounce="$el.form.requestSubmit()"
@search="$el.form.requestSubmit()"
{{ if $model.search }}disabled="true"{{ end }} />
<button x-show="false">Suchen</button>
</form>
</div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
{{- if not $model.search -}}

4
views/routes/reihen/body.gohtml
View File

@@ -47,11 +47,11 @@
<!-- INFO: 2. Header -->
<div id="pageheading" class="headingcontainer">
<h1 class="heading">Bände nach Reihentiteln</h1>
{{ template "notifier" . }}
{{ template "notifier" $model }}
{{ if not (or .search .hidden) }}
<div class="mt-2">
{{ template "alphabet" Dict "active" .letter "letters" $model.common.Letters "search" .search }}
{{ template "alphabet" $model }}
</div>
{{ else }}
<div class="mt-2 border-b w-full"></div>

53
views/routes/reihen/components/alphabet.gohtml
View File

@@ -1,16 +1,16 @@
{{ $model := . }}
{{ if $model.letters }}
{{ if and $model.common $model.common.Letters }}
<div class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14">
<div id="alphabet" class="alphabet flex flex-row items-end text-xl">
{{ range $id, $r := .letters }}
{{ range $id, $r := $model.common.Letters }}
<a
class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
px-2 no-underline transition-all duration-75
{{ if not $model.active -}}inactive{{- end -}}"
{{ if not $model.letter -}}inactive{{- end -}}"
:class="search ? 'inactive' : 'active'"
href="?letter={{ $r }}"
{{ if eq $model.active $r }}aria-current="page"{{ end }}
{{ if eq $model.letter $r }}aria-current="page"{{ end }}
hx-indicator="body"
hx-select="main"
hx-target="main"
@@ -30,20 +30,37 @@
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
</div>
<div class="pb-0 border-b-4 border-zinc-300 grow">
<input
class="px-1.5 font-serif placeholder:italic w-full"
type="search"
name="search"
value="{{ $model.search }}"
placeholder="Almanach-Nr oder Suchbegriff"
x-model="search"
hx-get=""
hx-trigger="input changed delay=1500ms, keyup[key=='Enter']"
hx-select="#searchcontent"
hx-target="#searchcontent"
hx-swap="outerHTML"
autocomplete="off"
{{ if $model.search }}disabled="true"{{ end }} />
<form
method="GET"
hx-boost="false"
x-target="searchcontent"
role="search"
aria-label="Reihentitelsuche">
{{- if $model.letter -}}
<input type="hidden" name="letter" value="{{- $model.letter -}}" />
{{- end -}}
{{- if and $model.result $model.result.Agent -}}
<input type="hidden" name="agent" value="{{- $model.result.Agent.Id -}}" />
{{- end -}}
{{- if and $model.result $model.result.Place -}}
<input type="hidden" name="place" value="{{- $model.result.Place.Id -}}" />
{{- end -}}
{{- if $model.year -}}
<input type="hidden" name="year" value="{{- $model.year -}}" />
{{- end -}}
<input
class="px-1.5 font-serif placeholder:italic w-full"
type="search"
name="search"
value="{{ $model.search }}"
placeholder="Almanach-Nr oder Suchbegriff"
x-model="search"
@input.debounce="$el.form.requestSubmit()"
@search="$el.form.requestSubmit()"
autocomplete="off"
{{ if $model.search }}disabled="true"{{ end }} />
<button x-show="false">Suchen</button>
</form>
</div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
{{- if not $model.search -}}

171
views/transform/abbrev-tooltips.js Normal file
View File

@@ -0,0 +1,171 @@
export class AbbreviationTooltips extends HTMLElement {
static get observedAttributes() {
return ["data-text", "data-abbrevmap"];
}
static get defaultAbbrevMap() {
return {
"#": "Hinweis auf weitere Informationen in der Anmerkung.",
$: "vermutlich",
"+++": "Inhalte aus mehreren Almanachen interpoliert",
B: "Blatt",
BB: "Blätter",
C: "Corrigenda",
Diagr: "Diagramm",
G: "Graphik",
"G-Verz": "Verzeichnis der Kupfer u. ä.",
GG: "Graphiken",
Hrsg: "Herausgeber",
"I-Verz": "Inhaltsverzeichnis",
Kal: "Kalendarium",
Kr: "Karte",
MusB: "Musikbeigabe",
MusBB: "Musikbeigaben",
S: "Seite",
SS: "Seiten",
Sp: "Spiegel",
T: "Titel",
TG: "Titelgraphik, Titelportrait etc",
"TG r": "Titelgraphik, Titelportrait etc recto",
"TG v": "Titelgraphik, Titelportrait etc verso",
Tab: "Tabelle",
UG: "Umschlaggraphik",
"UG r": "Umschlaggraphik recto",
"UG v": "Umschlaggraphik verso",
VB: "Vorsatzblatt",
Vf: "Verfasser",
VrlgM: "Verlagsmitteilung",
Vrwrt: "Vorwort",
ar: "arabische Paginierung",
ar1: "erste arabische Paginierung",
ar2: "zweite arabische Paginierung",
ar3: "dritte arabische Paginierung",
ar4: "vierte arabische Paginierung",
ar5: "fünfte arabische Paginierung",
ar6: "sechste arabische Paginierung",
ar7: "siebte arabische Paginierung",
gA: "graphische Anleitung",
gT: "graphischer Titel",
gTzA: "graphische Tanzanleitung",
nT: "Nachtitel",
röm: "römische Paginierung",
röm1: "erste römische Paginierung",
röm2: "zweite römische Paginierung",
röm3: "dritte römische Paginierung",
röm4: "vierte römische Paginierung",
röm5: "fünfte römische Paginierung",
röm6: "sechste römische Paginierung",
röm7: "siebte römische Paginierung",
vT: "Vortitel",
zT: "Zwischentitel",
"§§": "Hinweis auf Mängel im Almanach (Beschädigungen, fehlende Graphiken, unvollständige Sammlungen etc) in der Anmerkung",
};
}
constructor() {
super();
this._abbrevMap = AbbreviationTooltips.defaultAbbrevMap;
}
connectedCallback() {
this.render();
}
attributeChangedCallback(name, oldVal, newVal) {
if (oldVal !== newVal) {
if (name === "data-abbrevmap") {
this._parseAndSetAbbrevMap(newVal);
}
this.render();
}
}
_parseAndSetAbbrevMap(jsonStr) {
if (!jsonStr) {
this._abbrevMap = AbbreviationTooltips.defaultAbbrevMap;
return;
}
try {
this._abbrevMap = JSON.parse(jsonStr);
} catch {
this._abbrevMap = AbbreviationTooltips.defaultAbbrevMap;
}
}
setAbbrevMap(map) {
if (typeof map === "object" && map !== null) {
this._abbrevMap = map;
this.render();
}
}
get text() {
return this.getAttribute("data-text") || "";
}
set text(value) {
this.setAttribute("data-text", value);
}
render() {
this.innerHTML = this.transformText(this.text, this._abbrevMap);
}
transformText(text, abbrevMap) {
let result = "";
let i = 0;
while (i < text.length) {
// Only match if at start of text or preceded by a boundary character
if (i > 0 && !this.isSpaceOrPunct(text[i - 1])) {
result += text[i];
i++;
continue;
}
const matchObj = this.findLongestAbbrevAt(text, i, abbrevMap);
if (matchObj) {
const { match, meaning } = matchObj;
result += `
<tool-tip position="top" class="!inline" timeout="300">
<div class="data-tip p-2 text-sm text-white bg-gray-700 rounded shadow">
${meaning}
</div>
<span class="cursor-help text-blue-900 hover:text-slate-800">
${match}
</span>
</tool-tip>
`;
i += match.length;
} else {
result += text[i];
i++;
}
}
return result;
}
findLongestAbbrevAt(text, i, abbrevMap) {
let bestKey = null;
let bestLength = 0;
for (const key of Object.keys(abbrevMap)) {
if (text.startsWith(key, i)) {
if (key.length > bestLength) {
bestKey = key;
bestLength = key.length;
}
}
}
if (bestKey) {
return { match: bestKey, meaning: abbrevMap[bestKey] };
}
return null;
}
isSpaceOrPunct(ch) {
// Adjust if you want a different set of punctuation recognized
return /\s|[.,;:!?]/.test(ch);
}
}

310
views/transform/filter-list.js Normal file
View File

@@ -0,0 +1,310 @@
const FILTER_LIST_LIST = "filter-list-list";
const FILTER_LIST_ITEM = "filter-list-item";
const FILTER_LIST_INPUT = "filter-list-input";
const FILTER_LIST_SEARCHABLE = "filter-list-searchable";
export class FilterList extends HTMLElement {
#hiddenlist = false;
constructor() {
super();
this._items = [];
this._url = "";
this._filterstart = false;
this._placeholder = "Liste filtern...";
this._queryparam = "";
this._startparams = null;
this.render();
}
static get observedAttributes() {
return ["data-url"];
}
set items(data) {
if (Array.isArray(data)) {
this._items = data;
this.render();
}
}
get items() {
return this._items;
}
connectedCallback() {
this._url = this.getAttribute("data-url") || "./";
this._filterstart = this.getAttribute("data-filterstart") === "true";
this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...";
this._queryparam = this.getAttribute("data-queryparam") || "";
if (this._queryparam) {
}
if (this._filterstart) {
this.#hiddenlist = true;
}
this.addEventListener("input", this.onInput.bind(this));
this.addEventListener("keydown", this.onEnter.bind(this));
this.addEventListener("focusin", this.onGainFocus.bind(this));
this.addEventListener("focusout", this.onLoseFocus.bind(this));
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "data-url" && oldValue !== newValue) {
this._url = newValue;
this.render();
}
if (name === "data-filterstart" && oldValue !== newValue) {
this._filterstart = newValue === "true";
this.render();
}
if (name === "data-placeholder" && oldValue !== newValue) {
this._placeholder = newValue;
this.render();
}
if (name === "data-queryparam" && oldValue !== newValue) {
this._queryparam = newValue;
this.render();
}
}
onInput(e) {
if (e.target && e.target.tagName.toLowerCase() === "input") {
this._filter = e.target.value;
this.renderList();
}
}
onGainFocus(e) {
if (e.target && e.target.tagName.toLowerCase() === "input") {
this.#hiddenlist = false;
this.renderList();
}
}
onLoseFocus(e) {
let input = this.querySelector("input");
if (e.target && e.target === input) {
relatedElement = e.relatedTarget;
if (relatedElement && this.contains(relatedElement)) {
return;
}
input.value = "";
this._filter = "";
if (this._filterstart) {
this.#hiddenlist = true;
}
this.renderList();
}
}
onEnter(e) {
if (e.target && e.target.tagName.toLowerCase() === "input" && e.key === "Enter") {
e.preventDefault();
const link = this.querySelector("a");
if (link) {
link.click();
}
}
}
mark() {
if (typeof Mark !== "function") {
return;
}
let list = this.querySelector("#" + FILTER_LIST_LIST);
if (!list) {
return;
}
let instance = new Mark(list.querySelectorAll("." + FILTER_LIST_SEARCHABLE));
if (this._filter) {
instance.mark(this._filter, {
separateWordSearch: true,
});
}
}
// INFO: allows for setting a custom HREF of the list item
// The function takes the item as parameter fn(item) and should return a string.
setHREFFunc(fn) {
this.getHREF = fn;
this.render();
}
// INFO: allows for setting a custom link text of the list item
// The function takes the item as parameter fn(item) and should return a string or
// an HTML template literal.
setLinkTextFunc(fn) {
this.getLinkText = fn;
this.render();
}
// INFO: allows for setting the text that will be filtered for.
// The function takes the item as parameter fn(item) and should return a string.
setSearchTextFunc(fn) {
this.getSearchText = fn;
this.render();
}
getHREF(item) {
if (!item) {
return "";
} else if (!item.id) {
return "";
}
return item.id;
}
getHREFEncoded(item) {
return encodeURIComponent(this.getHREF(item));
}
getSearchText(item) {
if (!item) {
return "";
} else if (!item.name) {
return "";
}
return item.name;
}
#isActive(item) {
if (!item) {
return false;
}
let href = this.getHREF(item);
if (href === "") {
return false;
}
if (this._queryparam) {
let params = new URLSearchParams(window.location.search);
let activequery = params.get(this._queryparam) || "";
if (activequery === href) {
return true;
}
}
if (!window.location.href.endsWith(href)) {
return false;
}
return true;
}
getLinkText(item) {
let text = this.getSearchText(item);
if (text === "") {
return ``;
}
return `<span class="${FILTER_LIST_SEARCHABLE}">${text}</span>`;
}
getURL(item) {
if (this._queryparam) {
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
params.set(this._queryparam, this.getHREF(item));
params.delete("page");
url.search = params.toString();
return url.toString();
}
return this._url + this.getHREFEncoded(item);
}
renderList() {
let list = this.querySelector("#" + FILTER_LIST_LIST);
if (list) {
list.outerHTML = this.List();
}
this.mark();
}
render() {
this.innerHTML = `
<div class="font-serif text-base shadow-inner border border-stone-100">
${this.Input()}
${this.List()}
</div>
`;
if (!htmx) return;
htmx.process(this);
}
ActiveDot(item) {
if (this.#isActive(item)) {
return ``;
}
return "";
}
NoItems(items) {
if (items.length === 0) {
return `<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>`;
}
return "";
}
Input() {
return `
<div class="flex w-full py-0.5 border-b border-zinc-600 bg-stone-50">
<i class="ri-arrow-right-s-line pl-2"></i>
<div class="grow">
<input
type="text"
placeholder="${this._placeholder}"
class="${FILTER_LIST_INPUT} w-full placeholder:italic px-2 py-0.5" />
</div>
</div>
`;
}
List() {
let filtereditems = this._items;
if (this._filter) {
if (!this._filterstart) {
let joins = this._filter.split(" ");
filtereditems = this._items.filter((item) => {
return joins.every((join) => {
return this.getSearchText(item).toLowerCase().includes(join.toLowerCase());
});
});
} else {
filtereditems = this._items.filter((item) => {
return this.getSearchText(item).toLowerCase().startsWith(this._filter.toLowerCase());
});
}
}
return `
<div id="${FILTER_LIST_LIST}" class="${FILTER_LIST_LIST} pt-1 max-h-60 overflow-auto bg-stone-50 ${this.#hiddenlist ? "hidden" : ""}">
${filtereditems
.map(
(item, index) => `
<a
href="${this.getURL(item)}"
hx-indicator="body"
hx-swap="outerHTML show:none"
hx-select="main"
hx-target="main"
class="${FILTER_LIST_ITEM} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${
index % 2 === 0 ? "bg-stone-100" : "bg-stone-50"
}"
${this.#isActive(item) ? 'aria-current="page"' : ""}>
${this.ActiveDot(item)}
${this.getLinkText(item)}
</a>
`,
)
.join("")}
${this.NoItems(filtereditems)}
</div>
`;
}
}

108
views/transform/filter-pill.js Normal file
View File

@@ -0,0 +1,108 @@
export class FilterPill extends HTMLElement {
constructor() {
super();
this._value = "";
this.render();
}
static get observedAttributes() {
return ["data-text", "data-queryparam", "data-value"];
}
set value(value) {
this.setAttribute("data-value", value);
}
get value() {
return this.getAttribute("data-value") || "";
}
set text(value) {
this.setAttribute("data-text", value);
}
get text() {
return this.getAttribute("data-text") || "";
}
set queryparam(value) {
this.setAttribute("data-queryparam", value);
}
get queryparam() {
return this.getAttribute("data-queryparam") || "";
}
connectedCallback() {
this._filter = this.text;
this._queryparam = this.queryparam;
this.render();
htmx.process(this);
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === "data-text") {
this._filter = newValue;
}
if (name === "data-queryparam") {
this._queryparam = newValue;
}
if (name === "data-value") {
this._value = newValue;
}
this.render();
}
}
getURL() {
if (this._queryparam) {
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
params.delete(this._queryparam);
params.delete("page");
url.search = params.toString();
return url.toString();
}
return "#";
}
render() {
this.innerHTML = `
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-indicator="body" hx-swap="outerHTML show:window:top">
<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:saturate-50 px-2.5">
${this.renderIcon()}
<div class="flex flex-row filter-pill-label-value !items-baseline text-slate-700">
<div class="filter-pill-label font-bold mr-1.5 align-baseline">${this.text}</div>
${this.renderValue()}
</div>
</div>
</a>
`;
}
renderIcon() {
const isBool = this.value === "true" || this.value === "false";
if (!isBool) {
return `<div
href="${this.getURL()}"
class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
<i class="ri-arrow-left-s-line"></i>
</div>
`;
}
return `
<div href="${this.getURL()}" class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
<i class="ri-close-circle-line"></i>
</div>
`;
}
renderValue() {
const isBool = this.value === "true" || this.value === "false";
if (isBool) return ``;
return `
<div class="filter-pill-value">${this.value}</div>
`;
}
}

36
views/transform/image-reel.js Normal file
View File

@@ -0,0 +1,36 @@
export class ImageReel extends HTMLElement {
#minWidth = 176;
constructor() {
super();
this._images = [];
}
connectedCallback() {
this._images = Array.from(this.querySelectorAll(".primages"));
this.calculateShownImages();
const rObs = new ResizeObserver((__, _) => {
this.calculateShownImages();
});
this._resizeObserver = rObs;
rObs.observe(this);
}
disconnectedCallback() {
this._resizeObserver.unobserve(this);
}
calculateShownImages() {
const c = this.getBoundingClientRect();
console.log(c);
const fits = Math.floor(c.width / (this.#minWidth + 10));
for (let i = 0; i < this._images.length; i++) {
if (i < fits - 1) {
this._images[i].classList.remove("hidden");
} else {
this._images[i].classList.add("hidden");
}
}
}
}

27
views/transform/int-link.js Normal file
View File

@@ -0,0 +1,27 @@
export class IntLink extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
// Basic styling to mimic a link.
this.style.cursor = "pointer";
this.addEventListener("click", this.handleClick);
}
disconnectedCallback() {
this.removeEventListener("click", this.handleClick);
}
handleClick(event) {
const selector = this.getAttribute("data-jump");
if (selector) {
const target = document.querySelector(selector);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
} else {
console.warn(`No element found for selector: ${selector}`);
}
}
}
}

1335
views/transform/main.js
View File

File diff suppressed because it is too large Load Diff

204
views/transform/popup-image.js Normal file
View File

@@ -0,0 +1,204 @@
export class PopupImage extends HTMLElement {
constructor() {
super();
this.overlay = null;
this._others = null;
this._thisindex = -1;
this._preview = null;
this._description = null;
this._imageURL = "";
this._hideDLButton = false;
}
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") || false;
this._preview = this.querySelector("img");
this._description = this.querySelector(".image-description");
if (this._preview) {
this._preview.addEventListener("click", () => {
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() {
// Optionally remove the overlay if the element is removed from the DOM
if (this.overlay && this.overlay.parentNode) {
this.overlay.parentNode.removeChild(this.overlay);
}
}
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(
"fixed",
"inset-0",
"z-50",
"bg-black/70",
"flex",
"items-center",
"justify-center",
"p-4",
);
this.overlay.innerHTML = `
<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" id="closebutton">
<i class="ri-close-fill text-4xl"></i>
</button>
${this.downloadButton()}
${this.nextButton()}
${this.prevButton()}
</div>
<img
src="${this._imageURL}"
alt="Popup Image"
class="full max-h-[80vh] max-w-[80vw] object-contain block relative ${this.descriptionImgClass()}"
/>
${this.description()}
</div>
</div>
`;
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);
}
descriptionImgClass() {
if (!this.description) {
return "0";
}
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 "";
}
return `
<div class="font-serif text-left description-content mt-3 text-slate-900 ">
<div class="max-w-[80ch] hyphens-auto px-6 py-2 bg-stone-50 shadow-lg">
${this._description.innerHTML}
</div>
</div>
`;
}
downloadButton() {
if (this._hideDLButton) {
return "";
}
return `
<tool-tip position="right">
<a href="${this._imageURL}" target="_blank" class="text-white no-underline hover:text-gray-300"><i class="ri-file-download-line"></i></a>
<div class="data-tip">Bild herunterladen</div>
</tool-tip>
`;
}
hideOverlay() {
this.overlay.parentNode.removeChild(this.overlay);
this.overlay = null;
}
}

54
views/transform/scroll-button.js Normal file
View File

@@ -0,0 +1,54 @@
export class ScrollButton extends HTMLElement {
constructor() {
super();
this.handleScroll = this.handleScroll.bind(this);
this.scrollToTop = this.scrollToTop.bind(this);
}
connectedCallback() {
// Insert Tailwind-styled button in light DOM
this.innerHTML = `
<button
class="
scroll-to-top
fixed bottom-5 right-5
hidden
bg-gray-800 text-white
p-2
rounded-md
cursor-pointer
text-2xl
hover:opacity-80
transition-opacity
border-0
"
aria-label="Scroll to top"
>
<i class="ri-arrow-up-double-line"></i>
</button>
`;
this._button = this.querySelector(".scroll-to-top");
window.addEventListener("scroll", this.handleScroll);
this._button.addEventListener("click", this.scrollToTop);
}
disconnectedCallback() {
window.removeEventListener("scroll", this.handleScroll);
this._button.removeEventListener("click", this.scrollToTop);
}
handleScroll() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
if (scrollTop > 300) {
this._button.classList.remove("hidden");
} else {
this._button.classList.add("hidden");
}
}
scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
}

172
views/transform/tab-list.js Normal file
View File

@@ -0,0 +1,172 @@
export class TabList extends HTMLElement {
static get observedAttributes() {}
constructor() {
super();
this._showall = false;
this.shown = -1;
this._headings = [];
this._contents = [];
}
connectedCallback() {
this._headings = Array.from(this.querySelectorAll(".tab-list-head"));
this._contents = Array.from(this.querySelectorAll(".tab-list-panel"));
this.hookupEvtHandlers();
this.hideDependent();
if (this._headings.length === 1) {
this.expand(0);
}
}
expand(index) {
if (index < 0 || index >= this._headings.length) {
return;
}
this.shown = index;
this._contents.forEach((content, i) => {
if (i === index) {
content.classList.remove("hidden");
this._headings[i].setAttribute("aria-pressed", "true");
} else {
content.classList.add("hidden");
this._headings[i].setAttribute("aria-pressed", "false");
}
});
}
hookupEvtHandlers() {
for (let heading of this._headings) {
heading.addEventListener("click", this.handleTabClick.bind(this));
heading.classList.add("cursor-pointer");
heading.classList.add("select-none");
heading.setAttribute("role", "button");
heading.setAttribute("aria-pressed", "false");
heading.setAttribute("tabindex", "0");
}
for (let content of this._contents) {
content.classList.add("hidden");
}
}
restore() {
for (let heading of this._headings) {
heading.classList.add("cursor-pointer");
heading.classList.add("select-none");
heading.setAttribute("role", "button");
heading.setAttribute("aria-pressed", "false");
heading.setAttribute("tabindex", "0");
heading.classList.remove("pointer-events-none");
heading.classList.remove("!text-slate-900");
}
for (let content of this._contents) {
content.classList.add("hidden");
}
}
disable() {
for (let heading of this._headings) {
heading.classList.remove("cursor-pointer");
heading.classList.remove("select-none");
heading.removeAttribute("role");
heading.removeAttribute("aria-pressed");
heading.removeAttribute("tabindex");
heading.classList.add("pointer-events-none");
heading.classList.add("!text-slate-900");
}
}
showAll() {
this._showall = true;
this.shown = -1;
this.disable();
this._contents.forEach((content, i) => {
content.classList.remove("hidden");
let heading = this._headings[i];
let showopened = heading.querySelectorAll(".show-opened");
for (let e of showopened) {
e.classList.add("hidden");
}
let showclosed = heading.querySelectorAll(".show-closed");
for (let e of showclosed) {
e.classList.add("hidden");
}
});
}
default() {
this._showall = false;
this.restore();
this.hideDependent();
}
hideDependent() {
if (this.shown < 0) {
for (const el of this._headings) {
this._hideAllDep(el, false);
}
} else {
this._headings.forEach((el, i) => {
this._hideAllDep(el, i === this.shown);
});
}
}
_hideAllDep(element, opened) {
const el = element.querySelectorAll(".show-closed");
for (let e of el) {
if (opened) {
e.classList.add("hidden");
} else {
e.classList.remove("hidden");
}
}
const oel = Array.from(element.querySelectorAll(".show-opened"));
for (let e of oel) {
if (opened) {
e.classList.remove("hidden");
} else {
e.classList.add("hidden");
}
}
}
handleTabClick(event) {
if (!event.target) {
console.warn("Invalid event target");
return;
}
const parent = this.findParentWithClass(event.target, "tab-list-head");
if (!parent) {
console.warn("No parent found with class 'tab-list-head'");
return;
}
const index = this._headings.indexOf(parent);
if (index === this.shown) {
this._contents[index].classList.toggle("hidden");
this._headings[index].setAttribute("aria-pressed", "false");
this.shown = -1;
} else {
this.expand(index);
}
this.hideDependent();
}
findParentWithClass(element, className) {
while (element) {
if (element.classList && element.classList.contains(className)) {
return element;
}
element = element.parentElement;
}
return null;
}
}

138
views/transform/tool-tip.js Normal file
View File

@@ -0,0 +1,138 @@
export class ToolTip extends HTMLElement {
static get observedAttributes() {
return ["position", "timeout"];
}
constructor() {
super();
this._tooltipBox = null;
this._timeout = 200;
this._hideTimeout = null;
this._hiddenTimeout = null;
}
connectedCallback() {
this.classList.add("relative", "block", "leading-none", "[&>*]:leading-normal");
const dataTipElem = this.querySelector(".data-tip");
const tipContent = dataTipElem ? dataTipElem.innerHTML : "Tooltip";
if (dataTipElem) {
dataTipElem.classList.add("hidden");
}
this._tooltipBox = document.createElement("div");
this._tooltipBox.innerHTML = tipContent;
this._tooltipBox.className = [
"opacity-0",
"hidden",
"absolute",
"px-2",
"py-1",
"text-sm",
"text-white",
"bg-gray-900",
"rounded",
"shadow",
"z-10",
"whitespace-nowrap",
"transition-all",
"duration-200",
"font-sans",
].join(" ");
this.appendChild(this._tooltipBox);
this._updatePosition();
this.addEventListener("mouseenter", () => this._showTooltip());
this.addEventListener("mouseleave", () => this._hideTooltip());
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "position" && this._tooltipBox) {
this._updatePosition();
}
if (name === "timeout" && newValue) {
this._timeout = parseInt(newValue) || 200;
}
}
_showTooltip() {
clearTimeout(this._hideTimeout);
clearTimeout(this._hiddenTimeout);
this._tooltipBox.classList.remove("hidden");
setTimeout(() => {
this._tooltipBox.classList.remove("opacity-0");
this._tooltipBox.classList.add("opacity-100");
}, 16);
}
_hideTooltip() {
this._hideTimeout = setTimeout(() => {
this._tooltipBox.classList.remove("opacity-100");
this._tooltipBox.classList.add("opacity-0");
this._hiddenTimeout = setTimeout(() => {
this._tooltipBox.classList.add("hidden");
}, this._timeout + 100);
}, this._timeout);
}
_updatePosition() {
this._tooltipBox.classList.remove(
"bottom-full",
"left-1/2",
"-translate-x-1/2",
"mb-2", // top
"top-full",
"mt-2", // bottom
"right-full",
"-translate-y-1/2",
"mr-2",
"top-1/2", // left
"left-full",
"ml-2", // right
);
const pos = this.getAttribute("position") || "top";
switch (pos) {
case "bottom":
this._tooltipBox.classList.add(
"top-full",
"left-1/2",
"transform",
"-translate-x-1/2",
"mt-0.5",
);
break;
case "left":
this._tooltipBox.classList.add(
"right-full",
"top-1/2",
"transform",
"-translate-y-1/2",
"mr-0.5",
);
break;
case "right":
this._tooltipBox.classList.add(
"left-full",
"top-1/2",
"transform",
"-translate-y-1/2",
"ml-0.5",
);
break;
case "top":
default:
// top as default
this._tooltipBox.classList.add(
"bottom-full",
"left-1/2",
"transform",
"-translate-x-1/2",
"mb-0.5",
);
}
}
}