<!--
// ChatPage.html
//
// Created by Faye Li on 3 Feb 2017
// Modified by Don Hopkins (dhopkins@donhopkins.com).
// Copyright 2017 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
-->
<html>
<head>
<title>Chat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
input[type=button],
button {
font-family: 'Raleway';
font-weight: bold;
font-size: 20px;
vertical-align: top;
width: 100%;
height: 40px;
min-width: 120px;
padding: 0px 18px;
margin-top: 5px;
margin-right: 6px;
border-radius: 5px;
border: none;
color: #fff;
background-color: #000;
background: linear-gradient(#343434 20%, #000 100%);
cursor: pointer;
}
.commandButton {
width: 100px !important;
}
input[type=text] {
font-family: 'Raleway';
font-weight: bold;
font-size: 20px;
vertical-align: top;
height: 40px;
color: #000;
width: 100%;
background-color: #fff;
background: linear-gradient(#343434 20%, #fff 100%);
}
input[type=button].red {
color: #fff;
background-color: #94132e;
background: linear-gradient(#d42043 20%, #94132e 100%);
}
input[type=button].blue {
color: #fff;
background-color: #1080b8;
background: linear-gradient(#00b4ef 20%, #1080b8 100%);
}
input[type=button].white {
color: #121212;
background-color: #afafaf;
background: linear-gradient(#fff 20%, #afafaf 100%);
}
input[type=button]:enabled:hover {
background: linear-gradient(#000, #000);
border: none;
}
input[type=button].red:enabled:hover {
background: linear-gradient(#d42043, #d42043);
border: none;
}
input[type=button].blue:enabled:hover {
background: linear-gradient(#00b4ef, #00b4ef);
border: none;
}
input[type=button].white:enabled:hover {
background: linear-gradient(#fff, #fff);
border: none;
}
input[type=button]:active {
background: linear-gradient(#343434, #343434);
}
input[type=button].red:active {
background: linear-gradient(#94132e, #94132e);
}
input[type=button].blue:active {
background: linear-gradient(#1080b8, #1080b8);
}
input[type=button].white:active {
background: linear-gradient(#afafaf, #afafaf);
}
input[type=button]:disabled {
color: #252525;
background: linear-gradient(#575757 20%, #252525 100%);
}
input[type=button][pressed=pressed] {
color: #00b4ef;
}
body {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
font-family: 'Raleway', sans-serif;
color: white;
background: linear-gradient(#2b2b2b, #0f212e);
}
.Content {
font-size: 20px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.TopBar {
height: 40px;
background: linear-gradient(#2b2b2b, #1e1e1e);
font-weight: bold;
padding: 10px 10px 10px 10px;
display: flex;
align-items: center;
width: 100%;
font-size: 28px;
flex-grow: 0;
}
.ChatLog {
padding: 20px;
font-size: 20px;
flex-grow: 1;
color: white;
background-color: black;
overflow-x: hidden;
overflow-y: scroll;
word-wrap: break-word;
}
.ChatLogLine {
margin-bottom: 15px;
}
.ChatLogLineDisplayName {
font-weight: bold;
}
.ChatLogLineMessage {
}
.LogLogLine {
margin-bottom: 15px;
}
.LogLogLineMessage {
font-style: italic;
}
.ChatInput {
display: flex;
flex-direction: row;
flex-grow: 0;
}
.ChatInputText {
padding: 20px 20px 20px 20px;
height: 60px !important;
font-size: 20px !important;
flex-grow: 1;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="Content">
<div class="TopBar">
<b>Chat</b>
</div>
<div class="ChatLog" id="ChatLog"></div>
<div class="ChatInput">
<input type="text" class="ChatInputText" id="ChatInputText" size="256" maxlength="256" />
</div>
</div>
</body>
<script>
//console.log("ChatPage: loading script...");
var messageData = {}; // The data that is sent along with the message.
var typing = false; // True while the user is typing.
var typingTimerDuration = 1; // How long to wait before ending typing, in seconds.
var typingTimer = null; // The timer to end typing.
var $ChatLog; // The scrolling chat log.
var $ChatInputText; // The text field for entering text.
// Recreate the lines in chatLog as the DOM in $ChatLog.
function updateChatLog() {
$ChatLog.html('');
for (var i = 0, n = chatLog.length; i < n; i++) {
var a = chatLog[i];
var avatarID = a[0];
var displayName = a[1];
var message = a[2];
var data = a[3];
//console.log("updateChatLog", i, a, displayName, message);
if (avatarID) {
receiveChatMessage(avatarID, displayName, message, data);
} else {
logMessage(message);
}
}
}
// Call this no every keystroke.
function type() {
beginTyping();
handleType();
}
// Reset the typing timer, and notify if we're starting.
function beginTyping() {
if (typingTimer) {
clearTimeout(typingTimer);
}
typingTimer = setTimeout(function() {
typing = false;
handleEndTyping();
}, typingTimerDuration * 1000);
if (typing) {
return;
}
typing = true;
handleBeginTyping();
}
// Clear the typing timer and notify if we're finished.
function endTyping() {
if (typingTimer) {
clearTimeout(typingTimer);
typingTimer = null;
}
if (!typing) {
return;
}
typing = false;
handleEndTyping();
}
// Notify the interface script on every keystroke.
function handleType() {
EventBridge.emitWebEvent(
JSON.stringify({
type: "Type"
}));
}
// Notify the interface script when we begin typing.
function handleBeginTyping() {
EventBridge.emitWebEvent(
JSON.stringify({
type: "BeginTyping"
}));
}
// Notify the interface script when we end typing.
function handleEndTyping() {
EventBridge.emitWebEvent(
JSON.stringify({
type: "EndTyping"
}));
}
// Append a chat message to $ChatLog.
function receiveChatMessage(avatarID, displayName, message, data) {
var $logLine =
$('<div/>')
.addClass('ChatLogLine')
.data('chat-avatarID', avatarID)
.data('chat-displayName', displayName)
.data('chat-message', message)
.data('chat-data', data)
.appendTo($ChatLog);
var $logLineDisplayName =
$('<span/>')
.addClass('ChatLogLineDisplayName')
.text(displayName + ': ')
.on('mouseenter', function(event) {
identifyAvatar(avatarID);
//event.cancelBubble();
$logLineDisplayName.css({
color: '#00ff00',
'text-decoration': 'underline'
});
})
.on('mouseleave', function(event) {
unidentifyAvatar(avatarID);
//event.cancelBubble();
$logLineDisplayName.css({
color: 'white',
'text-decoration': 'none'
});
})
.click(function(event) {
faceAvatar(avatarID, displayName);
//event.cancelBubble();
})
.appendTo($logLine);
var $logLineMessage =
$('<span/>')
.addClass('ChatLogLineMessage')
.text(message)
.appendTo($logLine);
}
// Append a log message to $ChatLog.
function logMessage(message) {
var $logLine =
$('<div/>')
.addClass('LogLogLine')
.data('chat-message', message)
.appendTo($ChatLog);
var $logLineMessage =
$('<span/>')
.addClass('LogLogLineMessage')
.text(message)
.appendTo($logLine);
}
// Scroll $ChatLog so the last line is visible.
function scrollChatLog() {
var $logLine = $ChatLog.children().last();
if (!$logLine || !$logLine.length) {
return;
}
var chatLogHeight = $ChatLog.outerHeight(true);
var logLineTop = ($logLine.offset().top - $ChatLog.offset().top);
var logLineBottom = logLineTop + $logLine.outerHeight(true);
var scrollUp = logLineBottom - chatLogHeight;
if (scrollUp > 0) {
$ChatLog.scrollTop($ChatLog.scrollTop() + scrollUp);
}
}
// Tell the interface script we have initialized.
function emitReadyEvent() {
EventBridge.emitWebEvent(
JSON.stringify({
type: "Ready"
}));
}
// The user entered an empty chat message.
function emptyChatMessage() {
EventBridge.emitWebEvent(
JSON.stringify({
type: "EmptyChatMessage",
data: null
}));
}
// The user entered a non-empty chat message.
function handleChatMessage(message, data) {
//console.log("handleChatMessage", message);
EventBridge.emitWebEvent(
JSON.stringify({
type: "HandleChatMessage",
message: message,
data: data
}));
}
// Clear the chat log, of course.
function clearChatLog() {
EventBridge.emitWebEvent(
JSON.stringify({
type: "ClearChatLog"
}));
}
// Identify an avatar.
function identifyAvatar(avatarID) {
EventBridge.emitWebEvent(
JSON.stringify({
type: "IdentifyAvatar",
avatarID: avatarID
}));
}
// Stop identifying an avatar.
function unidentifyAvatar(avatarID) {
EventBridge.emitWebEvent(
JSON.stringify({
type: "UnidentifyAvatar",
avatarID: avatarID
}));
}
// Face an avatar.
function faceAvatar(avatarID, displayName) {
EventBridge.emitWebEvent(
JSON.stringify({
type: "FaceAvatar",
avatarID: avatarID,
displayName: displayName
}));
}
// Let's get this show on the road!
function main() {
//console.log("ChatPage: main");
$ChatLog = $('#ChatLog');
$ChatInputText = $('#ChatInputText');
// Whenever the chat log resizes, or the input text gets or loses focus,
// scroll the chat log to the last line.
$ChatLog.on('resize', function(event) {
//console.log("ChatLog resize", $ChatLog, event);
scrollChatLog();
});
$ChatInputText.on('focus blur', function(event) {
//console.log("ChatInputText focus blur", $ChatInputText, event);
scrollChatLog();
});
// Track when the user is typing, and handle the message when the user hits return.
$ChatInputText.on('keydown', function(event) {
type();
if (event.keyCode == 13) {
var message = $ChatInputText.val().substr(0, 256);
$ChatInputText.val('');
if (message == '') {
emptyChatMessage();
} else {
handleChatMessage(message, messageData);
}
endTyping();
}
});
// Start out with the input text in focus.
$ChatInputText.focus();
// Hook up a handler for events that come from hifi.
EventBridge.scriptEventReceived.connect(function (message) {
//console.log("ChatPage: main: scriptEventReceived", message);
var messageData = JSON.parse(message);
var messageType = messageData['type'];
switch (messageType) {
case "Update":
chatLog = messageData['chatLog'];
updateChatLog();
scrollChatLog();
break;
case "ReceiveChatMessage":
receiveChatMessage(messageData['avatarID'], messageData['displayName'], messageData['message'], message['data']);
scrollChatLog();
break;
case "LogMessage":
logMessage(messageData['message']);
scrollChatLog();
break;
default:
console.log("WEB: received unexpected script event message: " + message);
break;
}
});
emitReadyEvent();
}
// Start up once the document is loaded.
$(document).ready(main);
</script>
</html>