Da mir die Idee von Brause-Junior gut gefallen hat, habe ich mich hingesetzt und so ein Script geschrieben. Mit diesem Script ist es möglich die User in der Onlineliste in Gruppen zu verteilen. Dabei sind auch eigens von euch erstellte Gruppen möglich!
Es lässt sich genau festlegen, wie die User in den einzelnen Gruppen aussehen (Farben, Schriftart...), wer in welche Gruppe kommt, ob User eigene Bilder vor oder nach dem Nick bekommen und mehr!
Administratoren, Moderatoren (das Chatteam) und Gäste werden vom Script selbst erkannt und den richtigen Listen selbst zugeordnet. Das Chatteam muss also nicht selbst abgetippt werden, außer man möchte es natürlich.
Hier ist das Script:
Script:Zeigen
Code: Alles auswählen
// Version 2.0.2
newOL = new (function () {
/* Konfiguration */
// Hier werden die einzelnen Gruppen für die Onlineliste angegeben
// Die Syntax ist:
// ["ID", "NAME", "CSS-STYLE", [USERLISTE], LISTE-AUSBLENDEN-WENN-LEER],
// ID = Hier musst du eine ID für die Gruppe angeben. Diese muss einzigartig sein und darf insgesamt nur einmal vorkommen!
// NAME = Hier kommt der Gruppenname hin, also die Überschrift der Gruppe. HTML darf benutzt werden!
// CSS-STYLE = Hier kannst du beliebig viele CSS-Befehle auflisten. Diese ändern den Style (z.B. Farbe) der User in dieser Gruppe. Übersicht der CSS-Befehle findest du z.B. hier: http://www.html-seminar.de/css-definitionen-uebersicht.htm
// [USERLISTE] = Hier werden die User aufgezählt, die auf jeden Fall in diese Gruppe müssen. Syntax: ["USER1", "USER2", "USER3", "USER4"]
// LISTE-AUSBLENDEN-WENN-LEER = Hier wird true (ohne Anführungszeichen ("") !) angegeben, wenn die Gruppe ausgeblendet werden darf, wenn sie leer ist. Sonst muss false (auch ohne Anführungszeichen ("") !) angegeben werden!
// Die Reihenfolge der Gruppen kann beliebig geändert werden. Sie erscheinen in der Onlineliste in genau der gleichen Reihenfolge wie hier angegeben,
// BEACHTE: Nach der letzten Gruppe darf KEIN Komma stehen, aber die vorherigen Gruppen benötigen unbedingt eins danach!
this.olBlocks = [
["team", "Team", "", [], true],
["user", "User", "", [], true],
["guest", "Gäste", "", [], true],
["away", "Abwesend", "color: #FF0000;", [], true]
];
// Hier können Bilder vor oder nach den Nicks angefügt werden
// this.olPicsBefore fügt Bilder VOR den Nicks ein und this.olPicsBefore NACH den Nicks
// Die Syntax ist:
// ["URL-ZUM-BILD", "USER1", "USER2", "USER3"],
// URL-ZUM-BILD = Hier muss die URL zum Bild angegeben werden
// USER = Hier können die User angegeben werden, die das Bild erhalten sollen. Es können beliebig viele User angegeben werden, diese müssen nur immer durch ein Komma abgetrennt werden und in Anführungszeichen gesetzt werden. Nach dem letzten User kommt kein Komma!
// Es können beliebig viele Gruppen (Bilder mit ihren Usern) angegeben werden.
// BEACHTE: Nach der letzten Gruppe darf wie immer KEIN Komma stehen, aber die vorherigen Gruppen benötigen unbedingt eins danach!
this.olPicsBefore = [
];
this.olPicsAfter = [
];
// Hier kann man Usern einen bestimmten CSS-Sytle einrichten, der den jeweiligen Gruppenstyle "überschreibt"
// Die Syntax ist:
// ["USER", "CSS-STYLE"],
// USER = Hier kommt der Username des Nicks hinein, der einen eigenen CSS-Style bekommen soll
// CSS-Style = Hier kannst du beliebig viele CSS-Befehle auflisten. Diese ändern den Style (z.B. Farbe) des Users. Übersicht der CSS-Befehle findest du z.B. hier: http://www.html-seminar.de/css-definitionen-uebersicht.htm
// Es können beliebig viele User einen eigenen CSS-Style bekommen
// BEACHTE: Nach der letzten Gruppe darf wie immer KEIN Komma stehen, aber die vorherigen Gruppen benötigen unbedingt eins danach!
this.userStyle = [
];
// Hier wird eingestellt, ob die einzelnen User in den Gruppen alphabetisch sortiert werden sollen
// 1 = Aktiviert; 0 = Deaktiviert
this.olSortActivated = 1;
// Hier wird die Position des Profillinks eingestellt
// 1 = Nach dem Nicknamen; 0 = Vor dem Nicknamen
this.pPosition = 1;
// Hier wird eingestellt, ob ein Minus (-) vor den Überschriften der Onlinelisten angezeigt werden soll
// Das Plus (+) wird trotzdem angezeigt, wenn eine Liste durch einen Klick auf die Überschrift ausgeblendet wird
// 1 = Minus wird angezeigt; 0 = Minus wird nicht angezeigt
this.showMinus = 0;
/* Ende der Konfiguration */
/* Ab hier bitte nichts mehr ändern! */
var that = this;
// user - speichert in einem Array alle User im Chatraum
// Pro User ein Array mit 6 Strings
// 1. String: Name; 2. String: Profil; 3. String: Rang; 4. String: Away; 5. String: Raum; 6. String: Awaygrund
this.user = [];
// createBlocks - erstellt die Gruppen in der OL und startet das Script
this.createBlocks = function () {
if (olIsLoad()) {
var prFd = parent.rightFrame.document;
var invOL = (!myBrowser.IE || navigator.userAgent.match(/MSIE ((\d\d)|9)\.\d+/)) ? ((prFd.getElementsByTagName("body")[0].childNodes[2].nodeName == "TABLE") ? true : false) : false;
// Die 2. Überprüfung verhindert unsichtbare OL
if (!prFd.getElementById("newOL") || invOL) {
prFd.getElementById("bd:").style.display = "none";
that.overwriteAdds();
that.delNewOL();
var newTD = document.createElement("td");
newTD.id = "newOL";
prFd.getElementsByTagName("tr")[0].appendChild(newTD);
for (var i = 0; i < that.olBlocks.length; i++) {
var olBid = that.olBlocks[i][0];
var newOLBlock = document.createElement("div");
var hl = that.olBlocks[i][1];
with (newOLBlock) {
id = olBid + "wrapper";
style.display = (that.olBlocks[i][4] == false) ? "block" : "none";
innerHTML = "<div id='" + olBid + "headline' style='margin-top:10px; margin-bottom:1px;'><span id='" + olBid + "link' title='Chatter in dieser Liste verbergen' onclick=\"parent.mainframe.newOL.switchStatus('" + olBid + "', '" + hl + "')\">" + ((that.showMinus) ? "- " : "" ) + hl + "</a></div>";
innerHTML += "<ul id='" + olBid + "list' style='list-style-type:none; margin-top:5px; margin-bottom:1px;" + that.olBlocks[i][2] + "'></ul>";
}
prFd.getElementById("newOL").appendChild(newOLBlock);
}
getXML("GET", "/"+chatData[1]+"/api/get_onlinelist?" + new Date().getTime(), 0, that.getUser);
}
} else {
window.setTimeout("parent.mainframe.newOL.createBlocks()", 50);
}
}
// delNewOl - löscht die neue Onlineliste
this.delNewOL = function () {
var delOL;
if (delOL = parent.rightFrame.document.getElementById("newOL")) {
delOL.parentNode.removeChild(delOL);
}
}
// switchStatus - blendet einen Block ein und aus
// id: ID des Blocks; hl: Blocküberschrift
this.switchStatus = function (id, hl) {
var prFd = parent.rightFrame.document;
if (prFd.getElementById(id + "list").style.display != "none") {
with (prFd.getElementById(id + "link")) {
innerHTML = "+ " + hl;
title = "Chatter in dieser Liste anzeigen";
}
prFd.getElementById(id + "list").style.display = "none";
} else {
with (prFd.getElementById(id + "link")) {
innerHTML = ((that.showMinus) ? "- " : "") + hl;
title = "Chatter in dieser Liste verbergen";
}
prFd.getElementById(id + "list").style.display = "block";
}
}
// hideBlock - versteckt einen Block, wenn er leer ist
// id: ID des Blocks
this.hideBlock = function (id) {
for (var i = 0; i < that.olBlocks.length; i++) {
if (that.olBlocks[i][0] == id) {
if (that.olBlocks[i][4] == false) {
return;
}
break;
}
}
var prFd = parent.rightFrame.document;
if (typeof prFd.getElementById(id + "list").childNodes[0] == "undefined") {
prFd.getElementById(id + "wrapper").style.display = "none";
} else {
prFd.getElementById(id + "wrapper").style.display = "block";
}
}
// getOnlineUser - füllt das Array user
// r: auszuwertendes Request
this.getUser = function (r) {
if (r.readyState == 4) {
// Wenn Status 200 ist, ist alles korrekt gelaufen
if (r.status != 200) {
console.log(r);
} else {
var c = r.responseXML.documentElement;
that.user = [];
for (var i = 0; i < c.getElementsByTagName("onlineuser").length; i++) {
var u = c.getElementsByTagName("onlineuser")[i];
that.user[i] = [];
with (that.user[i]) {
push(u.getElementsByTagName("name")[0].firstChild.data);
push(u.getElementsByTagName("profil")[0].firstChild.data);
push(u.getElementsByTagName("rang")[0].firstChild.data);
push(u.getElementsByTagName("away")[0].firstChild.data);
push(u.getElementsByTagName("channel")[0].firstChild.data);
}
if (u.getElementsByTagName("awayreason")[0].firstChild) {
that.user[i].push(u.getElementsByTagName("awayreason")[0].firstChild.data);
} else {
that.user[i].push("");
}
if (u.getElementsByTagName("iconid")[0].firstChild) {
that.user[i].push(u.getElementsByTagName("iconid")[0].firstChild.data);
}
}
that.firstAdds();
}
}
}
// firstAdds - schreibt die User in die Onlineliste, die schon online sind und per getUser geladen wurden
this.firstAdds = function () {
for (var j = 0; j < that.user.length; j++) {
if (that.user[j][0] == myNick) {
break;
}
}
for (var i = 0; i < that.user.length; i++) {
if (that.user[j][4] == that.user[i][4]) {
var away = (that.user[i][3] == "0") ? 0 : 1;
var awayr = (that.user[i][5] == "") ? "" : that.user[i][5];
var server = (that.user[i][1] == 1) ? "server" + chatData[0] : "";
var chat = (that.user[i][1] == 1) ? chatData[1] : "";
var icon = (typeof that.user[i][6] == "undefined") ? "" : that.user[i][6];
var rank = that.getRankException(that.user[i][0]);
rank = (rank == 0) ? that.user[i][2] : rank;
if (rank.match(/list$/) == null) {
switch (rank) {
case "gast":
rank = "guestlist";
break;
case "admin":
rank = "teamlist";
break;
case "mod":
rank = "teamlist";
break;
default:
rank = "userlist";
break;
}
}
that.add(that.user[i][0], away, awayr, server, chat, icon, rank);
}
}
}
// getRankException - durchsucht alle Elemente in olBlocks nach Usern und gibt den jeweiligen Blocknamen zurück
// chatter: User, nach dem gesucht werden soll
this.getRankException = function (chatter) {
for (var i = 0; i < that.olBlocks.length; i++) {
var list = that.olBlocks[i][3];
var t = typeof list;
if (t != undefined && ((t == "object" && list.inArray(chatter)) || (t == "string" && list == chatter))) {
return that.olBlocks[i][0] + "list";
}
}
return 0;
}
// getBlock - checkt die Loginnachricht findet heraus, in welchen Block der User muss
// user: User; profil: hat der User ein Profil (1 oder 0); icon: Icon-ID für Profilicon
this.getBlock = function (user, profil, icon) {
var tds = parent.mainframe.document.getElementsByTagName("td");
var rank = that.getRankException(user);
if (rank == 0) {
var howlong = (tds.length > 5) ? 5 : tds.length;
var clD;
for (var i = 1; i <= howlong; i++) {
clD = lineData(tds[tds.length - i]);
if (clD != null && clD[2] == user && clD[4] == 0) {
rank = "guestlist";
break;
}
}
if (rank == 0) {
howlong = (chatTeam[0].length > chatTeam[1].length) ? chatTeam[0].length : chatTeam[1].length;
howlong = (1 > howlong) ? 1 : howlong;
for (var i = 0; i < howlong; i++) {
if (chatTeam[0][i] == user || chatTeam[1][i] == user || chatTeam[2] == user) {
rank = "teamlist";
break;
}
}
}
if (rank == 0) {
rank = "userlist";
}
}
for (var i = 0; i < that.user.length; i++) {
if (that.user[i][0] == user) {
return rank;
}
}
var j = that.user.length;
that.user[j] = [];
with (that.user[j]) {
push(user);
push(profil);
push(rank);
push("0");
push(getRoom());
push("");
push(icon);
}
return rank;
}
// olSort - sortiert die einzelnen User alphabetisch
// chatter: User, der in der Liste alphabetisch sortiert werden soll; block: Liste, in der sich der User befindet
this.olSort = function (chatter, block) {
var prFd = parent.rightFrame.document;
var b = prFd.getElementById(block);
var s = b.getElementsByTagName("span");
if (s.length != 0) {
for (var i = 0; i < s.length; i++) {
var c = chatter.toLowerCase();
var span = s[i].innerHTML.replace(/\s$/, "");
var sortArray = [span.toLowerCase(), c].sort();
if (sortArray[0] == c && sortArray[1] != c) {
b.insertBefore(prFd.getElementById("new" + chatter), prFd.getElementById("new" + span));
break;
}
}
} else {
return;
}
}
// addPics - fügt dem User ein Bild vor oder nach dem Nick ein Bild ein
// chatter: User, dem das Bild angehängt werden soll, loc: Ort (0 = vor dem Nick; 1 = nach dem Nick); profil: Besitzt der User ein Profil (0 oder 1)
this.addPics = function (chatter, loc, profil) {
picloc = (loc) ? that.olPicsAfter : that.olPicsBefore;
for (var i = 0; i < picloc.length; i++) {
for (var j = 1; j < picloc[i].length; j++) {
if ((typeof picloc[i][j] == "string" && picloc[i][j] == chatter) || (typeof picloc[i][j] == "object" && picloc[i][j].inArray(chatter))) {
return ((loc) ? " " : "") + "<img src='" + picloc[i][0] + "' />" + ((!loc) ? " " : "");
}
}
}
return "";
}
// addP - Fügt das Profilzeichen hinzu
// chatter: User; ownsprofil: Besitzt User Profil; icon: Beinhaltet das Icon oder P; server: Server + Nummer; chat: Chatname;
this.addP = function (chatter, ownsprofil, icon, server, chat) {
if (ownsprofil) {
return "<a id='profil" + chatter + "' title='Profil von " + chatter + "' href=\"Javascript:wopen(\'" + parent.rightFrame.location.protocol + "//" + server + ".webkicks.de/" + chat + "/pv/" + chatter + "/open\',510,600)\;\">" + icon + "</a>";
}
return "";
}
// getUserStyle - durchsucht userStyle und gibt bei Erfolg den Style des Users zurück
// chatter: User, dessen Style gesucht wird
this.getUserStyle = function (chatter) {
for (var i = 0; i < that.userStyle.length; i++) {
var s = that.userStyle[i];
if (s[0] == chatter) {
return s[1];
}
}
return "";
}
// add - fügt den User in die Onlineliste ein
// chatter: User, der eingefügt werden soll; away: Abwesend (0 oder 1); reason: Abwesendheitsgrund; server: Falls Profil - "server" + Nummer; chat: Falls Profil - Chatname; icon: Icon-ID des Profilicons; rank: Falls angegeben - in welche Liste er kommt
this.add = function (chatter, away, reason, server, chat, icon, rank) {
var prFd = parent.rightFrame.document;
that.del(chatter, 1);
if (!prFd.getElementById("new" + chatter)) {
var ownsprofil = (server && chat) ? 1 : 0;
var pIcon = (icon) ? '<img src="' + parent.rightFrame.location.protocol + '//' + server + '.webkicks.de/' + chat + '/icons/bild' + icon + '.gif" />' : 'P';
var block = (away) ? "awaylist" : ((rank) ? rank : that.getBlock(chatter, ownsprofil, icon));
var newChatter = document.createElement("li");
with (newChatter) {
id = "new" + chatter;
title = (away) ? chatter + " ist abwesend" + ((reason) ? ": " + reason : "") : chatter;
innerHTML = that.addPics(chatter, 0) + ((!that.pPosition) ? that.addP(chatter, ownsprofil, pIcon, server, chat) + " " : "") + "<span style='" + that.getUserStyle(chatter) + "' onclick=\"fluester('" + chatter + "');\">" + chatter + "</span>";
innerHTML += (that.pPosition) ? " " + that.addP(chatter, ownsprofil, pIcon, server, chat) : "";
innerHTML += that.addPics(chatter, 1, ownsprofil);
}
prFd.getElementById(block).appendChild(newChatter);
if (that.olSortActivated) {
that.olSort(chatter, block);
}
that.hideBlock(block.replace(/list$/, ""));
}
}
// del - löscht einen User aus der Onlineliste und von this.user
// id: Nickname; fromadd: Kommt die Anfrage von add (0 oder 1)
this.del = function (id, fromadd) {
var prFd = parent.rightFrame.document;
var delUser;
if (delUser = prFd.getElementById("new" + id)) {
var block = delUser.parentNode.id.replace(/list$/, "");
delUser.parentNode.removeChild(delUser);
that.hideBlock(block);
}
if (!fromadd) {
for (var i = 0; i < that.user.length; i++) {
if (that.user[i][0] == id) {
that.user.splice(i, 1);
break;
}
}
}
}
// overwriteAdds - überschreibt die add- und del-Funktionen der alten Onlineliste
this.overwriteAdds = function () {
var rf = parent.rightFrame;
rf.add = function (chatter, away, reason) {
rf.del(chatter);
that.add(chatter, away, reason);
if (rf.document.getElementById(chatter) == null) {
var y3 = document.createElement("div");
y3.id = chatter;
y3.innerHTML += "<span" + ((away) ? " style=\"font-style: italic;\"" : "") + " title=" + ((away && reason) ? chatter + "ist abwesend: " + reason : chatter) + "><span onclick=\"fluester('" + chatter + "')\">" + chatter + " </span></span>";
rf.document.getElementById("bd:").appendChild(y3);
}
}
rf.addp = function (chatter, server, chat, away, reason, img) {
rf.del(chatter);
away = (away == "0") ? 0 : 1;
that.add(chatter, away, reason, server, chat, img);
if (rf.document.getElementById(chatter) == null) {
var pIcon = (img) ? '<img src="' + parent.rightFrame.location.protocol + '//' + server + '.webkicks.de/' + chat + '/icons/bild' + img + '.gif" />' : 'P';
var y3 = document.createElement("div");
y3.id = chatter;
y3.innerHTML = "<font title=\"Profil von " + chatter + "\"><a href=\"Javascript:wopen(\'" + parent.rightFrame.location.protocol + "//" + server + ".webkicks.de/" + chat + "/pv/" + chatter + "/open\',510,600)\;\">" + pIcon + " </a></font>";
y3.innerHTML += "<span" + ((away) ? " style=\"font-style: italic;\"" : "") + " title=" + ((away && reason) ? chatter + "ist abwesend: " + reason : chatter) + "><span onclick=\"fluester('" + chatter + "')\">" + chatter + "</span></span>";
rf.document.getElementById("bd:").appendChild(y3);
}
}
rf.del = function (user) {
that.del(user, 0);
var xy = rf.document.getElementById(user);
if(xy != null) {
rf.document.getElementById("bd:").removeChild(xy);
}
}
}
});
newOLint = window.setInterval('newOL.createBlocks();', 1000);
Code: Alles auswählen
<script type="text/javascript" src="URL-ZUR-JS-DATEI"></script>
Da das Script doch etwas größer ist (und auch noch werden kann), erfolgt im nächsten Post eine ausführliche Anleitung zur Konfiguration des Scripts.
Versionsübersicht
Script:Zeigen
13.08.2011 - Release
12.12.2011 - V1.1
12.12.2011 - V1.1
- * An das Update der GSS angepasst
- * Gäste werden beim Raumwechsel nun in der richtigen Liste angezeigt
* Die Onlineliste sollte nun nicht mehr ganz verschwinden können
- * Die Probleme in den früheren IE-Versionen wurden behoben
- + Das neue Profilsystem wurde in diesem Script übernommen
* User mit Profil landen nun nicht mehr standardmäßig in der Awayliste und kommen dort nicht mehr heraus
- * Vor Usern, die kein Profil besitzen, steht nun kein "undefined" mehr
- + Die Möglichkeit, dass Listen ausgeblendet werden, wenn diese keine User beinhalten, wurde hinzugefügt. Sie werden automatisch sichtbar bzw. unsichtbar, wenn ein User in diese Liste kommt bzw. wenn kein User mehr in der Liste steht.
+ Es können bei den Bildern nun auch Arrays angegeben werden (z.B. chatTeam[1] für Admins)
+ Man kann nun optional einstellen, ob das Minus vor den Listenüberschriften steht. Die User in den Listen lassen sich jetzt auch durch einen Klick auf die Überschrift ausblenden. Das Plus erscheint aber trotzdem vor der Überschrift, wenn die User in dieser Liste ausgeblendet wurden
- * Wenn Usern ohne Profil hinten ein Bild angehängt wird, dann ist von nun an ein Leerzeichen zwischen Bild und Namen
- * Wenn der Chat per Https-Verbindung verschlüsselt ist, wird dieses Protokoll auch für die Profile und Profilicons richtig verwendet.