hardlounge/client/js/lounge.js

606 lines
15 KiB
JavaScript
Raw Normal View History

"use strict";
2016-12-18 15:53:28 +00:00
// vendor libraries
require("jquery-ui/ui/widgets/sortable");
const $ = require("jquery");
const moment = require("moment");
const URI = require("urijs");
const fuzzy = require("fuzzy");
2016-12-18 15:53:28 +00:00
// our libraries
require("./libs/jquery/inputhistory");
require("./libs/jquery/stickyscroll");
const slideoutMenu = require("./libs/slideout");
const templates = require("../views");
2017-04-18 07:31:46 +00:00
const socket = require("./socket");
2017-05-18 20:08:54 +00:00
require("./socket-events");
2017-04-22 13:03:00 +00:00
const storage = require("./localStorage");
require("./options");
2017-05-18 20:08:54 +00:00
const utils = require("./utils");
require("./autocompletion");
2017-07-10 19:47:03 +00:00
require("./webpush");
2017-09-06 06:41:11 +00:00
require("./keybinds");
2017-08-26 16:36:18 +00:00
require("./clipboard");
2014-08-16 16:15:17 +00:00
$(function() {
2014-09-19 23:12:17 +00:00
var sidebar = $("#sidebar, #footer");
2014-08-16 16:15:17 +00:00
var chat = $("#chat");
2014-09-10 19:23:56 +00:00
$(document.body).data("app-name", document.title);
var windows = $("#windows");
2014-08-16 16:15:17 +00:00
var viewport = $("#viewport");
2016-12-18 15:53:28 +00:00
var sidebarSlide = slideoutMenu(viewport[0], sidebar[0]);
2016-02-12 11:34:10 +00:00
var contextMenuContainer = $("#context-menu-container");
var contextMenu = $("#context-menu");
2014-08-16 16:15:17 +00:00
2016-06-12 02:16:17 +00:00
$("#main").on("click", function(e) {
if ($(e.target).is(".lt")) {
sidebarSlide.toggle(!sidebarSlide.isOpen());
} else if (sidebarSlide.isOpen()) {
sidebarSlide.toggle(false);
}
});
viewport.on("click", ".rt", function(e) {
2014-08-16 16:15:17 +00:00
var self = $(this);
viewport.toggleClass(self.attr("class"));
2016-06-12 02:16:17 +00:00
e.stopPropagation();
chat.find(".chan.active .chat").trigger("msg.sticky");
2014-08-16 16:15:17 +00:00
});
2016-03-19 18:20:11 +00:00
function positionContextMenu(that, e) {
var offset;
2016-02-12 11:34:10 +00:00
var menuWidth = contextMenu.outerWidth();
var menuHeight = contextMenu.outerHeight();
2016-03-19 18:20:11 +00:00
if (that.hasClass("menu")) {
offset = that.offset();
offset.left -= menuWidth - that.outerWidth();
offset.top += that.outerHeight();
return offset;
2016-02-12 11:34:10 +00:00
}
2016-03-19 18:20:11 +00:00
offset = {left: e.pageX, top: e.pageY};
if ((window.innerWidth - offset.left) < menuWidth) {
offset.left = window.innerWidth - menuWidth;
2016-02-12 11:34:10 +00:00
}
2016-03-19 18:20:11 +00:00
if ((window.innerHeight - offset.top) < menuHeight) {
offset.top = window.innerHeight - menuHeight;
}
return offset;
2016-02-12 11:34:10 +00:00
}
2016-03-19 18:20:11 +00:00
function showContextMenu(that, e) {
2016-02-12 11:34:10 +00:00
var target = $(e.currentTarget);
var output = "";
if (target.hasClass("user")) {
2016-12-18 15:53:28 +00:00
output = templates.contextmenu_item({
2016-02-12 11:34:10 +00:00
class: "user",
text: target.text(),
data: target.data("name")
});
} else if (target.hasClass("chan")) {
2016-12-18 15:53:28 +00:00
output = templates.contextmenu_item({
2016-02-12 11:34:10 +00:00
class: "chan",
text: target.data("title"),
data: target.data("target")
});
2016-12-18 15:53:28 +00:00
output += templates.contextmenu_divider();
output += templates.contextmenu_item({
2016-02-12 11:34:10 +00:00
class: "close",
text: target.hasClass("lobby") ? "Disconnect" : target.hasClass("channel") ? "Leave" : "Close",
2016-02-12 11:34:10 +00:00
data: target.data("target")
});
}
contextMenuContainer.show();
contextMenu
.html(output)
2016-03-19 18:20:11 +00:00
.css(positionContextMenu($(that), e));
2016-02-12 11:34:10 +00:00
return false;
2016-03-19 18:20:11 +00:00
}
viewport.on("contextmenu", ".user, .network .chan", function(e) {
return showContextMenu(this, e);
});
viewport.on("click", "#chat .menu", function(e) {
e.currentTarget = $(e.currentTarget).closest(".chan")[0];
return showContextMenu(this, e);
2016-02-12 11:34:10 +00:00
});
contextMenuContainer.on("click contextmenu", function() {
contextMenuContainer.hide();
return false;
});
function resetInputHeight(input) {
input.style.height = input.style.minHeight;
}
2014-08-16 16:15:17 +00:00
var input = $("#input")
.history()
2017-04-03 01:03:01 +00:00
.on("input", function() {
var style = window.getComputedStyle(this);
2016-07-15 06:42:47 +00:00
// Start by resetting height before computing as scrollHeight does not
// decrease when deleting characters
resetInputHeight(this);
2016-07-15 06:42:47 +00:00
this.style.height = Math.min(
Math.round(window.innerHeight - 100), // prevent overflow
this.scrollHeight
+ Math.round(parseFloat(style.borderTopWidth) || 0)
+ Math.round(parseFloat(style.borderBottomWidth) || 0)
) + "px";
chat.find(".chan.active .chat").trigger("msg.sticky"); // fix growing
});
2014-09-10 19:23:56 +00:00
2016-12-16 19:55:02 +00:00
var focus = $.noop;
if (!("ontouchstart" in window || navigator.maxTouchPoints > 0)) {
focus = function() {
if (chat.find(".active").hasClass("chan")) {
input.focus();
}
};
$(window).on("focus", focus);
chat.on("click", ".chat", function() {
setTimeout(function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type !== "Control") {
text = document.selection.createRange().text;
}
if (!text) {
focus();
}
}, 2);
});
}
2016-10-09 08:54:44 +00:00
$("#form").on("submit", function(e) {
2014-08-16 16:15:17 +00:00
e.preventDefault();
2017-05-18 20:08:54 +00:00
utils.forceFocus();
2014-08-16 16:15:17 +00:00
var text = input.val();
2016-05-25 07:23:03 +00:00
if (text.length === 0) {
return;
}
2014-08-16 16:15:17 +00:00
input.val("");
resetInputHeight(input.get(0));
2016-05-25 07:23:03 +00:00
if (text.indexOf("/collapse") === 0) {
$(".chan.active .toggle-preview.opened").click();
return;
}
if (text.indexOf("/expand") === 0) {
$(".chan.active .toggle-preview:not(.opened)").click();
return;
}
2014-08-16 16:15:17 +00:00
socket.emit("input", {
target: chat.data("id"),
text: text
});
});
function findCurrentNetworkChan(name) {
name = name.toLowerCase();
return $(".network .chan.active")
.parent(".network")
.find(".chan")
.filter(function() {
return $(this).data("title").toLowerCase() === name;
})
.first();
}
$("button#set-nick").on("click", function() {
2017-05-18 20:08:54 +00:00
utils.toggleNickEditor(true);
// Selects existing nick in the editable text field
var element = document.querySelector("#nick-value");
element.focus();
var range = document.createRange();
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
$("button#cancel-nick").on("click", cancelNick);
$("button#submit-nick").on("click", submitNick);
function submitNick() {
var newNick = $("#nick-value").text().trim();
if (newNick.length === 0) {
cancelNick();
return;
}
2017-05-18 20:08:54 +00:00
utils.toggleNickEditor(false);
socket.emit("input", {
target: chat.data("id"),
text: "/nick " + newNick
});
}
function cancelNick() {
2017-05-18 20:08:54 +00:00
utils.setNick(sidebar.find(".chan.active").closest(".network").data("nick"));
}
$("#nick-value").keypress(function(e) {
switch (e.keyCode ? e.keyCode : e.which) {
case 13: // Enter
// Ensures a new line is not added when pressing Enter
e.preventDefault();
break;
}
}).keyup(function(e) {
switch (e.keyCode ? e.keyCode : e.which) {
case 13: // Enter
submitNick();
break;
case 27: // Escape
cancelNick();
break;
}
});
chat.on("click", ".inline-channel", function() {
var name = $(this).data("chan");
var chan = findCurrentNetworkChan(name);
if (chan.length) {
chan.click();
} else {
socket.emit("input", {
target: chat.data("id"),
text: "/join " + name
});
}
});
chat.on("click", ".condensed-summary .content", function() {
$(this).closest(".msg.condensed").toggleClass("closed");
2017-06-22 20:08:36 +00:00
});
chat.on("click", ".user", function() {
var name = $(this).data("name");
var chan = findCurrentNetworkChan(name);
if (chan.length) {
chan.click();
}
socket.emit("input", {
target: chat.data("id"),
text: "/whois " + name
});
});
sidebar.on("click", ".chan, button", function(e, data) {
// Pushes states to history web API when clicking elements with a data-target attribute.
// States are very trivial and only contain a single `clickTarget` property which
// contains a CSS selector that targets elements which takes the user to a different view
// when clicked. The `popstate` event listener will trigger synthetic click events using that
// selector and thus take the user to a different view/state.
if (data && data.pushState === false) {
return;
}
const self = $(this);
const target = self.data("target");
if (!target) {
return;
}
const state = {};
if (self.hasClass("chan")) {
state.clickTarget = `.chan[data-id="${self.data("id")}"]`;
} else {
state.clickTarget = `#footer button[data-target="${target}"]`;
}
if (history && history.pushState) {
if (data && data.replaceHistory && history.replaceState) {
history.replaceState(state, null, null);
} else {
history.pushState(state, null, null);
}
}
});
sidebar.on("click", ".chan, button", function() {
2014-08-16 16:15:17 +00:00
var self = $(this);
var target = self.data("target");
if (!target) {
return;
}
chat.data(
"id",
self.data("id")
);
socket.emit(
"open",
self.data("id")
);
2014-08-16 16:15:17 +00:00
sidebar.find(".active").removeClass("active");
self.addClass("active")
.find(".badge")
.removeClass("highlight")
.empty();
2014-09-13 17:36:59 +00:00
if (sidebar.find(".highlight").length === 0) {
2017-05-18 20:08:54 +00:00
utils.toggleNotificationMarkers(false);
2014-08-16 16:15:17 +00:00
}
2016-06-12 02:16:17 +00:00
sidebarSlide.toggle(false);
var lastActive = $("#windows > .active");
2016-05-13 10:23:05 +00:00
lastActive
2016-04-17 10:50:03 +00:00
.removeClass("active")
.find(".chat")
.unsticky();
var lastActiveChan = lastActive
.find(".chan.active")
.removeClass("active");
2016-07-05 23:23:46 +00:00
lastActiveChan
.find(".unread-marker")
.appendTo(lastActiveChan.find(".messages"));
2014-08-16 16:15:17 +00:00
var chan = $(target)
.addClass("active")
2016-07-05 23:23:46 +00:00
.trigger("show");
2016-04-17 10:50:03 +00:00
let title = $(document.body).data("app-name");
2014-11-07 19:52:38 +00:00
if (chan.data("title")) {
title = chan.data("title") + " — " + title;
}
document.title = title;
2014-12-11 22:42:22 +00:00
var placeholder = "";
if (chan.data("type") === "channel" || chan.data("type") === "query") {
placeholder = `Write to ${chan.data("title")}`;
}
input.attr("placeholder", placeholder);
2014-09-25 23:51:53 +00:00
if (self.hasClass("chan")) {
$("#chat-container").addClass("active");
2017-05-18 20:08:54 +00:00
utils.setNick(self.closest(".network").data("nick"));
2014-09-25 23:51:53 +00:00
}
var chanChat = chan.find(".chat");
if (chanChat.length > 0 && chan.data("type") !== "special") {
chanChat.sticky();
}
if (chan.data("needsNamesRefresh") === true) {
chan.data("needsNamesRefresh", false);
socket.emit("names", {target: self.data("id")});
}
2016-12-16 19:55:02 +00:00
focus();
2014-08-16 16:15:17 +00:00
});
sidebar.on("click", "#sign-out", function() {
2017-08-13 18:37:12 +00:00
socket.emit("sign-out");
2017-04-22 13:03:00 +00:00
storage.remove("token");
if (!socket.connected) {
location.reload();
}
2014-08-16 16:15:17 +00:00
});
sidebar.on("click", ".close", function() {
var cmd = "/close";
var chan = $(this).closest(".chan");
if (chan.hasClass("lobby")) {
cmd = "/quit";
var server = chan.find(".name").html();
2014-08-16 16:15:17 +00:00
if (!confirm("Disconnect from " + server + "?")) {
return false;
}
}
socket.emit("input", {
target: chan.data("id"),
text: cmd
});
chan.css({
transition: "none",
2014-09-13 17:37:10 +00:00
opacity: 0.4
2014-08-16 16:15:17 +00:00
});
return false;
});
2016-02-12 11:34:10 +00:00
contextMenu.on("click", ".context-menu-item", function() {
switch ($(this).data("action")) {
case "close":
2016-12-29 21:43:10 +00:00
$(".networks .chan[data-target='" + $(this).data("data") + "'] .close").click();
2016-02-12 11:34:10 +00:00
break;
case "chan":
2016-12-29 21:43:10 +00:00
$(".networks .chan[data-target='" + $(this).data("data") + "']").click();
2016-02-12 11:34:10 +00:00
break;
case "user":
2016-12-29 21:43:10 +00:00
$(".channel.active .users .user[data-name='" + $(this).data("data") + "']").click();
2016-02-12 11:34:10 +00:00
break;
}
});
2014-08-16 16:15:17 +00:00
chat.on("input", ".search", function() {
const value = $(this).val();
const parent = $(this).closest(".users");
const names = parent.find(".names-original");
const container = parent.find(".names-filtered");
if (!value.length) {
container.hide();
names.show();
return;
}
const fuzzyOptions = {
pre: "<b>",
post: "</b>",
extract: (el) => $(el).text()
};
const result = fuzzy.filter(
value,
names.find(".user").toArray(),
fuzzyOptions
);
names.hide();
container.html(templates.user_filtered({matches: result})).show();
2014-08-16 16:15:17 +00:00
});
var forms = $("#sign-in, #connect, #change-password");
2014-08-16 16:15:17 +00:00
windows.on("show", "#sign-in", function() {
2016-10-09 08:54:44 +00:00
$(this).find("input").each(function() {
2014-08-16 16:15:17 +00:00
var self = $(this);
if (self.val() === "") {
self.focus();
return false;
}
2014-09-13 17:23:36 +00:00
});
2014-08-16 16:15:17 +00:00
});
if ($("body").hasClass("public")) {
$("#connect").one("show", function() {
2016-12-18 15:53:28 +00:00
var params = URI(document.location.search);
params = params.search(true);
// Possible parameters: name, host, port, password, tls, nick, username, realname, join
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Iterating_over_own_properties_only
for (var key in params) {
if (params.hasOwnProperty(key)) {
var value = params[key];
// \W searches for non-word characters
key = key.replace(/\W/g, "");
var element = $("#connect input[name='" + key + "']");
// if the element exists, it isn't disabled, and it isn't hidden
if (element.length > 0 && !element.is(":disabled") && !element.is(":hidden")) {
if (element.is(":checkbox")) {
element.prop("checked", (value === "1" || value === "true") ? true : false);
} else {
element.val(value);
}
}
}
}
});
}
2014-08-16 16:15:17 +00:00
forms.on("submit", "form", function(e) {
2014-09-13 17:23:36 +00:00
e.preventDefault();
2014-08-16 16:15:17 +00:00
var event = "auth";
var form = $(this);
2017-09-12 12:52:16 +00:00
form.find(".btn").attr("disabled", true);
2015-09-30 22:39:57 +00:00
if (form.closest(".window").attr("id") === "connect") {
2014-08-16 16:15:17 +00:00
event = "conn";
} else if (form.closest("div").attr("id") === "change-password") {
event = "change-password";
2014-08-16 16:15:17 +00:00
}
2017-09-12 12:52:16 +00:00
2014-08-16 16:15:17 +00:00
var values = {};
$.each(form.serializeArray(), function(i, obj) {
if (obj.value !== "") {
values[obj.name] = obj.value;
}
});
2017-09-12 12:52:16 +00:00
2014-08-16 16:15:17 +00:00
if (values.user) {
2017-04-22 13:03:00 +00:00
storage.set("user", values.user);
2014-08-16 16:15:17 +00:00
}
2017-09-12 12:52:16 +00:00
2014-08-16 16:15:17 +00:00
socket.emit(
event, values
);
});
2014-12-11 22:42:22 +00:00
forms.on("focusin", ".nick", function() {
// Need to set the first "lastvalue", so it can be used in the below function
var nick = $(this);
nick.data("lastvalue", nick.val());
});
2014-11-06 12:00:14 +00:00
forms.on("input", ".nick", function() {
2014-11-05 22:19:29 +00:00
var nick = $(this).val();
var usernameInput = forms.find(".username");
// Because this gets called /after/ it has already changed, we need use the previous value
var lastValue = $(this).data("lastvalue");
// They were the same before the change, so update the username field
if (usernameInput.val() === lastValue) {
usernameInput.val(nick);
}
// Store the "previous" value, for next time
$(this).data("lastvalue", nick);
2014-11-05 22:19:29 +00:00
});
2014-08-16 16:15:17 +00:00
2017-06-09 11:10:55 +00:00
$(document).on("visibilitychange focus click", () => {
if (sidebar.find(".highlight").length === 0) {
2017-05-18 20:08:54 +00:00
utils.toggleNotificationMarkers(false);
2014-08-16 16:15:17 +00:00
}
});
// Compute how many milliseconds are remaining until the next day starts
function msUntilNextDay() {
return moment().add(1, "day").startOf("day") - moment();
}
// Go through all Today/Yesterday date markers in the DOM and recompute their
// labels. When done, restart the timer for the next day.
function updateDateMarkers() {
$(".date-marker-text[data-label='Today'], .date-marker-text[data-label='Yesterday']")
.closest(".date-marker-container")
.each(function() {
2017-09-01 11:43:24 +00:00
$(this).replaceWith(templates.date_marker({time: $(this).data("time")}));
});
// This should always be 24h later but re-computing exact value just in case
setTimeout(updateDateMarkers, msUntilNextDay());
}
setTimeout(updateDateMarkers, msUntilNextDay());
// Only start opening socket.io connection after all events have been registered
socket.open();
window.addEventListener("popstate", (e) => {
const {state} = e;
if (!state) {
return;
}
const {clickTarget} = state;
if (clickTarget) {
$(clickTarget).trigger("click", {
pushState: false
});
}
});
2014-08-16 16:15:17 +00:00
});