diff --git a/Imager.js b/Imager.js index 19d3c1b..d3b4022 100644 --- a/Imager.js +++ b/Imager.js @@ -124,6 +124,8 @@ this.widthsMap = {}; this.refreshPixelRatio(); this.widthInterpolator = opts.widthInterpolator || returnFn; + this.widthInterpolationSelector = !opts.widthInterpolationSelector ? new RegExp('{width}', 'g') : new RegExp(opts.widthInterpolationSelector, 'g'); + this.pixelRatioInterpolationSelector = !opts.pixelRatioInterpolationSelector ? new RegExp('{pixel_ratio}', 'g') : new RegExp(opts.pixelRatioInterpolationSelector, 'g'); // Needed as IE8 adds a default `width`/`height` attribute⦠this.gif.removeAttribute('height'); @@ -360,8 +362,8 @@ Imager.prototype.changeImageSrcToUseNewImageDimensions = function (src, selectedWidth) { return src - .replace(/{width}/g, Imager.transforms.width(selectedWidth, this.widthsMap)) - .replace(/{pixel_ratio}/g, Imager.transforms.pixelRatio(this.devicePixelRatio)); + .replace(this.widthInterpolationSelector, Imager.transforms.width(selectedWidth, this.widthsMap)) + .replace(this.pixelRatioInterpolationSelector, Imager.transforms.pixelRatio(this.devicePixelRatio)); }; Imager.getPixelRatio = function getPixelRatio(context) { diff --git a/test/fixtures/custom-matcher.html b/test/fixtures/custom-matcher.html new file mode 100644 index 0000000..e383a73 --- /dev/null +++ b/test/fixtures/custom-matcher.html @@ -0,0 +1,3 @@ +
+ + diff --git a/test/unit/html-options.js b/test/unit/html-options.js index d81975a..1e3b42c 100644 --- a/test/unit/html-options.js +++ b/test/unit/html-options.js @@ -17,6 +17,22 @@ describe('Imager.js HTML data-* API', function () { cleanFixtures(fixtures); }); + describe('customising matcher for interpolation', function () { + it('should successfully resolve custom match expression', function (done) { + fixtures = loadFixtures('custom-matcher'); + var imgr = new Imager({availableWidths: [320, 640], widthInterpolationSelector: 'xxwidthxx'}); + + imgr.ready(function () { + var src = applyEach(imgr.divs, function (el) { + return el.getAttribute('src'); + }); + + expect(src).to.eql(['base/test/fixtures/media/C-640.jpg', 'base/test/fixtures/media/B-640.jpg', 'base/test/fixtures/media-320/fillmurray.jpg']); + done(); + }); + }); + }); + describe('handling {width} in data-src', function () { it('should not use RegExp anymore', function (done) { fixtures = loadFixtures('data-src-old');