Merge pull request #968 from saebekassebil/dev

Comment and Check Annotations - Re. PR#946

LICENSE

@@ -9,6 +9,7 @@
                   Yury Delendik
                   Kalervo Kujala
                   Adil Allawi <@ironymark>
+                  Jakob Miland <saebekassebil@gmail.com>
 
     Permission is hereby granted, free of charge, to any person obtaining a
     copy of this software and associated documentation files (the "Software"),

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,16 @@ 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 = stringToPDFString(content || '');
+            item.title = stringToPDFString(title || '');
+            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,35 @@ canvas {
   line-height:1.3;
 }
 
+.annotComment > div {
+  position: absolute;
+}
+
+.annotComment > img {
+  position: absolute;
+}
+
+.annotComment > img:hover {
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.annotComment > div {
+  padding: 0.2em;
+  max-width: 20em;
+  background-color: #F1E47B;
+  box-shadow: 0px 2px 10px #333;
+  -moz-box-shadow: 0px 2px 10px #333;
+  -webkit-box-shadow: 0px 2px 10px #333;
+}
+
+.annotComment > div > 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

@@ -11,7 +11,7 @@ var kCssUnits = 96.0 / 72.0;
 var kScrollbarPadding = 40;
 var kMinScale = 0.25;
 var kMaxScale = 4.0;
-
+var kImageDirectory = './images/';
 
 var Cache = function cacheCache(size) {
   var data = [];
@@ -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 container = document.createElement('section');
+      container.className = 'annotComment';
+
+      var image = createElementWithStyle('img', item);
+      image.src = kImageDirectory + type.toLowerCase() + '.svg';
+      var content = document.createElement('div');
+      content.setAttribute('hidden', true);
+      var title = document.createElement('h1');
+      var text = document.createElement('p');
+      var offsetPos = Math.floor(item.x - view.x + item.width);
+      content.style.left = (offsetPos * scale) + 'px';
+      content.style.top = (Math.floor(item.y - view.y) * scale) + 'px';
+      title.textContent = item.title;
+
+      if (!item.content) {
+        content.setAttribute('hidden', true);
+      } else {
+        text.innerHTML = item.content.replace('\n', '<br />');
+        image.addEventListener('mouseover', function annotationImageOver() {
+           this.nextSibling.removeAttribute('hidden');
+        }, false);
+
+        image.addEventListener('mouseout', function annotationImageOut() {
+           this.nextSibling.setAttribute('hidden', true);
+        }, false);
+      }
+
+      content.appendChild(title);
+      content.appendChild(text);
+      container.appendChild(image);
+      container.appendChild(content);
+
+      return container;
+    }
 
     var items = content.getAnnotations();
     for (var i = 0; i < items.length; i++) {
@@ -487,6 +522,11 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
             bindLink(link, ('dest' in item) ? item.dest : null);
           div.appendChild(link);
           break;
+        case 'Text':
+          var comment = createCommentAnnotation(item.name, item);
+          if (comment)
+            div.appendChild(comment);
+          break;
       }
     }
   }