Benutzer:PerfektesChaos/js/paneMarker

JavaScript Gadget – um Browser-Fenster oder Tabs hervorzuheben, die im Moment zur Eingabe benutzt werden. Die Änderungen sollen nicht verloren gehen, wenn nicht erfolgreich gespeichert wurde, etwa:

• schlicht das Speichern vergessen, weil zwischendurch das Telefon klingelte
• Bearbeitungskonflikt
• Funktion „Warnen, sofern eine zur Bearbeitung geöffnete Seite verlassen wird, die nicht gespeicherte Änderungen enthält“
• Blockade durch Missbrauchsfilter oder Spamlink-Blacklist.

Wer gewohnt ist, einige Dutzend Tabs offen zu halten und simultan in etlichen Fenstern gleichzeitig editiert, könnte auch als Multitasking-Genie irgendwann den Überblick verlieren.

Vor allem wird versucht, den Favicon mit rotem Hintergrund darzustellen; so fällt die Seite in der Tab-Leiste, der Tab-Liste und der Taskbar besser auf. Weiterhin kann der Fenstertitel und damit der im Tab-Reiter sichtbare Anfang des Bezeichners auf den Seitentitel gesetzt werden, um Tabs besser voneinander zu unterscheiden.

Einbindung

• Wenn das Projekt dieses Gadget bereits registriert haben sollte, genügt ein Häkchen auf der Seite Einstellungen („Helferlein“).
• Sonst wären die folgenden Zeilen in die persönliche common.js einzufügen:

mw.loader.load("https://www.mediawiki.org/w/index.php?title=User:PerfektesChaos/js/paneMarker/r.js&action=raw&ctype=text/javascript&maxage=604800&*",
               "text/javascript");

• Das Gadget funktioniert auch mit Nicht-WMF-Projekten, sofern diese MediaWiki ab 1.18 verwenden. Eigene Icons können definiert werden.
• Eine Anmeldung als Benutzer ist nicht zwingend erforderlich; die Aktivierung kann auch über Greasemonkey erfolgen.
• Wer fliegelflagel@Schnark benutzt, kann das Skript mit einem einfachen Häkchen aktivieren und deaktivieren.
• Beachte: Wenn du Blockier-Software (wie NoScript) verwenden solltest, müsstest du ggf. mediawiki.org freigeben; siehe hier.

Wirkung

Roter Icon

Beispiel

Wenn die momentane Aktivität als empfindlich eingestuft wurde (Seite oder Abschnitt bearbeiten oder erstellen; Hochladen), wird versucht den Projekt-Icon mit rotem Hintergrund darzustellen. Es hängt jedoch vom Browser ab, ob dies auch sichtbar wird.

Browser-Versionen

Browser
Firefox	12–16
Internet Explorer	nicht empfohlen (bis IE 9?)
Opera	11
Google Chrome	19
Safari	5?
Konqueror

Erfahrungsberichte über Browser-Versionen wären willkommen.

• Einige Browser könnten den Austausch ablehnen, weil die momentane Domain etwa wikipedia.org wäre, aber die alternativen Icons von upload.wikimedia.org kommen, was als Sicherheitsrisiko aufgefasst werden kann.
• Wenn der Browser die Wahl zwischen mehreren Icon-Formaten hat, sollte er sich für die hier geeignetste Version entscheiden.

Siehe auch die Bildergalerie.

Internet Explorer

IE 7, 8 und vermutlich 9 zeigen ein seltsames Verhalten:

• Offenbar ordnet der IE jeder Domain nur genau ein Favicon zu. Wenn der Favicon eines Dokuments und damit der zugehörige Tab sich ändert (rot wird), schalten alle Tabs dieser Domain auf den roten Icon. Das ist nicht das was wir brauchen.
• Der IE ist recht zögerlich, wenn er den angezeigten Icon entsprechend der geänderten Definition aktualisieren soll.
• Noch schlimmer: Wenn etwas Unerwartetes mit dem Icon geschieht, durchsucht der IE im Web die Second Level Domain, greift dort auf /favicon.ico zu und zeigt diesen an. Arbeitet man mit der Third Level Domain und hat den schwarzen Globus von test.wikipedia.org – so springt IE auf wikipedia.org und zeigt das „W“.

Wenn das Gadget einen IE bis einschließlich Version 9 feststellt, wird der automatische Austausch des Favicon unterdrückt. In Projekten mit Anzeige des Seitennamens am Anfang (wie der deutschsprachigen Wikipedia) wird stattdessen ein "*" angezeigt.

Unterscheidungszeichen

Bei einigen Projekten – etwa in der deutschsprachigen Wikipedia – wird der Seitenname bei Aktivitäten im Seitentitel vorangestellt, so dass zumindest sein Anfang in den Tab-Reitern und der Taskbar lesbar ist – mindestens für den aktuellen Tab.

Allerdings weiß man jetzt nicht, welche Aktion nun auf der Seite stattfindet, weil dies am Ende des Seitentitels steht. Um zu erahnen, ob es sich nicht nur um die Seitenansicht handelt, können etwa die folgenden Zeichen zwischen dem Icon und dem eigentlichen Seitentitel angezeigt werden:

*	Empfindliche Aktivität, wie Bearbeiten Standardmäßig nicht aktiv außer bei IE; hoffe auf roten Icon
↓	Versionsgeschichte Ggf. '^' wenn im Browser nicht richtig dargestellt (lowChar)
Δ	Versionsunterschied Ggf. '±' wenn im Browser nicht richtig dargestellt (lowChar)
→	Links auf diese Seite Ggf. '>' wenn im Browser nicht richtig dargestellt (lowChar)

• Das könnte auch als Workaround genutzt werden, wenn einige Browserversionen den roten Icon nicht zeigen.
• Diese Funktion sollte automatisch aktiv werden, wenn das Projekt als eines bekannt ist, das zuerst den Seitennamen anzeigt. In jedem Fall kann sie durch Konfiguration (siehe unten) manuell aktiviert werden.
• Das Erscheinungsbild ist völlig benutzerdefinierbar.

Kurzer Seitentitel

Falls im Projekt der Seitenname nicht an erster Stelle des Fenstertitels steht, kann der standardmäßige Fenstertitel ersetzt werden durch eine minimierte Kombination aus Seitenname und Projektart. Bei Aktionen wird dann auch automatisch das Unterscheidungszeichen vorangestellt. Die Benutzereinstellung .opt.leave löst dies aus; es ist nun nicht mehr nur Versionsgeschich… in den Tab-Reitern zu sehen. Die Gestaltung der Seite selbst und ihre Hauptüberschrift wird dadurch nicht beeinflusst.

Shortcut

Wenn auf der Seite ein Shortcut erkannt wird, dann wird der erste gefundene als Seitenname benutzt. Dieses Verhalten lässt sich abschalten.

Namensraum-Kürzel

Wenn man weder im Hauptnamensraum (ANR) noch auf einer Spezialseite ist und kein Shortcut bekannt ist, wird geprüft, ob hier ein Namensraum-Kürzel definiert ist. Falls ja, wird dies in jedem Seitennamen ersetzt.

• In der deutschsprachigen Wikipedia sind das BD:, H:, HD:, P: PD:, WD:, WP:.

Nun hat man eher einen Eindruck von der Seite, weil im Tab-Reiter statt

• Benutzer-Diskuss…

angezeigt wird

• BD:PerfektesCha…

Allgemeiner Icon für weitere Projekte

Alle Wikipedia-Projekte benutzen das gleiche W als Favicon. Von den Entwicklern kann nicht verlangt werden, sich bald 300 unterscheidbare Icons auszudenken. Wer häufig bei einer anderssprachigen Wikipedia angemeldet ist und gleichzeitig mit Seiten ähnlichen Namens arbeitet, kann seine common.js dort ausstatten mit W für die spanische Sprache, oder W für englische oder französische Sprache. Siehe die Sammlung für fertig einsetzbare Beispiele, wie  – Benutzereinstellung .opt.favicon.

Benutzerkonfiguration

Wer erweiterte Funktionalität benötigt, von seinem Browser in den Darstellungsmöglichkeiten begrenzt wird oder einfach nur individuelles Design wünscht, kann das Gadget anpassen.

Interaktive Schnellkonfiguration

Angemeldete Benutzer können auf einer Spezialseite – wenn das Skript geladen wurde – interaktiv die gewünschten Optionen setzen, wie sie analog im nachstehenden Abschnitt beschrieben sind.

Diese Einstellungen werden zusammen mit den Benutzereinstellungen auf dem Wiki-Server gespeichert und wirken dann auf alle Browser. Sie überschreiben Vorgaben aus dem folgenden Abschnitt.

Javascript-Anwendungsobjekt

In die common.js etc. die folgenden Zeilen einfügen (möglichst vor mw.loader.load, so vorhanden):

if ( typeof mw.libs.paneMarker !== "object" ) {
   mw.libs.paneMarker  =  {};
}
mw.libs.paneMarker.opt  =  { key1: value1,
                             key2: value2   // etc.
                           };

Key	Value	Bedeutung
Roter Icon
appleIcon	URL String false	Alternativer apple-touch-icon, oder deaktiviert
faviconICO		Alternativer Favicon im .ICO-Format, oder deaktiviert
faviconPNG		Alternativer Favicon im .PNG-Format, oder deaktiviert
lazy	true	Konventionellen Icon immer beibehalten
Unterscheidungszeichen
chars	true false	Allgemeine Aktivierung (true) oder Deaktivierung für dieses Projekt. Ungeachtet dessen wird aber eine explizite Definition einzelner Unterscheidungszeichen wirksam.
charDiff	false 'String' Unicode	Marker für diffpages
charHistory		Marker für Versionsgeschichte
charLinks		Marker für Links auf diese Seite
charVitally		Marker für wichtige Seiten-Aktivitäten
lowChar	true	ANSI-Zeichen benutzen
rightleft	true	Erzwinge Rechtsaußen-Position auf Seiten mit Schreibrichtung von rechts nach links. Eigentlich sollte dies aber nicht erforderlich sein, weil der Dokumententitel bereits als RTL definiert sein müsste.
Allgemeines Erscheinungsbild
favicon	URL String	Alternativer Favicon für dieses Projekt MIME-Typ wird bei .png oder .ico oder .gif von dieser „Dateiendung“ abgeleitet.
leave	true	Benutze kurzen Seitentitel (in der deutschsprachigen Wikipedia nicht erforderlich)
shortcut	false	Shortcut als Fenstertitel deaktivieren (false)
API
.fresh()		Neustart des gesamten Gadget. Dependency: mediawiki.util
.favicon()		Icon auf dem aktuellen Fenster/Tab auslösen. true – Roter Icon false – .opt.favicon (falls definiert)

Beispiel:

if ( typeof mw.libs.paneMarker !== "object" ) {
   mw.libs.paneMarker  =  {};
}
mw.libs.paneMarker.opt  =  { charVitally: '!!!',
                             charDiff:    '±'
                           };

Beachte: Die Benutzerkonfiguration könnte ignoriert werden, falls sie nicht im Standard-Benutzerskript erfolgt, weil alle anderen Skripte erst später geladen werden und paneMarker dann nichts davon weiß und auch nicht darauf warten kann.

Alternativen zum roten Icon im ICO-Format .opt.faviconICO wären auch die weniger auffälligen

• //bits.wikimedia.org/favicon/piece.ico
• //bits.wikimedia.org/favicon/black-globe.ico – schwarze WP-Kugel

sowie als PNG

• Datei:Testwiki-favicon.png

Code und Stammseite

Die Stammseite ist MW:User:PerfektesChaos/js/paneMarker mit:

Quellcode	JavaScript – Komprimierter Code zum Laden dialog – Beschreibung für preferencesGadgetOptions Kommentiertes Skript – zum Lesen durch Menschen und Debuggen dialog
ResourceLoader	ext.gadget.paneMarker für MW:Extension:Gadgets Dependencies: user, user.options, mediawiki.util, jquery.client
Namensräume	alle
mw.libs	paneMarker