feat: add srcset generation

src/imgix-core-js.js

@@ -70,6 +70,72 @@
       return this.settings.urlPrefix + this.settings.domain + path + queryParams;
     };
 
+    ImgixClient.prototype.buildSrcSet = function (path, params) {
+      var width = params['w'];
+      var height = params['h'];
+      var aspectRatio = params['ar'];
+      var aspectRatioAsDecimal = function() {
+        if (typeof aspectRatio !== "string") {
+          return false;
+        }
+        var isValidFormat = function(str) {
+          return /^\d+(\.\d+)?:\d+(\.\d+)?$/.test(str);
+        };
+        if (!isValidFormat(aspectRatio)) {
+          return false;
+        }
+
+        const aspectRatioSplit = aspectRatio.split(":");
+        var arWidth = aspectRatioSplit[0];
+        var arHeight = aspectRatioSplit[1];
+
+        return parseFloat(arWidth) / parseFloat(arHeight);
+      }();
+
+      var fixedWidth = ((width && height) || (width && aspectRatio) || (height && aspectRatio)) ? true : false;
+
+      if (fixedWidth) {
+        if (width && height) {
+          return this._buildDPRSrcSet(path, params);
+        }
+        else if (aspectRatio) { 
+          if (width) {
+            params['h'] = width / aspectRatioAsDecimal;
+          }
+          else if (height) {
+            params['w'] = height * aspectRatioAsDecimal;
+          }
+          return this._buildDPRSrcSet(path, params);
+        }
+      }
+      return this._buildSrcSetPairs(path, params);
+    };
+
+    ImgixClient.prototype._buildSrcSetPairs = function(path, params) {
+      var srcset = '';
+      var targetWidths = this._targetWidths();
+
+      for(var i = 0; i < targetWidths.length; i++) {
+        currentWidth = targetWidths[i];
+        srcset += this.buildURL(path, {...params, 'w':currentWidth}) + ' ' + currentWidth + 'w,\n';
+      }
+
+      return srcset.slice(0,-2);
+    };
+
+    ImgixClient.prototype._buildDPRSrcSet = function(path, params) {
+        var srcset = '';
+        var targetRatios = [1,2,3,4,5];
+        var url = this.buildURL(path, params);
+
+        for(var i = 0; i < targetRatios.length; i++) {
+          currentRatio = targetRatios[i];
+          srcset += url + ' ' + currentRatio +'x,\n'
+        }
+
+        return srcset.slice(0,-2);
+    };
+
     ImgixClient.prototype._sanitizePath = function(path) {
       // Strip leading slash first (we'll re-add after encoding)
       path = path.replace(/^\//, '');
@@ -124,6 +190,23 @@
       }
     };
 
+    ImgixClient.prototype._targetWidths = function() {
+      var resolutions = [];
+      var prev = 100;
+      var INCREMENT_PERCENTAGE = 8;
+      var MAX_SIZE = 8192;
+
+      var ensureEven = n => 2 * Math.round(n / 2);
+
+      while (prev <= MAX_SIZE) {
+        resolutions.push(ensureEven(prev));
+        prev *= 1 + (INCREMENT_PERCENTAGE / 100) * 2;
+      }
+
+      resolutions.push(MAX_SIZE);
+      return resolutions;
+    };
+
     ImgixClient.VERSION = VERSION;
 
     return ImgixClient;