Add permalink detection and display to Viewer.

Author: nickstenning

css/annotator.css

@@ -33,6 +33,7 @@
 .annotator-widget::after,
 .annotator-editor a::after,
 .annotator-viewer .annotator-controls button,
+.annotator-viewer .annotator-controls a,
 .annotator-filter .annotator-filter-navigation button::after,
 .annotator-filter .annotator-filter-property .annotator-filter-clear {
 	background-image: url(../img/annotator-glyph-sprite.png);
@@ -237,7 +238,8 @@
 	opacity: 1;
 }
 
-.annotator-viewer .annotator-controls button {
+.annotator-viewer .annotator-controls button,
+.annotator-viewer .annotator-controls a {
 	cursor: pointer;
 	display: inline-block;
 	width: 13px;
@@ -251,11 +253,14 @@
 }
 
 .annotator-viewer .annotator-controls button:hover,
-.annotator-viewer .annotator-controls button:focus {
+.annotator-viewer .annotator-controls button:focus,
+.annotator-viewer .annotator-controls a:hover,
+.annotator-viewer .annotator-controls a:focus {
 	opacity: 0.9;
 }
 
-.annotator-viewer .annotator-controls button:active {
+.annotator-viewer .annotator-controls button:active,
+.annotator-viewer .annotator-controls a:active {
 	opacity: 1;
 }
 
@@ -271,6 +276,10 @@
 	background-position: 0 -75px;
 }
 
+.annotator-viewer .annotator-controls .annotator-link {
+	background-position: 0 -270px;
+}
+
 /* Annotator Editor
 -------------------------------------------------------------------- */
 

dev.html

@@ -98,7 +98,9 @@ <h3>Header Level 3</h3>
         var elem = document.getElementById('airlock');
 
         devAnnotator = new Annotator(elem)
-          //.addPlugin('Auth')
+          .addPlugin('Auth', {
+            tokenUrl: 'http://localhost:5000/api/token'
+          })
           .addPlugin('Unsupported')
           .addPlugin('Filter', {
             addAnnotationFilter: false
@@ -109,10 +111,15 @@ <h3>Header Level 3</h3>
             permissions: {
               update: ['alice']
             }
+          })
+          .addPlugin('Store', {
+            prefix: 'http://localhost:5000/api',
+            annotationData: {
+              links: {
+                alternate: { href: "http://google.com" }
+              }
+            }
           });
-          // .addPlugin('Store', {
-          //   prefix: 'http://localhost:5000'
-          // });
 
       }(jQuery));
     </script>

img/annotator-glyph-sprite.png

@@ -80,6 +80,7 @@ <h3>Header Level 3</h3>
           <ul class="annotator-widget annotator-listing">
             <li class="annotator-annotation annotator-item">
               <span class="annotator-controls">
+                 <a href="#" class="annotator-link">View as webpage</a>
                  <button class="annotator-edit">Edit</button>
                  <button class="annotator-delete">Delete</button>
                </span>

markup.html

@@ -21,8 +21,9 @@ class Annotator.Viewer extends Annotator.Widget
     item:   """
             <li class="annotator-annotation annotator-item">
               <span class="annotator-controls">
-                <button class="annotator-edit">Edit</button>
-                <button class="annotator-delete">Delete</button>
+                <a href="#" title="View as webpage" class="annotator-link">View as webpage</a>
+                <button title="Edit" class="annotator-edit">Edit</button>
+                <button title="Delete" class="annotator-delete">Delete</button>
               </span>
             </li>
             """
@@ -121,7 +122,7 @@ class Annotator.Viewer extends Annotator.Widget
   #
   # Examples
   #
-  #   viewer.load([annotration1, annotation2, annotation3])
+  #   viewer.load([annotation1, annotation2, annotation3])
   #
   # Returns itslef.
   load: (annotations) =>
@@ -132,11 +133,19 @@ class Annotator.Viewer extends Annotator.Widget
       item = $(@item).clone().appendTo(list).data('annotation', annotation)
       controls = item.find('.annotator-controls')
 
+      link = controls.find('.annotator-link')
+      edit = controls.find('.annotator-edit')
+      del  = controls.find('.annotator-delete')
+
+      unless annotation?.links?.alternate?.href
+        link.remove()
+      else
+        link.attr('href', annotation.links.alternate.href)
+
       if @options.readOnly
-        controls.empty()
+        edit.remove()
+        del.remove()
       else
-        edit = controls.find('.annotator-edit')
-        del  = controls.find('.annotator-delete')
         controller = {
           showEdit: -> edit.removeAttr('disabled')
           hideEdit: -> edit.attr('disabled', 'disabled')