added alpine ajax - started conversion of the proj

views/transform/abbrev-tooltips.js

@@ -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);
+	}
+}

views/transform/filter-list.js

@@ -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>
+				`;
+	}
+}

views/transform/filter-pill.js

@@ -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>
+		`;
+	}
+}

views/transform/image-reel.js

@@ -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");
+			}
+		}
+	}
+}

views/transform/int-link.js

@@ -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}`);
+			}
+		}
+	}
+}

views/transform/popup-image.js

@@ -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;
+	}
+}

views/transform/scroll-button.js

@@ -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" });
+	}
+}

views/transform/tab-list.js

@@ -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;
+	}
+}

views/transform/tool-tip.js

@@ -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",
+				);
+		}
+	}
+}