picMF

show MetaFilter profile pictures next to names in posts and comments

  1. // picMF.user.js
  2. //
  3. // Written by: Michael Devore
  4. // Released to the public domain
  5. //
  6. // This is a Greasemonkey script.
  7. // See http://www.greasespot.net/ for more information on Greasemonkey.
  8. //
  9. // ==UserScript==
  10. // @name picMF
  11. // @namespace http://www.devoresoftware.com/gm/picMF
  12. // @description show MetaFilter profile pictures next to names in posts and comments
  13. // @match https://*.metafilter.com/*
  14. // @match http://*.metafilter.com/*
  15. // @grant GM_xmlhttpRequest
  16. // @run-at document-end
  17. // @version 2.0
  18. // ==/UserScript==
  19. //
  20.  
  21. "use strict";
  22.  
  23. var theWidth = "64px";
  24. var theHeight = "64px";
  25. var zoomWidth = "256px";
  26. var zoomHeight = "256px";
  27. var secondsToLoad = 1.4;
  28. var serverPrefix = "//s3-us-west-2.amazonaws.com/mefi.profile/";
  29. var noPicLink = "data:image/png;base64,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";
  30.  
  31. function onLoaded()
  32. {
  33. // var xpath = "//DIV/SPAN[starts-with(text(),'posted by') and (@class='smallcopy' or @class='smallcopy postbyline' or @class='smallcopy byline')]";
  34. var xpath = "//DIV/SPAN[starts-with(text(),'posted by') and contains(@class, 'smallcopy')]";
  35. var postNodes = document.evaluate(
  36. xpath,
  37. document,
  38. null,
  39. XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  40. null
  41. );
  42. var total = postNodes.snapshotLength;
  43. for (var i = 0; i < total; i++)
  44. {
  45. // not much validation here, cuts performance overhead by avoiding extra tests against the nodes
  46. // tighten it down later if it conflicts with other add-ons or Metafilter bling
  47. var userSpan = postNodes.snapshotItem(i);
  48. var currentNode = userSpan.firstChild;
  49. var found = false;
  50. var userLink;
  51. var linkNode;
  52. while (currentNode && !found)
  53. {
  54. if (currentNode.nodeName === "A")
  55. {
  56. var href_value = currentNode.getAttribute('href');
  57. var result = href_value.match(/\/user\/(\d+)/);
  58. if (result && result[1])
  59. {
  60. var userNumber = result[1];
  61. var serverLink = serverPrefix+userNumber+".jpg";
  62. var img = document.createElement("img");
  63. img.setAttribute("src", serverLink);
  64. setTimeout(function(x, y)
  65. {
  66. return function()
  67. {
  68. if (x.height <= 0)
  69. {
  70. x.setAttribute("src", noPicLink);
  71. }
  72.  
  73. x.setAttribute("height", theHeight);
  74. x.setAttribute("width", theWidth);
  75. // y.insertBefore(document.createTextNode(" "), y.firstChild);
  76. // y.insertBefore(x, y.firstChild);
  77. y.parentNode.insertBefore(document.createTextNode(" "), y.parentNode.firstChild);
  78. y.parentNode.insertBefore(x, y.parentNode.firstChild);
  79. x.addEventListener('mouseover', picHover, false);
  80. x.addEventListener('mouseout', picRestore, false);
  81. };
  82. }(img, currentNode), secondsToLoad * 1000);
  83. break;
  84. }
  85. }
  86. currentNode = currentNode.nextSibling;
  87. }
  88. }
  89. }
  90.  
  91. function picHover(evt)
  92. {
  93. var picNode = evt['target'];
  94. picNode.setAttribute("height", zoomHeight);
  95. picNode.setAttribute("width", zoomWidth);
  96. }
  97.  
  98. function picRestore(evt)
  99. {
  100. var picNode = evt['target'];
  101. picNode.setAttribute("height", theHeight);
  102. picNode.setAttribute("width", theWidth);
  103. }
  104.  
  105. document.addEventListener('DOMContentLoaded',onLoaded,true);