Word 2013 Comments

Using the HTML5 Canvas tag to mimic Word-esque comments on a side panel.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css.map"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<canvas id="canvas"></canvas>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at sem et eros pharetra tincidunt a sit amet eros. Ut malesuada euismod cursus. Sed malesuada nulla id elit suscipit gravida. Curabitur blandit arcu non purus porta, eget pretium turpis aliquet. Curabitur posuere id est vel hendrerit. Nam id purus quis libero tincidunt volutpat. Duis aliquam urna massa, in consectetur enim sagittis malesuada. <span class="highlight"><span class="first" data-group="1">D</span>onec luctus, ligula eget egestas pulvinar, orci dolor malesuada nibh, ut posuere arcu massa ut eros. Cum sociis natoque penatibus et magnis dis </span>parturient montes, nascetur ridiculus mus. Nunc <span class="highlight"><span class="first" data-group="2">u</span>rna</span> lectus, semper in <span class="highlight"><span class="first" data-group="3">a</span>ugue</span> in, elementum lacinia lorem. Suspendisse arcu tellus, luctus vel ipsum vel, gravida pellentesque odio. Duis sed nibh mollis, suscipit sem id, eleifend orci.</p>
    </div>

    <div class="col-xs-4">
      <div class="container-fluid comments-container">
        <div class="row">
          <div class="col-md-12">
        <div class="comment-container" data-group="1">
          <img class="comment-image"></img>
          <span class="comment-name">R. Michael Rogers</span> <span class="comment-time">25 minutes ago</span>
          <div class="comment-text">
            I'm not entirely sure Latin is appropriate here.
          </div>
        </div>
        <div class="comment-container" data-group="2">
 ...

CSS

span.highlight {
    background-color: pink;
}

.comment-container {
    padding: 1px 0;
    margin: 0;
    margin-bottom: 3px;
    border-left: 3px solid #8B0000;
}

.comment-container:hover {
    padding: 0;
    padding-left: 2px;
    margin: 0;
    margin-bottom: 3px;
    background-color: #ddd;
    border: 1px solid #8B0000;
}

.comment-image {
    background-image: url("http://mike-rogers.github.io/assets/images/face.png");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    min-width: 32px;
    min-height: 32px;
    float: left;
    margin-right: 11px;
    margin-top: 2px;
}

.comment-name {
    margin-top: 0;
    font-weight: bold;
    margin-right: 8px;
}

.comment-text {
    margin-left: 43px;
}

#canvas {
    position: absolute;
}

JavaScript

$(function () {
  var clearCanvas = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };

  var drawSomeLines = function (targetGroup) {
    if (!targetGroup) { targetGroup = 0; }
    var $highlights = $("span.highlight .first[data-group]");
    $highlights.each(function () {
      var $element = $(this);
      var group = $element.attr('data-group');
      var p1 = $element.offset();
      var $comments = $("div.comment-container[data-group='" + group + "']");
      var p2 = $comments.first().offset();

      if (Number(group) == Number(targetGroup)) {
        ctx.setLineDash([0,0]);
        ctx.lineDashOffset = 0;
      } else {
        ctx.setLineDash([5, 3]);
        ctx.lineDashOffset = 0;
      }

      connectPoints(p1, p2);
    });
  };

  var beginHover = function (event) {
    var targetGroup = 0;
    var $elements = $(this).closest("[data-group]");
    if ($elements.length > 0) {
      targetGroup = $elements.first().attr('data-group');
    } else {
      $elements = $(this).find("[data-group]");

      if ($elements.length > 0) {
        targetGroup = $elements.first().attr('data-group');
      }
    }

    clearCanvas();

    drawSomeLines(targetGroup);
  };

  var endHover = function (event) {
    clearCanvas();

    drawSomeLines(0);
  };

  var connectPoints = function (p1, p2) {
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.fillStyle = "#8b0000";
    ctx.strokeStyle = "#8b0000";
    ctx.moveTo(p1.left, p1.top);
    ctx.lineTo(p2.left - 50, p1.top);
    ctx.lineTo(p2.left, p2.top + 30);
    ctx.stroke();
  };

  var canvas = document.getElementById("canvas");
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;

  var ctx = canvas.getContext("2d");
  ctx.lineWidth=1;

  $("span.highlight").hover(beginHover, endHover);
  $("div.comment-container").hover(beginHover, endHover);

  drawSomeLines();
});