aboutsummaryrefslogtreecommitdiffstats
path: root/core/js
diff options
context:
space:
mode:
Diffstat (limited to 'core/js')
-rw-r--r--core/js/jquery.avatar.js77
-rw-r--r--core/js/placeholder.js5
-rw-r--r--core/js/tests/specs/jquery.avatarSpec.js137
3 files changed, 94 insertions, 125 deletions
diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js
index 54518c75cc7..958f0f9edd7 100644
--- a/core/js/jquery.avatar.js
+++ b/core/js/jquery.avatar.js
@@ -106,54 +106,39 @@
});
}
- // If the displayname is not defined we use the old code path
- if (typeof(displayname) === 'undefined') {
- $.get(url).always(function(result, status) {
- // if there is an error or an object returned (contains user information):
- // -> show the fallback placeholder
- if (typeof(result) === 'object' || status === 'error') {
- if (!hidedefault) {
- if (result.data && result.data.displayname) {
- $div.imageplaceholder(user, result.data.displayname);
- } else {
- // User does not exist
- setAvatarForUnknownUser($div);
- }
- } else {
- $div.hide();
- }
- // else an image is transferred and should be shown
- } else {
- $div.show();
- if (ie8fix === true) {
- $div.html('<img width="' + size + '" height="' + size + '" src="'+url+'#'+Math.floor(Math.random()*1000)+'" alt="">');
- } else {
- $div.html('<img width="' + size + '" height="' + size + '" src="'+url+'" alt="">');
- }
- }
- if(typeof callback === 'function') {
- callback();
- }
- });
- } else {
- // We already have the displayname so set the placeholder (to show at least something)
- if (!hidedefault) {
- $div.imageplaceholder(displayname);
- }
+ var img = new Image();
+
+ // If the new image loads successfully set it.
+ img.onload = function() {
+ $div.text('');
+ $div.append(img);
+ $div.clearimageplaceholder();
- var img = new Image();
+ if(typeof callback === 'function') {
+ callback();
+ }
+ };
+ // Fallback when avatar loading fails:
+ // Use old placeholder when a displayname attribute is defined,
+ // otherwise show the unknown user placeholder.
+ img.onerror = function () {
+ $div.clearimageplaceholder();
+ if (typeof(displayname) !== 'undefined') {
+ $div.imageplaceholder(user, displayname);
+ } else {
+ setAvatarForUnknownUser($div);
+ $div.removeClass('icon-loading');
+ }
- // If the new image loads successfully set it.
- img.onload = function() {
- $div.show();
- $div.text('');
- $div.append(img);
- $div.clearimageplaceholder();
- };
+ if(typeof callback === 'function') {
+ callback();
+ }
+ };
- img.width = size;
- img.height = size;
- img.src = url;
- }
+ $div.addClass('icon-loading');
+ $div.show();
+ img.width = size;
+ img.height = size;
+ img.src = url;
};
}(jQuery));
diff --git a/core/js/placeholder.js b/core/js/placeholder.js
index f173e738676..5cf7b9095ad 100644
--- a/core/js/placeholder.js
+++ b/core/js/placeholder.js
@@ -2,7 +2,7 @@
* ownCloud
*
* @author John Molakvoæ
- * @copyright 2016 John Molakvoæ <fremulon@protonmail.com>
+ * @copyright 2016-2017 John Molakvoæ <skjnldsv@protonmail.com>
* @author Morris Jobke
* @copyright 2013 Morris Jobke <morris.jobke@gmail.com>
*
@@ -47,7 +47,7 @@
* <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">A</div>
*
*/
-
+
/*
* Alternatively, you can use the prototype function to convert your string to hsl colors:
*
@@ -156,5 +156,6 @@
this.css('text-align', '');
this.css('line-height', '');
this.css('font-size', '');
+ this.removeClass('icon-loading');
};
}(jQuery));
diff --git a/core/js/tests/specs/jquery.avatarSpec.js b/core/js/tests/specs/jquery.avatarSpec.js
index b9351d2a8a0..bdd1fdcc163 100644
--- a/core/js/tests/specs/jquery.avatarSpec.js
+++ b/core/js/tests/specs/jquery.avatarSpec.js
@@ -19,6 +19,13 @@ describe('jquery.avatar tests', function() {
devicePixelRatio = window.devicePixelRatio;
window.devicePixelRatio = 1;
+
+ spyOn(window, 'Image').and.returnValue({
+ onload: function() {
+ },
+ onerror: function() {
+ }
+ });
});
afterEach(function() {
@@ -39,6 +46,9 @@ describe('jquery.avatar tests', function() {
$div.height(9);
$div.avatar('foo');
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onerror();
+
expect($div.height()).toEqual(9);
expect($div.width()).toEqual(9);
});
@@ -47,6 +57,9 @@ describe('jquery.avatar tests', function() {
$div.data('size', 10);
$div.avatar('foo');
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onerror();
+
expect($div.height()).toEqual(10);
expect($div.width()).toEqual(10);
});
@@ -55,6 +68,9 @@ describe('jquery.avatar tests', function() {
it('defined', function() {
$div.avatar('foo', 8);
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onerror();
+
expect($div.height()).toEqual(8);
expect($div.width()).toEqual(8);
});
@@ -73,16 +89,10 @@ describe('jquery.avatar tests', function() {
describe('no avatar', function() {
it('show placeholder for existing user', function() {
spyOn($div, 'imageplaceholder');
- $div.avatar('foo');
-
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'application/json' },
- JSON.stringify({
- data: {displayname: 'bar'}
- })
- );
+ $div.avatar('foo', undefined, undefined, undefined, undefined, 'bar');
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onerror();
expect($div.imageplaceholder).toHaveBeenCalledWith('foo', 'bar');
});
@@ -91,32 +101,23 @@ describe('jquery.avatar tests', function() {
spyOn($div, 'css');
$div.avatar('foo');
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'application/json' },
- JSON.stringify({
- data: {}
- })
- );
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onerror();
expect($div.imageplaceholder).toHaveBeenCalledWith('?');
expect($div.css).toHaveBeenCalledWith('background-color', '#b9b9b9');
});
- it('show no placeholder', function() {
+ it('show no placeholder is ignored', function() {
spyOn($div, 'imageplaceholder');
+ spyOn($div, 'css');
$div.avatar('foo', undefined, undefined, true);
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'application/json' },
- JSON.stringify({
- data: {}
- })
- );
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onerror();
- expect($div.imageplaceholder.calls.any()).toEqual(false);
- expect($div.css('display')).toEqual('none');
+ expect($div.imageplaceholder).toHaveBeenCalledWith('?');
+ expect($div.css).toHaveBeenCalledWith('background-color', '#b9b9b9');
});
});
@@ -129,24 +130,24 @@ describe('jquery.avatar tests', function() {
window.devicePixelRatio = 1;
$div.avatar('foo', 32);
- expect(fakeServer.requests[0].method).toEqual('GET');
- expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/avatar/foo/32');
+ expect(window.Image).toHaveBeenCalled();
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/32');
});
it('high DPI icon', function() {
window.devicePixelRatio = 4;
$div.avatar('foo', 32);
- expect(fakeServer.requests[0].method).toEqual('GET');
- expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/avatar/foo/128');
+ expect(window.Image).toHaveBeenCalled();
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/128');
});
it('high DPI icon round up size', function() {
window.devicePixelRatio = 1.9;
$div.avatar('foo', 32);
- expect(fakeServer.requests[0].method).toEqual('GET');
- expect(fakeServer.requests[0].url).toEqual('http://localhost/index.php/avatar/foo/61');
+ expect(window.Image).toHaveBeenCalled();
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/61');
});
});
@@ -158,17 +159,12 @@ describe('jquery.avatar tests', function() {
it('default (no ie8 fix)', function() {
$div.avatar('foo', 32);
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'image/jpeg' },
- ''
- );
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onload();
- var img = $div.children('img')[0];
-
- expect(img.height).toEqual(32);
- expect(img.width).toEqual(32);
- expect(img.src).toEqual('http://localhost/index.php/avatar/foo/32');
+ expect(window.Image().height).toEqual(32);
+ expect(window.Image().width).toEqual(32);
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/32');
});
it('default high DPI icon', function() {
@@ -176,37 +172,23 @@ describe('jquery.avatar tests', function() {
$div.avatar('foo', 32);
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'image/jpeg' },
- ''
- );
-
- var img = $div.children('img')[0];
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onload();
- expect(img.height).toEqual(32);
- expect(img.width).toEqual(32);
- expect(img.src).toEqual('http://localhost/index.php/avatar/foo/61');
+ expect(window.Image().height).toEqual(32);
+ expect(window.Image().width).toEqual(32);
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/61');
});
- it('with ie8 fix', function() {
- sinon.stub(Math, 'random').callsFake(function() {
- return 0.5;
- });
-
+ it('with ie8 fix (ignored)', function() {
$div.avatar('foo', 32, true);
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'image/jpeg' },
- ''
- );
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onload();
- var img = $div.children('img')[0];
-
- expect(img.height).toEqual(32);
- expect(img.width).toEqual(32);
- expect(img.src).toEqual('http://localhost/index.php/avatar/foo/32#500');
+ expect(window.Image().height).toEqual(32);
+ expect(window.Image().width).toEqual(32);
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/32');
});
it('unhide div', function() {
@@ -214,11 +196,12 @@ describe('jquery.avatar tests', function() {
$div.avatar('foo', 32);
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'image/jpeg' },
- ''
- );
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onload();
+
+ expect(window.Image().height).toEqual(32);
+ expect(window.Image().width).toEqual(32);
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/32');
expect($div.css('display')).toEqual('block');
});
@@ -232,12 +215,12 @@ describe('jquery.avatar tests', function() {
observer.callback();
});
- fakeServer.requests[0].respond(
- 200,
- { 'Content-Type': 'image/jpeg' },
- ''
- );
+ expect(window.Image).toHaveBeenCalled();
+ window.Image().onload();
+ expect(window.Image().height).toEqual(32);
+ expect(window.Image().width).toEqual(32);
+ expect(window.Image().src).toEqual('http://localhost/index.php/avatar/foo/32');
expect(observer.callback).toHaveBeenCalled();
});
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-24 01:32:16 +0000