JSHint compliance and one-time build of availableWidths.

bbc · Oct 27, 2014 · 9e0f4d9 · 9e0f4d9
1 parent 9ff1934
commit 9e0f4d9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 34 deletions.
diff --git a/Imager.js b/Imager.js
@@ -106,7 +106,7 @@
  // elements interactions
  this.selector = opts.selector || '.delayed-image-load';
  this.className = opts.className || 'image-replace';
- this.strategy = (opts.cssBackground || false) ? BackgroundImageStrategy() : ImageElementStrategy();
+ this.strategy = (opts.cssBackground || false) ? backgroundImageStrategy() : imageElementStrategy();
 
  // placeholder configuration
  this.gif = doc.createElement('img');
@@ -137,19 +137,7 @@
  this.gif.removeAttribute('height');
  this.gif.removeAttribute('width');
 
- if (typeof this.availableWidths !== 'function'){
- if (typeof this.availableWidths.length === 'number') {
- this.widthsMap = Imager.createWidthsMap(this.availableWidths, this.widthInterpolator, this.devicePixelRatio);
- }
- else {
- this.widthsMap = this.availableWidths;
- this.availableWidths = getKeys(this.availableWidths);
- }
-
- this.availableWidths = this.availableWidths.sort(function (a, b) {
- return a - b;
- });
- }
+ this.buildWidthMap();
 
  if (elements) {
  this.divs = applyEach(elements, returnFn);
@@ -168,6 +156,39 @@
  });
  }
 
+ /**
+ * Computes `this.availableWidths` as a function from an array of values.
+ * It basically does nothing it `availableWidths` is already a function.
+ *
+ * @since 0.4.0
+ * @returns {Function}
+ */
+ Imager.prototype.buildWidthMap = function(){
+ if (typeof this.availableWidths === 'function') {
+ return;
+ }
+
+ var widths = this.availableWidths;
+
+ // [320, 640, …]
+ if (typeof this.availableWidths.length === 'number') {
+ this.widthsMap = Imager.createWidthsMap(widths, this.widthInterpolator, this.devicePixelRatio);
+ }
+ // { 320: 'small', 640: 'medium', … }
+ else {
+ this.widthsMap = this.availableWidths;
+ widths = getKeys(this.availableWidths);
+ }
+
+ widths = widths.sort(function (a, b) {
+ return a - b;
+ });
+
+ this.availableWidths = function(element){
+ return Imager.getClosestValue(this.strategy.getDimension(element), widths);
+ };
+ };
+
  Imager.prototype.scrollCheck = function(){
  var self = this;
  var offscreenImageCount = 0;
@@ -282,9 +303,7 @@
  */
  Imager.prototype.updateElement = function (element) {
  var naturalWidth = Imager.getNaturalWidth(element);
- var computedWidth = typeof this.availableWidths === 'function'
- ? this.availableWidths(element)
- : Imager.getClosestValue(this.strategy.getDimension(element), this.availableWidths);
+ var computedWidth = this.availableWidths(element);
 
  element.width = computedWidth;
 
@@ -446,7 +465,7 @@
  * @since 0.4.0
  * @returns {ImagerStrategyInterface}
  */
- function ImageElementStrategy(){
+ function imageElementStrategy(){
  var createGif = function (imgr, element) {
  // if the element is already a responsive image then we don't replace it again
  if (element.className.match(new RegExp('(^| )' + imgr.className + '( |$)'))) {
@@ -499,7 +518,7 @@
  * @since 0.4.0
  * @returns {ImagerStrategyInterface}
  */
- function BackgroundImageStrategy(){
+ function backgroundImageStrategy(){
  return {
  prepareElements: noop,
  updateElementUrl: function(image, url){

diff --git a/test/unit/html-options.js b/test/unit/html-options.js
@@ -154,21 +154,22 @@ describe('Imager.js HTML data-* API', function () {
  expect(Imager.transforms.pixelRatio(1.5)).to.equal('-1.5x');
  });
 
- it('should replace {pixel_ratio} from the `data-src`', function(){
- var dataSrc,
- imgr = new Imager();
-
- dataSrc = 'http://example.com/img{pixel_ratio}/A-{width}.jpg';
- sandbox.stub(imgr, 'devicePixelRatio', 1);
- expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img/A-320.jpg');
- sandbox.stub(imgr, 'devicePixelRatio', 2);
- expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img-2x/A-320.jpg');
-
- dataSrc = 'http://example.com/img{pixel_ratio}/A.jpg';
- sandbox.stub(imgr, 'devicePixelRatio', 1);
- expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img/A.jpg');
- sandbox.stub(imgr, 'devicePixelRatio', 2);
- expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img-2x/A.jpg');
+ it('should replace {pixel_ratio} from the `data-src`', function() {
+ var dataSrc,
+ imgr = new Imager();
+
+ dataSrc = 'http://example.com/img{pixel_ratio}/A-{width}.jpg';
+ sandbox.stub(imgr, 'devicePixelRatio', 1);
+ expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img/A-320.jpg');
+ sandbox.stub(imgr, 'devicePixelRatio', 2);
+ expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img-2x/A-320.jpg');
+
+ dataSrc = 'http://example.com/img{pixel_ratio}/A.jpg';
+ sandbox.stub(imgr, 'devicePixelRatio', 1);
+ expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img/A.jpg');
+ sandbox.stub(imgr, 'devicePixelRatio', 2);
+ expect(imgr.filterUrl(dataSrc, 320)).to.equal('http://example.com/img-2x/A.jpg');
+ });
  });
 
  describe('handling data-alt', function () {