3 files changed, 85 insertions, 0 deletions
diff --git a/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.css b/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.css
new file mode 100644
index 0000000..6a2b2ee
--- /dev/null
+++ b/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.css
@@ -0,0 +1,36 @@
+#annotation-list .annotation-details
+  {
+  padding: 10px;
+  margin: 10px;
+  border: solid 3px #EEE;
+  background-color: white;
+  }
+
+#annotation-list .url, .selection-text, .annotation-text
+  {
+  padding: 5px;
+  margin: 5px;
+  }
+
+#annotation-list .selection-text,#annotation-list .annotation-text
+  {
+  border: solid 1px #EEE;
+  }
+
+#annotation-list .annotation-text
+  {
+  font-style: italic;
+  }
+
+body
+  {
+  background-color: #F5F5F5;
+  font: 100% arial, helvetica, sans-serif;
+  }
+
+h1
+  {
+  font-family: georgia,serif;
+  font-size: 1.5em;
+  text-align:center;
+  }
diff --git a/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.html b/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.html
new file mode 100644
index 0000000..6b97153
--- /dev/null
+++ b/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <title>Saved annotations</title>
+  <link rel="stylesheet" type="text/css" href="annotation-list.css" />
+</head>
+<body>
+
+<div id="annotation-list">
+</div>
+
+<div id="template">
+  <div class="annotation-details">
+    <a class="url"></a>
+    <div class="selection-text"></div>
+    <div class="annotation-text"></div>
+  </div>
+</div>
+
+</body>
+
+</html>
diff --git a/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.js b/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.js
new file mode 100644
index 0000000..1a0e8f5
--- /dev/null
+++ b/tools/addon-sdk-1.4/examples/annotator/data/list/annotation-list.js
@@ -0,0 +1,27 @@
+/*
+Construct the HTML for the annotation list.
+
+Bind a function to click events on the link that send a message back to
+the add-on code, so it can open the link in the main browser.
+*/
+
+self.on("message", function onMessage(storedAnnotations) {
+  var annotationList = $('#annotation-list');
+  annotationList.empty();
+  storedAnnotations.forEach(
+    function(storedAnnotation) {
+      var annotationHtml = $('#template .annotation-details').clone();
+      annotationHtml.find('.url').text(storedAnnotation.url)
+                                 .attr('href', storedAnnotation.url);
+      annotationHtml.find('.url').bind('click', function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        self.postMessage(storedAnnotation.url);
+      });
+      annotationHtml.find('.selection-text')
+                    .text(storedAnnotation.anchorText);
+      annotationHtml.find('.annotation-text')
+                    .text(storedAnnotation.annotationText);
+      annotationList.append(annotationHtml);
+    });
+});