jquery.avatar.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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 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. * 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. (function ($) {
  43. $.fn.avatar = function(user, size, ie8fix, hidedefault) {
  44. if (typeof(size) === 'undefined') {
  45. if (this.height() > 0) {
  46. size = this.height();
  47. } else if (this.data('size') > 0) {
  48. size = this.data('size');
  49. } else {
  50. size = 64;
  51. }
  52. }
  53. this.height(size);
  54. this.width(size);
  55. if (typeof(user) === 'undefined') {
  56. if (typeof(this.data('user')) !== 'undefined') {
  57. user = this.data('user');
  58. } else {
  59. this.imageplaceholder('x');
  60. return;
  61. }
  62. }
  63. // sanitize
  64. user = String(user).replace(/\//g,'');
  65. var $div = this;
  66. OC.Router.registerLoadedCallback(function() {
  67. var url = OC.Router.generate('core_avatar_get', {user: user, size: size})+'?requesttoken='+oc_requesttoken;
  68. $.get(url, function(result) {
  69. if (typeof(result) === 'object') {
  70. if (!hidedefault) {
  71. if (result.data && result.data.displayname) {
  72. $div.imageplaceholder(user, result.data.displayname);
  73. } else {
  74. $div.imageplaceholder(user);
  75. }
  76. } else {
  77. $div.hide();
  78. }
  79. } else {
  80. $div.show();
  81. if (ie8fix === true) {
  82. $div.html('<img src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
  83. } else {
  84. $div.html('<img src="'+url+'">');
  85. }
  86. }
  87. });
  88. });
  89. };
  90. }(jQuery));