Benutzer:CF/Spoiler

Diese Vorlage ermöglicht es Informationen aus Episoden die noch nicht im deutschen Free-TV gelaufen sind in Artikel zu schreiben.

siehe auch: Vorlage:Spoilerwarnung – Für komplette Artikel; die Vorlage versteckt den Text nicht sondern fügt eine Anzahl von Leerzeilen ein.

Beschreibung

Dabei werden die Informationen versteckt und angezeigt wenn der Leser mit der Maus über die Lupe fährt; nach nochmaligem Überfahren wird der Anschnitt wieder ausgeblendet. Wenn man auf die Lupe klickt, werden alle Spoiler auf der Seite auf- und zugedeckt. Diese Vorlage ist für Worte, kurze Sätze, ganze Abschnitte, Aufzählungen, Tabellenzeilen und vergleichbares gedacht. Um komplexere Inhalte zu verstecken (wie eine Tabelle) kann man auch über dem Inhalt einen Spoiler mit dem Text „anfang“ einfügen und darunter einen mit dem Inhalt „ende“.

Spoiler mit Anfang und Ende

Vor dem zu versteckenden Text {{Benutzer:CF/Spoiler|anfang}} einfügen und danach {{Benutzer:CF/Spoiler|ende}}. Ist für Tabellen gedacht, damit Vorlagen wie {{!-}} nicht verwendet werden müssen.

 {{Benutzer:CF/Spoiler|anfang}}
 {| class="wikitable"
 | Diese Tabelle ist verdeckt
 |}
 {{Benutzer:CF/Spoiler|ende}}

Diese Tabelle ist verdeckt

Tabellenzeilen verstecken

Mit dieser Vorlage können auch ganze Tabellenzeilen versteckt werden. Dafür in der ersten Zelle der zu versteckenden Zeile {{Benutzer:CF/Spoiler|tabelle|„Spaltenanzahl“}} einfügen. Wenn in der zu versteckenden Zeile HTML-Attribute hinzugefügt werden sollen, dann kann man einfach den Parameter „3“ mit den gewünschten Werten an diese Vorlage anhängen. Achtung: Werden vor {{Benutzer:CF/Spoiler|tabelle}} Attribute angegeben darf KEIN weiteres „|“ folgen!

 {| class="wikitable"
 ! Spalte 1 !! Spalte 2
 |-
 | immer || sichtbar
 |-
 | {{Benutzer:CF/Spoiler|tabelle|2}} dies || nicht
 |-
 | Hier ein Beispiel || mit Styles:
 |-
 | {{Benutzer:CF/Spoiler|tabelle|2|3=style="background-color: green;"}} versteckter || Text
 |-
 | roter Hintergrund || für die Lupe:
 |-
 | style="background-color: red;" {{Benutzer:CF/Spoiler|tabelle|2}} {{Frage}} || {{Frage}}
 |}

Spalte 1	Spalte 2
immer	sichtbar
dies	nicht
Hier ein Beispiel	mit Styles:
versteckter	Text
roter Hintergrund	für die Lupe:

Listen

MediaWiki erzeugt Listen (*) und Überschriften (==) nur, wenn diese am Zeilenanfang stehen. Damit sie auch im Spoiler korrekt angezeigt werden muss auch hier ein Zeilenumbruch direkt nach {{Benutzer:CF/Spoiler| folgen!

 {{Benutzer:CF/Spoiler|
 * Punkt 1
 * Punkt 2
 }}

• Punkt 1
• Punkt 2

sonstiger Text

Wird diese Vorlage im Fließtext verwendet, wird kein kein Zeilenumbruch erzeugt.

In diesem Text ist {{Benutzer:CF/Spoiler|ein Geheimnis versteckt, sonst }}nichts.

In diesem Text ist ein Geheimnis versteckt, sonst nichts.

Installation

zum Testen

1. zu Benutzer:18.117.142.128/monobook.css hinzufügen:

.spoilerLupe {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.spoilerLupe + div.spoiler, .spoilerLupe + span.spoiler {
  display: none;
}
.spoilerLupe:hover + div.spoiler, .spoilerLupe + div.spoiler:hover {
  display: block;
}
.spoilerLupe:hover + span.spoiler, .spoilerLupe + span.spoiler:hover {
  display: inline;
}
tr.spoiler {
  display: table-row;
}

2. zu Benutzer:18.117.142.128/monobook.js hinzufügen:

spoilerOK = false;
function toggleNext(a) {
  if (spoilerOK) return true;  //Nichts tun, wenn alle angezeigt werden
  var e = a.nextElementSibling;
  if (!e) e = a.parentNode.parentNode.nextElementSibling;
  if (!e) return false;
  if (e.className == "spoiler")
    e.className = "";
  else
    e.className = "spoiler";
  return true;
}
function toggleAll() {
  spoilerOK = spoilerOK ? false : true;
  document.getElementById("SpoilerCSS").disabled = spoilerOK;
  return true;
}
document.write('<link id="SpoilerCSS" href="'+wgScript+'?title=Benutzer:CF/SpoilerCSS.css&action=raw&ctype=text/css" type="text/css" rel="stylesheet">');
document.write('<style type="text/css">.spoilerLupe + div.spoiler { display: block; } .spoilerLupe + span.spoiler { display: inline; }</style>');

Damit können die Beispiele auf dieser Seite nachvollzogen werden. Einzige Einschränkung: Alle Spoiler auf einmal umschalten funktioniert nicht, da dazu ein „kleines Stück Erweiterung“ gebraucht wird.

zum richtigen Einsatz

1. in MediaWiki:Monobook.css ersetzen:

/* Erweiterung fuer StarGateWiki */

/* Spoiler */ 
#spoiler { 
 display: none;
}

.spoiler { 
 display: none;
}

.spoilerOk {
 display: inline;
}

.show_spoiler {
 color:#400000;
}
.show_spoiler:hover .spoiler {
 display: inline;
}

durch

/* Erweiterung fuer StarGateWiki */

/* Spoiler */ 

.spoilerLupe {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.spoilerLupe + div.spoiler, .spoilerLupe + span.spoiler {
  display: none;
}
.spoilerLupe:hover + div.spoiler, .spoilerLupe + div.spoiler:hover {
  display: block;
}
.spoilerLupe:hover + span.spoiler, .spoilerLupe + span.spoiler:hover {
  display: inline;
}

2. zu MediaWiki:Monobook.js hinzufügen:

spoilerOK = false;
function toggleNext(a) {
  if (spoilerOK) return true;  //Nichts tun, wenn alle angezeigt werden
  var e = a.nextElementSibling;
  if (!e) e = a.parentNode.parentNode.nextElementSibling;
  if (!e) return false;
  if (e.className == "spoiler")
    e.className = "";
  else
    e.className = "spoiler";
  return true;
}
function toggleAll() {
  spoilerOK = spoilerOK ? false : true;
  document.getElementById("SpoilerCSS").disabled = spoilerOK;
  return true;
}
document.write('<link id="SpoilerCSS" href="'+wgScript+'?title=MediaWiki:SpoilerCSS.css&action=raw&ctype=text/css" type="text/css" rel="stylesheet">');
document.write('<style type="text/css">.spoilerLupe + div.spoiler { display: block; } .spoilerLupe + span.spoiler { display: inline; }</style>');

3. MediaWiki:SpoilerCSS.css anlegen mit folgendem Inhalt:

/* CSS für Spoiler */

.spoiler {
  display:none !important;
}

4. In Benutzer:Rene/SGPack die Spoilererweiterungen entfernen.