1
0

jquery.avatar.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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 5 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 already 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. * "?". 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. * 5. $('.avatardiv').avatar('jdoe', 128, undefined, true);
  38. * This will behave like the first example, but it will hide the avatardiv, if
  39. * it will display the default placeholder. undefined is the ie8fix from
  40. * example 4 and can be either true, or false/undefined, to be ignored.
  41. *
  42. * 6. $('.avatardiv').avatar('jdoe', 128, undefined, true, callback);
  43. * This will behave like the above example, but it will call the function
  44. * defined in callback after the avatar is placed into the DOM.
  45. *
  46. */
  47. (function ($) {
  48. $.fn.avatar = function(user, size, ie8fix, hidedefault, callback, displayname) {
  49. if (typeof(user) !== 'undefined') {
  50. user = String(user);
  51. }
  52. if (typeof(displayname) !== 'undefined') {
  53. displayname = String(displayname);
  54. }
  55. if (typeof(size) === 'undefined') {
  56. if (this.height() > 0) {
  57. size = this.height();
  58. } else if (this.data('size') > 0) {
  59. size = this.data('size');
  60. } else {
  61. size = 64;
  62. }
  63. }
  64. this.height(size);
  65. this.width(size);
  66. if (typeof(user) === 'undefined') {
  67. if (typeof(this.data('user')) !== 'undefined') {
  68. user = this.data('user');
  69. } else {
  70. this.imageplaceholder('?');
  71. return;
  72. }
  73. }
  74. // sanitize
  75. user = String(user).replace(/\//g,'');
  76. var $div = this;
  77. var url;
  78. // If this is our own avatar we have to use the version attribute
  79. if (user === OC.getCurrentUser().uid) {
  80. url = OC.generateUrl(
  81. '/avatar/{user}/{size}?v={version}',
  82. {
  83. user: user,
  84. size: Math.ceil(size * window.devicePixelRatio),
  85. version: oc_userconfig.avatar.version
  86. });
  87. } else {
  88. url = OC.generateUrl(
  89. '/avatar/{user}/{size}',
  90. {
  91. user: user,
  92. size: Math.ceil(size * window.devicePixelRatio)
  93. });
  94. }
  95. // If the displayname is not defined we use the old code path
  96. if (typeof(displayname) === 'undefined') {
  97. $.get(url).always(function(result, status) {
  98. // if there is an error or an object returned (contains user information):
  99. // -> show the fallback placeholder
  100. if (typeof(result) === 'object' || status === 'error') {
  101. if (!hidedefault) {
  102. if (result.data && result.data.displayname) {
  103. $div.imageplaceholder(user, result.data.displayname);
  104. } else {
  105. // User does not exist
  106. $div.imageplaceholder(user, '?');
  107. $div.css('background-color', '#b9b9b9');
  108. }
  109. } else {
  110. $div.hide();
  111. }
  112. // else an image is transferred and should be shown
  113. } else {
  114. $div.show();
  115. if (ie8fix === true) {
  116. $div.html('<img width="' + size + '" height="' + size + '" src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
  117. } else {
  118. $div.html('<img width="' + size + '" height="' + size + '" src="'+url+'">');
  119. }
  120. }
  121. if(typeof callback === 'function') {
  122. callback();
  123. }
  124. });
  125. } else {
  126. // We already have the displayname so set the placeholder (to show at least something)
  127. if (!hidedefault) {
  128. $div.imageplaceholder(displayname);
  129. }
  130. var img = new Image();
  131. // If the new image loads successfully set it.
  132. img.onload = function() {
  133. $div.show();
  134. $div.text('');
  135. $div.append(img);
  136. };
  137. img.width = size;
  138. img.height = size;
  139. img.src = url;
  140. }
  141. };
  142. }(jQuery));