chatcontrol-live-demo/chatapp.svg

<?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="500" 
     viewBox="0 0 300 500"
     onload="start_chat('Ven')"
     overflow="auto"
     >
<defs>
  <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[
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 = 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.
/// 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;
}

/// A class holding a chat message.
///
/// ChatMessages's are owned by a Dialog.
function ChatMessage(message_text, is_myself) {
  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 ? 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++);
      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));
      tspan.setAttribute('fill', 'green');
      tspan.setAttribute('width', '5%');

      text.appendChild(tspan);
      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);
  }

  /// Move a chat message on the screen (to simulate scrolling)
  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}%`);
    });
  }
}

/// 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
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);
}

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'));
  chat_lines_count = 0;
  swipe_viewport();

  switch(who) {
    case 'Ven':
      dialog_ven();
      break;
    case 'Mor':
      dialog_mor();
      break;
    case 'Kæreste':
      dialog_kaereste();
      break;
    default:
      alert(`Unknown contact: ${who}`);
  }
}

function Dialog(chat_partner) {
  let conversation_id = ++conversation_count;
  this.messages = [];

  async function post_message(dialog, message, is_myself) {
    if(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
    }

    let chat_message = new ChatMessage(message, is_myself);
    chat_message.draw();
    dialog.messages.push(chat_message);

    while(chat_lines_count > max_visible_lines) {
      dialog.messages.forEach(msg => msg.shift_y_pos(-line_height, messages_y_offset));
      await wait(50);
    }
  }

  this.me = async function(message) {
    await post_message(this, message, true);
  }
  this.you = async function(message) {
    await post_message(this, message, false);
  }
}

async function dialog_ven() {
  let d = new Dialog('Ven');
  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!');
  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 leger du på stranden");
  await d.you("(naked stick figure image here)");
}

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 taget et sexet billede');
  await d.you('(silly naked stick figure image here)')
}

]]>
</script>

<!-- [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>

<!-- [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>

<!-- [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="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>