[GM]Custom-Smileys-Script für epvp

Che · 11/16/2011, 22:38

Da es relativ viele Requests gibt neue Smileys einzuführen und diese im Normalfall zu keinem Ergebnis führen, hab ich mich mal drangesetzt ein Greasemonkeyscript zu schreiben, welches euch ermöglicht eigene Smileys zu verwenden.
Der Hauptteil des Scripts ist soweit fertig und deshalb release ich das hier mal

Das Script funktioniert (zurzeit) nur in der Quick-Reply-Box, auf der New Reply/Go Advanced Seite und beim Posten eines neuen Threads (also nur beim Editieren von Posts nicht

). Das ganze funktioniert wie folgt:
Nach der Installation des Scripts (einfach die Datei runterladen und in Firefox ziehen (natürlich nur, wenn ihr das Greasmonkey Addon habt) und danach die Installation bestätigen) müsst ihr nurnoch sicherstellen, dass Greasmonkey und das Script aktiviert sind. Schreibt eure Texte ganz normal. Wenn ihr nun auf "Submit Reply" bzw "Post Quick Reply" klickt ersetzt das Script alle eingegebenen Smileycodes mit dem jeweiligen [img]-Code und schickt den Post ganz normal ab. Somit seht nicht nur ihr die neuen Smileys sonder alle, die euren Post ansehen (da die Smileys einfach nur als Bilder eingefügt werden

)...

Standartmäßig sind einige der alten Skypesmileys(

) eingestellt, da ich diese hübsch finde und kein anderes Smileyset zum testen gefunden hab

Wenn ihr euch den Sourcecode anseht, dann werdet ihr merken, dass ich das ganze in 2 Teile aufgeteilt hab:
Einen in dem ihr die Smileys einstellen könnt (wird ab nächster Version wegfallen) und den eigentlichen Quellcode des Scripts.
Da ich wie schon vorher gesagt noch nicht mit dem Controlpanel fertig bin, müsst ihr die eigenen Smileys vorerst per Hand ins Script einfügen. Der Syntax ist relativ leicht:

Code:

ar[ar.length] = new Array(/[B]smileycode[/B]/gi, "[B]pfad zum bild[/B]");

Ihr müsst jedoch beachten, dass ihr vor Sonderzeichen, wie zB ) ( * \ / (und noch viele weitere), einen Backslash ( \ ) anfügen müsst, da es sonst zu massiven Bugs kommt bzw das Script garnichtmehr funktioniert

Neue Smileys einfach vor diesen Kommentar einfügen:

Code:

/////////////////////////////////////////////////////////////
//...............AB HIER NICHTS MEHR ÄNDERN!...............//
/////////////////////////////////////////////////////////////

Solltet ihr etwas experimentierfreudiger sein, dann könntet ihr zB nach diesem Kommentar den großen Block auskommentieren und in euer UserCP schauen, dann müssten da nml unter der Überschrift "Smileys" 2 neue Links vorhanden sein, welche beim Klicken jeweils auf eine nicht vorhandene Seite führen und eine Alertbox erscheint. Genau das ist später der Teil an dem das Controlpanel hinkommt

Eine kleine Liste der zZ funktionierenden Smileys:

Spoiler

Danke an Drewfire, der mich auf ein paar Rechtschreibfehler hingewiesen hat

~~Laxor~~ · 11/17/2011, 12:58

Yo danke.
Ich probiere es mal in diesem Post aus.

EDIT: Klappt nicht. :S

Che · 11/18/2011, 21:55

Quote:

Originally Posted by 杰人才

Yo danke.
Ich probiere es mal in diesem Post aus.
EDIT: Klappt nicht.

Probiers mal in der Orginalform, ich überarbeit es die Tage nochmal, hab n paar Bugs gefunden... Hab aber wahrscheinlich über die Woche kein Internetz also kanns etwas dauern

€dit: Bei mir funktionierts noch, also kann der Fehler nicht in der Programmierung (bzw nicht nur in der Programmierung) liegen...
Welchen Browser verwendest du? Versionsnummer und wenn möglich den Build?
Stimmt mit Greasemonkey alles? Kannst du andere GM Skripte fehlerfrei ausführen?
Hast du am Skript irgendwas verändert (das Einfügen eines neuen Smileys hat bei mir vorhin das Skript komplett funktionsuntüchtig gemacht)? Gab es Fehlermeldungen?
Hast du den Smileycode manuell eingegeben oder auf das Icon in der Smileybox geklickt?
Welches System verwendest du?

Bitte beantworte einige der Fragen anstatt einfach nur zu sagen, dass es nicht funktioniert, denn ansonsten kann ich dir leider nicht weiterhelfen.

In meinem Fall:
Nightly 11.0a1 Build 20111112031541
Greasemonkey aktiviert, Skript aktiviert, andere GM Skripte funktionieren fehlerfrei.
Skript unverändert, keine Fehlermeldungen (auch nicht in der Dev Konsole)
Smileycodes manuell eingegeben
Windows XP SP3

Cholik · 11/19/2011, 15:31

Habe mir das Script mal angesehen und ein paar Verbesserungsvorschläge für die Zukunft für dich parat, sofern es dich interessiert ^^

Dein Array kannst du z.B. so erstellen:

Code:

var ar = [
    [/:\)/gi, 'http://skypesmiley.com/images/emoticon/emoticon-0100-smile.gif'],
    [/:\(/gi, 'http://skypesmiley.com/images/emoticon/emoticon-0101-sadsmile.gif']
];

Generell würde ich ins Array nur den Command des Icons und die URL packen also quasi

Code:

var ar = [
    [':)', 'http://skypesmiley.com/images/emoticon/emoticon-0100-smile.gif'],
    [':(', 'http://skypesmiley.com/images/emoticon/emoticon-0101-sadsmile.gif']
];

Warum?
Ganz einfach, du solltest weiter unten im Code einfach mal den Buttons oder der Submit Funktion einen weiteren Listener hinzufügen oder eben komplett überschreiben und direkt aufs Textelement zugreifen und dort die Replace Methode verwenden. Vorher natürlich mit var regex = new RegExp(smiley_aus_dem_array, 'gi'); die Regular Expression initialisieren. So gewinnt das ganze schonmal an Qualität und Übersichtlichkeit.

Anstatt also die onsubmit Funktion auf eine eher dirty Weise zu erweitern würde ich sie komplett neu schreiben.

Achja und:

Code:

var editor = null;
if (document.getElementById('vB_Editor_QR')) editor = "vB_Editor_QR";
if (document.getElementById('vB_Editor_001')) editor = "vB_Editor_001";

funktioniert auch wunderbar in einer zeile:

Code:

var editor = document.getElementById('vB_Editor_QR') ? 'vB_Editor_QR' : 'vB_Editor_001';

Che · 11/20/2011, 21:03

Quote:
Originally Posted by Walter Sobchak
Habe mir das Script mal angesehen und ein paar Verbesserungsvorschläge für die Zukunft für dich parat, sofern es dich interessiert ^^

Dein Array kannst du z.B. so erstellen:
Code:
var ar = [
    [/:\)/gi, 'http://skypesmiley.com/images/emoticon/emoticon-0100-smile.gif'],
    [/:\(/gi, 'http://skypesmiley.com/images/emoticon/emoticon-0101-sadsmile.gif']
];
Generell würde ich ins Array nur den Command des Icons und die URL packen also quasi
Code:
var ar = [
    [':)', 'http://skypesmiley.com/images/emoticon/emoticon-0100-smile.gif'],
    [':(', 'http://skypesmiley.com/images/emoticon/emoticon-0101-sadsmile.gif']
];
Warum?
Ganz einfach, du solltest weiter unten im Code einfach mal den Buttons oder der Submit Funktion einen weiteren Listener hinzufügen oder eben komplett überschreiben und direkt aufs Textelement zugreifen und dort die Replace Methode verwenden. Vorher natürlich mit var regex = new RegExp(smiley_aus_dem_array, 'gi'); die Regular Expression initialisieren. So gewinnt das ganze schonmal an Qualität und Übersichtlichkeit.

Anstatt also die onsubmit Funktion auf eine eher dirty Weise zu erweitern würde ich sie komplett neu schreiben.

Achja und:
Code:
var editor = null;
if (document.getElementById('vB_Editor_QR')) editor = "vB_Editor_QR";
if (document.getElementById('vB_Editor_001')) editor = "vB_Editor_001";
funktioniert auch wunderbar in einer zeile:
Code:
var editor = document.getElementById('vB_Editor_QR') ? 'vB_Editor_QR' : 'vB_Editor_001';

Danke für den Einwurf, wobei der letzte Vorschlag nicht umsetzbar ist, komm ich gleich dazu...
Die alternative Initialisierung des Arrays ist wirklich n guter Vorschlag, denn das macht das Ganze viel übersichtlicher (was zwar eigentlich egal ist, weil in späteren Versionen der Nutzer nichtmehr an den Source gehen soll, sondern die Smileys im (mehrdimensionellen) "GM-Einstellungs-Array" gespeichert werden sollen... bin zZ dran es effektiv umzusetzen) , in der nächsten Version wird das auf jeden Fall geändert. Die Idee, die RegEx direkt in der Schleife zu initialisieren gefällt mir auch sehr gut, werde ich ändern...
Auf dem etwas dirty Weg die Eingaben anstatt via Eventlistener via onsubmit zu lösen funktioniert leider doch am besten. Werde trotzdem mal sehen ob ich es auch per Eventlistener (eleganter) lösen kann.
Die Idee mit den Ternären Operatoren ist zwar an sich nicht schlecht (obwohl es nur eine optische Veränderung ist), jedoch scheitert es spätestens beim Versuch die Editboxen mit einzubeziehen, denn dann wird das Ganze etwas komplexer, denn die WYSIWYG-Editoren von vBulletin haben eine etwas unvorteilhafte Namensgebung:
vB_Editor_QR -> Quick Reply
vB_Editor_001 -> "Reply to Thread", also die Extraseite
soweit so gut, aber die Editbox hats in sich:
vB_Editor_QE_<zahl> -> Editbox, <zahl> ist mit der Anzahl der erfolgreichen Edits zu ersetzen
Und hier fangen die Probleme an, außerdem bringt mir n ternärer Operator bei 3(bis Unendlich) Möglichkeiten so viel wie n Puff im Vatikan...

€dit: Sollte mir vllt was einfallen lassen, damit mir mein Skript nix an Quotes verändert :>

Cholik · 11/21/2011, 15:46

Quote:

Originally Posted by 〤Che〤

Die Idee mit den Ternären Operatoren ist zwar an sich nicht schlecht (obwohl es nur eine optische Veränderung ist), jedoch scheitert es spätestens beim Versuch die Editboxen mit einzubeziehen, denn dann wird das Ganze etwas komplexer, denn die WYSIWYG-Editoren von vBulletin haben eine etwas unvorteilhafte Namensgebung:
vB_Editor_QR -> Quick Reply
vB_Editor_001 -> "Reply to Thread", also die Extraseite
soweit so gut, aber die Editbox hats in sich:
vB_Editor_QE_<zahl> -> Editbox, <zahl> ist mit der Anzahl der erfolgreichen Edits zu ersetzen
Und hier fangen die Probleme an, außerdem bringt mir n ternärer Operator bei 3(bis Unendlich) Möglichkeiten so viel wie n Puff im Vatikan...

Dann solltest du vielleicht anfangen jQuery zu verwenden, erleichtert einem das Leben

reicht wenn du den Code oben im Userscript einfügst.

Und dann kannst du dir z.B. die momentan aktiven Editoren mit sowas wie $(document).find('textarea[id^="vB_Editor"]'); raussuchen.

Ich würde an deiner Stelle nicht auf die GM-Funktionen setzen zum dauerhaften Speichern von irgendwelchen Werten, weil das ein GM-Feature ist und du keine garantierte und dauerhafte Funktionalität unter anderen Browsern als Firefox hast. Da würde ich dir lieber raten das Object

zu verwenden, das verwende ich u.A. bei meiner Shoutbox-Erweiterung um Chatlogs browserseitig zu speichern. localStorage bleibt natürlich selbst nach einem Cache-Delete oder Cacheless Refresh vorhanden, somit ideal um etwas dauerhaft zu speichern beim User.

Che · 11/21/2011, 22:56

Quote:

Originally Posted by Walter Sobchak

Dann solltest du vielleicht anfangen jQuery zu verwenden, erleichtert einem das Leben
reicht wenn du den Code oben im Userscript einfügst.

Und dann kannst du dir z.B. die momentan aktiven Editoren mit sowas wie $(document).find('textarea[id^="vB_Editor"]'); raussuchen.

Ich würde an deiner Stelle nicht auf die GM-Funktionen setzen zum dauerhaften Speichern von irgendwelchen Werten, weil das ein GM-Feature ist und du keine garantierte und dauerhafte Funktionalität unter anderen Browsern als Firefox hast. Da würde ich dir lieber raten das Object zu verwenden, das verwende ich u.A. bei meiner Shoutbox-Erweiterung um Chatlogs browserseitig zu speichern. localStorage bleibt natürlich selbst nach einem Cache-Delete oder Cacheless Refresh vorhanden, somit ideal um etwas dauerhaft zu speichern beim User.

Danke danke, endlich ist auch das letzte große Problem gelöst!

Code:

var editor = $(document).find('textarea[id^="vB_Editor"]')[0].id.toString();
editor = editor.replace("_textarea", "");

klappt wunderbar

Ich hab bis jetzt immer alles in den GM-Variablen gespeichert und bastle grade mit ner Lösung via XML rum, aber da laggts nur wie verrückt

Werd mir das localStorage dann mal die Tage ansehen.

~~Laxor~~ · 02/01/2012, 15:30

Ich grab das mal aus.
Funktioniert hervorragend.

Darf ich die Smileys durch die neuen ersetzen ?

Che · 02/02/2012, 15:38

Quote:

Originally Posted by 杰人才

Ich grab das mal aus.
Funktioniert hervorragend.

Darf ich die Smileys durch die neuen ersetzen ?

Ja natürlich, du kannst am Script ändern, was immer du willst. Das Projekt ist sowieso zZ auf Eis gelegt, weil ich an was anderem arbeite