jquery.avatar.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /**
  2. * Copyright (c) 2013 Christopher Schäpers <christopher@schaepers.it>
  3. * This file is licensed under the Affero General Public License version 3 or
  4. * later.
  5. * See the COPYING-README file.
  6. */
  7. /**
  8. * This plugin inserts the right avatar for the user, depending on, whether a
  9. * custom avatar is uploaded - which it uses then - or not, and display a
  10. * placeholder with the first letter of the users name instead.
  11. * For this it queries the core_avatar_get route, thus this plugin is fit very
  12. * tightly for owncloud, and it may not work anywhere else.
  13. *
  14. * You may use this on any <div></div>
  15. * Here I'm using <div class="avatardiv"></div> as an example.
  16. *
  17. * There are 4 ways to call this:
  18. *
  19. * 1. $('.avatardiv').avatar('jdoe', 128);
  20. * This will make the div to jdoe's fitting avatar, with a size of 128px.
  21. *
  22. * 2. $('.avatardiv').avatar('jdoe');
  23. * This will make the div to jdoe's fitting avatar. If the div aready has a
  24. * height, it will be used for the avatars size. Otherwise this plugin will
  25. * search for 'size' DOM data, to use for avatar size. If neither are available
  26. * it will default to 64px.
  27. *
  28. * 3. $('.avatardiv').avatar();
  29. * This will search the DOM for 'user' data, to use as the username. If there
  30. * is no username available it will default to a placeholder with the value of
  31. * "x". The size will be determined the same way, as the second example.
  32. *
  33. * 4. $('.avatardiv').avatar('jdoe', 128, true);
  34. * This will behave like the first example, except it will also append random
  35. * hashes to the custom avatar images, to force image reloading in IE8.
  36. */
  37. (function ($) {
  38. $.fn.avatar = function(user, size, ie8fix) {
  39. if (typeof(size) === 'undefined') {
  40. if (this.height() > 0) {
  41. size = this.height();
  42. } else if (this.data('size') > 0) {
  43. size = this.data('size');
  44. } else {
  45. size = 64;
  46. }
  47. }
  48. this.height(size);
  49. this.width(size);
  50. if (typeof(user) === 'undefined') {
  51. if (typeof(this.data('user')) !== 'undefined') {
  52. user = this.data('user');
  53. } else {
  54. this.placeholder('x');
  55. return;
  56. }
  57. }
  58. // sanitize
  59. user = user.replace(/\//g,'');
  60. var $div = this;
  61. OC.Router.registerLoadedCallback(function() {
  62. var url = OC.Router.generate('core_avatar_get', {user: user, size: size})+'?requesttoken='+oc_requesttoken;
  63. $.get(url, function(result) {
  64. if (typeof(result) === 'object') {
  65. if (result.data && result.data.displayname) {
  66. $div.placeholder(user, result.data.displayname);
  67. } else {
  68. $div.placeholder(user);
  69. }
  70. } else {
  71. if (ie8fix === true) {
  72. $div.html('<img src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
  73. } else {
  74. $div.html('<img src="'+url+'">');
  75. }
  76. }
  77. });
  78. });
  79. };
  80. }(jQuery));