feat: support for multiple images and images with links (#10)

* Add support for image links

* Add conditional image link rendering and tests

* Add support for multiple/mixed image links

* feat: allow multiple images and image links

annotation.mustache

@@ -4,16 +4,23 @@
     {{#each rows}}
       <li>
       {{#each this}}
-        {{#isArray this}}
+        {{#hasKey this "_image"}}
           {{#each this}}
-            <a href="{{{url}}}">{{text}}</a>{{#unless @last}},{{/unless}}
+            {{#hasKey this "href"}}
+            <a href="{{{href}}}" style="border: none;text-decoration: none;"><img src="{{{url}}}" alt="{{text}}" /></a>
+            {{else}}
+              <img src="{{{url}}}" alt="{{text}}" />
+            {{/hasKey}}
           {{/each}}
-        {{/isArray}}
-        {{#hasKey this "_image"}}
-          <img src="{{{url}}}" alt="{{text}}" />
         {{/hasKey}}
         {{#hasKey this "_link"}}
-          <a href="{{{url}}}">{{text}}</a>
+          {{#isArray this}}
+            {{#each this}}
+              <a href="{{{url}}}">{{text}}</a>{{#unless @last}},{{/unless}}
+            {{/each}}
+          {{else}}
+            <a href="{{{url}}}">{{text}}</a>
+          {{/isArray}}
         {{/hasKey}}
         {{#hasKey this "_text"}}
           <span>{{{text}}}</span>

index.js

@@ -120,7 +120,13 @@ AnnotationPoller.prototype._applyReplacements = function (obj) {
 
       // escape any HTML in image links.
       if (row.image) {
-        if (row.image.url) row.image.url = _this._escape(row.image.url)
+        if (!$.isArray(row.image)) {
+          row.image = [row.image]
+        }
+        row.image.forEach(function(img) {
+          if (img.url) img.url = _this._escape(img.url)
+          if (img.href) img.href = _this._escape(img.href)
+        })
       }
 
       // flatten the row object into an ordered

test.js

@@ -247,4 +247,90 @@ describe('annotation-poller', function () {
       }, 1000)
     })
   })
+
+  it('renders non-linked images', function (done) {
+    $.mockjax({
+      url: endpoint,
+      responseText: [{
+        id: 'test-image-render',
+        name: 'image render test integration',
+        fingerprint: 'tir',
+        rows: [{
+          image: {
+            url: 'http://www.example.com/img.png',
+            text: 'my awesome image link'
+          }
+        }]
+      }]
+    })
+
+    var poller = annotationPoller({pollInterval: 50, pkg: pkg})
+    poller.start(function () {
+      $('.addon-container:last > li > a').length.should.be.equal(0);
+      $('.addon-container:last > li > img').length.should.be.equal(1);
+      poller.stop()
+      return done()
+    })
+  })
+
+  it('renders image links', function (done) {
+    $.mockjax({
+      url: endpoint,
+      responseText: [{
+        id: 'test-image-link',
+        name: 'image link test integration',
+        fingerprint: 'til',
+        rows: [{
+          image: {
+            url: 'http://www.example.com/img.png',
+            text: 'my awesome image link',
+            href: 'http://www.example.com/link'
+          }
+        }]
+      }]
+    })
+
+    var poller = annotationPoller({pollInterval: 50, pkg: pkg})
+    poller.start(function () {
+      $('.addon-container:last > li > a').length.should.be.equal(1);
+      $('.addon-container:last > li > a > img').length.should.be.equal(1);
+      poller.stop()
+      return done()
+    })
+  })
+
+  it('renders multiple images and image links', function (done) {
+    $.mockjax({
+      url: endpoint,
+      responseText: [{
+        id: 'test-multi-mixed-image-links',
+        name: 'mixed multi image links',
+        fingerprint: 'tmmil',
+        rows: [{
+          image: [{
+            url: 'http://www.example.com/img1.png',
+            text: 'my awesome image link',
+            href: 'http://www.example.com/link1'
+          }, {
+            url: 'http://www.example.com/img2.png',
+            text: 'my awesome image link'
+          }, {
+            url: 'http://www.example.com/img3.png',
+            text: 'my awesome image link',
+            href: 'http://www.example.com/link3'
+          }]
+        }]
+      }]
+    })
+
+    var poller = annotationPoller({pollInterval: 50, pkg: pkg})
+    poller.start(function () {
+      $('.addon-container:last > li > a').length.should.be.equal(2);
+      $('.addon-container:last > li > a > img').length.should.be.equal(2);
+      $('.addon-container:last > li > img').length.should.be.equal(1);
+      $('.addon-container:last > li img').length.should.be.equal(3);
+      poller.stop()
+      return done()
+    })
+  })
 })