jiti-meet/modules/UI/side_pannels/chat/Chat.js

327 lines
10 KiB
JavaScript
Raw Normal View History

2015-12-01 12:53:01 +00:00
/* global APP, $ */
import {processReplacements, linkify} from './Replacement';
import CommandsProcessor from './Commands';
import ToolbarToggler from '../../toolbars/ToolbarToggler';
import VideoLayout from "../../videolayout/VideoLayout";
import UIUtil from '../../util/UIUtil';
import UIEvents from '../../../../service/UI/UIEvents';
import { smileys } from './smileys';
2015-01-07 14:54:03 +00:00
var unreadMessages = 0;
2016-09-14 20:13:15 +00:00
/**
* The container id, which is and the element id.
*/
var CHAT_CONTAINER_ID = "chat_container";
2015-01-07 14:54:03 +00:00
/**
* Updates visual notification, indicating that a message has arrived.
2015-01-07 14:54:03 +00:00
*/
function updateVisualNotification() {
2015-01-07 14:54:03 +00:00
var unreadMsgElement = document.getElementById('unreadMessages');
if (unreadMessages) {
unreadMsgElement.innerHTML = unreadMessages.toString();
ToolbarToggler.dockToolbar(true);
var chatButtonElement
= document.getElementById('toolbar_button_chat');
2015-01-23 12:01:44 +00:00
var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
UIUtil.getTextWidth(unreadMsgElement)) / 2;
var topIndent = (UIUtil.getTextHeight(chatButtonElement) -
UIUtil.getTextHeight(unreadMsgElement)) / 2 - 5;
2015-01-07 14:54:03 +00:00
unreadMsgElement.setAttribute(
'style',
'top:' + topIndent +
'; left:' + leftIndent + ';');
}
else {
unreadMsgElement.innerHTML = '';
}
$(unreadMsgElement).parent()[unreadMessages > 0 ? 'show' : 'hide']();
2015-01-07 14:54:03 +00:00
}
/**
* Returns the current time in the format it is shown to the user
* @returns {string}
*/
function getCurrentTime(stamp) {
var now = (stamp? new Date(stamp): new Date());
2015-01-07 14:54:03 +00:00
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if(hour.toString().length === 1) {
hour = '0'+hour;
}
if(minute.toString().length === 1) {
minute = '0'+minute;
}
if(second.toString().length === 1) {
second = '0'+second;
}
return hour+':'+minute+':'+second;
}
function toggleSmileys() {
2015-01-07 14:54:03 +00:00
var smileys = $('#smileysContainer');
if(!smileys.is(':visible')) {
smileys.show("slide", { direction: "down", duration: 300});
} else {
smileys.hide("slide", { direction: "down", duration: 300});
}
$('#usermsg').focus();
}
function addClickFunction(smiley, number) {
smiley.onclick = function addSmileyToMessage() {
var usermsg = $('#usermsg');
var message = usermsg.val();
message += smileys['smiley' + number];
usermsg.val(message);
usermsg.get(0).setSelectionRange(message.length, message.length);
toggleSmileys();
usermsg.focus();
};
}
/**
* Adds the smileys container to the chat
*/
function addSmileys() {
var smileysContainer = document.createElement('div');
smileysContainer.id = 'smileysContainer';
for(var i = 1; i <= 21; i++) {
var smileyContainer = document.createElement('div');
smileyContainer.id = 'smiley' + i;
smileyContainer.className = 'smileyContainer';
var smiley = document.createElement('img');
smiley.src = 'images/smileys/smiley' + i + '.svg';
smiley.className = 'smiley';
addClickFunction(smiley, i);
smileyContainer.appendChild(smiley);
smileysContainer.appendChild(smileyContainer);
}
$("#chat_container").append(smileysContainer);
2015-01-07 14:54:03 +00:00
}
/**
* Resizes the chat conversation.
*/
function resizeChatConversation() {
var msgareaHeight = $('#usermsg').outerHeight();
2016-09-14 20:13:15 +00:00
var chatspace = $('#' + CHAT_CONTAINER_ID);
2015-01-07 14:54:03 +00:00
var width = chatspace.width();
var chat = $('#chatconversation');
var smileys = $('#smileysarea');
smileys.height(msgareaHeight);
$("#smileys").css('bottom', (msgareaHeight - 26) / 2);
$('#smileysContainer').css('bottom', msgareaHeight);
chat.width(width - 10);
chat.height(window.innerHeight - 15 - msgareaHeight);
}
/**
* Chat related user interface.
*/
var Chat = {
2015-01-07 14:54:03 +00:00
/**
* Initializes chat related interface.
*/
init (eventEmitter) {
2015-12-01 12:53:01 +00:00
if (APP.settings.getDisplayName()) {
2015-01-07 14:54:03 +00:00
Chat.setChatConversationMode(true);
2015-12-01 12:53:01 +00:00
}
2015-01-07 14:54:03 +00:00
$('#nickinput').keydown(function (event) {
if (event.keyCode === 13) {
event.preventDefault();
let val = this.value;
2015-01-07 14:54:03 +00:00
this.value = '';
2015-12-14 16:54:08 +00:00
eventEmitter.emit(UIEvents.NICKNAME_CHANGED, val);
2015-01-07 14:54:03 +00:00
}
});
var usermsg = $('#usermsg');
usermsg.keydown(function (event) {
2015-01-07 14:54:03 +00:00
if (event.keyCode === 13) {
event.preventDefault();
var value = this.value;
usermsg.val('').trigger('autosize.resize');
2015-01-07 14:54:03 +00:00
this.focus();
var command = new CommandsProcessor(value, eventEmitter);
if (command.isCommand()) {
2015-01-07 14:54:03 +00:00
command.processCommand();
} else {
2015-01-23 12:01:44 +00:00
var message = UIUtil.escapeHtml(value);
2015-12-01 12:53:01 +00:00
eventEmitter.emit(UIEvents.MESSAGE_CREATED, message);
2015-01-07 14:54:03 +00:00
}
}
});
var onTextAreaResize = function () {
resizeChatConversation();
Chat.scrollChatToBottom();
};
usermsg.autosize({callback: onTextAreaResize});
2015-01-07 14:54:03 +00:00
eventEmitter.on(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
function(containerId, isVisible) {
if (containerId !== CHAT_CONTAINER_ID || !isVisible)
return;
2015-01-07 14:54:03 +00:00
unreadMessages = 0;
updateVisualNotification();
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible()) {
ToolbarToggler.dockToolbar(false);
}
// if we are in conversation mode focus on the text input
// if we are not, focus on the display name input
if (APP.settings.getDisplayName())
$('#usermsg').focus();
else
$('#nickinput').focus();
2015-01-07 14:54:03 +00:00
});
addSmileys();
updateVisualNotification();
},
2015-01-07 14:54:03 +00:00
/**
* Appends the given message to the chat conversation.
*/
updateChatConversation (id, displayName, message, stamp) {
2015-01-07 14:54:03 +00:00
var divClassName = '';
if (APP.conference.isLocalId(id)) {
2015-01-07 14:54:03 +00:00
divClassName = "localuser";
} else {
2015-01-07 14:54:03 +00:00
divClassName = "remoteuser";
if (!Chat.isVisible()) {
unreadMessages++;
2015-01-23 12:01:44 +00:00
UIUtil.playSoundNotification('chatNotification');
updateVisualNotification();
2015-01-07 14:54:03 +00:00
}
}
// replace links and smileys
// Strophe already escapes special symbols on sending,
// so we escape here only tags to avoid double &amp;
var escMessage = message.replace(/</g, '&lt;').
replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
2015-01-23 12:01:44 +00:00
var escDisplayName = UIUtil.escapeHtml(displayName);
message = processReplacements(escMessage);
2015-01-07 14:54:03 +00:00
var messageContainer =
'<div class="chatmessage">'+
'<img src="images/chatArrow.svg" class="chatArrow">' +
2015-01-07 14:54:03 +00:00
'<div class="username ' + divClassName +'">' + escDisplayName +
'</div>' + '<div class="timestamp">' + getCurrentTime(stamp) +
2015-01-07 14:54:03 +00:00
'</div>' + '<div class="usermessage">' + message + '</div>' +
'</div>';
$('#chatconversation').append(messageContainer);
$('#chatconversation').animate(
{ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
},
2015-01-07 14:54:03 +00:00
/**
* Appends error message to the conversation
* @param errorMessage the received error message.
* @param originalText the original message.
*/
chatAddError (errorMessage, originalText) {
2015-01-23 12:01:44 +00:00
errorMessage = UIUtil.escapeHtml(errorMessage);
originalText = UIUtil.escapeHtml(originalText);
2015-01-07 14:54:03 +00:00
$('#chatconversation').append(
'<div class="errorMessage"><b>Error: </b>' + 'Your message' +
(originalText? (' \"'+ originalText + '\"') : "") +
' was not sent.' +
(errorMessage? (' Reason: ' + errorMessage) : '') + '</div>');
$('#chatconversation').animate(
{ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
},
2015-01-07 14:54:03 +00:00
/**
* Sets the subject to the UI
* @param subject the subject
*/
setSubject (subject) {
if (subject) {
2015-01-07 14:54:03 +00:00
subject = subject.trim();
}
$('#subject').html(linkify(UIUtil.escapeHtml(subject)));
if (subject) {
2015-01-07 14:54:03 +00:00
$("#subject").css({display: "block"});
} else {
$("#subject").css({display: "none"});
2015-01-07 14:54:03 +00:00
}
},
2015-01-07 14:54:03 +00:00
/**
* Sets the chat conversation mode.
* Conversation mode is the normal chat mode, non conversation mode is
* where we ask user to input its display name.
* @param {boolean} isConversationMode if chat should be in
* conversation mode or not.
2015-01-07 14:54:03 +00:00
*/
setChatConversationMode (isConversationMode) {
2016-09-14 20:13:15 +00:00
$('#' + CHAT_CONTAINER_ID)
.toggleClass('is-conversation-mode', isConversationMode);
// this is needed when we transition from no conversation mode to
// conversation mode. When user enters his nickname and hits enter,
// to focus on the write area.
2015-01-07 14:54:03 +00:00
if (isConversationMode) {
$('#usermsg').focus();
}
},
2015-01-07 14:54:03 +00:00
/**
* Resizes the chat area.
*/
resizeChat (width, height) {
2016-09-14 20:13:15 +00:00
$('#' + CHAT_CONTAINER_ID).width(width).height(height);
2015-01-07 14:54:03 +00:00
resizeChatConversation();
},
2015-01-07 14:54:03 +00:00
/**
* Indicates if the chat is currently visible.
*/
isVisible () {
return UIUtil.isVisible(
2016-09-14 20:13:15 +00:00
document.getElementById(CHAT_CONTAINER_ID));
},
2015-01-07 14:54:03 +00:00
/**
* Shows and hides the window with the smileys
*/
toggleSmileys,
2015-01-07 14:54:03 +00:00
/**
* Scrolls chat to the bottom.
*/
scrollChatToBottom () {
2015-01-07 14:54:03 +00:00
setTimeout(function () {
$('#chatconversation').scrollTop(
$('#chatconversation')[0].scrollHeight);
}, 5);
}
};
2015-01-07 14:54:03 +00:00
export default Chat;