daily pastebin goal
17%
SHARE
TWEET

blogger threaded comments v2

mspotilas Jan 18th, 2012 630 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
  2. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  3. <style type='text/css'>
  4. .admin-comment {
  5. background: #F4F4F4;
  6. margin: 4px 4px 4px 0;
  7. padding: 3px 3px 0 3px;
  8. border: 1px solid #EDEDED;
  9. }
  10. .admin-comment:hover {
  11. background: #EDEDFF;
  12. border: 1px solid #D0D0FF;
  13. }
  14. .normal-comment {
  15. padding: 3px 3px 0 3px;
  16. margin-right: 4px;
  17. border: 1px solid white;
  18. }
  19. .normal-comment:hover {
  20. background: #F8F8FF;
  21. border: 1px solid #EDEDFF;
  22. padding: 3px 3px 0 3px;
  23. }
  24. .comment-reply-link { font-weight:bold !important; margin-right:1em; }
  25. #comments-block .comment-footer { margin-bottom: 2px; margin-top:0px;}
  26. </style>
  27. <script type='text/javascript'>
  28. //<![CDATA[
  29. // Threaded comments for Blogger v2
  30. // by MS-potilas 2012
  31. // Supports "Blogger threading" (feed) and has easy install.
  32. // See http://yabtb.blogspot.com/2012/01/blogger-threaded-commenting-hack-v2.html
  33. //
  34. // config:
  35. var maxThreadingLevels = 999;      // limit to 2 to get Blogger-like threading; 3-4 is good, too
  36. var useBloggerThreading = true;    // read Blogger threading information from feed
  37. var preferBloggerThreading = true; // prefer Blogger threading over @nick threading
  38. var threadIndent = 43;             // pixels/level
  39. var replyCommentText = "Reply";
  40. var replyToUser = "Reply to ";
  41. var deleteCommentText = "";        // leave empty to use default (img)
  42. var useAdminPic = true;            // use same img as Blogger threaded comments
  43. // config end
  44. // two xpand/collapse hack functions
  45. function getCmtBodyElm(elm) {
  46.   if(elm.className=="admin-comment" || elm.className=="normal-comment") elm=elm.firstChild;
  47.   while(elm && (elm.nodeType != 1 || (elm.className != "comment-body" && elm.className != "comment-body-author"))) elm = elm.nextSibling;
  48.   return elm;
  49. }
  50. function tglCmt(event, elm) {
  51.   var txt='';
  52.   if(window.getSelection) txt = window.getSelection();
  53.   else if (document.getSelection) txt = document.getSelection();
  54.   else if (document.selection) txt = document.selection.createRange().text;
  55.   var target = event.target ? event.target : event.srcElement;
  56.   if(target.nodeType != 1) target=target.parentNode;
  57.   if(txt != '' || target.nodeName.toLowerCase() == 'a' || target.nodeName.toLowerCase() == 'img') return;
  58.   $(getCmtBodyElm(elm)).slideToggle();
  59. }
  60. var hlInstalled;
  61. if(!($(".normal-comment").length+$(".admin-comment").length)) hlInstalled=false;
  62. else hlInstalled=true;
  63. var cmtblock = $("#comments-block");
  64. var cmts = $("dt", cmtblock);
  65. var hrefr = $('.comment-footer a[href*="/comment.g"]:last').attr("href");
  66. if(!hrefr || hrefr=="") {
  67.   hrefr = "";
  68.   if($('.blogger-comment-from-post').length)
  69.     hrefr=$('#comment-editor').attr("src").match("^.*postID=[^&]+")[0].replace("comment-iframe.g", "comment.g");
  70. }
  71. var onclk = $('.comment-footer a[href*="/comment.g"]:last').attr("onclick");
  72. if(!onclk) onclk = "";
  73. cmts.each(function() {
  74.   var c0=$(this);
  75.   var c1=c0.next();
  76.   var c2=c1.next();
  77.   var cid=c0.attr("id");
  78.   var author = $(".avatar-image-container img",c0).attr("title");
  79.   var cdelete = $(".comment-delete", c2);
  80.   if(deleteCommentText != "") cdelete.html(deleteCommentText);
  81.   var cdeletep = cdelete.parent();
  82.   cdeletep.detach();
  83.   var ctime = c2.children(":first");
  84.   ctime.detach();
  85.   c0.append(ctime);
  86.   var creply = $(".comment-reply-link", c0);
  87.   // add reply to comment hack if needed
  88.   if(!creply.length) {
  89.     if(hrefr != "" && author != "") {
  90.       var onc='"'+onclk+'"';
  91.       if(onclk.search('"') > -1) onc="'"+onclk+"'";
  92.       var href = hrefr+"&postBody=%40%3Ca%20href%3D%22%23" + cid + "%22%3E" + author + "%3C%2Fa%3E%26%2332%3B#form";
  93.       creply = $('<a href="'+href+'" onclick='+onc+' class="comment-reply-link" title="'+replyToUser+author+'">'+replyCommentText+'</a>');
  94.     }
  95.   }
  96.   else {
  97.     creply.detach();
  98.     creply.css("float", "");
  99.     creply.html(replyCommentText);
  100.   }
  101.   c2.append(creply);
  102.   c2.append(cdeletep);
  103.   var txtNode = c0.children()[0];
  104.   while(txtNode && (txtNode.nodeType != 3 || (txtNode.nodeType == 3 &&  txtNode.nodeValue.search("...")==-1))) txtNode=txtNode.nextSibling;
  105.   if(txtNode) {
  106.     var txtWrote = " " + txtNode.nodeValue.replace(/\s*\.\.\.\s*$/, "") + " ";
  107.     txtNode.nodeValue = txtWrote;
  108.   }
  109.   if(c0.hasClass("blog-author") && useAdminPic) {
  110.     var txtAuthor = c0.children('a[href*="profile"]:first').html();
  111.     c0.children('.avatar-image-container + a').after(' <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9B' + 'RUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0U' + 'pKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==" title="' + txtAuthor + '" style="margin:-3px 2px -5px" /> ');
  112.   }
  113.   // Add "highlight comments hack" if needed:
  114.   if(!hlInstalled) {
  115.     cmtblock.append('<div id="x'+cid+'" />');
  116.     c0.detach();
  117.     c1.detach();
  118.     c2.detach();
  119.     var newdiv = $("#comments-block div:last");
  120.     newdiv.append(c0);
  121.     newdiv.append(c1);
  122.     newdiv.append(c2);
  123.     if(c0.hasClass("blog-author")) newdiv.addClass("admin-comment");
  124.       else newdiv.addClass("normal-comment");
  125.     newdiv.click(function(event) { tglCmt(event, this); } ); // xpand/collapse hack
  126.   }
  127. });
  128. // and finally the function to thread comments, pretty much the same as 2011 version:
  129. function threadComments(json) {
  130.   var replyToCommentID = [];
  131.   if(useBloggerThreading && json)
  132.     for(var i=0 ; i < json.feed.entry.length ; i++) {
  133.       var entry = json.feed.entry[i];
  134.       var rela = "";
  135.       var self = "";
  136.       for (var k=0; k<entry.link.length; k++) {
  137.         if (entry.link[k].rel == 'related') rela = entry.link[k].href.split("/comments/default/")[1];
  138.         if (entry.link[k].rel == 'self') self = entry.link[k].href.split("/comments/default/")[1];
  139.       }
  140.       if(rela!="" && self!="") replyToCommentID[self] = rela;
  141.     }
  142.   else
  143.     preferBloggerThreading = false;
  144.   var clss = [];
  145.   var elements = document.getElementsByTagName("*");
  146.   for(var i=0 ; i<elements.length ; i++)
  147.     if(elements[i].className=="normal-comment" || elements[i].className=="admin-comment")
  148.       clss.push(elements[i]);
  149.   var prevAuthor = "";
  150.   var prevNode = null;
  151.   var authornodes = {};
  152.   for(var x=0 ; x < clss.length; x++ ) {
  153.     var moved = false;
  154.     var width = clss[x].scrollWidth;
  155.     clss[x].style.position = "relative";
  156.     clss[x].style.left = "0px";
  157.     var thisID = clss[x].id.split("c")[1];
  158.     var author = clss[x].innerHTML.toLowerCase().indexOf("%22%3e");
  159.     author = clss[x].innerHTML.substr(author+6);
  160.     if(author.toLowerCase().indexOf("%3c%2fa%3e") > -1)
  161.       author = author.substr(0, author.toLowerCase().indexOf("%3c%2fa%3e"));
  162.     else
  163.       author = "";
  164.     if(author == "")
  165.       author=$("#xc"+thisID+" .avatar-image-container img").attr("title");
  166.     var cmtChild = clss[x].firstChild;
  167.     while(cmtChild && !/(^| )comment-body( |$)/.test(cmtChild.className) && !/(^| )comment-body-author( |$)/.test(cmtChild.className))
  168.       cmtChild = cmtChild.nextSibling;
  169.     var txt = cmtChild.innerHTML;
  170.     var elm = null;
  171.     // from feed:
  172.     if(preferBloggerThreading && replyToCommentID[thisID] && replyToCommentID[thisID] != "")
  173.       elm = document.getElementById("xc"+replyToCommentID[thisID]);
  174.     if(!elm) {
  175.       var cmtID = txt.toLowerCase().indexOf("href=\"#");
  176.       if(cmtID == -1) cmtID = txt.toLowerCase().indexOf("href=\"" + (window.location.href.toLowerCase()).split("#",1)[0] + "#");
  177.       if(cmtID > -1) {
  178.         var commentid = "x" + txt.substr(cmtID).split("#")[1].split("\"")[0];
  179.         elm = document.getElementById(commentid);
  180.       }
  181.     }  
  182.     if(!elm && prevAuthor != "" && x && prevNode)
  183.     {
  184.       if(txt.indexOf("@" + prevAuthor) > -1)
  185.         elm = prevNode;
  186.       else if(prevAuthor.length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.toLowerCase()) > -1)
  187.         elm = prevNode;
  188.       else if(prevAuthor.split(/[\s,-.]+/)[0].length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.split(/[\s,-.]+/)[0].toLowerCase()) > -1)
  189.         elm = prevNode;
  190.     }
  191.     if(!elm)
  192.       for(var tmp in authornodes)
  193.         if(txt.indexOf("@" + tmp) > -1)
  194.           elm = authornodes[tmp];
  195.     if(!elm && replyToCommentID[thisID] && replyToCommentID[thisID] != "")
  196.       elm = document.getElementById("xc"+replyToCommentID[thisID]);
  197.     if(elm) {
  198.       var ind = 0;
  199.       if(elm.style.left != "")
  200.         ind = parseInt(elm.style.left);
  201.       if(ind < 300 && parseInt(ind / threadIndent)+1 < maxThreadingLevels) {
  202.         if(ind < 140)
  203.           ind = ind + threadIndent;
  204.         else
  205.           ind = ind + parseInt(threadIndent / 3);
  206.       }
  207.       var parNode = elm.parentNode;
  208.       var place = elm;
  209.       var xpos;
  210.       do {
  211.         do place = place.nextSibling;
  212.         while(place && place.nodeType != 1);
  213.         if(place && place.style && place.style.left != "")
  214.           xpos = parseInt(place.style.left);
  215.         else
  216.           xpos = 0;
  217.       } while(place && xpos >= ind);
  218.       if(place != clss[x]) {
  219.         parNode.insertBefore(clss[x], place);
  220.         moved = true;
  221.       }
  222.       clss[x].style.position = "relative";
  223.       clss[x].style.left = ind + "px";
  224.       width = width - ind;
  225.     }
  226.     clss[x].style.width = width + "px";
  227.     if(!moved) {
  228.       prevAuthor = author;
  229.       prevNode = clss[x];
  230.     }
  231.     if(author != "")
  232.       authornodes[author] = clss[x];
  233.   }
  234. }
  235. var cfeedbase = $('link[href$="comments/default"]').attr("href").split("/default")[0];
  236. if(useBloggerThreading && $('a[href*="'+cfeedbase+'"]').length)
  237.   document.write('<script type="text/javascript" src="'+cfeedbase+'/summary?max-results=500&alt=json-in-script&callback=threadComments"></'+'script>');
  238. else threadComments();
  239. //]]>
  240. </script>
  241. </b:if>
RAW Paste Data
Top