chatapp.svg

@@ -11,36 +11,23 @@
      overflow="auto"
      >
 <defs>
-  <symbol id="kaereste_foto">
-    <circle cx="20" cy="20" r="20" fill="blue" />
-    <line x1="20" y1="40" x2="20" y2="60" stroke="blue" />
-    <ellipse cx="20" cy="110" rx="10" ry="50" fill="green" />
-    <!-- left arm -->
-    <polyline fill="none"
-              stroke="blue"
-              points="15,70 5,50 0,30" />
-    <!-- right arm -->
-    <polyline fill="none"
-              stroke="blue"
-              points="25,70 35,50 40,30" />
-  </symbol>
+  <symbol id="left_chat_message"><text style="text-align: left"></text></symbol>
+  <symbol id="right_chat_message"><text style="text-align: right"></text></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 = 500;
 
-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 line_height = 6;
+const max_visible_lines = 10;
+const messages_y_offset = 20;
+const typing_speed = 70;
 
+var chat_lines_count = 0;
 var conversation_count = 0;
 
 /// SVG 1.1 doesn't do proper text splitting into several lines.
@@ -74,84 +61,94 @@ function split_text_into_lines(text, upper_line_length) {
   return result;
 }
 
-/// A class holding a text chat message.
+/// A class holding a chat message.
 ///
-/// *ChatMessages are owned by a Dialog.
-function TextChatMessage(message_text, is_myself) {
+/// ChatMessages's are owned by a Dialog.
+function ChatMessage(message_text, is_myself) {
   let lines = split_text_into_lines(message_text, 28);
-  let bubble_color = (is_myself)? 'white': 'pink';
+  let tspans = []
+  let bubbles = [];
+
   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})`});
-
+  this.draw = function() {
+    let text = document.createElementNS(svgns, 'text');
     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;
+    text.setAttribute('x', `${x}%`);
+    text.setAttribute('font-size', '14px');
+    text.setAttribute('text-anchor', is_myself ? 'end' : 'start');
 
     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%'
-      });
-
+      let y = tspan_y_pos(chat_lines_count++);
+      let tspan = document.createElementNS(svgns, 'tspan');
+      tspan.setAttribute('x', `${x}%`);
+      tspan.setAttribute('y', `${y}%`); // important: y is lower text baseline
+      tspan.setAttribute('z', 10);
       tspan.appendChild(document.createTextNode(line));
-      text.appendChild(tspan);
+      tspan.setAttribute('fill', 'green');
+      tspan.setAttribute('width', '5%');
 
-      height_so_far += line_height;
+      text.appendChild(tspan);
+      tspans.push(tspan);
     });
 
-    container.appendChild(group);
-    group.appendChild(text); // needs to be part of the DOM *now*
-    let bubble = create_bubble(text, bubble_color);
-    group.appendChild(bubble);
-    container.appendChild(group);
-    redraw_on_top(text);
+    // done making text
+    // it must be in the DOM for getBBox() to work
+    container.appendChild(text);
 
-    this.height = bubble.getBBox().height + bubble_spacing;
-    this.group = group;
+    // 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);
   }
 
   /// 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})`);
+  this.shift_y_pos = function(by, lower_visibility_boundary) {
+    tspans.forEach(tspan => {
+      let is_already_hidden = tspan.getAttribute('visibility') == 'hidden';
+      let old = parseInt(tspan.getAttribute('y').split('%')[0]);
+      let new_value = old + by;
+      tspan.setAttribute('y', `${new_value}%`);
+
+      let visibility;
+      if(new_value < lower_visibility_boundary) {
+        visibility = 'hidden';
+        if(!is_already_hidden) {
+          chat_lines_count--;
+        }
+      } else {
+        visibility = 'visible';
+        if(is_already_hidden) {
+          chat_lines_count++;
+        }
+      }
+      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}%`);
+    });
   }
 }
 
-/// A class holding a image-based chat message.
-///
-/// *ChatMessages are owned by a Dialog.
-function ImageChatMessage(symbol_id, is_myself) {
-  // 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) {
-    console.error('draw() is not implemented yet');
-  }
-
-  this.shift_y_pos = function(by) {
-    console.error('shift_y_pos() is not implemented yet');
-  }
-}
-
-function create_chat_message(content, is_myself) {
-  let constr = (content.startsWith('#'))? ImageChatMessage: TextChatMessage;
-  return new constr(content, is_myself);
+/// Helper function to determine the position of a chat-tspan
+function tspan_y_pos(message_index) {
+  return messages_y_offset + message_index * line_height;
 }
 
 /// Promise-based version of setTimeout
@@ -186,40 +183,6 @@ function swipe_viewport() {
   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();
-  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}%`,
-    '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);
@@ -230,6 +193,7 @@ function start_chat(who) {
   let indicator = document.getElementById('contact_indicator');
   indicator.childNodes[0].data = `Kontakt: ${who}`;
   removeAllChildren(document.getElementById('messages'));
+  chat_lines_count = 0;
   swipe_viewport();
 
   switch(who) {
@@ -250,8 +214,6 @@ function start_chat(who) {
 function Dialog(chat_partner) {
   let conversation_id = ++conversation_count;
   this.messages = [];
-  this.y_shift = visible_chat_area.top; // for scrolling
-  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
@@ -260,18 +222,12 @@ function Dialog(chat_partner) {
       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;
+    let chat_message = new ChatMessage(message, is_myself);
+    chat_message.draw();
     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.y_shift -= line_height;
-      scroll -= line_height;
-      dialog.messages.forEach(msg => msg.shift_y_pos(dialog.y_shift));
+    while(chat_lines_count > max_visible_lines) {
+      dialog.messages.forEach(msg => msg.shift_y_pos(-line_height, messages_y_offset));
       await wait(50);
     }
   }
@@ -321,23 +277,22 @@ async function dialog_kaereste() {
 </script>
 
 <!-- [right] contact name view -->
-<g id="contact_name_box">
-  <rect x="300" y="0" width="300" height="50" fill="yellow" />
+<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="375" y="30" id="contact_indicator">loading...</text>
-</g>
+<text x="125%" y="30" id="contact_indicator">loading...</text>
 
 <!-- [right] messages view -->
-<rect x="300" y="50" width="300" height="450" fill="aqua" />
+<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>
 
 <!-- [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="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="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&#10084;</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&#10084;</text>
 
 </svg>