Javascript header folding.

Doesn't work in IE6 -- in fact it causes IE6 to crash, but I don't much care
at this point.

diff --git a/MANIFEST b/MANIFEST
index 278f9eb..5d2075e 100644 (file)
--- a/MANIFEST
+++ b/MANIFEST
@@ -17,6 +17,7 @@ html/_css/easytoread.css
 html/_css/easyweb.css
 html/_css/editor.css
 html/_css/files.css
+html/_css/folding.css
 html/_css/images.css
 html/_css/login.css
 html/_css/markup.css
@@ -58,6 +59,7 @@ html/_graphics/versions.png
 html/_graphics/wlh.png
 html/_graphics/xml.png
 html/_js/editor.js
+html/_js/folding.js
 html/_js/go.js
 html/_js/new_page.js
 html/_js/upload.js
@@ -210,6 +212,8 @@ scripts/sitemap_xml.ml
 scripts/source.ml
 scripts/stats.ml
 scripts/stats_top.ml
+scripts/tarpit_form.ml
+scripts/tarpit.ml
 scripts/undelete_file.ml
 scripts/undelete_file_form.ml
 scripts/undelete_image.ml
@@ -310,6 +314,7 @@ templates/sitemap.html
 templates/sitemap.xml
 templates/stats.html
 templates/stats_top.html
+templates/tarpit_form.html
 templates/undelete_file_form.html
 templates/undelete_image_form.html
 templates/upload_file_form.html

diff --git a/html/_css/folding.css b/html/_css/folding.css
new file mode 100644 (file)
index 0000000..ef6be3e
--- /dev/null
+++ b/html/_css/folding.css
@@ -0,0 +1,9 @@
+/* Folding headings.
+ * $Id: folding.css,v 1.1 2006/08/17 11:19:58 rich Exp $
+ */
+
+div.foldingcontrol {
+  float: left;
+  cursor: pointer;
+  cursor: hand;
+}

diff --git a/html/_css/standard.css b/html/_css/standard.css
index e758566..b7b31f8 100644 (file)
--- a/html/_css/standard.css
+++ b/html/_css/standard.css
@@ -1,5 +1,5 @@
 /* Stylesheet for COCANWIKI.
- * $Id: standard.css,v 1.29 2006/08/03 13:52:54 rich Exp $
+ * $Id: standard.css,v 1.30 2006/08/17 11:19:58 rich Exp $
  */
 
 /* Based on the basic stylesheet. */
@@ -11,6 +11,9 @@
 /* Calendar extension. */
 @import url("calendar.css");
 
+/* Folding headings. */
+@import url("folding.css");
+
 /* For print media. */
 @import url("print.css");
 

diff --git a/html/_js/folding.js b/html/_js/folding.js
new file mode 100644 (file)
index 0000000..bad6f6c
--- /dev/null
+++ b/html/_js/folding.js
@@ -0,0 +1,124 @@
+/* Folding headings.
+ * Copyright (C) 2006 Merjis Ltd.
+ * $Id: folding.js,v 1.1 2006/08/17 11:19:58 rich Exp $
+ *
+ * For very long pages, you can use this Javascript to provide
+ * folding headings to make viewing the page more manageable.
+ *
+ * To install this code:
+ * (1) You must have the "manage site" permission.
+ * (2) Go to Sitewide settings, click Edit these settings, and in
+ *     the Page bug section, add or append the following Javascript
+ *     code:
+ *       <script src="/_js/folding.js" type="text/javascript"></script>
+ * (3) Edit the page where you want folding to appear, and set
+ *     the CSS class to "folding".
+ */
+
+// http://domscripting.com/blog/display/18
+function getElementsByClass (node, searchClass, tag)
+{
+  var classElements = new Array();
+  var els = node.getElementsByTagName (tag);
+  var pattern = new RegExp ("\\b"+searchClass+"\\b");
+  for (i = 0, j = 0; i < els.length; i++) {
+    if (pattern.test (els[i].className)) {
+      classElements[j] = els[i];
+      j++;
+    }
+  }
+  return classElements;
+}
+
+function setTextContent (text, content)
+{
+  // Not sure if this is even possible in IE6.
+  if (text.textContent) text.textContent = content;
+}
+
+function setOnClick (node, f)
+{
+  //  if (!node.attachEvent) node.onclick = f;
+  //  else node.attachEvent ("onclick", f);
+  node.onclick = f;
+}
+
+// http://joust.kano.net/weblog/archive/2005/08/08/a-huge-gotcha-with-javascript-closures/
+// http://calculist.blogspot.com/2005/12/gotcha-gotcha.html
+function createShowFunction (text, plus, nodes)
+{
+  return function (evt) {
+    // Restore the old display style.
+    for (var k = 0; k < nodes.length; ++k) {
+      var node = nodes[k];
+      if (node.style)
+       node.style.display = node.getAttribute ("displayold");
+    }
+    setTextContent (text, "[-]");
+    setOnClick (plus, createHideFunction (text, plus, nodes));
+  }
+}
+
+function createHideFunction (text, plus, nodes)
+{
+  return function (evt) {
+    // Set all the nodes to display none, but remember the old
+    // display style.
+    for (var k = 0; k < nodes.length; ++k) {
+      var node = nodes[k];
+      if (node.style) {
+       node.setAttribute ("displayold", node.style.display);
+       node.style.display = "none";
+      }
+    }
+    setTextContent (text, "[+]");
+    setOnClick (plus, createShowFunction (text, plus, nodes));
+  }
+}
+
+function set_up_folding ()
+{
+  var divs = getElementsByClass (document, "folding", "div");
+  for (var d = 0; d < divs.length; ++d) {
+    var div = divs[d];
+    var children = div.childNodes;
+    // List of child nodes is something like H3, n, n, H3, n, n, n, ...
+    // Add a button before each H3 which hides/shows the subsequent
+    // nodes up to but not including the next H3.
+    for (var i = 0; i < children.length; ++i) {
+      var h3 = children[i];
+      if (h3.nodeName == "H3") {
+       var j = i+1;
+       while (j < children.length && children[j].nodeName != "H3") j++;
+       // children i to j exclusive should be shown/hidden.
+       // Copy them to an array called 'nodes'.
+       var nodes = new Array ();
+       for (var k = i+1; k < j; ++k) {
+         var child = children[k];
+         nodes[k-(i+1)] = child;
+       }
+
+       // Create the +/- control.
+       var plus = document.createElement ("div");
+       plus.setAttribute ("class", "foldingcontrol");
+       var text = document.createTextNode ("[+]");
+       plus.appendChild (text);
+
+       // Create functions to show/hide the nodes.
+       var show = createShowFunction (text, plus, nodes);
+       var hide = createHideFunction (text, plus, nodes);
+
+       hide ();
+
+       // Place the '+' button before the h3.
+       div.insertBefore (plus, h3);
+       setOnClick (plus, show);
+
+       // Skip directly to next h3.
+       i = j-1;
+      }
+    }
+  }
+}
+
+set_up_folding ();