552 lines
19 KiB
XML
552 lines
19 KiB
XML
<?xml version="1.0"?>
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
|
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
<svg version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="300"
|
|
height="600"
|
|
viewBox="0 0 300 600"
|
|
onload="start_chat('Ven')"
|
|
overflow="auto"
|
|
>
|
|
<defs>
|
|
<symbol id="kaereste_foto" width="60" height="200">
|
|
<g style="fill: pink; stroke: pink;">
|
|
<circle cx="20" cy="20" r="20" />
|
|
<line x1="20" y1="40" x2="20" y2="60" />
|
|
<ellipse cx="20" cy="110" rx="10" ry="50" />
|
|
<!-- left arm -->
|
|
<polyline fill="none"
|
|
points="15,70 5,50 0,40" />
|
|
<!-- right arm -->
|
|
<polyline fill="none"
|
|
points="25,70 35,50 40,40" />
|
|
<!-- left leg -->
|
|
<polyline fill="none"
|
|
points="15,155 5,135 0,125" />
|
|
<!-- right leg -->
|
|
<polyline fill="none"
|
|
points="25,155 35,135 40,125" />
|
|
<!-- the thing -->
|
|
<text x="14" y="160" style="font: bold 20px sans-serif" fill="black">?</text>
|
|
</g>
|
|
</symbol>
|
|
</defs>
|
|
<script type="application/ecmascript">
|
|
<![CDATA[
|
|
'use strict';
|
|
|
|
const svgns = "http://www.w3.org/2000/svg";
|
|
|
|
// must be the same as the SVG dimensions
|
|
const width = 300;
|
|
const height = 550;
|
|
|
|
const line_height = 14;
|
|
const bubble_padding = 6;
|
|
const bubble_spacing = 5;
|
|
const visible_chat_area = {'top': 60,
|
|
'bottom': height - 100 // minus status & input areas
|
|
};
|
|
const typing_speed = 50;
|
|
|
|
var conversation_count = 0;
|
|
var current_dialog = null;
|
|
|
|
/// SVG 1.1 doesn't do proper text splitting into several lines.
|
|
/// we need to do it ourselves.
|
|
function split_text_into_lines(text, upper_line_length) {
|
|
let result = [];
|
|
|
|
while(text.length) {
|
|
if(text.length < upper_line_length) {
|
|
result.push(text);
|
|
break; // we are done
|
|
}
|
|
|
|
let found_split_point = false;
|
|
for(let i = upper_line_length; i; i--) {
|
|
if(text[i] == ' ') {
|
|
result.push(text.slice(0, i));
|
|
text = text.slice(i+1);
|
|
found_split_point = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(!found_split_point) {
|
|
// no <space> found. Split at character boundary instead
|
|
result.push(text.slice(0, upper_line_length));
|
|
text = text.slice(upper_line_length);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function is_hyperlink(str) {
|
|
return str.startsWith('http');
|
|
}
|
|
|
|
function create_link_node(url) {
|
|
let link = create_svg_node('a', {target:'_blank', href: url});
|
|
link.appendChild(document.createTextNode(url));
|
|
return link;
|
|
}
|
|
|
|
/// A class holding a text chat message.
|
|
///
|
|
/// *ChatMessages are owned by a Dialog.
|
|
function TextChatMessage(message_text, is_myself) {
|
|
let lines = split_text_into_lines(message_text, 28);
|
|
let bubble_color = (is_myself)? 'white': '#DDFF66';
|
|
let container = document.getElementById('messages');
|
|
|
|
// attributes
|
|
this.height = 0; // height on screen when fully visible
|
|
this.group = null; // a <g> with a transform=translate(0,y_shift) attribute
|
|
|
|
/// Render the chat message on the screen
|
|
this.draw = function(y_offset, y_shift) {
|
|
let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`});
|
|
|
|
let x = (is_myself ? 190 : 110);
|
|
let text = create_svg_node('text', {
|
|
'x': `${x}%`,
|
|
'font-size': `${line_height}px`,
|
|
'text-anchor': is_myself ? 'end' : 'start'
|
|
});
|
|
|
|
let height_so_far = y_offset;
|
|
|
|
lines.forEach(function(line) {
|
|
let y = height_so_far;
|
|
let tspan = create_svg_node('tspan', {
|
|
'x': `${x}%`,
|
|
'y': `${y + line_height}`, // important: y is lower text baseline
|
|
'fill': 'green',
|
|
'width': '5%'
|
|
});
|
|
|
|
if(is_hyperlink(line)) {
|
|
tspan.appendChild(create_link_node(line));
|
|
} else {
|
|
tspan.appendChild(document.createTextNode(line));
|
|
}
|
|
text.appendChild(tspan);
|
|
|
|
height_so_far += line_height;
|
|
});
|
|
|
|
group.appendChild(text); // needs to be part of the DOM *now*
|
|
container.appendChild(group);
|
|
let bubble = create_bubble(text, bubble_color);
|
|
group.appendChild(bubble);
|
|
redraw_on_top(text);
|
|
|
|
this.height = bubble.getBBox().height + bubble_spacing;
|
|
this.group = group;
|
|
}
|
|
|
|
/// Move a chat message on the screen (to simulate scrolling)
|
|
this.shift_y_pos = function(by) {
|
|
redraw_on_top(document.getElementById('contact_name_box'));
|
|
this.group.setAttribute('transform', `translate(0, ${by})`);
|
|
}
|
|
}
|
|
|
|
/// A class holding a image-based chat message.
|
|
///
|
|
/// *ChatMessages are owned by a Dialog.
|
|
function ImageChatMessage(symbol_id, is_myself) {
|
|
let container = document.getElementById('messages');
|
|
let bubble_color = (is_myself)? 'white': '#DDFF66';
|
|
|
|
// attributes
|
|
this.height = 0; // height on screen when fully visible
|
|
this.group = null; // a <g> with a transform=translate(0,y_shift) attribute
|
|
|
|
this.draw = function(y_offset, y_shift) {
|
|
let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`});
|
|
|
|
let x = (is_myself ? 190 : 110);
|
|
let img = create_svg_node('use', {
|
|
'href': symbol_id,
|
|
x: `${x}%`,
|
|
y: y_offset,
|
|
});
|
|
|
|
group.appendChild(img); // needs to be part of the DOM *now*
|
|
container.appendChild(group);
|
|
let bubble = create_bubble(img, bubble_color);
|
|
group.appendChild(bubble);
|
|
redraw_on_top(img);
|
|
|
|
this.height = bubble.getBBox().height + bubble_spacing;
|
|
this.group = group;
|
|
}
|
|
|
|
this.shift_y_pos = function(by) {
|
|
redraw_on_top(document.getElementById('contact_name_box'));
|
|
this.group.setAttribute('transform', `translate(0, ${by})`);
|
|
}
|
|
}
|
|
|
|
function create_chat_message(content, is_myself) {
|
|
let constr = (content.startsWith('#'))? ImageChatMessage: TextChatMessage;
|
|
return new constr(content, is_myself);
|
|
}
|
|
|
|
/// Promise-based version of setTimeout
|
|
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
|
/// toggle viewport between message list and contact list
|
|
/// That means: show either the left or right side of the SVG
|
|
function swipe_viewport() {
|
|
let svg = document.getElementsByTagName('svg')[0];
|
|
let coords = svg.getAttribute('viewBox').split(' ');
|
|
let x = parseInt(coords.shift());
|
|
if(x == 0) {
|
|
// moving from messages to contacts
|
|
var step = 5;
|
|
var end = width;
|
|
} else {
|
|
// moving from contacts to messages
|
|
var step = -5;
|
|
var end = 0;
|
|
}
|
|
|
|
let viewBox_suffix = coords.join(' '); // only 3 elements
|
|
|
|
async function animate(resolve, reject) {
|
|
while(x!=end) {
|
|
await wait(1);
|
|
x += step;
|
|
svg.setAttribute('viewBox', `${x} ${viewBox_suffix}`);
|
|
}
|
|
resolve();
|
|
};
|
|
new Promise(animate);
|
|
}
|
|
|
|
|
|
// Create a chat bubble around an element.
|
|
//
|
|
// The element must already be inside the DOM for this to work.
|
|
function create_bubble(inner_element, color) {
|
|
const bbox = inner_element.getBBox();
|
|
let bubble = create_svg_node('rect', {
|
|
'x': bbox.x - bubble_padding,
|
|
'y': bbox.y - bubble_padding,
|
|
'width': bbox.width + 2 * bubble_padding,
|
|
'height': bbox.height + 2 * bubble_padding,
|
|
'rx': 8,
|
|
'fill': color,
|
|
});
|
|
return bubble;
|
|
}
|
|
|
|
function create_svg_node(tag_name, attrs) {
|
|
let node = document.createElementNS(svgns, tag_name);
|
|
for(let attr in attrs) {
|
|
node.setAttribute(attr, attrs[attr]);
|
|
}
|
|
return node;
|
|
}
|
|
|
|
/// Ensure that an element is redrawn above all other elements
|
|
///
|
|
/// The element's children will also be redrawn on top
|
|
function redraw_on_top(element) {
|
|
let parent = element.parentNode;
|
|
parent.appendChild(parent.removeChild(element));
|
|
}
|
|
|
|
function removeAllChildren(parentNode) {
|
|
while(parentNode.firstChild) {
|
|
parentNode.removeChild(parentNode.lastChild);
|
|
}
|
|
}
|
|
|
|
function start_chat(who) {
|
|
let indicator = document.getElementById('contact_indicator');
|
|
indicator.childNodes[0].data = `Kontakt: ${who}`;
|
|
removeAllChildren(document.getElementById('messages'));
|
|
swipe_viewport();
|
|
|
|
switch(who) {
|
|
case 'Ven':
|
|
dialog_ven();
|
|
break;
|
|
case 'Mor':
|
|
dialog_mor();
|
|
break;
|
|
case 'Kæreste':
|
|
dialog_kaereste();
|
|
break;
|
|
case 'Politiven':
|
|
dialog_politi();
|
|
break;
|
|
case 'ChatSupport':
|
|
dialog_support();
|
|
break;
|
|
case 'Nabopige':
|
|
dialog_nabopige();
|
|
break;
|
|
default:
|
|
alert(`kontakten ${who} er ikke implementeret endnu`);
|
|
}
|
|
}
|
|
|
|
function Dialog() {
|
|
let conversation_id = ++conversation_count;
|
|
this.messages = [];
|
|
this.y_shift = visible_chat_area.top; // for scrolling
|
|
this.all_elements_height = 0; // also for scrolling
|
|
|
|
this.is_active = function() {
|
|
return conversation_id == conversation_count;
|
|
}
|
|
|
|
async function post_message(dialog, message, is_myself) {
|
|
if(!is_myself && dialog.messages.length) {
|
|
await wait(message.length * typing_speed);
|
|
} // first message should be instant
|
|
|
|
if(!dialog.is_active()) {
|
|
return; // Do not add messages to old conversation
|
|
}
|
|
|
|
let chat_message = create_chat_message(message, is_myself);
|
|
chat_message.draw(dialog.all_elements_height, // offset
|
|
dialog.y_shift);
|
|
dialog.all_elements_height += chat_message.height;
|
|
dialog.messages.push(chat_message);
|
|
|
|
let bottom = dialog.all_elements_height + dialog.y_shift;
|
|
let scroll = Math.max(0, bottom - visible_chat_area.bottom);
|
|
while(scroll > line_height) {
|
|
dialog.scroll_by(-line_height);
|
|
scroll -= line_height;
|
|
await wait(50);
|
|
}
|
|
}
|
|
|
|
this.scroll_by = function(change) {
|
|
this.y_shift += change;
|
|
this.messages.forEach(msg => msg.shift_y_pos(this.y_shift));
|
|
}
|
|
|
|
this.me = async function(message, will_be_flagged) {
|
|
await wait(1500); // give me some time to read
|
|
if(!this.is_active()) return;
|
|
await type_message(this, message);
|
|
if(!this.is_active()) return;
|
|
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) {
|
|
await post_message(this, message, false);
|
|
}
|
|
}
|
|
|
|
async function type_message(dialog, 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;
|
|
}
|
|
if(!dialog.is_active()) break;
|
|
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(200);
|
|
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(1000);
|
|
text_element.setAttribute('fill', 'white');
|
|
box.setAttribute('fill', 'blue');
|
|
}
|
|
indicator.data = 'encrypting message';
|
|
await wait(250);
|
|
indicator.data = 'sending message';
|
|
await wait(100);
|
|
indicator.data = 'message was sent';
|
|
}
|
|
|
|
async function scroll_up() {
|
|
current_dialog.scroll_by(line_height);
|
|
}
|
|
|
|
async function scroll_down() {
|
|
current_dialog.scroll_by(-line_height);
|
|
}
|
|
|
|
async function dialog_ven() {
|
|
let d = new Dialog();
|
|
current_dialog = d;
|
|
await d.me("hej");
|
|
await d.you("tak for sidst!");
|
|
await d.you('Har du hørt om den nye EU lov "ChatControl"?');
|
|
await d.me("nej, det har jeg ikke");
|
|
await d.me("hvad handler det om?");
|
|
await d.you('EU kommissionen planlægger at læse alle chatbeskeder i EU');
|
|
await d.me('Ja, men vi krypterer jo vores beskeder? Tough luck!');
|
|
await d.you('Det tager de højde for. Aflytningen vil ske før krypteringen på din telefon!');
|
|
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!', true);
|
|
await d.you('Her kan du læse mere om det:');
|
|
await d.you('https://chatcontrol.eu');
|
|
}
|
|
|
|
async function dialog_mor() {
|
|
let d = new Dialog();
|
|
current_dialog = d;
|
|
await d.you("Jeg har fundet nogle gamle familiebilleder fra vores ferie 10 år siden");
|
|
await d.you("Her leger du på stranden");
|
|
await d.you("(naked stick figure image here)");
|
|
}
|
|
|
|
async function dialog_kaereste() {
|
|
let d = new Dialog();
|
|
current_dialog = d;
|
|
await d.me('hej smukkeste');
|
|
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!', 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('Det kan være at udbyderen 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!');
|
|
}
|
|
|
|
async function dialog_politi() {
|
|
let d = new Dialog();
|
|
current_dialog = d;
|
|
await d.me('Hej, jeg har et spørgsmål');
|
|
await d.me('Har du hørt om chatcontrollen og hvad tænker du på det?');
|
|
await d.you('Jeg er bekendt med det. Og det er faktisk et ret dårlig idé');
|
|
await d.you('Problemet er at der er så mange falsk positive resultater som skal analyseres');
|
|
await d.you('Og jeg gider ikke kigge på folkets private beskeder. Det er jo deres fortrolgie samtaler');
|
|
await d.you('Jeg vil heller ikke at mine kolleger se hvad jeg skriver til min kæreste, kun fordi jeg hypotetisk kunne gøre noget illegalt');
|
|
await d.you('Tænk bare hvor absurd idén er: Hvorfor aflytter vi ikke bare alle telefoner? Der vil være nogle forbrydelser vi vil opdage!');
|
|
await d.you('Men så har vi den totale overvågning og ikke længere en fri samfund.');
|
|
}
|
|
|
|
async function dialog_support() {
|
|
let d = new Dialog();
|
|
current_dialog = d;
|
|
await d.you('Velkommen til supporten af ChatWorld. Hvad kan jeg hjælpe dig med?');
|
|
await d.me('Jeg mistænker at chatprogrammet scanner mine end-to-end krypterede beskeder. Er det rigtigt?');
|
|
await d.you('Ja, det er en feature som cheffen ville gerne have.');
|
|
await d.you('Der var nogle som har misbrugt chattjenesten til børneporno og det giver meget dårlig publicity og derfor har cheffen valgt at scanne end-to-end krypterede beskeder');
|
|
await d.you('børneporno er jo en meget dårlig ting. Men jeg synes ikke at det giver mening at aflytte alle private beskeder.');
|
|
await d.you('og teknologien kan misbruges til mange ting. Jeg som tekniker kan ikke se hvad søgefunktionen faktisk leder efter.');
|
|
await d.you('Det kan være at det vil finde alternative politiske beskeder og markerer det som illegal selv om de ikke er.');
|
|
await d.you('Det er en fare for demokratiet hvis fortrolige beskeder bliver scannet for ting som den politiske elite ikke ønsker');
|
|
await d.you('Men det er desværre mit job at vedligeholde driften af overvågningen');
|
|
await d.me('Det løser ikke mit problem. Men tak for informationen. Jeg vil se hvad jeg kan gør for at undgår overvågningen i fremtiden', true);
|
|
await d.you('Beklager at jeg kan ikke tilbyde noget bedre. Men jeg håber at du forstår situationen');
|
|
}
|
|
|
|
async function dialog_nabopige() {
|
|
let d = new Dialog();
|
|
current_dialog = d;
|
|
await d.you('Gæt hvem har snart fødselsdag!');
|
|
await d.me('Det er dig?');
|
|
await d.you('Rigtigt! Det var måske for nemt');
|
|
await d.me('Hvor gammel bliver du så?');
|
|
await d.you('ti');
|
|
await d.you('Jeg glæder mig meget til festen. Jeg har inviteret en masse mennesker');
|
|
await d.you('Du er også inviteret!');
|
|
await d.you('Hej, jeg vil gerne fortælle dig en hjemlighed');
|
|
await d.you('Men jeg kan desværre ikke gøre det over chatten');
|
|
await d.you('Fordi jeg ved at hvad vi skriver her bliver analyseret');
|
|
await d.you('Og det vil ikke være en hjemlighed hvis der er andre læser med');
|
|
await d.me('Du kan gerne fortælle mig hjemligheden i morgen, når jeg kommer forbi', true);
|
|
await d.me('Jeg er overrasket over at du ved noget om chatovervågningen');
|
|
await d.you('Ja, det er meget kedeligt. Jeg har læst noget om det og jeg kan overhovet ikke lide det');
|
|
await d.you('Det er bedre hvis man har gode voksne venner som man har tillid til end hvis der er en computer som læser alt hvad man skriver');
|
|
await d.me('helt enig');
|
|
await d.me('børn har også brug for hjemligheder og fortrolighed!');
|
|
}
|
|
|
|
]]>
|
|
</script>
|
|
|
|
<!-- [right] contact name view -->
|
|
<g id="contact_name_box">
|
|
<rect x="300" y="0" width="300" height="50" fill="yellow" />
|
|
<polyline points="300,20 320,0 320,40" fill="blue" onclick="swipe_viewport()" />
|
|
<polyline points="560,20 600,20 580,0" fill="blue" onclick="scroll_up()" />
|
|
<polyline points="560,30 600,30 580,50" fill="blue" onclick="scroll_down()" />
|
|
<text x="350" y="30" id="contact_indicator">loading...</text>
|
|
</g>
|
|
|
|
<!-- [right] messages view -->
|
|
<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="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('Politiven')">Politiven</text>
|
|
<text x="15" y="175" onclick="start_chat('ChatSupport')">Chat Support</text>
|
|
<text x="15" y="200" onclick="start_chat('Nabopige')">nabopige</text>
|
|
|
|
</svg>
|