Note: This page is outdated, since there exists a newer version of the script which is superior in some aspects: HowToMakeContentsExpandable

As soon as a ZWiki is used by a great number of persons, the number of pages increases rapidly. Therefore it is sometimes hard to keep an overview of the hierarchy of a ZWiki. Looking at the contents-view of zwiki.org, you will understand what I mean. With the aid of javascript and the document object model (DOM) one can adjust the contents-view of ZWiki to be expandable and collapsable. On this page I will describe how to achieve this goal.

The code and approach are taken from http://www.kryogenix.org/code/browser/aqlists/ . I modified the javascript a little bit, and tested the functionality with Mozilla, Firefox and Opera. Unfortunately I haven't had the chance to test it with IE yet. If you have any experiences, it would be great if you could share them on this page. There is no remark whether one is allowed to use and alter the code of www.kryogenix.org, but it is quite trivial and publicly available with an encouragement to use it. The following steps are necessary to make the contents-page hierarchy expandable/collapsable:

  1. The javascript file, that does most of the work is aqtree3clickable.js. In your ZWiki-Folder add a File-Object or a DTML-Document named aqtree3clickable.js and insert the code of aqtree3clickable.js. The methods in aqtree3clickable.js use the document object model to manipulate the structure of the html. Classes "aq3open" and "aq3closed" are associated with the list items of the unordered lists, allowing the css-stylesheets to decide upon whether to display the list item or not. Here's a newer version: aqtree3clickable-2.js (How do I delete old files once they're uploaded?)
  2. For the javascript to be used by the browser, the file needs to be mentioned in the header of the html-documents which are served by zope.
    • Go and edit $ZOPE_INSTALL_DIR/Products/ZWiki/skins/standard/wikipage_macros.py to include the following lines in the "head"-macro:
             <disabled script src="" type="text/javascript" 
                tal:attributes="src python:here.defaultPageUrl()+'/aqtree3clickable.js'">
             <disabled /script>
      
    • Note: Since not only the contents-page uses the "head"-macro defined in wikipage_macros.pt, the head of all wikipages will include the reference to the javascript-file. To alter this we would need to define another macro which is only called by the contents-page and includes the link to the javascript file. I haven't worked on this yet. It can also be convenient to have the nested lists in the subtopics section expandable (see the third image below). For this to work, it is necessary to include the script in every single page, which is achieved by this solution.
  3. Apart from that, we need to add some style to the expandable/collapsable tree, that's why we alter the file stylesheet.css in the skin of your ZWiki. In fact the file aqtree3clickable.css hides the parts of the hierarchy that shall not be displayed and shows the rest. I am using the standard skin, so I appended the file aqtree3clickable.css to $ZOPE_INSTALL_DIR/Products/ZWiki/skins/standard/stylesheet.css.
  4. The javascript-file and the css-file only work on unordered lists, that have the class-attribute "aqtree3clickable". Therefore the ul-element in the contents-page of zwiki needs to have class="aqtree3clickable". This unordered list is generated by the function renderNesting in OutlineSupport.py. Simply make the following changes:
      # original: got = ['&lt;ul&gt;']
      got = ['&lt;ul class="aqtree3clickable"&gt;']
    
  5. Upload the three images to your wiki folder or above:
  6. After these steps the script will still not work for the following reasons:
    • The code for nested unordered lists generated by ZWiki is of the following form:
           <ul><li>...</li>
             <ul>
                <li>...</li>
                <li>...</li>
             </ul>
             <li>...</li>
             <li>...</li>
           </ul>
      
    • The script expects sublists to be enclosed by a pair of li-tags. In fact I believe this is the correct way to write them, although browsers recognize both. The lists are generated by the file OutlineSupport?.py. In order for the script to work properly we need to change the list above to the following nested list:
           <ul><li>...
             <ul>
                <li>...</li>
                <li>...</li>
             </ul></li>
             <li>...</li>
             <li>...</li>
           </ul>
      
    • So let's edit once again the function renderNesting in OutlineSupport.py. Make the following change:
           # original: got.append('%s <li>[%s]</li>' % (indent,n[0]))
           got.append('%s <li>[%s]' % (indent,n[0]))
      
    • Then, ten lines below (right after the code that generates the sublist) make sure, that the "li"-tag is closed again just under the same condition. So insert the two following lines:
           if not (n[0]==here and suppress_current):
              got.append('%s </li>' % indent)
      
    • For all the changes to OutlineSupport.py here's a patch (ZWiki-0.33): OutlineSupport?.py.patch
  7. Restart zope for the changes to come into effect.

I think I haven't forgotten any step. If you have problems don't hesitate to ask. Here are some screenshots:


comments:

nice how-to! --simon, Sat, 07 Aug 2004 16:46:16 -0700 reply
Thanks. I added step 5 and tried to get it working here. Using Firefox 0.9.3, I just see a bullet graphic for top level items.

nice how-to! --Benedikt, Sat, 14 Aug 2004 08:35:39 -0700 reply
Thanks for trying it out, Simon. There were still missing some steps. I added step 6, but I am not quite sure if these are all. I should have time to finish this page soon :-) Benedikt

finished --Benedikt, Tue, 17 Aug 2004 04:06:42 -0700 reply
The howto is finished.

not working --simon, Thu, 26 Aug 2004 10:04:42 -0700 reply
Hi Benedikt.. I believe I've installed that latest change, but now I don't see any bullets in firefox 0.9.3. Any ideas ?

not working --SimonMichael, Thu, 26 Aug 2004 13:39:14 -0700 reply
Not in the page context, above the title, that is. I do see them now in the subtopics listing. Very nice!

not working --SimonMichael, Thu, 26 Aug 2004 13:40:28 -0700 reply
ZWiki is a good example page.

not working --SimonMichael, Thu, 26 Aug 2004 13:44:39 -0700 reply
Or wiki contents, though it's a bit slow on this fast machine.

not working -- Fri, 27 Aug 2004 07:35:19 -0700 reply
In fact, it doesn't seem to be working on zwiki.org. But step 6 has not been carried out. The lists generated by OutlineSupport.py are still of the first form (sublists as siblings of list items) - see the html source - while they should be of the second form (sublists as children of list items). Do you want me to send you a modified version of OutlineSupport.py? I could make the changes to the file in the zwiki-repository.

Here's the latest (darcs) version of OutlineSupport.py with step 6 incorporated: OutlineSupport?.py

not working --SimonMichael, Fri, 27 Aug 2004 08:25:01 -0700 reply
Sorry, looks like the code got reverted to the checked-in version since my last comment.

not working --SimonMichael, Fri, 27 Aug 2004 08:33:43 -0700 reply
And/or I had not put the second change where you intended.. mine was two lines higher up. I can't follow this method in detail right now, but I'll check in this fix as things are working again. Still don't see them in the context above the title.

not working -- Fri, 27 Aug 2004 09:04:53 -0700 reply
That's it! Seems to be incorporated now. My browser takes a second to process the contents-page, because it's quite large, but it looks nice. Maybe we should include a mechanism to turn it off - perhaps a folder-property? I thought it would be better not to process the lists above the title, so I turned that off in the javascript file. Would it be better to have that list expandable as well?

not working --Simon Michael, Fri, 27 Aug 2004 09:17:44 -0700 reply
Ah, that explains it.

We do need to at least make sure this is safe for all users/browsers before release. Maybe it needs an option, not sure right now.

not working -- Sun, 29 Aug 2004 08:28:39 -0700 reply
One can switch this feature off by removing the javascript file. In Konqueror it doesn't work, because it doesn't seem to support the method document.createElement, which is used to estimate the document-object-model functionality of the browser. The unordered lists appear just as before. I haven't had a chance to try IE yet. Any experiences?

Thanks --ArnoPucher, Thu, 02 Sep 2004 03:36:44 -0700 reply
it worked for - really nice tutor ;)

BTW:

the head macro:

  <disabled script src="" type="text/javascript" 
          tal:attributes="src python:here.defaultPageUrl()+'/aqtree3clickable.js'">
  <disabled /script>

had to be for me:

<script src="" type="text/javascript"

tal:attributes="src python:here.defaultPageUrl()+'/aqtree3clickable.js'">

< /script>

otherwise I get a Zope exception

AND the script doesn't work with Internet Explorer (XP Service Pack 2) - but I am Opera user ;)

Thanks --Simon Michael, Thu, 02 Sep 2004 09:29:32 -0700 reply
Hi Arno.. I didn't get what you mean by that last comment, from the mail or web page - could you reformat or say a more about what you meant ? Thx

IE and this script -- Sat, 04 Sep 2004 07:27:04 -0700 reply
I had a look at the contents-page with IE on win ME, and it really doesn't work as well as with the other browsers. Links to pages, that are not leaves, are displayed black instead of blue, and the plus/minus signs are not visible. One can expand/collapse the hierarchy by clicking on the place where the plus/minus signs are supposed to be :-) This should be improved. I'll try to find some time to work on it. --Benedikt

IE and this script --Simon Michael, Tue, 07 Sep 2004 10:18:03 -0700 reply
Thanks for testing Benedikt. If we can't make it degrade gracefully everywhere, we'll have to turn it off or make it an option on zwiki.org.

IE and this script -- Wed, 08 Sep 2004 03:46:47 -0700 reply
For the script to leave everything untouched in IE we would need to add the following line at the beginning of the function makeTreesC in the file aqtree3clickable.js:

  if (navigator.appVersion.indexOf("MSIE") != -1) { return; }

I tested it on my local installation and it works fine. Mozilla, Opera and Firefox display the expandable version, while IE does not bother about the javascript. A button "expand all" would be nice, though... Benedikt

IE and this script --simon, Tue, 28 Sep 2004 16:31:47 -0700 reply
Thanks, I have added that so IE users can use the site. I'm still wary of leaving this enabled on this particular site, without more testing and feedback, since I probably won't hear about the problems.

Reason for probelm with IE -- Mon, 22 Nov 2004 05:13:01 -0800 reply
Most probably the reason for this script not working with IE is the use of an anonymous funtion when attaching the events to the anchor-tags.