mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Somewhat prettier css
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -1,207 +1,311 @@
|
||||
var Chat = {
|
||||
channel_received: 0,
|
||||
all_received: 0,
|
||||
chat_admin_help: [
|
||||
"/ban USERNAME REASON to ban user",
|
||||
"/unban USERNAME to unban a user"
|
||||
],
|
||||
chat_help: [
|
||||
"/login <new name> <password> to register and save a password for a nickname, or to log in with a password on a name.",
|
||||
"/login <name> <new_password> <old_password> to change the password on a nickname",
|
||||
"/logout to logout",
|
||||
"/who to see the names of the people in the channel",
|
||||
"Want your own icon besides your name? If you donate 5$ or more, we'll add a picture of your choosing (following our guidelines) besides your name!"
|
||||
],
|
||||
|
||||
channel_received: 0,
|
||||
all_received: 0,
|
||||
chat_admin_help: [
|
||||
"/ban USERNAME REASON to ban user",
|
||||
"/unban USERNAME to unban a user"
|
||||
],
|
||||
chat_help: [
|
||||
"/login <new name> <password> to register and save a password for a nickname, or to log in with a password on a name.",
|
||||
"/login <name> <new_password> <old_password> to change the password on a nickname",
|
||||
"/logout to logout",
|
||||
"/who to see the names of the people in the channel",
|
||||
"Want your own icon besides your name? If you donate 5$ or more, we'll add a picture of your choosing (following our guidelines) besides your name!"
|
||||
],
|
||||
namechange: function(data, first, initial) {
|
||||
var input = data.split(" ");
|
||||
if (input.length == 2) {
|
||||
var name = input[0];
|
||||
var password = input[1];
|
||||
|
||||
namechange: function(data, first, initial) {
|
||||
var input = data.split(" ");
|
||||
if(input.length == 2) {
|
||||
var name = input[0];
|
||||
var password = input[1];
|
||||
password = Crypt.crypt_chat_pass(password);
|
||||
socket.emit("namechange", {
|
||||
name: name,
|
||||
channel: chan.toLowerCase(),
|
||||
password: password,
|
||||
first: first
|
||||
});
|
||||
} else if (input.length == 3) {
|
||||
var name = input[0];
|
||||
var new_password = input[1];
|
||||
var old_password = input[2];
|
||||
|
||||
password = Crypt.crypt_chat_pass(password);
|
||||
socket.emit("namechange", {name: name, channel: chan.toLowerCase(), password: password, first: first});
|
||||
} else if(input.length == 3) {
|
||||
var name = input[0];
|
||||
var new_password = input[1];
|
||||
var old_password = input[2];
|
||||
new_password = Crypt.crypt_chat_pass(new_password);
|
||||
old_password = Crypt.crypt_chat_pass(old_password);
|
||||
|
||||
new_password = Crypt.crypt_chat_pass(new_password);
|
||||
old_password = Crypt.crypt_chat_pass(old_password);
|
||||
|
||||
socket.emit("namechange", {name: name, channel: chan.toLowerCase(), new_password: new_password, old_password: old_password});
|
||||
} else if(first) {
|
||||
var to_send = {initial: initial, first: true};
|
||||
if(chan != undefined && chan != "") {
|
||||
to_send.channel = chan.toLowerCase();
|
||||
}
|
||||
socket.emit("namechange", to_send);
|
||||
}
|
||||
},
|
||||
|
||||
removename: function() {
|
||||
socket.emit("removename", {channel: chan.toLowerCase()});
|
||||
Crypt.remove_name();
|
||||
},
|
||||
|
||||
chat: function(data) {
|
||||
if(data.value.length > 150) return;
|
||||
if(data.value.startsWith("/name ") || data.value.startsWith("/removename")) {
|
||||
data.value = "/help";
|
||||
Chat.chat(data);
|
||||
return;
|
||||
} else if(data.value.startsWith("/login ")){
|
||||
Chat.namechange(data.value.substring(7), false);
|
||||
} else if(data.value.startsWith("/help")) {
|
||||
var add = "";
|
||||
if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat"){
|
||||
if(document.querySelector("#chatall").children.length > 100) {
|
||||
document.querySelector("#chatall").children[0].remove()
|
||||
}
|
||||
add = "chatall";
|
||||
} else {
|
||||
if(document.querySelector("#chatchannel").children.length > 100) {
|
||||
document.querySelector("#chatchannel").children[0].remove()
|
||||
}
|
||||
add = "chatchannel";
|
||||
}
|
||||
var help = Chat.chat_help;
|
||||
if(Admin.logged_in) help = help.concat(Chat.chat_admin_help);
|
||||
for(var x = 0; x < help.length; x++) {
|
||||
var color = Helper.intToARGB(Helper.hashCode("System"));
|
||||
if(color.length < 6) {
|
||||
for(x = color.length; x < 6; x++) {
|
||||
color = "0" + color;
|
||||
}
|
||||
}
|
||||
var _time = new Date();
|
||||
var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
|
||||
color = Helper.hexToRgb(color.substring(0,6));
|
||||
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
|
||||
document.querySelector("#" + add).insertAdjacentHTML("beforeend", "<li title='Zoff''><span class='time_color'>" + time + "</span> <img class='chat-icon' src='https://zoff.me/assets/images/favicon-32x32.png' alt='System'><span style='color:" + color_temp + ";'>System</span>: </li>");
|
||||
var in_text = document.createTextNode(help[x]);
|
||||
document.querySelector("#" + add).children[document.querySelector("#" + add).children.length - 1].appendChild(in_text);
|
||||
document.getElementById("" + add).scrollTop = document.getElementById("" + add).scrollHeight;
|
||||
}
|
||||
} else if(data.value.startsWith("/logout")) {
|
||||
Chat.removename();
|
||||
} else if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat") {
|
||||
socket.emit("all,chat", {channel: chan.toLowerCase(), data: data.value});
|
||||
} else {
|
||||
socket.emit("chat", {channel: chan.toLowerCase(), data: data.value});
|
||||
}
|
||||
data.value = "";
|
||||
return;
|
||||
},
|
||||
|
||||
createChatElement: function(allchat, channel, time, icon, color, from, message) {
|
||||
var liElement = document.createElement("li");
|
||||
liElement.innerHTML += "<span class='time_color'>" + time + "</span> " + icon;
|
||||
var nameElement = document.createElement("span");
|
||||
nameElement.innerText = from;
|
||||
nameElement.style.color = color;
|
||||
liElement.appendChild(nameElement);
|
||||
if(allchat) {
|
||||
liElement.title = channel;
|
||||
liElement.innerHTML += "<span class='channel-info-all-chat'> " + channel + "</span>";
|
||||
}
|
||||
var in_text = document.createTextNode(message);
|
||||
liElement.appendChild(in_text);
|
||||
return liElement;
|
||||
},
|
||||
|
||||
allchat: function(inp, time_sent, disable_blink) {
|
||||
if(inp.msg.substring(0,1) == ":" && !chat_active && !disable_blink) {
|
||||
Chat.all_received += 1;
|
||||
document.querySelector("#favicon").getAttribute("href", "/assets/images/highlogo.png");
|
||||
unseen = true;
|
||||
chat_unseen = true;
|
||||
Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
|
||||
var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
|
||||
Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
|
||||
}
|
||||
|
||||
if(document.hidden) {
|
||||
document.getElementById("favicon").setAttribute("href", "/assets/images/highlogo.png");
|
||||
}
|
||||
|
||||
if(document.querySelector("#chatall").children.length > 100) {
|
||||
document.querySelector("#chatall").children[0].remove()
|
||||
}
|
||||
var color = Helper.intToARGB(Helper.hashCode(inp.from));
|
||||
if(color.length < 6) {
|
||||
for(x = color.length; x < 6; x++){
|
||||
color = "0" + color;
|
||||
}
|
||||
}
|
||||
var icon_add = "";
|
||||
if(inp.hasOwnProperty("icon") && inp.icon !== false && inp.icon != "") {
|
||||
icon_add = "<img class='chat-icon' src='" + inp.icon + "' alt='" + inp.from + "'>";
|
||||
}
|
||||
|
||||
color = Helper.hexToRgb(color.substring(0,6));
|
||||
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
|
||||
var _time = new Date();
|
||||
if(time_sent) {
|
||||
_time = new Date(time_sent);
|
||||
}
|
||||
var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
|
||||
var element = Chat.createChatElement(true, Helper.decodeChannelName(inp.channel), time, icon_add, color_temp, inp.from, inp.msg);
|
||||
//document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
|
||||
document.querySelector("#chatall").appendChild(element);
|
||||
if(!userscroll) {
|
||||
programscroll = true;
|
||||
document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight;
|
||||
programscroll = false;
|
||||
}
|
||||
},
|
||||
|
||||
channelchat: function(data, time_sent, disable_blink) {
|
||||
if(data.msg.substring(0,1) == ":" && !chat_active && !disable_blink && data.from.toLowerCase() != "system") {
|
||||
document.querySelector("#favicon").setAttribute("href", "/assets/images/highlogo.png");
|
||||
unseen = true;
|
||||
chat_unseen = true;
|
||||
Chat.channel_received += 1;
|
||||
//blink_interval = setTimeout(Chat.chat_blink, 1000);
|
||||
Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
|
||||
var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
|
||||
Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
|
||||
}
|
||||
|
||||
if(document.querySelector("#chatchannel").children.length > 100) {
|
||||
document.querySelector("#chatchannel").children[0].remove()
|
||||
}
|
||||
|
||||
var icon_add = "";
|
||||
if(data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") {
|
||||
icon_add = "<img class='chat-icon' src='" + data.icon + "' alt='" + data.from + "'>";
|
||||
}
|
||||
|
||||
var color = Helper.intToARGB(Helper.hashCode(data.from));
|
||||
if(color.length < 6) {
|
||||
for(x = color.length; x < 6; x++) {
|
||||
color = "0" + color;
|
||||
}
|
||||
}
|
||||
color = Helper.hexToRgb(color.substring(0,6));
|
||||
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
|
||||
var _time = new Date();
|
||||
if(time_sent) {
|
||||
_time = new Date(time_sent);
|
||||
}
|
||||
var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
|
||||
//document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "<li><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+data.from+"</span></li>");
|
||||
//var in_text = document.createTextNode(data.msg);
|
||||
//document.querySelector("#chatchannel").children[document.querySelector("#chatchannel").children.length - 1].appendChild(in_text);
|
||||
var element = Chat.createChatElement(false, null, time, icon_add, color_temp, data.from, data.msg);
|
||||
//document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
|
||||
document.querySelector("#chatchannel").appendChild(element);
|
||||
|
||||
if(!userscroll) {
|
||||
programscroll = true;
|
||||
document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight;
|
||||
programscroll = false;
|
||||
}
|
||||
socket.emit("namechange", {
|
||||
name: name,
|
||||
channel: chan.toLowerCase(),
|
||||
new_password: new_password,
|
||||
old_password: old_password
|
||||
});
|
||||
} else if (first) {
|
||||
var to_send = { initial: initial, first: true };
|
||||
if (chan != undefined && chan != "") {
|
||||
to_send.channel = chan.toLowerCase();
|
||||
}
|
||||
socket.emit("namechange", to_send);
|
||||
}
|
||||
},
|
||||
|
||||
removename: function() {
|
||||
socket.emit("removename", { channel: chan.toLowerCase() });
|
||||
Crypt.remove_name();
|
||||
},
|
||||
|
||||
chat: function(data) {
|
||||
if (data.value.length > 150) return;
|
||||
if (
|
||||
data.value.startsWith("/name ") ||
|
||||
data.value.startsWith("/removename")
|
||||
) {
|
||||
data.value = "/help";
|
||||
Chat.chat(data);
|
||||
return;
|
||||
} else if (data.value.startsWith("/login ")) {
|
||||
Chat.namechange(data.value.substring(7), false);
|
||||
} else if (data.value.startsWith("/help")) {
|
||||
var add = "";
|
||||
if (
|
||||
document.querySelector(".chat-tab-li a.active").getAttribute("href") ==
|
||||
"#all_chat"
|
||||
) {
|
||||
if (document.querySelector("#chatall").children.length > 100) {
|
||||
document.querySelector("#chatall").children[0].remove();
|
||||
}
|
||||
add = "chatall";
|
||||
} else {
|
||||
if (document.querySelector("#chatchannel").children.length > 100) {
|
||||
document.querySelector("#chatchannel").children[0].remove();
|
||||
}
|
||||
add = "chatchannel";
|
||||
}
|
||||
var help = Chat.chat_help;
|
||||
if (Admin.logged_in) help = help.concat(Chat.chat_admin_help);
|
||||
for (var x = 0; x < help.length; x++) {
|
||||
var color = Helper.intToARGB(Helper.hashCode("System"));
|
||||
if (color.length < 6) {
|
||||
for (x = color.length; x < 6; x++) {
|
||||
color = "0" + color;
|
||||
}
|
||||
}
|
||||
var _time = new Date();
|
||||
var time =
|
||||
Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
|
||||
color = Helper.hexToRgb(color.substring(0, 6));
|
||||
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
|
||||
document
|
||||
.querySelector("#" + add)
|
||||
.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
"<li title='Zoff''><span class='time_color'>" +
|
||||
time +
|
||||
"</span> <img class='chat-icon' src='https://zoff.me/assets/images/favicon-32x32.png' alt='System'><span style='color:" +
|
||||
color_temp +
|
||||
";'>System</span>: </li>"
|
||||
);
|
||||
var in_text = document.createTextNode(help[x]);
|
||||
document
|
||||
.querySelector("#" + add)
|
||||
.children[
|
||||
document.querySelector("#" + add).children.length - 1
|
||||
].appendChild(in_text);
|
||||
document.getElementById("" + add).scrollTop = document.getElementById(
|
||||
"" + add
|
||||
).scrollHeight;
|
||||
}
|
||||
} else if (data.value.startsWith("/logout")) {
|
||||
Chat.removename();
|
||||
} else if (
|
||||
document.querySelector(".chat-tab-li a.active").getAttribute("href") ==
|
||||
"#all_chat"
|
||||
) {
|
||||
socket.emit("all,chat", {
|
||||
channel: chan.toLowerCase(),
|
||||
data: data.value
|
||||
});
|
||||
} else {
|
||||
socket.emit("chat", { channel: chan.toLowerCase(), data: data.value });
|
||||
}
|
||||
data.value = "";
|
||||
return;
|
||||
},
|
||||
|
||||
createChatElement: function(
|
||||
allchat,
|
||||
channel,
|
||||
time,
|
||||
icon,
|
||||
color,
|
||||
from,
|
||||
message
|
||||
) {
|
||||
var liElement = document.createElement("li");
|
||||
liElement.innerHTML +=
|
||||
"<span class='time_color'>" + time + "</span> " + icon;
|
||||
var nameElement = document.createElement("span");
|
||||
nameElement.innerText = from;
|
||||
nameElement.style.color = color;
|
||||
liElement.appendChild(nameElement);
|
||||
if (allchat) {
|
||||
liElement.title = channel;
|
||||
liElement.innerHTML +=
|
||||
"<span class='channel-info-all-chat'> " + channel + "</span>";
|
||||
}
|
||||
var in_text = document.createTextNode(message);
|
||||
liElement.appendChild(in_text);
|
||||
return liElement;
|
||||
},
|
||||
|
||||
allchat: function(inp, time_sent, disable_blink) {
|
||||
if (inp.msg.substring(0, 1) == ":" && !chat_active && !disable_blink) {
|
||||
Chat.all_received += 1;
|
||||
document
|
||||
.querySelector("#favicon")
|
||||
.getAttribute("href", "/assets/images/highlogo.png");
|
||||
unseen = true;
|
||||
chat_unseen = true;
|
||||
Helper.removeClass(
|
||||
document.querySelector(".chat-link span.badge.new.white"),
|
||||
"hide"
|
||||
);
|
||||
var to_display =
|
||||
Chat.channel_received + Chat.all_received > 9
|
||||
? "9+"
|
||||
: Chat.channel_received + Chat.all_received;
|
||||
Helper.setHtml(
|
||||
document.querySelector(".chat-link span.badge.new.white"),
|
||||
to_display
|
||||
);
|
||||
}
|
||||
|
||||
if (document.hidden) {
|
||||
document
|
||||
.getElementById("favicon")
|
||||
.setAttribute("href", "/assets/images/highlogo.png");
|
||||
}
|
||||
|
||||
if (document.querySelector("#chatall").children.length > 100) {
|
||||
document.querySelector("#chatall").children[0].remove();
|
||||
}
|
||||
var color = Helper.intToARGB(Helper.hashCode(inp.from));
|
||||
if (color.length < 6) {
|
||||
for (x = color.length; x < 6; x++) {
|
||||
color = "0" + color;
|
||||
}
|
||||
}
|
||||
var icon_add = "";
|
||||
if (inp.hasOwnProperty("icon") && inp.icon !== false && inp.icon != "") {
|
||||
icon_add =
|
||||
"<img class='chat-icon' src='" + inp.icon + "' alt='" + inp.from + "'>";
|
||||
}
|
||||
|
||||
color = Helper.hexToRgb(color.substring(0, 6));
|
||||
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
|
||||
var _time = new Date();
|
||||
if (time_sent) {
|
||||
_time = new Date(time_sent);
|
||||
}
|
||||
var time =
|
||||
Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
|
||||
var element = Chat.createChatElement(
|
||||
true,
|
||||
Helper.decodeChannelName(inp.channel),
|
||||
time,
|
||||
icon_add,
|
||||
color_temp,
|
||||
inp.from,
|
||||
inp.msg
|
||||
);
|
||||
//document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
|
||||
document.querySelector("#chatall").appendChild(element);
|
||||
if (!userscroll) {
|
||||
programscroll = true;
|
||||
document.getElementById("chatall").scrollTop = document.getElementById(
|
||||
"chatall"
|
||||
).scrollHeight;
|
||||
programscroll = false;
|
||||
}
|
||||
},
|
||||
|
||||
channelchat: function(data, time_sent, disable_blink) {
|
||||
if (
|
||||
data.msg.substring(0, 1) == ":" &&
|
||||
!chat_active &&
|
||||
!disable_blink &&
|
||||
data.from.toLowerCase() != "system"
|
||||
) {
|
||||
document
|
||||
.querySelector("#favicon")
|
||||
.setAttribute("href", "/assets/images/highlogo.png");
|
||||
unseen = true;
|
||||
chat_unseen = true;
|
||||
Chat.channel_received += 1;
|
||||
//blink_interval = setTimeout(Chat.chat_blink, 1000);
|
||||
Helper.removeClass(
|
||||
document.querySelector(".chat-link span.badge.new.white"),
|
||||
"hide"
|
||||
);
|
||||
var to_display =
|
||||
Chat.channel_received + Chat.all_received > 9
|
||||
? "9+"
|
||||
: Chat.channel_received + Chat.all_received;
|
||||
Helper.setHtml(
|
||||
document.querySelector(".chat-link span.badge.new.white"),
|
||||
to_display
|
||||
);
|
||||
}
|
||||
|
||||
if (document.querySelector("#chatchannel").children.length > 100) {
|
||||
document.querySelector("#chatchannel").children[0].remove();
|
||||
}
|
||||
|
||||
var icon_add = "";
|
||||
if (data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") {
|
||||
icon_add =
|
||||
"<img class='chat-icon' src='" +
|
||||
data.icon +
|
||||
"' alt='" +
|
||||
data.from +
|
||||
"'>";
|
||||
}
|
||||
|
||||
var color = Helper.intToARGB(Helper.hashCode(data.from));
|
||||
if (color.length < 6) {
|
||||
for (x = color.length; x < 6; x++) {
|
||||
color = "0" + color;
|
||||
}
|
||||
}
|
||||
color = Helper.hexToRgb(color.substring(0, 6));
|
||||
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
|
||||
var _time = new Date();
|
||||
if (time_sent) {
|
||||
_time = new Date(time_sent);
|
||||
}
|
||||
var time =
|
||||
Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
|
||||
//document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "<li><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+data.from+"</span></li>");
|
||||
//var in_text = document.createTextNode(data.msg);
|
||||
//document.querySelector("#chatchannel").children[document.querySelector("#chatchannel").children.length - 1].appendChild(in_text);
|
||||
var element = Chat.createChatElement(
|
||||
false,
|
||||
null,
|
||||
time,
|
||||
icon_add,
|
||||
color_temp,
|
||||
data.from,
|
||||
data.msg
|
||||
);
|
||||
//document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
|
||||
document.querySelector("#chatchannel").appendChild(element);
|
||||
|
||||
if (!userscroll) {
|
||||
programscroll = true;
|
||||
document.getElementById(
|
||||
"chatchannel"
|
||||
).scrollTop = document.getElementById("chatchannel").scrollHeight;
|
||||
programscroll = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user