Implement image messages

This commit is contained in:
om 2022-08-21 14:07:57 +02:00
parent b6d9dc6e4c
commit c51cb58b93

View file

@ -11,18 +11,26 @@
overflow="auto" overflow="auto"
> >
<defs> <defs>
<symbol id="kaereste_foto"> <symbol id="kaereste_foto" width="60" height="200">
<circle cx="20" cy="20" r="20" fill="blue" /> <g style="fill: pink; stroke: pink;">
<line x1="20" y1="40" x2="20" y2="60" stroke="blue" /> <circle cx="20" cy="20" r="20" />
<ellipse cx="20" cy="110" rx="10" ry="50" fill="green" /> <line x1="20" y1="40" x2="20" y2="60" />
<!-- left arm --> <ellipse cx="20" cy="110" rx="10" ry="50" />
<polyline fill="none" <!-- left arm -->
stroke="blue" <polyline fill="none"
points="15,70 5,50 0,30" /> points="15,70 5,50 0,40" />
<!-- right arm --> <!-- right arm -->
<polyline fill="none" <polyline fill="none"
stroke="blue" points="25,70 35,50 40,40" />
points="25,70 35,50 40,30" /> <!-- 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> </symbol>
</defs> </defs>
<script type="application/ecmascript"> <script type="application/ecmascript">
@ -79,7 +87,7 @@ function split_text_into_lines(text, upper_line_length) {
/// *ChatMessages are owned by a Dialog. /// *ChatMessages are owned by a Dialog.
function TextChatMessage(message_text, is_myself) { function TextChatMessage(message_text, is_myself) {
let lines = split_text_into_lines(message_text, 28); let lines = split_text_into_lines(message_text, 28);
let bubble_color = (is_myself)? 'white': 'pink'; let bubble_color = (is_myself)? 'white': '#DDFF66';
let container = document.getElementById('messages'); let container = document.getElementById('messages');
// attributes // attributes
@ -114,11 +122,10 @@ function TextChatMessage(message_text, is_myself) {
height_so_far += line_height; height_so_far += line_height;
}); });
container.appendChild(group);
group.appendChild(text); // needs to be part of the DOM *now* group.appendChild(text); // needs to be part of the DOM *now*
container.appendChild(group);
let bubble = create_bubble(text, bubble_color); let bubble = create_bubble(text, bubble_color);
group.appendChild(bubble); group.appendChild(bubble);
container.appendChild(group);
redraw_on_top(text); redraw_on_top(text);
this.height = bubble.getBBox().height + bubble_spacing; this.height = bubble.getBBox().height + bubble_spacing;
@ -136,16 +143,36 @@ function TextChatMessage(message_text, is_myself) {
/// ///
/// *ChatMessages are owned by a Dialog. /// *ChatMessages are owned by a Dialog.
function ImageChatMessage(symbol_id, is_myself) { function ImageChatMessage(symbol_id, is_myself) {
let container = document.getElementById('messages');
let bubble_color = (is_myself)? 'white': '#DDFF66';
// attributes // attributes
this.height = 0; // height on screen when fully visible this.height = 0; // height on screen when fully visible
this.group = null; // a <g> with a transform=translate(0,y_shift) attribute this.group = null; // a <g> with a transform=translate(0,y_shift) attribute
this.draw = function(y_offset, y_shift) { this.draw = function(y_offset, y_shift) {
console.error('draw() is not implemented yet'); 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) { this.shift_y_pos = function(by) {
console.error('shift_y_pos() is not implemented yet'); redraw_on_top(document.getElementById('contact_name_box'));
this.group.setAttribute('transform', `translate(0, ${by})`);
} }
} }
@ -314,7 +341,14 @@ async function dialog_kaereste() {
await d.me('hej smukkeste'); await d.me('hej smukkeste');
await d.you('hej, jeg har lige tænkt på dig!'); 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('og derfor har jeg taget et sexet billede');
await d.you('(silly naked stick figure image here)') await d.you('#kaereste_foto');
await d.me('tak. Det har jeg savnet!');
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('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!');
} }
]]> ]]>

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 12 KiB