From 3cc8c868abe10eeff9290c2a5f4be099ba01e2f9 Mon Sep 17 00:00:00 2001 From: rich Date: Thu, 17 Aug 2006 11:19:58 +0000 Subject: [PATCH] Javascript header folding. Doesn't work in IE6 -- in fact it causes IE6 to crash, but I don't much care at this point. --- MANIFEST | 5 ++ html/_css/folding.css | 9 ++++ html/_css/standard.css | 5 +- html/_js/folding.js | 124 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 html/_css/folding.css create mode 100644 html/_js/folding.js diff --git a/MANIFEST b/MANIFEST index 278f9eb..5d2075e 100644 --- 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 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 --- 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 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: + * + * (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 (); -- 1.8.3.1