====== Floating/movable Table of Contents ======

I've had the idea that it would be nice if the TOC would be visible at all times, thus making navigation in a document a bit easier. Based on version: 2005-02-18a


===== Tested browsers =====

  * Firefox 1.0.3 [ Windows XP Pro SP2 / Linux ]
  * IE 6 [ Windows XP Pro SP 2 ]

===== Changes =====


==== style.css - new style class ====

<code css>
div.float_toc {
  margin: 0px;
  float:right;
  width: 200px;
  font-size: 80%;
  clear:both;
  z-index: 1;
  position: absolute;
}
</code>

==== conf/dokuwiki.php or better conf/local.php - added an option to /* Display Options */ section ====

<code php>
$conf['float_toc']   = 1;                 //produce toc that is visibile at all times and can be moved around in doc? 0|1
</code>

==== inc/html.php ====

  * new js include
<code php>
//after this
<script language="JavaScript" type="text/javascript" src="<?=getBaseURL()?>script.js"></script>
//added this
<script language="JavaScript" type="text/javascript" src="<?=getBaseURL()?>toc.js"></script>
</code>

  * function toc_html($toc) modfications
<code php>
function html_toc($toc){
  global $lang;
  global $conf; // added this
  
  $ret  = '';

  // replaced this: $ret .= '<div class="toc">'; with following if block
  if ( $conf['float_toc'] == 1 ){
    $ret .= '<div class="float_toc" id="tocbox">';
  }else{
    $ret .= '<div class="toc">';
  }

  $ret .=   '<div class="tocheader">';
  $ret .=      $lang['toc'];
  $ret .=     ' <script type="text/javascript">';
  $ret .=     'showTocToggle("+","-")';
  $ret .=     '</script>';
  $ret .=   '</div>';
  $ret .=   '<div id="tocinside">';
  $ret .=   html_buildlist($toc,'toc','html_list_toc');
  $ret .=   '</div>';
  $ret .= '</div>';
  return $ret;
}
</code>

==== new js file: toc.js ====

<code javascript>
/**
* Floating/movable TOC
*
* @author Oliver S6ro <seem.iges@mail.ee>
* @copyright Copyright (C) 2005, Oliver S6ro
* @license GPL v2 http://www.gnu.org/copyleft/gpl.html
*/

// GLOBALS
// Id of first div element of TOC.
var TOC_ID = "tocbox";

// State flag for mouse cursor. True if in TOC area otherwise false.
var inToc = false;

// State flag for Ctrl. True if inToc == true && Ctrl is held down, otherwise false.
var tocCtrlDown = false;

// Initial TOC x (style.left), y (style.top) coordinates
var tocXOffset = 1;
var tocYOffset = 100;

// Store difference between mouse X,Y and TOC x,y if Ctrl is first pressed in TOC area.
var tocXDiff = 0;
var tocYDiff = 0;

// Quick browser check
var isIE = document.all ? true : false;


/**
* Called if mouse cursor is over TOC area.
*/
function tocOver()
{
    inToc = true;
    tocCtrlDown = false;
}

/*
* Called if mouse cursor moved out of TOC area.
*/
function tocOut()
{
    inToc = false;
    tocCtrlDown = false;
}

/**
* Move TOC - duh ;)
*/
function moveToc( pEvent )
{
    var TOC = document.getElementById( TOC_ID );
    
    if ( TOC && inToc )
    {
        // TOC found in page and mouse cursor in TOC area
        if ( tocCtrlDown )
        {
            // Ctrl is held down - move sucker ;)
            if ( !isIE )
            {
                var tocX = pEvent.pageX - tocXDiff;
                var tocY = pEvent.pageY - tocYDiff;
                
                tocCtrlDown = pEvent.ctrlKey;
            }
            else
            {
                var tocX = window.event.clientX - tocXDiff;
                var tocY = window.event.clientY - tocYDiff;
                
                tocCtrlDown = window.event.ctrlKey;
            }
            
            tocXOffset = tocX;
            tocYOffset = tocY;
            
            TOC.style.left = new String( tocX + "px" );
            TOC.style.top = new String( tocY + "px" );
        }
        else
        {
            // check if Ctrl is pressed down, is so get x,y diffs
            if ( !isIE )
            {
                tocCtrlDown = pEvent.ctrlKey;
                if ( tocCtrlDown )
                {
                    tocXDiff = pEvent.pageX - parseInt( TOC.style.left );
                    tocYDiff = pEvent.pageY - parseInt( TOC.style.top );
                }
            }
            else
            {
                tocCtrlDown = window.event.ctrlKey;
                if ( tocCtrlDown )
                {
                    tocXDiff = window.event.clientX - parseInt( TOC.style.left );
                    tocYDiff = window.event.clientY - parseInt( TOC.style.top );
                }
            }
        }
    }
    
    return true;
}

/**
* Firefox/Mozilla have limited support of onscroll so instead this function
* is used and called every X ms specified in initTocScroll.
*/
function tocScroll()
{
    var TOC = document.getElementById( TOC_ID );
    if ( TOC )
    {
        if ( !inToc )
        {
            if ( !isIE )
            {
                var tocX = tocXOffset + window.pageXOffset;
                var tocY = tocYOffset + window.pageYOffset;
            }
            else
            {
                var tocX = tocXOffset + document.documentElement.scrollLeft;
                var tocY = tocYOffset + document.documentElement.scrollTop;
            }
            
            TOC.style.top = new String( tocY + "px" );
            TOC.style.left = new String( tocX + "px" );
        }
    }
}

/**
* Scrolling setup
*/
function initTocScroll()
{
    var TOC = document.getElementById( TOC_ID );
    if ( TOC )
    {
        TOC.style.left = new String( tocXOffset + "px" );
        TOC.style.top = new String( tocYOffset + "px" );
        
        TOC.onmouseover = tocOver;
        TOC.onmouseout = tocOut;
        
        var tid = setInterval( "tocScroll()", 1 );
    }
    
    return true;
}


/**
* Capture document events and set handlers
*/
if ( !isIE ) document.captureEvents( Event.MOUSEMOVE );
document.onmousemove = moveToc;
window.onload = initTocScroll;
</code>