"use strict"; // vendor libraries require("jquery-ui/ui/widgets/sortable"); const $ = require("jquery"); const moment = require("moment"); const URI = require("urijs"); const fuzzy = require("fuzzy"); // our libraries require("./libs/jquery/inputhistory"); require("./libs/jquery/stickyscroll"); const slideoutMenu = require("./libs/slideout"); const templates = require("../views"); const socket = require("./socket"); require("./socket-events"); const storage = require("./localStorage"); const utils = require("./utils"); require("./autocompletion"); require("./webpush"); require("./keybinds"); require("./clipboard"); $(function() { var sidebar = $("#sidebar, #footer"); var chat = $("#chat"); $(document.body).data("app-name", document.title); var viewport = $("#viewport"); var sidebarSlide = slideoutMenu(viewport[0], sidebar[0]); var contextMenuContainer = $("#context-menu-container"); var contextMenu = $("#context-menu"); $("#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) { var self = $(this); viewport.toggleClass(self.attr("class")); e.stopPropagation(); chat.find(".chan.active .chat").trigger("msg.sticky"); }); function positionContextMenu(that, e) { var offset; var menuWidth = contextMenu.outerWidth(); var menuHeight = contextMenu.outerHeight(); if (that.hasClass("menu")) { offset = that.offset(); offset.left -= menuWidth - that.outerWidth(); offset.top += that.outerHeight(); return offset; } offset = {left: e.pageX, top: e.pageY}; if ((window.innerWidth - offset.left) < menuWidth) { offset.left = window.innerWidth - menuWidth; } if ((window.innerHeight - offset.top) < menuHeight) { offset.top = window.innerHeight - menuHeight; } return offset; } function showContextMenu(that, e) { var target = $(e.currentTarget); var output = ""; if (target.hasClass("user")) { output = templates.contextmenu_item({ class: "user", text: target.text(), data: target.data("name"), }); } else if (target.hasClass("chan")) { output = templates.contextmenu_item({ class: "chan", text: target.data("title"), data: target.data("target"), }); output += templates.contextmenu_divider(); output += templates.contextmenu_item({ class: "close", text: target.hasClass("lobby") ? "Disconnect" : target.hasClass("channel") ? "Leave" : "Close", data: target.data("target"), }); } contextMenuContainer.show(); contextMenu .html(output) .css(positionContextMenu($(that), e)); return false; } 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); }); contextMenuContainer.on("click contextmenu", function() { contextMenuContainer.hide(); return false; }); function resetInputHeight(input) { input.style.height = input.style.minHeight; } var input = $("#input") .history() .on("input", function() { var style = window.getComputedStyle(this); // Start by resetting height before computing as scrollHeight does not // decrease when deleting characters resetInputHeight(this); 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 }); 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); }); } if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) { $(document.body).addClass("is-apple"); } $("#form").on("submit", function(e) { e.preventDefault(); utils.forceFocus(); var text = input.val(); if (text.length === 0) { return; } input.val(""); resetInputHeight(input.get(0)); if (text.charAt(0) === "/") { const args = text.substr(1).split(" "); const cmd = args.shift().toLowerCase(); if (typeof utils.inputCommands[cmd] === "function" && utils.inputCommands[cmd](args)) { return; } } socket.emit("input", { target: chat.data("id"), text: text, }); }); $("button#set-nick").on("click", function() { 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; } utils.toggleNickEditor(false); socket.emit("input", { target: chat.data("id"), text: "/nick " + newNick, }); } function cancelNick() { 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 = utils.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"); }); chat.on("click", ".user", function() { var name = $(this).data("name"); var chan = utils.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 = `#sidebar .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, target); } else { history.pushState(state, null, target); } } }); sidebar.on("click", ".chan, button", function() { var self = $(this); var target = self.data("target"); if (!target) { return; } chat.data( "id", self.data("id") ); socket.emit( "open", self.data("id") ); sidebar.find(".active").removeClass("active"); self.addClass("active") .find(".badge") .removeClass("highlight") .empty(); if (sidebar.find(".highlight").length === 0) { utils.toggleNotificationMarkers(false); } sidebarSlide.toggle(false); var lastActive = $("#windows > .active"); lastActive .removeClass("active") .find(".chat") .unsticky(); var lastActiveChan = lastActive .find(".chan.active") .removeClass("active"); lastActiveChan .find(".unread-marker") .data("unread-id", 0) .appendTo(lastActiveChan.find(".messages")); var chan = $(target) .addClass("active") .trigger("show"); let title = $(document.body).data("app-name"); if (chan.data("title")) { title = chan.data("title") + " — " + title; } document.title = title; const type = chan.data("type"); var placeholder = ""; if (type === "channel" || type === "query") { placeholder = `Write to ${chan.data("title")}`; } input.attr("placeholder", placeholder); if (self.hasClass("chan")) { $("#chat-container").addClass("active"); utils.setNick(self.closest(".network").data("nick")); } 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")}); } if (type === "settings") { $("#session-list").html("

Loading…

"); socket.emit("sessions:get"); } focus(); }); sidebar.on("click", "#sign-out", function() { socket.emit("sign-out"); storage.remove("token"); if (!socket.connected) { location.reload(); } }); 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(); if (!confirm("Disconnect from " + server + "?")) { // eslint-disable-line no-alert return false; } } socket.emit("input", { target: chan.data("id"), text: cmd, }); chan.css({ transition: "none", opacity: 0.4, }); return false; }); contextMenu.on("click", ".context-menu-item", function() { switch ($(this).data("action")) { case "close": $(".networks .chan[data-target='" + $(this).data("data") + "'] .close").click(); break; case "chan": $(".networks .chan[data-target='" + $(this).data("data") + "']").click(); break; case "user": $(".channel.active .users .user[data-name='" + $(this).data("data") + "']").click(); break; } }); 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: "", post: "", extract: (el) => $(el).text(), }; const result = fuzzy.filter( value, names.find(".user").toArray(), fuzzyOptions ); names.hide(); container.html(templates.user_filtered({matches: result})).show(); }); if ($("body").hasClass("public") && (window.location.hash === "#connect" || window.location.hash === "")) { $("#connect").one("show", function() { 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); } } } } }); } $(document).on("visibilitychange focus click", () => { if (sidebar.find(".highlight").length === 0) { utils.toggleNotificationMarkers(false); } }); // 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() { $(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()); window.addEventListener("popstate", (e) => { const {state} = e; if (!state) { return; } let {clickTarget} = state; if (clickTarget) { // This will be true when click target corresponds to opening a thumbnail, // browsing to the previous/next thumbnail, or closing the image viewer. const imageViewerRelated = clickTarget.includes(".toggle-thumbnail"); // If the click target is not related to the image viewer but the viewer // is currently opened, we need to close it. if (!imageViewerRelated && $("#image-viewer").hasClass("opened")) { clickTarget += ", #image-viewer"; } // Emit the click to the target, while making sure it is not going to be // added to the state again. $(clickTarget).trigger("click", { pushState: false, }); } }); // Only start opening socket.io connection after all events have been registered socket.open(); });