toc toggle button

The TOC toggle button was very small and inconspicuous. This patch
replaces the old one with small arrows placed at the right border
of the TOC header.
Code cleanup in html.php: html_toc() and html_list_toc() are obsolete
and have been removed.

darcs-hash:20050531184155-7ef76-249f948b2a8b71d45aab2b8418db2be5eb638f6d.gz

6 files changed, 19 insertions, 41 deletions

diff --git a/images/arrow_down.png b/images/arrow_down.png
new file mode 100644
index 000000000..cc0ab149c
--- /dev/null
+++ b/images/arrow_down.png
diff --git a/images/arrow_up.png b/images/arrow_up.png
new file mode 100644
index 000000000..3031122e5
--- /dev/null
+++ b/images/arrow_up.png
diff --git a/inc/html.php b/inc/html.php
index b08f313e1..b9f2e957b 100644
--- a/inc/html.php
+++ b/inc/html.php
@@ -216,43 +216,6 @@ function html_btn($name,$id,$akey,$params,$method='get'){
 }
 
 /**
- * Print the table of contents
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-function html_toc($toc){
-  global $lang;
-  $ret  = '';
-  $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;
-}
-
-/**
- * TOC item formatter
- *
- * User function for html_buildlist()
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-function html_list_toc($item){
-  $ret  = '';
-  $ret .= '<a href="#'.$item['id'].'" class="toc">';
-  $ret .= $item['name'];
-  $ret .= '</a>';
-  return $ret;
-}
-
-/**
  * show a wiki page
  *
  * @author Andreas Gohr <andi@splitbrain.org>
diff --git a/inc/parser/xhtml.php b/inc/parser/xhtml.php
index da5c70459..06f286a20 100644
--- a/inc/parser/xhtml.php
+++ b/inc/parser/xhtml.php
@@ -70,9 +70,13 @@ class Doku_Renderer_xhtml extends Doku_Renderer {
         global $lang;
         $this->doc .= '<div class="toc">'.DOKU_LF;
         $this->doc .= '<div class="tocheader">';
+/*      $this->doc .= ' <script type="text/javascript">showTocToggle("+","-")';*/
+        $this->doc .=  '<script type="text/javascript">showTocToggle(';
+        $this->doc .=    '"<img src=\"'.DOKU_BASE.'images/arrow_down.png\">",';
+        $this->doc .=    '"<img src=\"'.DOKU_BASE.'images/arrow_up.png\">")';
+        $this->doc .=  '</script>';
         $this->doc .= $lang['toc'];
-        $this->doc .= ' <script type="text/javascript">showTocToggle("+","-")';
-        $this->doc .= '</script></div>'.DOKU_LF;
+        $this->doc .= '</div>'.DOKU_LF;
         $this->doc .= '<div id="tocinside">'.DOKU_LF;
     }
     
diff --git a/script.js b/script.js
index f43e9abbf..d25246c9c 100644
--- a/script.js
+++ b/script.js
@@ -291,10 +291,10 @@ function suggestWikiname(){
  */
 function showTocToggle(show,hide) {
   if(document.getElementById) {
-    document.writeln('<span class=\'toctoggle\'><a href="javascript:toggleToc()" class="toc">' +
+    document.writeln('<div class=\'toctoggle\'><a href="javascript:toggleToc()" class="toc">' +
     '<span id="showlink" style="display:none;">' + show + '</span>' +
     '<span id="hidelink">' + hide + '</span>'
-    + '</a></span>');
+    + '</a></div>');
   }
 }
 
diff --git a/tpl/default/design.css b/tpl/default/design.css
index 792f508be..14c419df4 100644
--- a/tpl/default/design.css
+++ b/tpl/default/design.css
@@ -472,6 +472,17 @@ div.tocheader {
   margin-bottom: 2px;
 }
 
+div.toctoggle {
+  float:right;
+  margin-top:0.3em;
+  margin-right:3px;
+}
+
+div.toctoggle img {
+  width:0.8em;
+  height:0.8em;
+}
+
 #tocinside {
   border: 1px solid #8cacbb;
   background-color: #ffffff;