chatview: add multiline messages support
Change the text input to a text area to send multiline messages and show
messages in a HTML "pre" block to show spaces and new lines.
Change-Id: Iaab46e6e0972784a7b65ac430c5b0e94e8e81191
diff --git a/web/chatview.css b/web/chatview.css
index ce14d19..1dce00f 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -25,30 +25,31 @@
#sendMessage {
display: flex;
- width: 97%;
position: relative;
- transform: translateZ(0);
- height: 50px;
border-top : 2px solid #d3d3d3;
- padding-right: 10px;
- margin-left: 1%;
- margin-right: 1.5%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-left: 8px;
+ overflow: hidden;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ align-items: center;
+
}
#message {
- width: 100%;
- border: 0;
- height: 55px;
- overflow: hidden;
- padding-right: 20px;
- color: black;
- padding-left: 8px;
flex: 1;
+ margin-right: 10px;
+ border: 0;
+ overflow-y: scroll;
+ color: black;
+ max-height: 150px;
+ padding-left: 8px;
+ resize: none;
}
#message:focus,
#message.focus {
- border: 0;
outline: none;
}
@@ -61,7 +62,7 @@
border: 0;
width: 40px;
height: 40px;
- margin-top: 8px;
+ align-self: center;
transition: all 0.3s ease;
}
@@ -194,6 +195,17 @@
overflow: hidden;
}
+pre {
+ font : inherit;
+ font-family : inherit;
+ font-size : inherit;
+ font-style : inherit;
+ font-variant : inherit;
+ font-weight : inherit;
+ margin: 0;
+ padding: 0;
+}
+
.message_out {
flex-direction: row-reverse;
}
diff --git a/web/chatview.html b/web/chatview.html
index 732dafd..b66764a 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -10,8 +10,7 @@
<div id="messages"></div>
<div id="sendMessage">
- <input id="message" type="text" autofocus placeholder="Message" onkeyup="auto_grow(this)"
- onkeydown="if (event.keyCode == 13) { ring.chatview.sendMessage(); return false; }">
+ <textarea id="message" autofocus placeholder="Message" onkeyup="grow_text_area()" rows="1" ></textarea>
<div id="sendBtn" onclick="ring.chatview.sendMessage()" title="Send">
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" d="M12,11.874v4.357l7-6.69l-7-6.572v3.983c-8.775,0-11,9.732-11,9.732C3.484,12.296,7.237,11.874,12,11.874z"/>
@@ -30,6 +29,35 @@
-->
<script>
+
+document.querySelector("#message").addEventListener("keydown", function (e) {
+ e = e || event;
+ var map = {};
+ map[e.keyCode] = e.type == 'keydown';
+ if (e.ctrlKey || e.shiftKey) {
+ return true;
+ }
+ if (map[13]) {
+ ring.chatview.sendMessage();
+ e.preventDefault();
+ }
+ return true;
+});
+
+function grow_text_area() {
+ var messages = document.querySelector('#messages');
+ var is_at_bottom = messages.scrollTop === (messages.scrollHeight - messages.offsetHeight);
+
+ var area = document.querySelector("#message");
+ var old_height = area.style.height;
+ area.style.height = "auto";
+ area.style.height = area.scrollHeight +"px";
+
+ if (is_at_bottom) {
+ messages.scrollTop = messages.scrollHeight;
+ }
+}
+
var ring = {}; // ring namespace
ring.chatview = (function(){
@@ -45,7 +73,7 @@
var input = document.querySelector("#sendMessage #message");
var message = input.value;
if (message.length > 0) {
- input.value = "";
+ input.value = '';
window.prompt(message);
}
}
@@ -78,7 +106,7 @@
var escaped_message = escapeHtml(message_text),
linkified_message = linkifyHtml(escaped_message, {});
- return linkified_message;
+ return "<pre>" + linkified_message + "</pre>";
}
/**