Benutzer:Rolf b/native svg.js

Hinweis: Leeren Sie nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen

/* SVG Preview PNGs durch ihre Originale ersetzen */
(function nativeSVGImages() {
	mw.Selfhtml.loaded("native_svg_repl");

	const thumbPart = "/thumb/",
		  svgPart = ".svg/";

	/*	SVG Preview-PNGs lassen sich durch die Endung .svg.png im src Attribut erkennen. a[href] als Elternelement
	*	ist nicht zwingend, nicht jedes Bild ist ein Link.
	*	Implementierung als wikipage.content hook, um auch im edit preview wirksam zu sein. Yay!
	*/
	// mw.Selfhtml.report("native_svg_repl", "register wikipage.content hook for native svg conversion");
	mw.hook('wikipage.content').add(function($content) {
		if ($content.hasClass("mw-content-ltr") || $content.hasClass("mw-content-rtl")) {
			const $images = $content.find("img[src$='.svg.png'][srcset]");
		//	mw.Selfhtml.report("native_svg_repl", "wikipage.content hook fired, ", $images.length, "images could be converted");
			$images.each(convertSvg);
		}
	});

	/*
	* Bild-URLs sehen aus wie https://.../images/thumb/5/53/Client_Server.svg/600px-Client_Server.svg.png
	* Daraus muss /thumb entfernt werden und alles hinter dem ersten ".svg/", inclusive des '/'.
	* Darüber hinaus muss dem img Element das srcset Attribut entnommen werden, das ist bei SVG nicht mehr nötig.
	*/
	function convertSvg(index, image) {
		const source = image.src,
			  thumbPos = source.indexOf(thumbPart),
			  svgPos = source.indexOf(svgPart, thumbPos);

		if (thumbPos >= 0 && svgPos > thumbPos) {
			const obj = document.createElement("object");
			obj.type = "image/svg+xml";
			obj.data = source.substring(0, thumbPos) +
						source.substring(thumbPos + thumbPart.length - 1, svgPos + svgPart.length - 1);
			copyAttribute(obj, image, "width");
			copyAttribute(obj, image, "height");
			copyAttribute(obj, image, "class");

			image.replaceWith(obj);
		}
	}

	function copyAttribute(target, source, attrName) {
		if (source.hasAttribute(attrName))
			target.setAttribute(attrName, source.getAttribute(attrName));
	}
})();