feat: allow width and height to be suggested by the upstream API (#17)

* Add support for fullSize images * Remove npm build command * feat: allow width and height to be modified
npm · Jun 2, 2016 · fdbe16f · fdbe16f
1 parent 65259b4
commit fdbe16f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 18 deletions.
diff --git a/annotation.mustache b/annotation.mustache
@@ -7,9 +7,9 @@
         {{#hasKey this "_image"}}
           {{#each this}}
             {{#hasKey this "href"}}
-            <a target="_blank" href="{{{href}}}" style="border: none;text-decoration: none;"><img src="{{{url}}}" alt="{{text}}" /></a>
+              <a href="{{{href}}}" style="border: none;text-decoration: none;"><img src="{{{url}}}" alt="{{text}}" {{#if fullSize}}style="height:auto;width:100%;"{{/if}} /></a>
             {{else}}
-              <img src="{{{url}}}" alt="{{text}}" />
+              <img src="{{{url}}}" alt="{{text}}" {{#if width}}style="height:{{height}};width:{{width}};"{{/if}} />
             {{/hasKey}}
           {{/each}}
         {{/hasKey}}

diff --git a/index.js b/index.js
@@ -10,20 +10,20 @@ function AnnotationPoller (opts) {
   this.pkg = opts.pkg // what package should we load annotations for?
   this.endpoint = '/api/v1/annotations/' + this.pkg
   this.annotations = {}
-  this.template = Handlebars.templates['annotation.mustache']
+  this.template = global.Handlebars.templates['annotation.mustache']
   this.addonSelector = '#npm-addon-box'
 }
 
 AnnotationPoller.prototype._installExtensions = function () {
-  Handlebars.registerHelper('hasKey', function (obj, key, options) {
+  global.Handlebars.registerHelper('hasKey', function (obj, key, options) {
     if (typeof obj === 'object' && obj[key]) {
       return options.fn(this)
     } else {
       return options.inverse(this)
     }
   })
 
-  Handlebars.registerHelper('isArray', function (obj, options) {
+  global.Handlebars.registerHelper('isArray', function (obj, options) {
     if ($.isArray(obj)) {
       return options.fn(this)
     } else {
@@ -123,7 +123,7 @@ AnnotationPoller.prototype._applyReplacements = function (obj) {
         if (!$.isArray(row.image)) {
           row.image = [row.image]
         }
-        row.image.forEach(function(img) {
+        row.image.forEach(function (img) {
           if (img.url) img.url = _this._escape(img.url)
           if (img.href) img.href = _this._escape(img.href)
         })

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "handlebars annotation.mustache -f annotation.js",
-    "pretest": "npm run build",
+    "pretest": "npm run build; standard",
     "prepublish": "npm run build",
     "test": "nyc mocha --timeout=10000 test.js",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
@@ -43,8 +43,8 @@
     "handlebars": "^4.0.5",
     "jquery": "^2.2.2"
   },
-  "ignore": {
-    "ignore": [
+  "nyc": {
+    "exclude": [
       "annotation.js"
     ]
   },

diff --git a/test.js b/test.js
@@ -79,7 +79,7 @@ describe('annotation-poller', function () {
     $.mockjax({
       url: endpoint,
       status: 500,
-      responseText: "ENOGOOD"
+      responseText: 'ENOGOOD'
     })
 
     var poller = annotationPoller({pollInterval: 50, pkg: pkg})
@@ -288,8 +288,8 @@ describe('annotation-poller', function () {
 
     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);
+      $('.addon-container:last > li > a').length.should.be.equal(0)
+      $('.addon-container:last > li > img').length.should.be.equal(1)
       poller.stop()
       return done()
     })
@@ -314,8 +314,8 @@ describe('annotation-poller', function () {
 
     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);
+      $('.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()
     })
@@ -347,10 +347,37 @@ describe('annotation-poller', function () {
 
     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);
+      $('.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()
+    })
+  })
+
+  it('respects width and height if provided', function (done) {
+    $.mockjax({
+      url: endpoint,
+      responseText: [{
+        id: 'test-fullsize-images',
+        name: 'fullsize images',
+        fingerprint: 'tfi',
+        rows: [{
+          image: {
+            url: 'http://www.example.com/img1.png',
+            text: 'my awesome image',
+            width: '100%',
+            height: 'auto'
+          }
+        }]
+      }]
+    })
+
+    var poller = annotationPoller({pollInterval: 50, pkg: pkg})
+    poller.start(function () {
+      $('.addon-container:last > li > img').length.should.be.equal(1)
+      $('.addon-container:last > li > img').css('width').should.be.equal('100%')
       poller.stop()
       return done()
     })