Posted By

rolandog on 07/09/06


Tagged

html xhtml wordpress DOM comment preview innerHTML DOMparser


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

alvaroisorna
rolandog
jbyerson


Wordpress XHTML and HTML Comment Preview


 / Published in: JavaScript
 

For a working demo in application/xhtml+xml or text/html, go to: http://rolandog.com/archives/2006/07/10/litebox-demasiado-bueno-para-ser-cierto/

You should delete the multi-line comments after completing the setup, some old browsers will complain about those.

  1. /* This script works in application/xhtml+xml or text/html documents.
  2. This script requires you to edit your WordPress Template's Comments file and Header file.
  3.  
  4. Modifications in the Header file:
  5. Place this script inside your 'head' element. You should delete these comments, when
  6. you're done with the setup.
  7.  
  8. Modifications to your Comments file:
  9. Above the 'Leave a Reply' sentenc, you'll need to place an empty 'div' with
  10. the an id like 'nocommentsyet':
  11. <div id="nocommentsyet"></div>
  12. You'll have to add an 'id' attribute like 'commentlist' to your 'ol' or 'ul'
  13. element that lists your comments. The result will be something like this:
  14. <ol id="commentlist" class="commentlist">
  15. You'll have to add an 'id' attribute like 'loggedin' to your anchor element
  16. that is almost at the end (next to a 'Logged in as' text). The beginning of
  17. the anchor element will look like:
  18. <a id="loggedin" href="<?php echo get_option('siteurl'); ?>
  19. Some WordPress templates don't set a class for their non-alternate comments...
  20. Only the 'alt' comments are styled, but since having class="" is an invalid
  21. markup syntax, you should set it to something like 'notalt':
  22. if ('alt' == $oddcomment) $oddcomment = 'notalt';
  23. After that, you have to set the onkeyup and onchange event attributes to
  24. the fields you want to monitor. For example, the 'author' field would look
  25. like:
  26. <input id="author" type="text" style="width:200px; color:#008000; background-color:#faf4f4; border-width:2px; border-color:#e0e0d0;" value="rolandog" onkeyup="previewcomment();" onchange="previewcomment();" />
  27. Next, you can set the names for your ids and other elements in these global variables:
  28. */
  29. var checkFor = "page";
  30. var previewId = "preview";
  31. var commentListId = "commentlist";
  32. var commentListClass = "commentlist";
  33. var loggedInId = "loggedin";
  34. var noCommentsYetId = "nocommentsyet";
  35. var altClassName = "alt";
  36. var notaltClassName = "notalt";
  37. var listType = "ol";
  38. var authorId = "author";
  39. var urlId = "url";
  40. var textAreaId = "comment";
  41.  
  42. function cleanWhitespace(someelement) {
  43. var element = document.getElementById(someelement);
  44. for (var i = 0; i < element.childNodes.length; i++) {
  45. var node = element.childNodes[i];
  46. if (node.nodeType == 3 && !/S/.test(node.nodeValue)) {
  47. element.removeChild(node);
  48. }
  49. }
  50. }
  51. function killsChildNodes(an_element) {
  52. while (an_element.hasChildNodes()) {
  53. if (!an_element.firstChild.hasChildNodes()) {
  54. var k = an_element.firstChild;
  55. an_element.removeChild(k);
  56. } else {
  57. killsChildNodes2(an_element.firstChild);
  58. }
  59. }
  60. }
  61. function killsChildNodes2(another_element) {
  62. while (another_element.hasChildNodes()) {
  63. if (!another_element.firstChild.hasChildNodes()) {
  64. var k2 = another_element.firstChild;
  65. another_element.removeChild(k2);
  66. } else {
  67. killsChildNodes(another_element.firstChild);
  68. }
  69. }
  70. }
  71. function killAllChildNodesFrom(bob) {
  72. if(document.getElementById(bob).hasChildNodes()) {
  73. killsChildNodes(document.getElementById(bob));
  74. }
  75. }
  76. function previewComment() {
  77. if(document.getElementById(commentListId)) {
  78. var commentlist = document.getElementById(commentListId);
  79. cleanWhitespace(commentListId);
  80. } else {
  81. var l = document.createElement(listType);
  82. l.setAttribute("id", commentListId);
  83. l.setAttribute("class", commentListClass);
  84. document.getElementById(noCommentsYetId).appendChild(l);
  85. var commentlist = document.getElementById(commentListId);
  86. }
  87. if(document.getElementById(previewId)) {
  88. var preview = document.getElementById(previewId);
  89. killAllChildNodesFrom(previewId);
  90. preview.parentNode.removeChild(preview.parentNode.lastChild);
  91. }
  92. var cclass = altClassName;
  93. if (commentlist.hasChildNodes()) {
  94. var lastcomment = commentlist.lastChild;
  95. if (lastcomment.getAttribute("class") == altClassName) {
  96. cclass = notaltClassName;
  97. }
  98. }
  99. var fsetbegin = '<fieldset><legend>Comment Preview<\/legend>';
  100. var fsetend = '<\/fieldset>';
  101. if(document.getElementById(loggedInId)) {
  102. var aname = document.getElementById(loggedInId).childNodes[0].nodeValue;
  103. aname = aname.toString();
  104. var url = location.href;
  105. } else {
  106. var aname = document.getElementById(authorId).value;
  107. var url = document.getElementById(urlId).value;
  108. }
  109. if(url == "") {
  110. var who = "<cite>" + aname + "<\/cite> Says:";
  111. } else {
  112. var who = "<cite><a href=\'" + url + "\'>" + aname + "<\/a><\/cite> Says:";
  113. }
  114. var li = document.createElement("li");
  115. li.setAttribute("id",previewId);
  116. li.setAttribute("class",cclass);
  117. var saidwhat = document.getElementById(textAreaId).value;
  118. if(document.getElementById(checkFor).namespaceURI) {
  119. saidwhat = saidwhat.replace(/\n/g, "<br \/>");
  120. var parser = new DOMParser();
  121. var doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + fsetbegin + who + '<br \/>' + saidwhat + fsetend + '<\/div>', 'application/xhtml+xml');
  122. var root = doc.documentElement;
  123. commentlist.appendChild(li);
  124. for (var i=0; i < root.childNodes.length; ++i) {
  125. commentlist.lastChild.appendChild(document.importNode(root.childNodes[i], true));
  126. }
  127. } else {
  128. saidwhat = saidwhat.replace(/\n/g, "<br>");
  129. commentlist.appendChild(li);
  130. document.getElementById(previewId).innerHTML = fsetbegin + who + "<br>" + saidwhat + fsetend;
  131. }
  132. }

Report this snippet  

You need to login to post a comment.