forked from om/chatcontrol-live-demo
Merge pull request 'Draft: chat bubbles and some smaller UI improvements' (#1) from a2/chatcontrol-live-demo:asbjørn-additions into master
Reviewed-on: om/chatcontrol-live-demo#1
This commit is contained in:
commit
7a1c75aa99
80
chatapp.svg
80
chatapp.svg
|
|
@ -6,7 +6,7 @@
|
|||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="300"
|
||||
height="500"
|
||||
viewBox="300 0 300 500"
|
||||
viewBox="0 0 300 500"
|
||||
onload="start_chat('Ven')"
|
||||
overflow="auto"
|
||||
>
|
||||
|
|
@ -22,7 +22,7 @@ const svgns = "http://www.w3.org/2000/svg";
|
|||
const width = 300;
|
||||
const height = 500;
|
||||
|
||||
const line_height = 5;
|
||||
const line_height = 6;
|
||||
const max_visible_lines = 10;
|
||||
const messages_y_offset = 20;
|
||||
const typing_speed = 70;
|
||||
|
|
@ -65,16 +65,19 @@ function split_text_into_lines(text, upper_line_length) {
|
|||
///
|
||||
/// ChatMessages's are owned by a Dialog.
|
||||
function ChatMessage(message_text, is_myself) {
|
||||
let lines = split_text_into_lines(message_text, 14);
|
||||
let tspans = [];
|
||||
let lines = split_text_into_lines(message_text, 28);
|
||||
let tspans = []
|
||||
let bubbles = [];
|
||||
|
||||
let container = document.getElementById('messages');
|
||||
|
||||
/// Render the chat message on the screen
|
||||
this.draw = function() {
|
||||
let text = document.createElementNS(svgns, 'text');
|
||||
let x = (is_myself)?10 :50;
|
||||
let x = (is_myself ? 190 : 110);
|
||||
text.setAttribute('x', `${x}%`);
|
||||
text.setAttribute('font-size', '14px');
|
||||
text.setAttribute('text-anchor', is_myself ? 'end' : 'start');
|
||||
|
||||
lines.forEach(function(line) {
|
||||
let y = tspan_y_pos(chat_lines_count++);
|
||||
|
|
@ -90,6 +93,26 @@ function ChatMessage(message_text, is_myself) {
|
|||
tspans.push(tspan);
|
||||
});
|
||||
|
||||
// done making text
|
||||
// it must be in the DOM for getBBox() to work
|
||||
container.appendChild(text);
|
||||
|
||||
// make chat bubble
|
||||
const padding = 6;
|
||||
const textbox = text.getBBox();
|
||||
const y_percent = Math.round(((textbox.y - padding) / height) * 100);
|
||||
const bubble = document.createElementNS(svgns, 'rect');
|
||||
bubble.setAttribute('x', textbox.x-padding);
|
||||
bubble.setAttribute('y', `${y_percent}%`);
|
||||
bubble.setAttribute('width', textbox.width + 2*padding);
|
||||
bubble.setAttribute('height', textbox.height + 2*padding);
|
||||
bubble.setAttribute('rx', 8);
|
||||
bubble.setAttribute('fill', 'black');
|
||||
bubbles.push(bubble);
|
||||
|
||||
// put stuff in dom in the right order
|
||||
container.appendChild(bubble);
|
||||
container.removeChild(text);
|
||||
container.appendChild(text);
|
||||
}
|
||||
|
||||
|
|
@ -115,6 +138,11 @@ function ChatMessage(message_text, is_myself) {
|
|||
}
|
||||
tspan.setAttribute('visibility', visibility);
|
||||
});
|
||||
bubbles.forEach(bubble => {
|
||||
const old = parseInt(bubble.getAttribute('y').split('%')[0]);
|
||||
const new_value = old + by;
|
||||
bubble.setAttribute('y', `${new_value}%`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -133,9 +161,11 @@ function swipe_viewport() {
|
|||
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;
|
||||
}
|
||||
|
|
@ -217,21 +247,21 @@ async function dialog_ven() {
|
|||
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 comissionen planlægger at læse alle chatbeskeder i EUen');
|
||||
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 lokale telefon!');
|
||||
await d.me('Det lyder overhoved ikke rart. Hvorfor vil de gøre det?');
|
||||
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!');
|
||||
await d.you('Her kan du finde mere informationer om det:');
|
||||
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('Mor');
|
||||
await d.you("Jeg har fundet nogle gamle familiebilleder fra vores ferie 10 år siden");
|
||||
await d.you("Her spiller du på stranden");
|
||||
await d.you("Her leger du på stranden");
|
||||
await d.you("(naked stick figure image here)");
|
||||
}
|
||||
|
||||
|
|
@ -239,30 +269,30 @@ async function dialog_kaereste() {
|
|||
let d = new Dialog('Kæreste');
|
||||
await d.me('hej smukkeste');
|
||||
await d.you('hej, jeg har lige tænkt på dig!');
|
||||
await d.you('og derfor har jeg lavet an sexy billede');
|
||||
await d.you('og derfor har jeg taget et sexet billede');
|
||||
await d.you('(silly naked stick figure image here)')
|
||||
}
|
||||
|
||||
]]>
|
||||
</script>
|
||||
|
||||
<!-- [left] contact name view -->
|
||||
<rect x="0" y="0" width="100%" height="10%" fill="yellow" />
|
||||
<polyline points="0,20 20,0 20,40" fill="blue" onclick="swipe_viewport()" />
|
||||
<text x="50" y="30" id="contact_indicator">loading...</text>
|
||||
<!-- [right] contact name view -->
|
||||
<rect x="100%" y="0" width="100%" height="10%" fill="yellow" />
|
||||
<polyline points="300,20 320,0 320,40" fill="blue" onclick="swipe_viewport()" /> <!-- XXX: these polyline points depend on the svg width -->
|
||||
<text x="125%" y="30" id="contact_indicator">loading...</text>
|
||||
|
||||
<!-- [left] messages view -->
|
||||
<rect x="0" y="10%" width="100%" height="90%" style="stroke: green; stroke-width: 10px" fill="blue" />
|
||||
<rect id="messages_background" x="5%" y="15%" z="2" width="90%" height="85%" fill="pink" />
|
||||
<!-- [right] messages view -->
|
||||
<rect x="100%" y="10%" width="100%" height="90%" style="stroke: green; stroke-width: 10px" fill="blue" />
|
||||
<rect id="messages_background" x="105%" y="15%" z="2" width="90%" height="85%" fill="pink" />
|
||||
<g id="messages"></g>
|
||||
|
||||
<!-- [right] contact list -->
|
||||
<rect x="100%" y="0" width="100%" height="10%" fill="yellow" />
|
||||
<text x="120%" y="30">Dine kontakter</text>
|
||||
<rect x="100%" y="10%" width="100%" height="100%" style="stroke: green; stroke-width: 10px" fill="aqua" />
|
||||
<!-- [left] contact list -->
|
||||
<rect x="0" y="0" width="100%" height="10%" fill="yellow" />
|
||||
<text x="20%" y="30">Dine kontakter</text>
|
||||
<rect x="0" y="10%" width="100%" height="100%" style="stroke: green; stroke-width: 10px" fill="aqua" />
|
||||
|
||||
<text x="105%" y="15%" onclick="start_chat('Ven')">Ven</text>
|
||||
<text x="105%" y="20%" onclick="start_chat('Mor')">Mor</text>
|
||||
<text x="105%" y="25%" onclick="start_chat('Kæreste')">Kæreste❤</text>
|
||||
<text x="5%" y="15%" onclick="start_chat('Ven')">Ven</text>
|
||||
<text x="5%" y="20%" onclick="start_chat('Mor')">Mor</text>
|
||||
<text x="5%" y="25%" onclick="start_chat('Kæreste')">Kæreste❤</text>
|
||||
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 8 KiB After Width: | Height: | Size: 9.2 KiB |
Loading…
Reference in a new issue