Add status bar and input box
This commit is contained in:
om
parent
385475e951
commit
aca88b346a
103
chatapp.svg
103
chatapp.svg
|
|
@ -5,8 +5,8 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="300"
|
||||
height="500"
|
||||
viewBox="0 0 300 500"
|
||||
height="600"
|
||||
viewBox="0 0 300 600"
|
||||
onload="start_chat('Ven')"
|
||||
overflow="auto"
|
||||
>
|
||||
|
|
@ -41,13 +41,15 @@ const svgns = "http://www.w3.org/2000/svg";
|
|||
|
||||
// must be the same as the SVG dimensions
|
||||
const width = 300;
|
||||
const height = 500;
|
||||
const height = 550;
|
||||
|
||||
const line_height = 14;
|
||||
const bubble_padding = 6;
|
||||
const bubble_spacing = 5;
|
||||
const visible_chat_area = {'top': 60, 'bottom': 500};
|
||||
const typing_speed = 7;
|
||||
const visible_chat_area = {'top': 60,
|
||||
'bottom': height - 100 // minus status & input areas
|
||||
};
|
||||
const typing_speed = 50;
|
||||
|
||||
var conversation_count = 0;
|
||||
|
||||
|
|
@ -219,10 +221,9 @@ function swipe_viewport() {
|
|||
// The element must already be inside the DOM for this to work.
|
||||
function create_bubble(inner_element, color) {
|
||||
const bbox = inner_element.getBBox();
|
||||
const y_percent = Math.round(((bbox.y - bubble_padding) / height) * 100);
|
||||
let bubble = create_svg_node('rect', {
|
||||
'x': bbox.x - bubble_padding,
|
||||
'y': `${y_percent}%`,
|
||||
'y': bbox.y - bubble_padding,
|
||||
'width': bbox.width + 2 * bubble_padding,
|
||||
'height': bbox.height + 2 * bubble_padding,
|
||||
'rx': 8,
|
||||
|
|
@ -270,7 +271,7 @@ function start_chat(who) {
|
|||
dialog_kaereste();
|
||||
break;
|
||||
default:
|
||||
alert(`Unknown contact: ${who}`);
|
||||
alert(`kontakten ${who} er ikke implementeret endnu`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -281,7 +282,9 @@ function Dialog(chat_partner) {
|
|||
this.all_elements_height = 0; // also for scrolling
|
||||
|
||||
async function post_message(dialog, message, is_myself) {
|
||||
if(dialog.messages.length) await wait(message.length * typing_speed); // first message should be instant
|
||||
if(!is_myself && dialog.messages.length) {
|
||||
await wait(message.length * typing_speed);
|
||||
} // first message should be instant
|
||||
|
||||
if(conversation_id != conversation_count) {
|
||||
return; // Do not add messages to old conversation
|
||||
|
|
@ -303,7 +306,13 @@ function Dialog(chat_partner) {
|
|||
}
|
||||
}
|
||||
|
||||
this.me = async function(message) {
|
||||
this.me = async function(message, will_be_flagged) {
|
||||
await wait(1500); // give me some time to read
|
||||
await type_message(message);
|
||||
hit_send_button();
|
||||
await local_message_processing(will_be_flagged);
|
||||
clear_input_field();
|
||||
release_send_button();
|
||||
await post_message(this, message, true);
|
||||
}
|
||||
this.you = async function(message) {
|
||||
|
|
@ -311,6 +320,58 @@ function Dialog(chat_partner) {
|
|||
}
|
||||
}
|
||||
|
||||
async function type_message(message) {
|
||||
clear_input_field(); // just to be sure
|
||||
let text = document.getElementById('message_input_data').firstChild;
|
||||
|
||||
let lines = split_text_into_lines(message, 22);
|
||||
for(let line of lines) {
|
||||
text.data = '';
|
||||
for(let c of line) {
|
||||
await wait(typing_speed);
|
||||
text.data += c;
|
||||
}
|
||||
await wait(20); // otherwise it's too fast
|
||||
}
|
||||
}
|
||||
|
||||
function hit_send_button() {
|
||||
document.getElementById('message_submit_button').setAttribute('fill', 'white');
|
||||
document.getElementById('message_submit_box').setAttribute('fill', '#888888');
|
||||
}
|
||||
|
||||
function release_send_button() {
|
||||
document.getElementById('message_submit_button').setAttribute('fill', 'black');
|
||||
document.getElementById('message_submit_box').setAttribute('fill', '#CCCCCC');
|
||||
}
|
||||
|
||||
function clear_input_field() {
|
||||
let element = document.getElementById('message_input_data')
|
||||
removeAllChildren(element);
|
||||
element.appendChild(document.createTextNode(''));
|
||||
}
|
||||
|
||||
async function local_message_processing(will_be_flagged) {
|
||||
let text_element = document.getElementById('message_status');
|
||||
let indicator = text_element.childNodes[0];
|
||||
indicator.data = 'scanning for illegal content';
|
||||
await wait(1500);
|
||||
if(will_be_flagged) {
|
||||
let box = document.getElementById('message_status_box');
|
||||
text_element.setAttribute('fill', 'red');
|
||||
box.setAttribute('fill', 'yellow');
|
||||
indicator.data = 'Reporting suspicious content';
|
||||
await wait(1500);
|
||||
text_element.setAttribute('fill', 'white');
|
||||
box.setAttribute('fill', 'blue');
|
||||
}
|
||||
indicator.data = 'encrypting message';
|
||||
await wait(200);
|
||||
indicator.data = 'sending message';
|
||||
await wait(200);
|
||||
indicator.data = 'message was sent';
|
||||
}
|
||||
|
||||
async function dialog_ven() {
|
||||
let d = new Dialog('Ven');
|
||||
await d.me("hej");
|
||||
|
|
@ -324,7 +385,7 @@ async function dialog_ven() {
|
|||
await d.me('Det lyder overhovedet ikke rart. Hvorfor vil de gøre det?');
|
||||
await d.you('De siger at det er for at beskytte børn på nettet.');
|
||||
await d.you('Men det giver ikke meget mening');
|
||||
await d.me('Alle vores beskeder skal scannes på grund af børn på nettet? Det lyder dumt!');
|
||||
await d.me('Alle vores beskeder skal scannes på grund af børn på nettet? Det lyder dumt!', true);
|
||||
await d.you('Her kan du læse mere om det:');
|
||||
await d.you('https://chatcontrol.eu');
|
||||
}
|
||||
|
|
@ -342,11 +403,12 @@ async function dialog_kaereste() {
|
|||
await d.you('hej, jeg har lige tænkt på dig!');
|
||||
await d.you('og derfor har jeg taget et sexet billede');
|
||||
await d.you('#kaereste_foto');
|
||||
await d.me('tak. Det har jeg savnet!');
|
||||
await d.me('tak. Det har jeg savnet!', true);
|
||||
await d.me('du ser stadig så ung ud.');
|
||||
await d.me('Jeg tror at vi skal være forsigtige, fordi der er en overvågning af vores beskeder');
|
||||
await d.you('What the fuck??? Hvem overvågner os?????');
|
||||
await d.me('Ingen lige nu. Men EU\'en vil forpligte tilbyderne af messagingtjenester til at scanne alle beskeder');
|
||||
await d.me('Det kan være at chattilbyderen gør det, fordi de har lov til det');
|
||||
await d.me('Men i fremtiden vil det faktisk blive forpligtende at scanne beskeder i EU\'en');
|
||||
await d.me('Og hvis der er beskeder som "ligner" børneborno får politiet en kopi af dem');
|
||||
await d.you('Jeg vil hellere ikke at politiet får mine nøgenbilleder. Det er min krop og jeg vil selv bestemme over det!');
|
||||
}
|
||||
|
|
@ -365,13 +427,26 @@ async function dialog_kaereste() {
|
|||
<rect x="300" y="50" width="300" height="450" fill="aqua" />
|
||||
<g id="messages"></g>
|
||||
|
||||
<!-- [right] message status -->
|
||||
<rect id="message_status_box" x="300" y="500" fill="blue" width="300" height="50" />
|
||||
<text id="message_status" x="310" y="530" fill="white">status</text>
|
||||
|
||||
<!-- [right] text input -->
|
||||
<rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" />
|
||||
<rect id="message_submit_box" x="550" y="550" stroke="black" fill="#CCCCCC" width="50" height="50" />
|
||||
<text id="message_input_data" x="310" y="575" fill="black"></text>
|
||||
<text id="message_submit_button" x="555" y="580" fill="black">SEND</text>
|
||||
|
||||
<!-- [left] contact list -->
|
||||
<rect x="0" y="0" width="300" height="50" fill="yellow" />
|
||||
<text x="60" y="30">Dine kontakter</text>
|
||||
<rect x="0" y="50" width="300" height="450" style="stroke: green; stroke-width: 10px" fill="aqua" />
|
||||
<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 10px" fill="aqua" />
|
||||
|
||||
<text x="15" y="75" onclick="start_chat('Ven')">Ven</text>
|
||||
<text x="15" y="100" onclick="start_chat('Mor')">Mor</text>
|
||||
<text x="15" y="125" onclick="start_chat('Kæreste')">Kæreste❤</text>
|
||||
<text x="15" y="150" onclick="start_chat('Politi')">Politi</text>
|
||||
<text x="15" y="175" onclick="start_chat('Tekniker')">Chat Support</text>
|
||||
<text x="15" y="200" onclick="start_chat('Nabopige')">nabopige</text>
|
||||
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 14 KiB |
Loading…
Reference in New Issue