jquery.incarnate,js


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /// <reference path="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js"/>
  2.  
  3. window._emailRegex = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/i;
  4. var currentSearch = false;
  5. function clearSearchFlag() {
  6. currentSearch = false;
  7. }
  8.  
  9. $(function() {
  10. //set the incarnate service URL
  11. var IncarnateServiceURL = "http://incarnate.visitmix.com/incarnate.svc/";
  12.  
  13. //list the services you want to use for incarnation
  14. //note that you can get the list of services supported by the instance of the incarnate service
  15. //you are using by calling incarnate.svc/providers (json) or incarnate.svc/providers.xml
  16. var providers = ["Twitter", "MySpace", "Facebook", "Gravatar", "YouTube", "XBoxLive"];
  17.  
  18. var avatars = [];
  19. //index is state variable for paging
  20. var index = 0;
  21. //global variable for the username to be incarnated
  22. var searchTerm;
  23. //for jQuery fades
  24. var fadeDuration = 300;
  25. //listen for focus on the button
  26. $("#IncarnateButton").focus(function() {
  27.  
  28. if (currentSearch == true) return;
  29. setTimeout("clearSearchFlag();", 1000);
  30. currentSearch = true;
  31. $("#IncarnateLoader").show();
  32. Incarnate();
  33. });
  34. //listen for click
  35. $("#IncarnateButton").click(function() {
  36. //focus event fights w/ button click so we need semaphore
  37. if (currentSearch == true) return;
  38. setTimeout("clearSearchFlag();", 1000);
  39. currentSearch = true;
  40. $("#IncarnateLoader").show();
  41. Incarnate();
  42. });
  43. //if enter was hit, do the call
  44. $("#IncarnateUserName").keyup(function(event) {
  45. if (event.keyCode == 13) {
  46. if (currentSearch == true) return;
  47. setTimeout("clearSearchFlag();", 1000);
  48. currentSearch = true;
  49. $("#IncarnateLoader").show();
  50. Incarnate();
  51. }
  52. });
  53. // //Doesn't work on all browsers, which is why we have the close button
  54. $("body").focus(function() {
  55. $("#IncarnateResultsContainer").fadeOut(fadeDuration);
  56.  
  57. });
  58.  
  59. function Incarnate() {
  60.  
  61. //clear out all state
  62. index = 0;
  63. avatars = [];
  64.  
  65. //don't search for empty string
  66. if ($("#IncarnateUserName").val() == "") {
  67. $("#IncarnateResultsContainer").fadeOut(fadeDuration);
  68. return;
  69. }
  70. //hold term in variable
  71. searchTerm = $("#IncarnateUserName").val()
  72.  
  73. //if they gave us an email, do gravatar
  74. if (window._emailRegex.test(searchTerm)) {
  75. //do gravatar
  76. $.getJSON(IncarnateServiceURL + "GetHash?email=" + searchTerm + "&callback=?",
  77. function(data) {
  78. //populate img tag
  79. $("#IncarnateImg").attr("src", "http://gravatar.com/avatar.php?gravatar_id=" + data + "&d=http%3A%2F%2Fwww.visitmix.com%2FContent%2Fimg%2Fdefault_gravatar.gif");
  80. //populate hidden field for form submit
  81. $("#IncarnateImgSrc").attr("value", "http://gravatar.com/avatar.php?gravatar_id=" + data + "&d=http%3A%2F%2Fwww.visitmix.com%2FContent%2Fimg%2Fdefault_gravatar.gif");
  82. $("#IncarnateLoader").hide();
  83.  
  84. });
  85. return;
  86. }
  87. if (searchTerm.indexOf("@") > 0) {
  88. $("#IncarnateResultsContainer").hide();
  89.  
  90. return;
  91. }
  92. //clear out the container
  93. $("#IncarnateResultsContainer").empty();
  94. //add the cancel UI for the container
  95. var cancelDiv = $('<div style="height:16px;margin:2px 2px 0 0;"><img style="margin-left:8px;" src="http://incarnate.blob.core.windows.net/images/lockup_small.png"/><span style="float:right;cursor:pointer; "><img src="http://incarnate.visitmix.com/images/close.png"/></span></div>');
  96. cancelDiv.click(function() {
  97. $("#IncarnateResultsContainer").hide();
  98.  
  99. });
  100. $("#IncarnateResultsContainer").append(cancelDiv);
  101.  
  102. //use incarnate service
  103. $(providers).each(function(name, value) {
  104.  
  105. $.getJSON(IncarnateServiceURL + value + "/" + searchTerm + "?callback=?",
  106. function(data) {
  107. if (data != null) {
  108. if (searchTerm == $("#IncarnateUserName").val()) {
  109. $("#IncarnateResultsContainer").fadeIn(fadeDuration);
  110. $("#IncarnateLoader").hide();
  111.  
  112. var vCardDiv = $('<div class="IncarnateResult" style="clear:both;display:none;min-height:48px"></div>');
  113. vCardDiv.append('<img style="float:left;border:1px solid #333;margin:10px;" width="48" src="' + data + '" />');
  114. vCardDiv.append('<img style="margin-top:10px;float:left;border:none;" src="http://incarnate.blob.core.windows.net/images/' + value + '.png"/>');
  115. vCardDiv.click(function() {
  116. //clear all values
  117.  
  118. $("#IncarnateImgSrc").attr("value", data);
  119. $("#IncarnateImg").attr("src", data);
  120.  
  121.  
  122. $("#IncarnateResultsContainer").fadeOut(fadeDuration);
  123.  
  124. });
  125.  
  126.  
  127. vCardDiv.hover(function() {
  128. vCardDiv.css({ 'clear': 'both', 'background-color': '#99ccff', 'overflow':'hidden' });
  129. },
  130. function() {
  131. vCardDiv.css({ 'clear': 'both', 'background-color': 'transparent' });
  132.  
  133. }
  134.  
  135. );
  136.  
  137.  
  138.  
  139.  
  140. $("#IncarnateResultsContainer").append(vCardDiv);
  141. vCardDiv.fadeIn(fadeDuration);
  142.  
  143. }
  144. }
  145.  
  146. });
  147. });
  148.  
  149. }
  150. });

URL: http://incarnate.visitmix.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.