Compare commits
2 Commits
de69867942
...
6589d76d5f
| Author | SHA1 | Date | |
|---|---|---|---|
| 6589d76d5f | |||
| 7765d25835 |
@ -3,7 +3,6 @@
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -20,11 +19,9 @@
|
||||
|
||||
<p id="typing-indicator">NAME is typing...</p>
|
||||
|
||||
<div id="input-panel-container">
|
||||
<div id="input-panel" class="rounded-rectangle">
|
||||
<input id="textbox-input" type="text" onkeydown="pressSendButton()"></input>
|
||||
<button onclick="pressSendButton()"><i class="fa fa-arrow-right" style="font-size:2em"></i></button>
|
||||
</div>
|
||||
<div id="textbox">
|
||||
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
||||
<button class="rounded-rectangle" onclick="pressSendButton()">envoyer</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
67
main.js
67
main.js
@ -10,7 +10,7 @@ class Conversation {
|
||||
}
|
||||
|
||||
setInteractive(isInteractive) {
|
||||
const children = document.getElementById("input-panel").children;
|
||||
const children = document.getElementById("textbox").children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].disabled = !isInteractive;
|
||||
}
|
||||
@ -64,7 +64,7 @@ class Conversation {
|
||||
|
||||
// if we haven't found a read message yet, let's check to see if we have now
|
||||
if (!foundReadMessage) {
|
||||
if (message.status == "read") {
|
||||
if (message.status == "lu") {
|
||||
foundReadMessage = true;
|
||||
continue;
|
||||
}
|
||||
@ -252,42 +252,6 @@ function onMessageSent(message) {
|
||||
updateChat(message);
|
||||
}
|
||||
|
||||
// probably a bit hacky! but this saves having to do like, state or something in CSS?
|
||||
// which probably is possible and probably would be the better way to do it, but that
|
||||
// sounds like a bunch of learning i'm not SUPER in the mood for
|
||||
function setVisibleOnMobile(element, isVisible) {
|
||||
let classes = element.className.split().filter(c => c != "");
|
||||
const invisibleClass = "invisible-on-mobile";
|
||||
const visibleClass = "visible";
|
||||
|
||||
if (isVisible && !classes.includes(visibleClass)) {
|
||||
const idx = classes.indexOf(invisibleClass);
|
||||
if (idx != -1) {
|
||||
classes.splice(idx, 1);
|
||||
}
|
||||
classes.push(visibleClass);
|
||||
} else if (!isVisible && !classes.includes(invisibleClass)) {
|
||||
const idx = classes.indexOf(visibleClass);
|
||||
if (idx != -1) {
|
||||
classes.splice(idx, 1);
|
||||
}
|
||||
classes.push(invisibleClass);
|
||||
}
|
||||
|
||||
element.className = classes.join(" ");
|
||||
}
|
||||
|
||||
function showSidePanel() {
|
||||
// this function can only be called on mobile. the main conversation should be
|
||||
// hidden and the side conversations panel should take up the whole screen.
|
||||
|
||||
const mainPanel = document.getElementById("main-panel");
|
||||
const conversationListElem = document.getElementById("side-panel");
|
||||
|
||||
setVisibleOnMobile(mainPanel, false);
|
||||
setVisibleOnMobile(conversationListElem, true);
|
||||
}
|
||||
|
||||
function readConversationJson(path, callback) {
|
||||
fetch(path)
|
||||
.then(response => response.json())
|
||||
@ -299,8 +263,6 @@ function showConversation(path) {
|
||||
const mainPanel = document.getElementById("main-panel");
|
||||
const conversationListElem = document.getElementById("side-panel");
|
||||
|
||||
setVisibleOnMobile(mainPanel, true);
|
||||
|
||||
readConversationJson(path, json => {
|
||||
conversation = new Conversation(json.title);
|
||||
const jsonMessages = json.messages;
|
||||
@ -316,7 +278,7 @@ function showConversation(path) {
|
||||
initialMessages.push(message);
|
||||
} else if (data.character == 0) {
|
||||
const message = new UserMessage(text);
|
||||
message.updateStatus("read");
|
||||
message.updateStatus("lu");
|
||||
initialMessages.push(message);
|
||||
} else {
|
||||
const message = participants.length > 2
|
||||
@ -332,29 +294,6 @@ function showConversation(path) {
|
||||
});
|
||||
}
|
||||
|
||||
function addConversationPreview(path) {
|
||||
const listRoot = document.getElementById("side-panel");
|
||||
|
||||
readConversationJson(path, json => {
|
||||
const messages = json.messages;
|
||||
|
||||
const elem = document.createElement("div");
|
||||
elem.onclick = () => showConversation(path);
|
||||
elem.className = "conversation";
|
||||
|
||||
const headerElem = document.createElement("h2");
|
||||
headerElem.innerHTML = romanize(json.title);
|
||||
elem.appendChild(headerElem);
|
||||
|
||||
const previewElem = document.createElement("span");
|
||||
previewElem.innerHTML = messages.length > 0 ? romanize(messages[messages.length - 1].text) : "";
|
||||
elem.appendChild(previewElem);
|
||||
|
||||
listRoot.appendChild(elem);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
setTypingIndicator(false);
|
||||
|
||||
showConversation("sncf.json");
|
||||
|
||||
@ -8,6 +8,5 @@
|
||||
],
|
||||
"messages":
|
||||
[
|
||||
{ "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. Veuillez envoyer-moi vos questions." }
|
||||
]
|
||||
}
|
||||
|
||||
74
styles.css
74
styles.css
@ -3,7 +3,6 @@
|
||||
--gris: #666;
|
||||
--noir: #000;
|
||||
|
||||
--clear: #00000000;
|
||||
--bleu: #0055a4;
|
||||
--rouge: #e1000f;
|
||||
|
||||
@ -163,11 +162,11 @@ h1 {
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-top: 1em;
|
||||
padding-right: 2em;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
/*height:100%;*/
|
||||
flex-grow: 1;
|
||||
margin: 0 .5em;
|
||||
padding: .5em 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -184,53 +183,14 @@ li.message {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#input-panel-container {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
#input-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
border-radius: 100vw;
|
||||
|
||||
color: var(--bluewhite);
|
||||
background-color: var(--bluegrey);
|
||||
border-color: var(--bluegrey);
|
||||
}
|
||||
|
||||
#input-panel input {
|
||||
|
||||
#textbox {
|
||||
width: 100%;
|
||||
color: var(--onyx);
|
||||
background-color: rgba(0,0,0,0);
|
||||
border-style: none;
|
||||
padding: 0 2em;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
|
||||
z-index: 1;
|
||||
font-size: 1em;
|
||||
|
||||
}
|
||||
|
||||
#input-panel input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--vermilion);
|
||||
background-color: #00000000;
|
||||
border-style: none;
|
||||
border-radius: 100% !important;
|
||||
padding: 1em !important;
|
||||
float: right;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: var(--light-cyan);
|
||||
background-color: var(--onyx);
|
||||
/*background-color: var(--light-cyan);*/
|
||||
}
|
||||
|
||||
#typing-indicator {
|
||||
@ -242,7 +202,23 @@ button:hover {
|
||||
|
||||
position: fixed;
|
||||
bottom: 3em;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#textbox input {
|
||||
flex-grow: 4;
|
||||
|
||||
color: var(--bluewhite);
|
||||
background-color: var(--bluegrey);
|
||||
border-color: var(--bluegrey);
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
|
||||
margin: 0.5em;
|
||||
left: 1em;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user