Table of Contents

Navigation menu

As dokuwiki plugin “indexmenu” just plain sucks and “indexmenu2” is (was?) down I decided to create my one version.

Code

As indexmenu and indexmenu2 this menu is created around dTree. But instead of automating the creation of the menu it’s done manually. This is much better because now you can sort namespaces to our own liking and leave namespaces out where necessary.

For example: If you have the namespaces [IN-1, IN-2, IN-3, IN-11, IN-12, IN-13, IN-22, IN-33] you would normally sort them just like that. But both indexmenu and indexmenu can't do that and change it to [IN-1, IN-11, IN-12, IN-13, IN-2, IN-22, IN-3, IN-33] which is just plain stupid!

dTree

Download dTree form http://www.destroydrop.com/javascripts/tree/ and extract it in ./

dtree.js

Add the following code to ./dtree.js 

function gup()
{
  name = "id";
  name = name.replace(/[\[]/|>,"\\\[").replace(/[\]]/|>,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
 
function expander( link )
{
  name = "id";
  name = name.replace(/[\[]/|>,"\\\[").replace(/[\]]/|>,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( link );
  if( results == null )
    return "";
  else
    return results[1];
}

This code will later expand the menu to the current namespace :).

main.php

add to ./lib/tpl/default/main.php the following in the header statement 

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

Navigation

Add the following code to you navigation namespace. Of course use your own config for dTree and your own links. 

<html>
	<script type="text/javascript">
		<!--
 
a = new dTree('a');
a.config.useSelection=false;
a.config.useIcons=false;
a.config.useCookies=true;
a.config.inOrder=true;
var LinkArray = new Array();
LinkArray[0]  = [0,-1, 'Welcome', './doku.php?id=start'];
LinkArray[1]  = [1, 0, 'Electronics', './doku.php?id=electronics'];
LinkArray[2]  = [2, 0, 'Guestbook', './doku.php?id=guestbook'];
LinkArray[3]  = [3, 0, 'Server', './doku.php?id=server'];
LinkArray[4]  = [4, 1, 'Nixie tubes', './doku.php?id=electronics:nixie_tubes'];
LinkArray[5]  = [5, 4, 'Nixie clock', './doku.php?id=electronics:nixie_tubes:nixie_clock'];
LinkArray[6]  = [6, 4, 'Nixie thermometer', './doku.php?id=electronics:nixie_tubes:nixie_thermometer'];
LinkArray[7]  = [7, 4, 'Gallery', 'javascript:a.o(7);'];
LinkArray[8]  = [8, 7, 'IN-1', './doku.php?id=electronics:nixie_tubes:gallery:in-1'];
LinkArray[9]  = [9, 7, 'IN-2', './doku.php?id=electronics:nixie_tubes:gallery:in-2'];
 
var arLen=LinkArray.length;
for ( var i=0, len=arLen; i<len; ++i ){
  a.add(LinkArray[i][0], LinkArray[i][1], LinkArray[i][2], LinkArray[i][3]);
}
 
document.write(a);
 
var page_id = gup();
for ( var i=0, len=arLen; i<len; ++i ){
  if(page_id == expander( LinkArray[i][3] )){
    a.openTo(LinkArray[i][0], false);
    i = len;
  }
}
		//-->
	</script>
</html>

Now just add extra links to LinkArray in the following format LinkArray[id] = [id, parent, title, link]