MediaWiki:ChapterSlidesAlt.js - Revision history

HMHTEST at 15:18, 16 September 2025

2025-09-16T15:18:44Z

← Older revision		Revision as of 17:18, 16 September 2025
Line 97:		Line 97:

	// MediaInfo laden		// MediaInfo laden
	loadMediaInfoBox(~~infoBox~~, imageId);		loadMediaInfoBox(boxNumber, imageId);

	counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);		counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);
Line 113:		Line 113:
	// MediaInfo-Funktion (für feste Box)		// MediaInfo-Funktion (für feste Box)
	// ===============================		// ===============================
	function loadMediaInfoBox(~~infoBox~~, filename) {		function loadMediaInfoBox(target, filename) {
	infoBox.~~text~~("Loading ...");		const infoBox = document.getElementById('mediainfo' + target);
			if (!infoBox) return;
			infoBox.textContent = "Loading ...";

	~~fetch~~('/index.php?title=File:' + encodeURIComponent(~~filename~~) + '&action=raw')		// Sicherstellen, dass wir die File-Seite abrufen und .jpg am Ende haben
	~~.then(resp => resp.text())~~		const filePage = filename.endsWith('.jpg') ? filename : filename + '.jpg';
	~~.then(text => {~~		const url = '/index.php?title=File:' + encodeURIComponent(filePage) + '&action=raw';
	~~const match = text.match(/\{\{MediaInfo([\s\S]*?)\}\}/)~~;
	~~if (!match) {~~
	~~infoBox.text("No Data found.");~~
	~~return;~~
	}

	const ~~block~~ = match[1];		fetch(url)
	~~const fields~~ = ~~["title","chapter","illustration",~~"~~illustrator~~"~~,"year","tags"]~~;		.then(resp => resp.text())
	~~let htmlList = "<ul style='margin:0; padding-left:1em; list-style:none;'>"~~;		.then(text => {
			// Nur {{MediaInfo ... }} Block extrahieren, vorherigen Text ignorieren
			const match = text.match(/\{\{MediaInfo([\s\S]*?)\}\}/);
			if (!match) {
			infoBox.textContent = "No Data found.";
			return;
			}

	fields.forEach(field => {		const block = match[1];
	const m = block.match(new RegExp("\\\|\\s" + field + "\\s=([^\\n]*)"));
	if (m) {		const fields = ["title","chapter","illustration","illustrator","year","tags"];
	const label = field.charAt(0).toUpperCase() + field.slice(1);		let htmlList = "<ul style='margin:0; padding-left:1em; list-style:none;'>";
	htmlList += `<li><b>${label}:</b> ${m[1].trim()}</li>`;
	}		fields.forEach(field => {
	});		const m = block.match(new RegExp("\\\|\\s" + field + "\\s=([^\\n]*)"));
			if (m) {
			const label = field.charAt(0).toUpperCase() + field.slice(1);
			htmlList += `<li><b>${label}:</b> ${m[1].trim()}</li>`;
			}
			});

	htmlList += "</ul>";		htmlList += "</ul>";
	infoBox.~~html(~~htmlList);		infoBox.innerHTML = htmlList;

	// ~~Optionales Styling~~		// Optional: Box stylen
	infoBox.~~css({~~		infoBox.style.backgroundColor = "#f9f9f9";
	~~"background-color":~~ "#f9f9f9",		infoBox.style.border = "1px solid #ccc";
	"border": "1px solid #ccc",		infoBox.style.padding = "0.5em 1em";
	"padding": "0.5em 1em",		infoBox.style.marginTop = "0.5em";
	~~"margin-top":~~ "0.5em",		infoBox.style.borderRadius = "4px";
	~~"border-radius":~~ "4px",		infoBox.style.fontSize = "0.9em";
	~~"font-size":~~ "0.9em"		})
			.catch(err => {
			console.error(err);
			infoBox.textContent = "Error";
	});		});
	})
	~~.catch(err => {~~
	~~console.error(err);~~
	~~infoBox.text("Error");~~
	~~});~~
	}		}
	});		}); // <-- Wichtige Klammer zum Schließen von $(function() { ... })

HMHTEST at 15:09, 16 September 2025

2025-09-16T15:09:46Z

@@ Line 59: / Line 59: @@
      const img = $("#slide" + boxNumber);
      const counter = $("#counter" + boxNumber);
      const slideArray = slidesPerBox[illustrator] || [];
@@ Line 65: / Line 66: @@
        currentIndex[boxNumber] = 0;
        counter.text("0/0");
-       img.off("click"); // Klick entfernen, falls kein Bild
+       img.off("click"); // Klick entfernen
      } else {
        showSlide(boxNumber, 0);
@@ Line 77: / Line 79: @@
      const img = $("#slide" + boxNumber);
      const counter = $("#counter" + boxNumber);
      if (!slideArray || !slideArray.length) return;
@@ Line 85: / Line 88: @@
      img.attr("src", "/index.php/Special:Redirect/file/" + imageId + ".jpg")
         .attr("alt", imageId)
-        .removeAttr("title"); // Titel ausblenden, nur optional
+        .removeAttr("title"); // Tooltip ausblenden
      // Klick öffnet File: Seite in neuem Tab
@@ Line 92: / Line 95: @@
        window.open(fileUrl, "_blank");
      });
      counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);
@@ Line 102: / Line 108: @@
    function prevSlide(boxNumber) {
      showSlide(boxNumber, currentIndex[boxNumber] - 1);
+   }
 });

HMHTEST at 15:07, 16 September 2025

2025-09-16T15:07:12Z

← Older revision		Revision as of 17:07, 16 September 2025
Line 65:		Line 65:
	currentIndex[boxNumber] = 0;		currentIndex[boxNumber] = 0;
	counter.text("0/0");		counter.text("0/0");
			img.off("click"); // Klick entfernen, falls kein Bild
	} else {		} else {
	showSlide(boxNumber, 0);		showSlide(boxNumber, 0);
Line 81:		Line 82:
	currentIndex[boxNumber] = (index + slideArray.length) % slideArray.length;		currentIndex[boxNumber] = (index + slideArray.length) % slideArray.length;
	const imageId = slideArray[currentIndex[boxNumber]];		const imageId = slideArray[currentIndex[boxNumber]];

	img.attr("src", "/index.php/Special:Redirect/file/" + imageId + ".jpg")		img.attr("src", "/index.php/Special:Redirect/file/" + imageId + ".jpg")
	.attr("alt", imageId)		.attr("alt", imageId)
	.~~attr~~("title", imageId);		.removeAttr("title"); // Titel ausblenden, nur optional

			// Klick öffnet File: Seite in neuem Tab
			img.off("click").on("click", function() {
			const fileUrl = "/File:" + imageId + ".jpg";
			window.open(fileUrl, "_blank");
			});

	counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);		counter.text((currentIndex[boxNumber]+1) + "/" + slideArray.length);
	}		}

HMHTEST at 20:55, 2 September 2025

2025-09-02T20:55:51Z

Show changes

HMHTEST at 20:49, 2 September 2025

2025-09-02T20:49:22Z

← Older revision		Revision as of 22:49, 2 September 2025
Line 1:		Line 1:
	// ALTERNATIV		// ALTERNATIV mit versteckter Tabelle

	const illustrators = [		const illustrators = [
Line 8:		Line 8:
	let currentIndex = {};		let currentIndex = {};

			// Initialisierung
	illustrators.forEach(name => {		illustrators.forEach(name => {
	slides[name] = [];		slides[name] = [];
Line 13:		Line 14:
	});		});

			// Funktion zum Laden der Galerien nach Kapitel
	function loadSlideshowsByChapterAlt() {		function loadSlideshowsByChapterAlt() {
	const chapterInput = document.getElementById("chapterInput").value.trim();		const chapterInput = document.getElementById("chapterInput").value.trim();
Line 23:		Line 25:

	const chapterTag = "ch" + String(chapterNumber).padStart(3, "0");		const chapterTag = "ch" + String(chapterNumber).padStart(3, "0");
	const rows = ~~document~~.querySelectorAll("~~#catalog tbody~~ tr");
			// Tabelle abfragen – auch wenn display:none gesetzt ist
			const table = document.getElementById("catalog");
			if (!table) return;

			const rows = table.querySelectorAll("tr"); // tbody weggelassen, funktioniert besser bei display:none

	illustrators.forEach(name => {		illustrators.forEach(name => {
	slides[name] = [];		slides[name] = [];
	currentIndex[name] = 0;		currentIndex[name] = 0;
	for (let i = 0; i < rows.length; i++) {
			for (let i = 1; i < rows.length; i++) { // i=1, um die Kopfzeile zu überspringen
	const row = rows[i];		const row = rows[i];
	const illustratorCell = row.cells[2];		const illustratorCell = row.cells[2];
	const idCell = row.cells[8];		const idCell = row.cells[8];

	const illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : "";		const illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : "";
	const idLink = idCell ? idCell.getElementsByTagName("a")[0] : null;		const idLink = idCell ? idCell.getElementsByTagName("a")[0] : null;
	const idText = idLink ? idLink.textContent.trim().toLowerCase() : "";		const idText = idLink ? idLink.textContent.trim().toLowerCase() : "";
	if (illustratorText.indexOf(name.toLowerCase()) !== -1 && idText.indexOf(chapterTag) !== -1) {
			if (illustratorText.indexOf(name.toLowerCase()) !== -1 &&
			idText.indexOf(chapterTag) !== -1) {
	slides[name].push(idText);		slides[name].push(idText);
	}		}
Line 41:		Line 52:
	});		});

	// ~~Nach dem Laden direkt~~ beide Boxen ~~refreshen~~		// Direkt beide Boxen aktualisieren
	refreshGallery(1);		refreshGallery(1);
	refreshGallery(2);		refreshGallery(2);
	}		}

			// Refresh-Funktion für eine Box
	function refreshGallery(boxNumber) {		function refreshGallery(boxNumber) {
	const select = document.getElementById("illustratorSelect" + boxNumber);		const select = document.getElementById("illustratorSelect" + boxNumber);
Line 78:		Line 90:
	}		}

			// Buttons
	function nextSlideDropdown(boxNumber) {		function nextSlideDropdown(boxNumber) {
	const select = document.getElementById("illustratorSelect" + boxNumber);		const select = document.getElementById("illustratorSelect" + boxNumber);
Line 87:		Line 100:
	showSlideDropdown(boxNumber, currentIndex[select.value] - 1);		showSlideDropdown(boxNumber, currentIndex[select.value] - 1);
	}		}

			// Sicherstellen, dass das Script nach dem Laden der Tabelle ausgeführt wird
			document.addEventListener("DOMContentLoaded", () => {
			// optional: die erste Anzeige sofort initialisieren
			// loadSlideshowsByChapterAlt();
			});

HMHTEST at 20:45, 2 September 2025

2025-09-02T20:45:16Z

← Older revision		Revision as of 22:45, 2 September 2025
Line 13:		Line 13:
	});		});

	function ~~loadSlideshowsByChapter~~() {		function loadSlideshowsByChapterAlt() {
	const chapterInput = document.getElementById("chapterInput").value.trim();		const chapterInput = document.getElementById("chapterInput").value.trim();
	const chapterNumber = parseInt(chapterInput, 10);		const chapterNumber = parseInt(chapterInput, 10);

HMHTEST: Created page with "// ALTERNATIV const illustrators = [ "Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié" ]; let slides = {}; let currentIndex = {}; illustrators.forEach(name => { slides[name] = []; currentIndex[name] = 0; }); function loadSlideshowsByChapter() { const chapterInput = document.getElementById("chapterInput").value.trim(); const chapterNumber = parseInt(chapterInput, 10); if (isNaN(chapterNumber) || chapterNumber < 1 || chapterNumbe..."

2025-09-02T20:42:43Z

Created page with "// ALTERNATIV const illustrators = [ "Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié" ]; let slides = {}; let currentIndex = {}; illustrators.forEach(name => { slides[name] = []; currentIndex[name] = 0; }); function loadSlideshowsByChapter() { const chapterInput = document.getElementById("chapterInput").value.trim(); const chapterNumber = parseInt(chapterInput, 10); if (isNaN(chapterNumber) || chapterNumber < 1 || chapterNumbe..."

New page

// ALTERNATIV

const illustrators = [
"Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié"
];

let slides = {};
let currentIndex = {};

illustrators.forEach(name => {
slides[name] = [];
currentIndex[name] = 0;
});

function loadSlideshowsByChapter() {
const chapterInput = document.getElementById("chapterInput").value.trim();
const chapterNumber = parseInt(chapterInput, 10);

if (isNaN(chapterNumber) || chapterNumber < 1 || chapterNumber > 43) {
alert("Please enter a number between 1 and 43.");
return;
}

const chapterTag = "ch" + String(chapterNumber).padStart(3, "0");
const rows = document.querySelectorAll("#catalog tbody tr");

illustrators.forEach(name => {
slides[name] = [];
currentIndex[name] = 0;
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const illustratorCell = row.cells[2];
const idCell = row.cells[8];
const illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : "";
const idLink = idCell ? idCell.getElementsByTagName("a")[0] : null;
const idText = idLink ? idLink.textContent.trim().toLowerCase() : "";
if (illustratorText.indexOf(name.toLowerCase()) !== -1 && idText.indexOf(chapterTag) !== -1) {
slides[name].push(idText);
}
}
});

// Nach dem Laden direkt beide Boxen refreshen
refreshGallery(1);
refreshGallery(2);
}

function refreshGallery(boxNumber) {
const select = document.getElementById("illustratorSelect" + boxNumber);
const illustrator = select.value;
const img = document.getElementById("slide" + boxNumber);
const counter = document.getElementById("counter" + boxNumber);

if (!slides[illustrator] || slides[illustrator].length === 0) {
img.src = "https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png";
currentIndex[illustrator] = 0;
counter.textContent = "0/0";
} else {
showSlideDropdown(boxNumber, 0);
}
}

function showSlideDropdown(boxNumber, index) {
const select = document.getElementById("illustratorSelect" + boxNumber);
const illustrator = select.value;
const img = document.getElementById("slide" + boxNumber);
const counter = document.getElementById("counter" + boxNumber);
const slideArray = slides[illustrator];

if (!img || slideArray.length === 0) return;

currentIndex[illustrator] = (index + slideArray.length) % slideArray.length;
const imageId = slideArray[currentIndex[illustrator]];
img.src = "/index.php/Special:Redirect/file/" + imageId + ".jpg";
img.alt = imageId;
img.title = imageId;
counter.textContent = (currentIndex[illustrator] + 1) + "/" + slideArray.length;
}

function nextSlideDropdown(boxNumber) {
const select = document.getElementById("illustratorSelect" + boxNumber);
showSlideDropdown(boxNumber, currentIndex[select.value] + 1);
}

function prevSlideDropdown(boxNumber) {
const select = document.getElementById("illustratorSelect" + boxNumber);
showSlideDropdown(boxNumber, currentIndex[select.value] - 1);
}