Implemented Comment and Check annotation. Correcting some typos in last commit

src/core.js

@@ -323,10 +323,10 @@ var Page = (function PageClosure() {
             if (a) {
               switch (a.get('S').name) {
                 case 'URI':
-                  link.url = a.get('URI');
+                  item.url = a.get('URI');
                   break;
                 case 'GoTo':
-                  link.dest = a.get('D');
+                  item.dest = a.get('D');
                   break;
                 default:
                   TODO('other link types');
@@ -334,7 +334,7 @@ var Page = (function PageClosure() {
             } else if (annotation.has('Dest')) {
               // simple destination link
               var dest = annotation.get('Dest');
-              link.dest = isName(dest) ? dest.name : dest;
+              item.dest = isName(dest) ? dest.name : dest;
             }
             break;
           case 'Widget':
@@ -379,6 +379,18 @@ var Page = (function PageClosure() {
             item.textAlignment = getInheritableProperty(annotation, 'Q');
             item.flags = getInheritableProperty(annotation, 'Ff') || 0;
             break;
+
+          case 'Text':
+            var content = annotation.get('Contents');
+            var title = annotation.get('T');
+            item.content = (typeof content == 'string') ? stringToPDFString(content) : null;
+            item.title = (typeof title == 'string') ? stringToPDFString(title) : null;
+            item.name = annotation.get('Name').name;
+            break;
+
+          default: 
+            TODO('unimplemented annotation type: ' + subtype.name);
+            break;
         }
         items.push(item);
       }

web/images/check.svg

@@ -0,0 +1,3 @@
+<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.379,14.729 5.208,11.899 12.958,19.648 25.877,6.733 28.707,9.561 12.958,25.308z" fill="#333333"></path>
+</svg>

web/images/comment.svg

@@ -0,0 +1,3 @@
+<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z" fill="#333333"></path>
+</svg>

web/viewer.css

@@ -247,6 +247,39 @@ canvas {
   line-height:1.3;
 }
 
+.annotComment > div {
+  position: absolute;
+}
+
+.annotComment > .annotImageComment {
+  background: transparent url('./images/text.svg') no-repeat left top;
+  background-size: 75% 75%;
+}
+
+.annotComment > .annotImageCheck {
+  background: transparent url('./images/check.svg') no-repeat left top;
+  background-size: 75% 75%;
+}
+
+.annotComment > .annotImage:hover {
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.annotComment > .annotDetails {
+  display: none;
+  padding: 0.2em;
+  max-width: 20em;
+  background-color: #F1E47B;
+}
+
+.annotComment > .annotDetails > h1 {
+  font-weight: normal;
+  font-size: 1.2em;
+  border-bottom: 1px solid #000000;
+  margin: 0px;
+}
+
 /* TODO: file FF bug to support ::-moz-selection:window-inactive
    so we can override the opaque grey background when the window is inactive;
    see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */

web/viewer.js

@@ -475,6 +475,41 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
       element.style.height = Math.ceil(item.height * scale) + 'px';
       return element;
     }
+    function createCommentAnnotation(type, item) {
+      var annotContainer = document.createElement('section'); 
+      annotContainer.className = 'annotComment';
+
+      var annotImage = createElementWithStyle('div', item);
+      annotImage.className = 'annotImage annotImage' + type;
+      var annotDetails = document.createElement('div');
+      annotDetails.className = 'annotDetails';
+      var annotTitle = document.createElement('h1');
+      var annotContent = document.createElement('p');
+
+      annotDetails.style.left = (Math.floor(item.x - view.x + item.width) * scale) + 'px';
+      annotDetails.style.top = (Math.floor(item.y - view.y) * scale) + 'px';
+      annotTitle.textContent = item.title;
+
+      if(!item.content) {
+        annotContent.style.display = 'none';
+      } else {
+        annotContent.innerHTML = item.content.replace('\n', '<br />');
+        annotImage.addEventListener('mouseover', function() {
+           this.nextSibling.style.display = 'block'; 
+        }, true);
+
+        annotImage.addEventListener('mouseout', function() {
+           this.nextSibling.style.display = 'none'; 
+        }, true);
+      }
+
+      annotDetails.appendChild(annotTitle);
+      annotDetails.appendChild(annotContent);
+      annotContainer.appendChild(annotImage);
+      annotContainer.appendChild(annotDetails);
+
+      return annotContainer;
+    }
 
     var items = content.getAnnotations();
     for (var i = 0; i < items.length; i++) {
@@ -487,6 +522,13 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
             bindLink(link, ('dest' in item) ? item.dest : null);
           div.appendChild(link);
           break;
+
+        case 'Text':
+        case 'Check':
+          var comment = createCommentAnnotation(item.name, item);
+          if(comment)
+            div.appendChild(comment);
+          break;
       }
     }
   }