Userskript Anker

Aus Proxer.Me - Wiki
Wechseln zu: Navigation, Suche

Ermöglicht unterschiedliche Userscripte in Proxer zu integrieren und dabei eine einheitliche Navigation zu verwenden.
Der Anker selbst, sowie die Zusatzfunktionen sind mit allen Proxer Designs konform.

Aufbau des Ankers

Simple Anker

Der Simple Anker

Der Simple Anker ist im Navigationsmenü 'Tools' zu finden und ist für Scripte gedacht, bei denen der Benutzer das schnelle Ein- und Ausgeschalten als kompfortabel empfindet.
Die einzelnen Einträge der verschiedenen Userscripte werden automatisch alphabethisch angeordnet.

Extended Anker

Der Extended Anker

Der Extended Anker ist nur verfügbar wenn man angemeldet ist und ist für erweiterte Userscript Einstellungen.
Die einzelnen Member der verschiedenen Userscripte werden automatisch alphabethisch angeordnet.

Dieser kann auf drei Arten erreicht werden:

Der Extended Anker vom UCP

  • das Navigationsmenü 'Tools' und dann auf 'Erweitert' klicken:

Der Extended Anker in Tools

Weitere Funktionen

Erstellen eines Dialogs

Der Confirm Dialog

Solange der Dialog aktiv ist, ist der Hintergrund gesperrt. Der Confirm Dialog dient dazu, den Anwender eine Entscheidung treffen zu lassen.

createAnkerDialog(msg, methodYes, methodNo);
  • msg --> Variable mit dem anzuzeigendem Text
  • methodYes --> Funktion die aufgerufen wird, wenn 'Ja' gedrückt wird
  • methodNo --> Funktion die aufgerufen wird, wenn 'Nein' gedrückt wird

Sollte nur der Parameter msg übergeben werden, wird ein Alert Dialog erzeugt, dieser dient nur zur Information des Anwenders. Der AlertDialog

Erstellen einer Message

Die Message

Proxer verwendet bereits Messages, mit dieser Funktion kann jetzt auch ein Userscript eine Message erstellen.
Eine Message dient zur Information des Anwenders, muss aber im Gegensatz zum Alert Dialog nicht bestätigt werden.

createAnkerMessage(msg);
  • msg --> Variable mit dem anzuzeigendem Text

Versionsanzeige

Die Versionsanzeige

Ermöglicht es bei einer neuen Version einmalig einen Alert Dialog anzuzeigen. Diese Funktion sollte nur bei großen Änderungen verwendet werden und nicht bei jedem Bugfix, um den Anwender nicht zu nerven.

neueVersion(version, msg);
  • version --> die aktuelle Version des Scriptes z.B. ("0.1.3",msg)
  • msg --> Variable mit dem anzuzeigendem Text

Style-Property von Element

Gibt die gewählte Style-Property des übergebenen Elementes zurück.

getStyleProp(elem, prop);
  • elem --> Variable mit dem Zielelement
  • prop --> Variable mit dem Ziel-Style-Property
Beispiel:
var main = document.getElementById("main");
var elemA = document.createElement("a");
elemA.style.color = getStyleProp(main, "color");

Zeile im Extended Anker Member einfügen

Zeile im Member des Extended Ankers

Gibt ein Element zurück, das man als Zeile des Extended Anker Members benutzen kann.
Damit kann man den Anwender Einstellungen vornehmen lassen.
Der Wert der Speichervariable wechselt duch anklicken zwischen 1 und 0, initaialisiert wird er mit 1.
Diese Methode darf erst nach der addAnkerMember Methode aufgerufen werden.

createExtAnkerCheckBox(anzeigeText, memoryName, abstand);
  • anzeigeText --> Variable mit dem anzuzeigendem Text
  • memoryName --> Name der Speichervariable
  • abstand --> Der Abstand zwischen dem Text und dem Haken
Beispiel:
var extra = document.createElement("div");

addAnkerMember('theatermodus', 'Theatermodus', 2, theatermodus_actionControl, 'theatermodus', 0, extra);

var theaterMausAus = createExtAnkerCheckBox("Maus ausblenden", "theaterMausAus", "7em");

extra.appendChild(theaterMausAus);

Anleitung Extended Anker Member einfügen

Anleitung im Member des Extended Ankers

Gibt ein Element zurück, mit dem man einen Link auf die Anleitung im Extended Anker Members benutzen kann.
Dadurch ist es möglich auf z.B. den Foreneintrag des Userscriptes zu verweisen. Der Anwender hat den Vorteil sich so jederzeit einfach über die neuesten Funktionen zu informieren, ohne erst den Forenbeitrag suchen zu müssen.

createExtAnkerAnleitung(linkUrl);
  • linkUrl --> Der zu hinterlegende Link
Beispiel:
var extra = document.createElement("div");

addAnkerMember('theatermodus', 'Theatermodus', 2, theatermodus_actionControl, 'theatermodus', 0, extra);

var anleitung = createExtAnkerAnleitung("http://proxer.me/forum/anwendungen/376652-request-theater-modus-moeglichkeit-wie-bei-twitch#725486");

extra.appendChild(anleitung);

Aufruf aus einem Userscript

Benötigte Brower Plugins

In Hinsicht auf die gewünschte Einheitlichkeit der Userscripte, ist es naheliegend auch die gleichen Browser Plugins zu benutzen.
Für Firefox wird Greasemonkey und für Chrome, Opera oder Safari wird Tampermonkey verwendet. Die Funktionen der beiden Plugins sind gleich und somit kann ein Userskript ohne Änderungen von beiden Plugins benutzt werden.

Einbinden des Ankers

Um den Anker in einem Userscript zu verwenden, muss man folgendes in den Metadata Block des Scriptes kopieren:

// @require    https://greasyfork.org/scripts/12981-proxer-userscript-anker/code/Proxer-Userscript-Anker.js?version=108562
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        unsafeWindow

Dabei ist darauf zu achten, dass man die aktuelle Version einbindet, diese kan man hier finden.

Als erstes die addAnker Methode aufrufen:

addAnkerMember(id, modulname, modus, changefunktion, memoryName, memoryDefault, zusatz);
  • id --> Id des Eintrags im Anker
  • modulname --> Anzeigename des Userscriptes
  • modus --> Verwendeter Modus
Modus Mit Haken Simple Anker Extended Anker
0
Kreuz.png
Haken.png
Kreuz.png
1
Haken.png
Haken.png
Kreuz.png
2
Kreuz.png
Haken.png
Haken.png
3
Haken.png
Haken.png
Haken.png
4
Kreuz.png
Kreuz.png
Haken.png
  • changefunktion --> Methode die bei Initialisierung und Änderung der Speichervariable aufgerufen wird (An/Aus)
  • memoryName --> Name der Speichervariablen
  • memoryDefault --> Initalwert der Speichervariable
  • zusatz --> wird beim Extended Anker hinzugefügt
Beispiel:
addAnkerMember('easysearch', 'Easy-Search', 4, easysearch_actionControl, 'easysearch', 1, extra);

Die changefunktion wird vom Anker aufgerufen, sobald das Script aktivert / deaktiviert wird.

Übergabewert Auslösender
true
Es wurde eine Änderung an der Speichervariable vorgenommen.
Der Anwender hat also das Script mit dem Anker An- bzw. Ausgeschaltet.
false
Wird automatisch bei der Initialisierung vom Anker aufgerufen.
Die Seite also wurde neu geladen.
"Ajax Aufruf"
Proxer hat einen Ajax gemacht.
Der Anwender hat innerhalb von Proxer die Seite gewechselt z.B. auf der Startseite auf 'Top 100'. Proxer lädt dabei nicht die ganze Seite neu, sondern führt ein ajax rerendern aus. Nur bei wechseln in z.B. das Forum wird die ganze Seite neu geladen.
Beispiel:
function easysearch_actionControl(change){
	if(change === true){
		// Ausgeschaltet
		if(GM_getValue("easysearch",0) === 0){
		//Eingeschaltet
		} else {
			easysearch();
		}
	// Initialisierung
	} else {
		easysearch();
	}
       // Ajax von Proxer
	if(change === "Ajax Aufruf"){
 		easysearch();
	}
}

//Hauptfunktion
function easysearch() {
	//Wenn ausgeschaltet, oder auf der falschen Unterseite nix machen
	if(GM_getValue("easysearch",0) === 0 || window.location.pathname.split('/')[1] !== 'search'){
		return;
	}	
 	<hier der Scriptcode>
}

History

In dieser Änderungshistorie lässt sich nachvollziehen, was mit der neuen Version verändert wurde.
Dieser Eintrag wird stets aktuell gehalten.

Version 0.2.1
veröffentlicht: 17.10.2015
alphabetische Sortierung, Navigationsmenü Tools wird nur 1x erzeugt
Version 0.2.2
veröffentlicht: 17.10.2015
Methoden zum Erzeugen von Dialogen und Message hinzugefügt
Version 0.3.0
veröffentlicht: nie
Anker Extended (nur eingeloggt)
Version 0.3.1
veröffentlicht: 19.10.2015
Einführen der Modi
Version 0.4.0
veröffentlicht: nie
Ajax-Aufruf von Proxer triggert die changefunktion mit "Ajax Aufruf"
Die Scripte benötigen jetzt auch // @grant unsafeWindow
Methode für Versionsanzeige hinzugefügt
Version 0.4.1
veröffentlicht: 19.02.2016
Erst-Initialisierung Speichervariable
Anker Aufgeräumt
Version 0.4.2
veröffentlicht: 19.02.2016
Funktion 'Zeile im Extended Anker Member einfügen' hinzugefügt
Funktion 'Anleitung im Extended Anker Member einfügen' hinzugefügt

Quellcode

Den Quellcode des Ankers findet man hier.

Weitere Fragen?

Du kannst dich jederzeit an Blue.Reaper wenden.