nextcloud/core/js/jquery.avatar.js

88 lines
2.7 KiB
JavaScript
Raw Normal View History

2013-08-29 16:26:11 +04:00
/**
* Copyright (c) 2013 Christopher Schäpers <christopher@schaepers.it>
* This file is licensed under the Affero General Public License version 3 or
* later.
* See the COPYING-README file.
*/
/**
* This plugin inserts the right avatar for the user, depending on, whether a
* custom avatar is uploaded - which it uses then - or not, and display a
* placeholder with the first letter of the users name instead.
* For this it queries the core_avatar_get route, thus this plugin is fit very
* tightly for owncloud, and it may not work anywhere else.
*
* You may use this on any <div></div>
* Here I'm using <div class="avatardiv"></div> as an example.
*
2013-09-03 20:34:40 +04:00
* There are 4 ways to call this:
*
* 1. $('.avatardiv').avatar('jdoe', 128);
* This will make the div to jdoe's fitting avatar, with a size of 128px.
*
* 2. $('.avatardiv').avatar('jdoe');
* This will make the div to jdoe's fitting avatar. If the div aready has a
* height, it will be used for the avatars size. Otherwise this plugin will
* search for 'size' DOM data, to use for avatar size. If neither are available
* it will default to 64px.
*
* 3. $('.avatardiv').avatar();
* This will search the DOM for 'user' data, to use as the username. If there
* is no username available it will default to a placeholder with the value of
* "x". The size will be determined the same way, as the second example.
2013-09-03 20:34:40 +04:00
*
* 4. $('.avatardiv').avatar('jdoe', 128, true);
* This will behave like the first example, except it will also append random
* hashes to the custom avatar images, to force image reloading in IE8.
*/
2013-08-29 16:26:11 +04:00
(function ($) {
2013-09-03 20:34:40 +04:00
$.fn.avatar = function(user, size, ie8fix) {
if (typeof(size) === 'undefined') {
if (this.height() > 0) {
size = this.height();
} else if (this.data('size') > 0) {
size = this.data('size');
} else {
size = 64;
}
2013-08-29 16:26:11 +04:00
}
this.height(size);
this.width(size);
2013-08-29 16:26:11 +04:00
if (typeof(user) === 'undefined') {
if (typeof(this.data('user')) !== 'undefined') {
user = this.data('user');
} else {
this.placeholder('x');
return;
}
2013-08-29 16:26:11 +04:00
}
// sanitize
user = user.replace(/\//g,'');
2013-08-29 16:26:11 +04:00
var $div = this;
OC.Router.registerLoadedCallback(function() {
2013-09-05 02:04:31 +04:00
var url = OC.Router.generate('core_avatar_get', {user: user, size: size})+'?requesttoken='+oc_requesttoken;
$.get(url, function(result) {
if (typeof(result) === 'object') {
if (result.data && result.data.displayname) {
$div.placeholder(user, result.data.displayname);
} else {
$div.placeholder(user);
}
} else {
2013-09-03 20:34:40 +04:00
if (ie8fix === true) {
$div.html('<img src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
} else {
$div.html('<img src="'+url+'">');
}
}
});
2013-08-29 16:26:11 +04:00
});
2013-08-31 21:05:53 +04:00
};
2013-08-29 16:26:11 +04:00
}(jQuery));