libre-service.eu/pad.libre-service.eu-etherpad
libre-service.eu/pad.libre-service.eu-etherpad
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-01-31 19:02:59 +01:00
Code Issues Projects Releases Wiki Activity

lint: chat (#4573)

Browse source 
Co-authored-by: Richard Hansen <rhansen@rhansen.org>
This commit is contained in:
John McLear 2020-12-15 19:15:27 +00:00 committed by Richard Hansen
parent 8bf463fb00
commit 996a2d86dd
1 changed files with 48 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/static/js/chat.js
View file

@ -1,3 +1,4 @@
'use strict';
/** /**
* Copyright 2009 Google Inc., 2011 Peter 'Pita' Martischka (Primary Technology Ltd) * Copyright 2009 Google Inc., 2011 Peter 'Pita' Martischka (Primary Technology Ltd)
* *
@ -20,33 +21,32 @@ const Tinycon = require('tinycon/tinycon');
const hooks = require('./pluginfw/hooks'); const hooks = require('./pluginfw/hooks');
const padeditor = require('./pad_editor').padeditor; const padeditor = require('./pad_editor').padeditor;
var chat = (function () { exports.chat = (() => {
let isStuck = false; let isStuck = false;
let userAndChat = false; let userAndChat = false;
const gotInitialMessages = false;
const historyPointer = 0;
let chatMentions = 0; let chatMentions = 0;
var self = { return {
show() { show() {
$('#chaticon').removeClass('visible'); $('#chaticon').removeClass('visible');
$('#chatbox').addClass('visible'); $('#chatbox').addClass('visible');
self.scrollDown(true); this.scrollDown(true);
chatMentions = 0; chatMentions = 0;
Tinycon.setBubble(0); Tinycon.setBubble(0);
$('.chat-gritter-msg').each(function () { $('.chat-gritter-msg').each(function () {
$.gritter.remove(this.id); $.gritter.remove(this.id);
}); });
}, },
focus() { focus: () => {
setTimeout(() => { setTimeout(() => {
$('#chatinput').focus(); $('#chatinput').focus();
}, 100); }, 100);
}, },
stickToScreen(fromInitialCall) { // Make chat stick to right hand side of screen // Make chat stick to right hand side of screen
stickToScreen(fromInitialCall) {
if (pad.settings.hideChat) { if (pad.settings.hideChat) {
return; return;
} }
chat.show(); this.show();
isStuck = (!isStuck || fromInitialCall); isStuck = (!isStuck || fromInitialCall);
$('#chatbox').hide(); $('#chatbox').hide();
// Add timeout to disable the chatbox animations // Add timeout to disable the chatbox animations
@ -61,7 +61,7 @@ var chat = (function () {
chatAndUsers(fromInitialCall) { chatAndUsers(fromInitialCall) {
const toEnable = $('#options-chatandusers').is(':checked'); const toEnable = $('#options-chatandusers').is(':checked');
if (toEnable || !userAndChat || fromInitialCall) { if (toEnable || !userAndChat || fromInitialCall) {
chat.stickToScreen(true); this.stickToScreen(true);
$('#options-stickychat').prop('checked', true); $('#options-stickychat').prop('checked', true);
$('#options-chatandusers').prop('checked', true); $('#options-chatandusers').prop('checked', true);
$('#options-stickychat').prop('disabled', 'disabled'); $('#options-stickychat').prop('disabled', 'disabled');
@ -71,13 +71,14 @@ var chat = (function () {
userAndChat = false; userAndChat = false;
} }
padcookie.setPref('chatAndUsers', userAndChat); padcookie.setPref('chatAndUsers', userAndChat);
$('#users, .sticky-container').toggleClass('chatAndUsers popup-show stickyUsers', userAndChat); $('#users, .sticky-container')
.toggleClass('chatAndUsers popup-show stickyUsers', userAndChat);
$('#chatbox').toggleClass('chatAndUsersChat', userAndChat); $('#chatbox').toggleClass('chatAndUsersChat', userAndChat);
}, },
hide() { hide() {
// decide on hide logic based on chat window being maximized or not // decide on hide logic based on chat window being maximized or not
if ($('#options-stickychat').prop('checked')) { if ($('#options-stickychat').prop('checked')) {
chat.stickToScreen(); this.stickToScreen();
$('#options-stickychat').prop('checked', false); $('#options-stickychat').prop('checked', false);
} else { } else {
$('#chatcounter').text('0'); $('#chatcounter').text('0');
@ -87,17 +88,20 @@ var chat = (function () {
}, },
scrollDown(force) { scrollDown(force) {
if ($('#chatbox').hasClass('visible')) { if ($('#chatbox').hasClass('visible')) {
if (force || !self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) { if (force || !this.lastMessage || !this.lastMessage.position() ||
// if we use a slow animate here we can have a race condition when a users focus can not be moved away this.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) {
// from the last message recieved. // if we use a slow animate here we can have a race condition
$('#chattext').animate({scrollTop: $('#chattext')[0].scrollHeight}, {duration: 400, queue: false}); // when a users focus can not be moved away from the last message recieved.
self.lastMessage = $('#chattext > p').eq(-1); $('#chattext').animate(
{scrollTop: $('#chattext')[0].scrollHeight},
{duration: 400, queue: false});
this.lastMessage = $('#chattext > p').eq(-1);
} }
} }
}, },
send() { send() {
const text = $('#chatinput').val(); const text = $('#chatinput').val();
if (text.replace(/\s+/, '').length == 0) return; if (text.replace(/\s+/, '').length === 0) return;
this._pad.collabClient.sendMessage({type: 'CHAT_MESSAGE', text}); this._pad.collabClient.sendMessage({type: 'CHAT_MESSAGE', text});
$('#chatinput').val(''); $('#chatinput').val('');
}, },
@ -108,8 +112,8 @@ var chat = (function () {
// create the time string // create the time string
let minutes = `${new Date(msg.time).getMinutes()}`; let minutes = `${new Date(msg.time).getMinutes()}`;
let hours = `${new Date(msg.time).getHours()}`; let hours = `${new Date(msg.time).getHours()}`;
if (minutes.length == 1) minutes = `0${minutes}`; if (minutes.length === 1) minutes = `0${minutes}`;
if (hours.length == 1) hours = `0${hours}`; if (hours.length === 1) hours = `0${hours}`;
const timeStr = `${hours}:${minutes}`; const timeStr = `${hours}:${minutes}`;
// create the authorclass // create the authorclass
@ -120,17 +124,20 @@ var chat = (function () {
* let's be defensive and replace it with "unknown". * let's be defensive and replace it with "unknown".
*/ */
msg.userId = 'unknown'; msg.userId = 'unknown';
console.warn('The "userId" field of a chat message coming from the server was not present. Replacing with "unknown". This may be a bug or a database corruption.'); console.warn(
'The "userId" field of a chat message coming from the server was not present. ' +
'Replacing with "unknown". This may be a bug or a database corruption.');
} }
const authorClass = `author-${msg.userId.replace(/[^a-y0-9]/g, (c) => { const authorClass = `author-${msg.userId.replace(/[^a-y0-9]/g, (c) => {
if (c == '.') return '-'; if (c === '.') return '-';
return `z${c.charCodeAt(0)}z`; return `z${c.charCodeAt(0)}z`;
})}`; })}`;
const text = padutils.escapeHtmlWithClickableLinks(msg.text, '_blank'); const text = padutils.escapeHtmlWithClickableLinks(msg.text, '_blank');
const authorName = msg.userName == null ? _('pad.userlist.unnamed') : padutils.escapeHtml(msg.userName); const authorName = msg.userName == null ? html10n.get('pad.userlist.unnamed')
: padutils.escapeHtml(msg.userName);
// the hook args // the hook args
const ctx = { const ctx = {
@ -151,9 +158,11 @@ var chat = (function () {
// does this message contain this user's name? (is the curretn user mentioned?) // does this message contain this user's name? (is the curretn user mentioned?)
const myName = $('#myusernameedit').val(); const myName = $('#myusernameedit').val();
const wasMentioned = (text.toLowerCase().indexOf(myName.toLowerCase()) !== -1 && myName != 'undefined'); const wasMentioned =
text.toLowerCase().indexOf(myName.toLowerCase()) !== -1 && myName !== 'undefined';
if (wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen) { // If the user was mentioned, make the message sticky // If the user was mentioned, make the message sticky
if (wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen) {
chatMentions++; chatMentions++;
Tinycon.setBubble(chatMentions); Tinycon.setBubble(chatMentions);
ctx.sticky = true; ctx.sticky = true;
@ -161,7 +170,9 @@ var chat = (function () {
// Call chat message hook // Call chat message hook
hooks.aCallAll('chatNewMessage', ctx, () => { hooks.aCallAll('chatNewMessage', ctx, () => {
const html = `<p data-authorId='${msg.userId}' class='${authorClass}'><b>${authorName}:</b><span class='time ${authorClass}'>${ctx.timeStr}</span> ${ctx.text}</p>`; const html =
`<p data-authorId='${msg.userId}' class='${authorClass}'><b>${authorName}:</b>` +
`<span class='time ${authorClass}'>${ctx.timeStr}</span> ${ctx.text}</p>`;
if (isHistoryAdd) $(html).insertAfter('#chatloadmessagesbutton'); if (isHistoryAdd) $(html).insertAfter('#chatloadmessagesbutton');
else $('#chattext').append(html); else $('#chattext').append(html);
@ -192,14 +203,14 @@ var chat = (function () {
chatMentions = 0; chatMentions = 0;
Tinycon.setBubble(0); Tinycon.setBubble(0);
}); });
if (!isHistoryAdd) self.scrollDown(); if (!isHistoryAdd) this.scrollDown();
}, },
init(pad) { init(pad) {
this._pad = pad; this._pad = pad;
$('#chatinput').on('keydown', (evt) => { $('#chatinput').on('keydown', (evt) => {
// If the event is Alt C or Escape & we're already in the chat menu // If the event is Alt C or Escape & we're already in the chat menu
// Send the users focus back to the pad // Send the users focus back to the pad
if ((evt.altKey == true && evt.which === 67) || evt.which === 27) { if ((evt.altKey === true && evt.which === 67) || evt.which === 27) {
// If we're in chat already.. // If we're in chat already..
$(':focus').blur(); // required to do not try to remove! $(':focus').blur(); // required to do not try to remove!
padeditor.ace.focus(); // Sends focus back to pad padeditor.ace.focus(); // Sends focus back to pad
@ -208,11 +219,12 @@ var chat = (function () {
} }
}); });
const self = this;
$('body:not(#chatinput)').on('keypress', function (evt) { $('body:not(#chatinput)').on('keypress', function (evt) {
if (evt.altKey && evt.which == 67) { if (evt.altKey && evt.which === 67) {
// Alt c focuses on the Chat window // Alt c focuses on the Chat window
$(this).blur(); $(this).blur();
chat.show(); self.show();
$('#chatinput').focus(); $('#chatinput').focus();
evt.preventDefault(); evt.preventDefault();
} }
@ -220,9 +232,9 @@ var chat = (function () {
$('#chatinput').keypress((evt) => { $('#chatinput').keypress((evt) => {
// if the user typed enter, fire the send // if the user typed enter, fire the send
if (evt.which == 13 || evt.which == 10) { if (evt.which === 13 || evt.which === 10) {
evt.preventDefault(); evt.preventDefault();
self.send(); this.send();
} }
}); });
@ -230,22 +242,17 @@ var chat = (function () {
$('#chatcounter').text(0); $('#chatcounter').text(0);
$('#chatloadmessagesbutton').click(() => { $('#chatloadmessagesbutton').click(() => {
const start = Math.max(self.historyPointer - 20, 0); const start = Math.max(this.historyPointer - 20, 0);
const end = self.historyPointer; const end = this.historyPointer;
if (start == end) // nothing to load if (start === end) return; // nothing to load
{ return; }
$('#chatloadmessagesbutton').css('display', 'none'); $('#chatloadmessagesbutton').css('display', 'none');
$('#chatloadmessagesball').css('display', 'block'); $('#chatloadmessagesball').css('display', 'block');
pad.collabClient.sendMessage({type: 'GET_CHAT_MESSAGES', start, end}); pad.collabClient.sendMessage({type: 'GET_CHAT_MESSAGES', start, end});
self.historyPointer = start; this.historyPointer = start;
}); });
}, },
}; };
})();
return self;
}());
exports.chat = chat;