Skip to content

Commit af98865

Browse files
sunknudsensunknudsen
committed
Added set source callback
1 parent d44409d commit af98865

6 files changed

Lines changed: 94 additions & 72 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ Avatar is highly customizable and most options are self explanatory:
6565
facebook: null, // Facebook ID or Username
6666
instagram: null, // Instagram ID or Username
6767
size: 'medium', // Size: small, medium, large
68-
}
68+
},
69+
70+
setSourceCallback: null, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
6971
}
7072
```
7173

‎build/avatar.browser.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,8 @@ function () {
280280
facebook: null,
281281
instagram: null,
282282
size: 'medium'
283-
}
283+
},
284+
setSourceCallback: null
284285
}, options);
285286
var source = this.settings.fallbackImage;
286287

@@ -309,6 +310,10 @@ function () {
309310

310311
if (source) {
311312
this.element.src = source;
313+
314+
if (this.settings.setSourceCallback && typeof this.settings.setSourceCallback === 'function') {
315+
this.settings.setSourceCallback(source);
316+
}
312317
}
313318
}
314319
}, {

‎build/avatar.js‎

Lines changed: 76 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1+
'use strict';
12

3+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
24

3-
function _interopDefault(ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex.default : ex; }
4-
5-
const md5 = _interopDefault(require('md5'));
5+
var md5 = _interopDefault(require('md5'));
66

77
function _classCallCheck(instance, Constructor) {
88
if (!(instance instanceof Constructor)) {
9-
throw new TypeError('Cannot call a class as a function');
9+
throw new TypeError("Cannot call a class as a function");
1010
}
1111
}
1212

1313
function _defineProperties(target, props) {
14-
for (let i = 0; i < props.length; i++) {
15-
const descriptor = props[i];
14+
for (var i = 0; i < props.length; i++) {
15+
var descriptor = props[i];
1616
descriptor.enumerable = descriptor.enumerable || false;
1717
descriptor.configurable = true;
18-
if ('value' in descriptor) descriptor.writable = true;
18+
if ("value" in descriptor) descriptor.writable = true;
1919
Object.defineProperty(target, descriptor.key, descriptor);
2020
}
2121
}
@@ -29,10 +29,10 @@ function _createClass(Constructor, protoProps, staticProps) {
2929
function _defineProperty(obj, key, value) {
3030
if (key in obj) {
3131
Object.defineProperty(obj, key, {
32-
value,
32+
value: value,
3333
enumerable: true,
3434
configurable: true,
35-
writable: true,
35+
writable: true
3636
});
3737
} else {
3838
obj[key] = value;
@@ -42,27 +42,29 @@ function _defineProperty(obj, key, value) {
4242
}
4343

4444
function _objectSpread(target) {
45-
for (let i = 1; i < arguments.length; i++) {
45+
for (var i = 1; i < arguments.length; i++) {
4646
var source = arguments[i] != null ? arguments[i] : {};
47-
let ownKeys = Object.keys(source);
48-
/* istanbul ignore next */
47+
var ownKeys = Object.keys(source);
48+
4949
if (typeof Object.getOwnPropertySymbols === 'function') {
50-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(sym => Object.getOwnPropertyDescriptor(source, sym).enumerable));
50+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
51+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
52+
}));
5153
}
5254

53-
ownKeys.forEach((key) => {
55+
ownKeys.forEach(function (key) {
5456
_defineProperty(target, key, source[key]);
5557
});
5658
}
5759

5860
return target;
5961
}
6062

61-
const Avatar =
62-
/* #__PURE__ */
63-
(function () {
63+
var Avatar =
64+
/*#__PURE__*/
65+
function () {
6466
function Avatar(element) {
65-
const options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
67+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
6668

6769
_classCallCheck(this, Avatar);
6870

@@ -95,10 +97,11 @@ const Avatar =
9597
twitter: null,
9698
facebook: null,
9799
instagram: null,
98-
size: 'medium',
100+
size: 'medium'
99101
},
102+
setSourceCallback: null
100103
}, options);
101-
let source = this.settings.fallbackImage;
104+
var source = this.settings.fallbackImage;
102105

103106
if (this.settings.useGravatar && this.settings.allowGravatarFallback) {
104107
source = Avatar.gravatarUrl(this.settings);
@@ -117,113 +120,116 @@ const Avatar =
117120
}
118121

119122
_createClass(Avatar, [{
120-
key: 'setSource',
123+
key: "setSource",
121124
value: function setSource(source) {
122125
if (!this.element) {
123126
throw new Error('No image element set.');
124127
}
125128

126129
if (source) {
127130
this.element.src = source;
131+
132+
if (this.settings.setSourceCallback && typeof this.settings.setSourceCallback === 'function') {
133+
this.settings.setSourceCallback(source);
134+
}
128135
}
129-
},
136+
}
130137
}, {
131-
key: 'initialAvatar',
138+
key: "initialAvatar",
132139
value: function initialAvatar() {
133-
const canvas = document.createElement('canvas');
134-
const width = this.element.width || this.settings.size;
135-
const height = this.element.height || this.settings.size;
136-
const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
140+
var canvas = document.createElement('canvas');
141+
var width = this.element.width || this.settings.size;
142+
var height = this.element.height || this.settings.size;
143+
var devicePixelRatio = Math.max(window.devicePixelRatio, 1);
137144
canvas.width = width * devicePixelRatio;
138145
canvas.height = height * devicePixelRatio;
139-
canvas.style.width = ''.concat(width, 'px');
140-
canvas.style.height = ''.concat(height, 'px');
141-
const context = canvas.getContext('2d');
146+
canvas.style.width = "".concat(width, "px");
147+
canvas.style.height = "".concat(height, "px");
148+
var context = canvas.getContext('2d');
142149

143150
if (context) {
144151
context.scale(devicePixelRatio, devicePixelRatio);
145152
context.rect(0, 0, canvas.width, canvas.height);
146153
context.fillStyle = this.settings.initial_bg;
147154
context.fill();
148-
context.font = ''.concat(this.settings.initial_weight, ' ').concat(this.settings.initial_size || height / 2, 'px ').concat(this.settings.initial_font_family);
155+
context.font = "".concat(this.settings.initial_weight, " ").concat(this.settings.initial_size || height / 2, "px ").concat(this.settings.initial_font_family);
149156
context.textAlign = 'center';
150157
context.textBaseline = 'middle';
151158
context.fillStyle = this.settings.initial_fg;
152159
context.fillText(this.settings.initials, width / 2, height / 2);
153160
}
154161

155162
return canvas.toDataURL('image/png') || 'data:';
156-
},
163+
}
157164
}, {
158-
key: 'gravatarValid',
165+
key: "gravatarValid",
159166
value: function gravatarValid() {
160167
if (!(this.settings.email || this.settings.hash)) {
161168
return;
162169
}
163170

164-
let image_source;
171+
var image_source;
165172

166173
if (this.settings.email) {
167-
image_source = 'https://secure.gravatar.com/avatar/'.concat(md5(this.settings.email), '?d=404');
174+
image_source = "https://secure.gravatar.com/avatar/".concat(md5(this.settings.email), "?d=404");
168175
}
169176

170177
if (this.settings.hash) {
171-
image_source = 'https://secure.gravatar.com/avatar/'.concat(this.settings.hash, '?d=404');
178+
image_source = "https://secure.gravatar.com/avatar/".concat(this.settings.hash, "?d=404");
172179
}
173180

174-
const image = new Image();
181+
var image = new Image();
175182
image.onload = this.gravatarValidOnLoad.bind(this);
176183
image.onerror = this.gravatarValidOnError.bind(this);
177184
image.src = image_source;
178-
},
185+
}
179186
}, {
180-
key: 'gravatarValidOnLoad',
187+
key: "gravatarValidOnLoad",
181188
value: function gravatarValidOnLoad() {
182189
this.setSource(Avatar.gravatarUrl(this.settings));
183-
},
190+
}
184191
}, {
185-
key: 'gravatarValidOnError',
192+
key: "gravatarValidOnError",
186193
value: function gravatarValidOnError() {
187194
if (this.settings.initials.length > 0) {
188195
this.setSource(this.initialAvatar());
189196
return;
190197
}
191198

192199
this.setSource(this.settings.fallbackImage);
193-
},
200+
}
194201
}], [{
195-
key: 'gravatarUrl',
202+
key: "gravatarUrl",
196203
value: function gravatarUrl() {
197-
const settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
198-
const size = settings.size >= 1 && settings.size <= 2048 ? settings.size : 80;
199-
let email_or_hash = settings.hash || settings.email;
204+
var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
205+
var size = settings.size >= 1 && settings.size <= 2048 ? settings.size : 80;
206+
var email_or_hash = settings.hash || settings.email;
200207

201208
if (!email_or_hash || typeof email_or_hash !== 'string') {
202209
email_or_hash = '00000000000000000000000000000000';
203210
}
204211

205212
email_or_hash = email_or_hash.toLowerCase().trim();
206-
const hash = email_or_hash.match(/@/g) !== null ? md5(email_or_hash) : email_or_hash;
207-
const fallback = settings.fallback ? encodeURIComponent(settings.fallback) : 'mm';
208-
const rating = settings.rating || 'x';
209-
const forcedefault = settings.forcedefault ? '&f=y' : '';
210-
return 'https://secure.gravatar.com/avatar/'.concat(hash, '?s=').concat(size, '&d=').concat(fallback, '&r=').concat(rating)
211-
.concat(forcedefault);
212-
},
213+
var hash = email_or_hash.match(/@/g) !== null ? md5(email_or_hash) : email_or_hash;
214+
var fallback = settings.fallback ? encodeURIComponent(settings.fallback) : 'mm';
215+
var rating = settings.rating || 'x';
216+
var forcedefault = settings.forcedefault ? '&f=y' : '';
217+
return "https://secure.gravatar.com/avatar/".concat(hash, "?s=").concat(size, "&d=").concat(fallback, "&r=").concat(rating).concat(forcedefault);
218+
}
213219
}, {
214-
key: 'githubAvatar',
220+
key: "githubAvatar",
215221
value: function githubAvatar() {
216-
const settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
217-
const cdn_min = 0;
218-
const cdn_max = 3;
219-
const cdn = Math.floor(Math.random() * (cdn_max - (cdn_min + 1))) + cdn_min;
220-
return 'https://avatars'.concat(cdn, '.githubusercontent.com/u/').concat(settings.github_id || 0, '?v=3&s=').concat(settings.size || 80);
221-
},
222+
var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
223+
var cdn_min = 0;
224+
var cdn_max = 3;
225+
var cdn = Math.floor(Math.random() * (cdn_max - (cdn_min + 1))) + cdn_min;
226+
return "https://avatars".concat(cdn, ".githubusercontent.com/u/").concat(settings.github_id || 0, "?v=3&s=").concat(settings.size || 80);
227+
}
222228
}, {
223-
key: 'avatarsioAvatar',
229+
key: "avatarsioAvatar",
224230
value: function avatarsioAvatar() {
225-
const settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
226-
let avatars_io_url = 'https://avatars.io/';
231+
var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
232+
var avatars_io_url = 'https://avatars.io/';
227233

228234
if (!settings.avatars_io) {
229235
return avatars_io_url;
@@ -232,21 +238,21 @@ const Avatar =
232238

233239

234240
if (settings.avatars_io.user_id && settings.avatars_io.identifier) {
235-
avatars_io_url += ''.concat(settings.avatars_io.user_id, '/').concat(settings.avatars_io.identifier);
241+
avatars_io_url += "".concat(settings.avatars_io.user_id, "/").concat(settings.avatars_io.identifier);
236242
} else if (settings.avatars_io.twitter) {
237-
avatars_io_url += 'twitter/'.concat(settings.avatars_io.twitter);
243+
avatars_io_url += "twitter/".concat(settings.avatars_io.twitter);
238244
} else if (settings.avatars_io.facebook) {
239-
avatars_io_url += 'facebook/'.concat(settings.avatars_io.facebook);
245+
avatars_io_url += "facebook/".concat(settings.avatars_io.facebook);
240246
} else if (settings.avatars_io.instagram) {
241-
avatars_io_url += 'instagram/'.concat(settings.avatars_io.instagram);
247+
avatars_io_url += "instagram/".concat(settings.avatars_io.instagram);
242248
}
243249

244-
avatars_io_url += '?size='.concat(settings.avatars_io.size);
250+
avatars_io_url += "?size=".concat(settings.avatars_io.size);
245251
return avatars_io_url;
246-
},
252+
}
247253
}]);
248254

249255
return Avatar;
250-
}());
256+
}();
251257

252258
module.exports = Avatar;

‎src/avatar.browser.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ class Avatar {
3434
instagram: null,
3535
size: 'medium',
3636
},
37+
setSourceCallback: null,
3738
...options,
3839
};
3940

@@ -61,6 +62,9 @@ class Avatar {
6162
}
6263
if (source) {
6364
this.element.src = source;
65+
if (this.settings.setSourceCallback && typeof this.settings.setSourceCallback === 'function') {
66+
this.settings.setSourceCallback(source);
67+
}
6468
}
6569
}
6670

‎src/avatar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default class Avatar {
3333
instagram: null,
3434
size: 'medium',
3535
},
36+
setSourceCallback: null,
3637
...options,
3738
};
3839

@@ -60,6 +61,9 @@ export default class Avatar {
6061
}
6162
if (source) {
6263
this.element.src = source;
64+
if (this.settings.setSourceCallback && typeof this.settings.setSourceCallback === 'function') {
65+
this.settings.setSourceCallback(source);
66+
}
6367
}
6468
}
6569

‎test/avatar.test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ test('#constructor should be able to set the settings', (t) => {
9999
size: 120,
100100
fallback: 'mm',
101101
rating: 'pg',
102+
setSourceCallback: null,
102103
forcedefault: true,
103104
fallbackImage: 'nah',
104105
debug: false,

0 commit comments

Comments
 (0)