Skip to content

Commit

Permalink
feat: global default parameters (#134)
Browse files Browse the repository at this point in the history
## Description

This PR allows developers to set default parameters for every img tag. This prevents them from having to set the same parameters over and over again.

This fixes #129 

## Steps to test

Review new unit tests.
  • Loading branch information
frederickfogerty authored Dec 5, 2018
1 parent 8216df4 commit ab42f74
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 5 deletions.
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Responsive images in the browser, simplified. Pure JavaScript with zero dependen
* [Custom input attributes](#custom-input-attributes)
* [Null output attributes](#null-output-attributes)
* [Base-64 encoded parameters](#base-64-encoded-parameters)
* [Default Parameters](#default-parameters)
* [What is the `ixlib` param?](#what-is-the-ixlib-param)
* [Browser Support](#browser-support)
* [Meta](#meta)
Expand Down Expand Up @@ -353,6 +354,28 @@ When providing a URL with parameters to imgix.js via the `ix-src` attribute, not
>
```

<a name="default-parameters"></a>
### Default parameters

If the same parameters are being used again and again, they can be extracted out into a global config using `imgix.defaultParameters`. These settings will become the default paramters for each imgix tag globally, before any specific params are loaded from `ix-params` or `ix-src`

```js
// setup
imgix.config.defaultParams = {
auto: 'format,compress',
fit: 'crop'
}

// later
<img
ix-path="hero.png"
ix-params='{"fit":"clip"}'
>

// becomes
<img src=".../hero.png?auto=format,compress&fit=clip">

```

<a name="what-is-the-ixlib-param"></a>
### What is the `ixlib` param?
Expand Down
27 changes: 27 additions & 0 deletions spec/ImgixTagSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,33 @@ describe('ImgixTag', function() {
txt64: 'SSBjYW5uw7h0IGJlbMOuw6l24oiRIGl0IHdvcu-jv3MhIPCfmLE'
});
});

it('uses global parameters', function() {
var mock = new global.MockElement();
mock['ix-path'] = 'path';
var tag = new ImgixTag(mock, global.imgix.config);
global.imgix.config.defaultParams = {
auto: 'format,compress'
};

expect(tag._extractBaseParams()).toEqual({
auto: 'format,compress'
});
});
it('ix-params overrides global parameters', function() {
var mock = new global.MockElement();
mock['ix-path'] = 'path';
mock['ix-params'] = '{"auto": "format"}';

var tag = new ImgixTag(mock, global.imgix.config);
global.imgix.config.defaultParams = {
auto: 'format,compress'
};

expect(tag._extractBaseParams()).toEqual({
auto: 'format'
});
});
});

it('includes the `ixlib` parameter when `imgix.config.includeLibraryParam` is `true`', function() {
Expand Down
14 changes: 10 additions & 4 deletions src/ImgixTag.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,18 @@ var ImgixTag = (function() {
}

ImgixTag.prototype._extractBaseParams = function() {
var params;
var params = {};

if (
this.settings.defaultParams &&
typeof this.settings.defaultParams === 'object' &&
this.settings.defaultParams !== null
) {
params = Object.assign({}, this.settings.defaultParams);
}

if (this.ixPathVal) {
params = JSON.parse(this.ixParamsVal) || {};
params = Object.assign({}, params, JSON.parse(this.ixParamsVal) || {});

// Encode any passed Base64 variant params
for (var key in params) {
Expand All @@ -65,8 +73,6 @@ var ImgixTag = (function() {
// from that string URL.
var lastQuestion = this.ixSrcVal.lastIndexOf('?');

params = {};

if (lastQuestion > -1) {
var paramString = this.ixSrcVal.substr(lastQuestion + 1),
splitParams = paramString.split('&');
Expand Down
1 change: 1 addition & 0 deletions src/defaultConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module.exports = {
host: null,
useHttps: true,
includeLibraryParam: true,
defaultParams: {},

// Output element attributes
srcAttribute: 'src',
Expand Down
5 changes: 4 additions & 1 deletion src/imgix.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,12 @@ util.domReady(function() {
var metaTagValue = getMetaTagValue(key);

if (typeof metaTagValue !== 'undefined') {
const defaultConfigType = typeof defaultConfig[key];
// Only allow boolean values for boolean configs
if (typeof defaultConfig[key] === 'boolean') {
if (defaultConfigType === 'boolean') {
global.imgix.config[key] = !!metaTagValue;
} else if (defaultConfigType === 'object' && defaultConfig[key] != null) {
global.imgix.config[key] = JSON.parse(metaTagValue) || {};
} else {
global.imgix.config[key] = metaTagValue;
}
Expand Down

0 comments on commit ab42f74

Please sign in to comment.