Benutzer:Funbuilder/Spoilervorlage.js

Aus Jedipedia

Hinweis: Leere nach dem Veröffentlichen 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/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
  • Opera: Strg+F5
var schwaerzung = true;
function initSpoilerSchwaerzung(element, platzhalter, squelle) {//Bei Seitenaufruf
	var breite = element.textContent.width;
	var hoehe = element.textContent.height;
	element.style.width = breite;
	var schwarzesElement = document.createElement("a");
	schwarzesElement.appendChild(document.createTextNode("Klicken um Spoiler aus „" + squelle.textContent + "“ anzuzeigen."));
	//schwarzesElement.style.width = breite;
	//schwarzesElement.style.height = hoehe;
	schwarzesElement.style.backgroundColor = "rgba(100,100,100,1)";
	schwarzesElement.style.color = "rgba(255,255,255,0)";
	element.onclick=function() {toggleSchwaerzung(element, schwarzesElement)};
	schwarzesElement.onclick=function() {toggleSchwaerzung(element, schwarzesElement)};
	platzhalter.insertBefore(schwarzesElement, platzhalter.childNodes[0]);
	element.style.display="none";
        squelle.style.display="none";
	schwarzesElement.style.display="inline";
	schwaerzung = true;
        schwarzesElement.addEventListener("mouseover", function(schwarzesElement) {// highlight the mouseover target
          schwarzesElement.target.style.color = "rgba(255,255,255,1)";
        }, false);
        schwarzesElement.addEventListener("mouseout", function(schwarzesElement) {// highlight the mouseover target
          schwarzesElement.target.style.color = "rgba(255,255,255,0)";
        }, false);
}
$(document).ready(function() {
	var allSpoilerSpans=document.getElementsByClassName("spoilerSchwaerzung");
        var allPlatzhalterSpans=document.getElementsByClassName("spoilerPlatzhalter");
        var allSpoilerQuellenSpans=document.getElementsByClassName("spoilerQuelle");
	for (i=0; i<allSpoilerSpans.length; i++) {
		initSpoilerSchwaerzung(allSpoilerSpans[i], allPlatzhalterSpans[i], allSpoilerQuellenSpans[i]);
	}
});

function toggleSchwaerzung(element, schwarzesElement) {//Bei Klick auf Spoiler
	if (schwaerzung == true) {//Wenn Spoiler sichtbar gemacht werden sollen
		element.style.backgroundColor = "rgba(255,0,0,0.3)";
		element.style.color = '';
		element.style.display="inline";
		schwarzesElement.style.display="none";
		schwaerzung = false;
	} else {//Wenn Spoiler geschwärzt werden sollen
		schwarzesElement.style.backgroundColor = "rgba(100,100,100,1)";
		schwarzesElement.style.color = "rgba(255,255,255,0)";
		element.style.display="none";
		schwarzesElement.style.display="inline";
		schwaerzung = true;
	}
}