{
- list.style.rowGap = active ? "0.75rem" : "";
+ list.style.rowGap = active ? "0.5rem" : "";
list.style.paddingTop = active ? "0.25rem" : "";
list.style.paddingBottom = active ? "0.25rem" : "";
};
@@ -317,6 +336,51 @@
}
};
+ const deleteContent = (item, dialog) => {
+ if (!item) {
+ return;
+ }
+ if (item.dataset.contentTemp === "true") {
+ dialog?.close();
+ removeItem(item);
+ return;
+ }
+ const contentId = item.dataset.contentId || "";
+ if (!contentId || !csrfToken) {
+ return;
+ }
+ if (window.htmx?.ajax) {
+ window.htmx.ajax("POST", deleteEndpoint, {
+ target: item,
+ swap: "outerHTML",
+ values: {
+ csrf_token: csrfToken,
+ content_id: contentId,
+ },
+ });
+ dialog?.close();
+ return;
+ }
+ const payload = new URLSearchParams();
+ payload.set("csrf_token", csrfToken);
+ payload.set("content_id", contentId);
+ fetch(deleteEndpoint, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ "HX-Request": "true",
+ },
+ body: payload.toString(),
+ })
+ .then(() => {
+ removeItem(item);
+ })
+ .catch(() => null)
+ .finally(() => {
+ dialog?.close();
+ });
+ };
+
const performOrderSync = () => {
if (!list || !orderEndpoint || !csrfToken || isOrderSyncing) {
pendingOrderSync = true;
@@ -442,10 +506,16 @@
item.dataset.init = "true";
const editButton = item.querySelector("[data-role='content-edit-button']");
+ const deleteButtonView = item.querySelector("[data-role='content-delete-view']");
+ const deleteDialogView = item.querySelector("[data-role='content-delete-dialog-view']");
+ const deleteConfirmView = item.querySelector("[data-role='content-delete-confirm-view']");
+ const deleteCancelView = item.querySelector("[data-role='content-delete-cancel-view']");
const view = item.querySelector("[data-role='content-view']");
const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
+ const collapseTooltip = item.querySelector("[data-role='content-collapse-tooltip']");
const collapsedSummary = item.querySelector("[data-role='content-collapsed-summary']");
+ const headerTitle = item.querySelector("[data-role='content-header-title']");
const viewBody = item.querySelector("[data-role='content-view-body']");
const header = item.querySelector("[data-content-header='true']");
@@ -457,6 +527,9 @@
item.classList.toggle("data-collapsed", collapsed);
viewBody.classList.toggle("hidden", collapsed);
collapsedSummary.classList.toggle("hidden", !collapsed);
+ if (headerTitle) {
+ headerTitle.classList.toggle("hidden", collapsed);
+ }
if (header) {
header.classList.toggle("bg-stone-100", collapsed);
header.classList.toggle("bg-stone-200", !collapsed);
@@ -465,6 +538,9 @@
collapseButton.setAttribute("aria-expanded", (!collapsed).toString());
collapseButton.setAttribute("aria-label", collapsed ? "Beitrag ausklappen" : "Beitrag einklappen");
}
+ if (collapseTooltip) {
+ collapseTooltip.textContent = collapsed ? "Ausklappen" : "Einklappen";
+ }
if (collapseIcon) {
collapseIcon.classList.toggle("ri-arrow-up-s-line", !collapsed);
collapseIcon.classList.toggle("ri-arrow-down-s-line", collapsed);
@@ -512,6 +588,32 @@
});
}
+ if (deleteButtonView && deleteDialogView) {
+ deleteButtonView.addEventListener("click", () => {
+ if (deleteDialogView.showModal) {
+ deleteDialogView.showModal();
+ } else {
+ deleteDialogView.setAttribute("open", "true");
+ }
+ });
+ }
+
+ if (deleteCancelView && deleteDialogView) {
+ deleteCancelView.addEventListener("click", () => {
+ deleteDialogView.close();
+ });
+ deleteDialogView.addEventListener("cancel", (event) => {
+ event.preventDefault();
+ deleteDialogView.close();
+ });
+ }
+
+ if (deleteConfirmView) {
+ deleteConfirmView.addEventListener("click", () => {
+ deleteContent(item, deleteDialogView);
+ });
+ }
+
const pendingEdit = item.dataset.pendingEdit === "true";
if (pendingEdit && item.querySelector("[data-role='content-edit']")) {
item.dataset.pendingEdit = "";
@@ -580,29 +682,7 @@
if (deleteConfirm) {
deleteConfirm.addEventListener("click", () => {
- if (item.dataset.contentTemp === "true") {
- deleteDialog?.close();
- removeItem(item);
- return;
- }
- const payload = new URLSearchParams();
- payload.set("csrf_token", csrfToken);
- payload.set("content_id", item.dataset.contentId || "");
- fetch(deleteEndpoint, {
- method: "POST",
- headers: {
- "Content-Type": "application/x-www-form-urlencoded",
- },
- body: payload.toString(),
- })
- .then((response) => {
- if (response.redirected) {
- window.location.assign(response.url);
- } else {
- window.location.reload();
- }
- })
- .catch(() => null);
+ deleteContent(item, deleteDialog);
});
}
@@ -646,8 +726,10 @@
}
const viewBody = item.querySelector("[data-role='content-view-body']");
const collapsedSummary = item.querySelector("[data-role='content-collapsed-summary']");
+ const headerTitle = item.querySelector("[data-role='content-header-title']");
const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
+ const collapseTooltip = item.querySelector("[data-role='content-collapse-tooltip']");
const header = item.querySelector("[data-content-header='true']");
if (!viewBody || !collapsedSummary) {
return;
@@ -656,6 +738,9 @@
item.classList.toggle("data-collapsed", collapsed);
viewBody.classList.toggle("hidden", collapsed);
collapsedSummary.classList.toggle("hidden", !collapsed);
+ if (headerTitle) {
+ headerTitle.classList.toggle("hidden", collapsed);
+ }
if (header) {
header.classList.toggle("bg-stone-100", collapsed);
header.classList.toggle("bg-stone-200", !collapsed);
@@ -664,6 +749,9 @@
collapseButton.setAttribute("aria-expanded", (!collapsed).toString());
collapseButton.setAttribute("aria-label", collapsed ? "Beitrag ausklappen" : "Beitrag einklappen");
}
+ if (collapseTooltip) {
+ collapseTooltip.textContent = collapsed ? "Ausklappen" : "Einklappen";
+ }
if (collapseIcon) {
collapseIcon.classList.toggle("ri-arrow-up-s-line", !collapsed);
collapseIcon.classList.toggle("ri-arrow-down-s-line", collapsed);
@@ -765,7 +853,7 @@
draggedItem = item;
item.dataset.dragging = "true";
draggedItem.classList.add("opacity-60");
- list.style.rowGap = "0.75rem";
+ list.style.rowGap = "0.5rem";
list.style.paddingTop = "0.25rem";
list.style.paddingBottom = "0.25rem";
removeGaps();
diff --git a/views/routes/components/_content_item.gohtml b/views/routes/components/_content_item.gohtml
index cfa036e..2712009 100644
--- a/views/routes/components/_content_item.gohtml
+++ b/views/routes/components/_content_item.gohtml
@@ -19,67 +19,108 @@
{{- $editContainerID := printf "content-%s-edit-container" $contentID -}}
-
-
-
-
-
+
+
+
+
+
+ Einklappen
+
+
-
-
+
+ Nach oben verschieben
+
+
+
+ Nach unten verschieben
+
+
{{- if $content.MusenalmType -}}
-
+
{{- range $i, $t := $content.MusenalmType -}}
{{- $t -}}
{{- end -}}
{{- end -}}
-
+
{{- if $content.Extent -}}
- S. {{- $content.Extent -}}
+ S. {{- $content.Extent -}}
{{- end -}}
{{- if $content.PreferredTitle -}}
- {{- $content.PreferredTitle -}}
+ {{- $content.PreferredTitle -}}
{{- else if $content.TitleStmt -}}
- {{- $content.TitleStmt -}}
+ {{- $content.TitleStmt -}}
+ {{- end -}}
+
+
+ {{- if $content.Extent -}}
+ S. {{- $content.Extent -}}
+ {{- end -}}
+ {{- if $content.PreferredTitle -}}
+ {{- $content.PreferredTitle -}}
+ {{- else if $content.TitleStmt -}}
+ {{- $content.TitleStmt -}}
{{- end -}}
+
{{- if eq $content.EditState "Edited" -}}Erfasst{{- else if eq $content.EditState "Review" -}}Überprüfen{{- else if eq $content.EditState "ToDo" -}}Zu erledigen{{- else if eq $content.EditState "Seen" -}}Autopsiert{{- else -}}Unbekannt{{- end -}}
-
+
+ Bearbeiten
+
+
+
+ Löschen
+
+
- {{- if $content.Extent -}}
-
Seite
-
{{- $content.Extent -}}
- {{- end -}}
- {{- if $content.TitleStmt -}}
-
Titel
-
{{- $content.TitleStmt -}}
- {{- end -}}
{{- if $content.IncipitStmt -}}
Incipit
{{ $content.IncipitStmt }}…
diff --git a/views/transform/form.css b/views/transform/form.css
index c42baae..8eb9d12 100644
--- a/views/transform/form.css
+++ b/views/transform/form.css
@@ -117,6 +117,15 @@
@apply italic;
}
+ .extent-inline textarea {
+ field-sizing: content;
+ resize: none;
+ max-height: 10rem;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ white-space: pre-wrap;
+ }
+
.dbform .submitbutton {
@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
}
diff --git a/views/transform/main.js b/views/transform/main.js
index 74fba15..ca17a60 100644
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -218,6 +218,9 @@ function TextareaAutoResize(textarea) {
console.log("Not a textarea element");
return;
}
+ if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+ return;
+ }
// Skip if not visible
if (textarea.offsetParent === null) {
@@ -263,6 +266,9 @@ function HookupTextareaAutoResize(textarea) {
console.warn("HookupTextareaAutoResize: Provided element is not a textarea.");
return;
}
+ if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+ return;
+ }
// If browser supports field-sizing, CSS handles it
if (supportsFieldSizing()) {
@@ -346,6 +352,9 @@ function FormLoad(form) {
// Attach resize handler to all textareas
for (const textarea of textareas) {
+ if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+ continue;
+ }
console.log("Attaching input listener to:", textarea.name || textarea.id);
textarea.addEventListener("input", function () {
console.log("Input event on textarea:", this.name || this.id);
@@ -357,6 +366,9 @@ function FormLoad(form) {
setTimeout(() => {
console.log("Running initial textarea resize on", textareas.length, "textareas");
for (const textarea of textareas) {
+ if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+ continue;
+ }
TextareaAutoResize(textarea);
}
}, 200);
@@ -382,6 +394,9 @@ function FormLoad(form) {
const textareasInTarget = target.matches("textarea") ? [target] : Array.from(target.querySelectorAll("textarea"));
for (const textarea of textareasInTarget) {
+ if (textarea.dataset.noAutoresize === "true" || textarea.classList.contains("no-autoresize")) {
+ continue;
+ }
// Only resize if now visible
if (textarea.offsetParent !== null) {
TextareaAutoResize(textarea);
diff --git a/views/transform/tool-tip.js b/views/transform/tool-tip.js
index d04cebb..0572869 100644
--- a/views/transform/tool-tip.js
+++ b/views/transform/tool-tip.js
@@ -9,15 +9,17 @@ export class ToolTip extends HTMLElement {
this._timeout = 200;
this._hideTimeout = null;
this._hiddenTimeout = null;
+ this._dataTipElem = null;
+ this._observer = null;
}
connectedCallback() {
this.classList.add("relative", "block", "leading-none", "[&>*]:leading-normal");
- const dataTipElem = this.querySelector(".data-tip");
- const tipContent = dataTipElem ? dataTipElem.innerHTML : "Tooltip";
+ this._dataTipElem = this.querySelector(".data-tip");
+ const tipContent = this._dataTipElem ? this._dataTipElem.innerHTML : "Tooltip";
- if (dataTipElem) {
- dataTipElem.classList.add("hidden");
+ if (this._dataTipElem) {
+ this._dataTipElem.classList.add("hidden");
}
this._tooltipBox = document.createElement("div");
@@ -46,6 +48,19 @@ export class ToolTip extends HTMLElement {
this.addEventListener("mouseenter", () => this._showTooltip());
this.addEventListener("mouseleave", () => this._hideTooltip());
+
+ if (this._dataTipElem) {
+ this._observer = new MutationObserver(() => {
+ if (this._tooltipBox) {
+ this._tooltipBox.innerHTML = this._dataTipElem.innerHTML;
+ }
+ });
+ this._observer.observe(this._dataTipElem, {
+ childList: true,
+ characterData: true,
+ subtree: true,
+ });
+ }
}
attributeChangedCallback(name, oldValue, newValue) {
@@ -57,6 +72,12 @@ export class ToolTip extends HTMLElement {
}
}
+ disconnectedCallback() {
+ if (this._observer) {
+ this._observer.disconnect();
+ }
+ }
+
_showTooltip() {
clearTimeout(this._hideTimeout);
clearTimeout(this._hiddenTimeout);