unobstrusive JS for TOC, better onload handling

This path adds more unobstrusive JavaScript for the TOC handling. It also
loads JavaScript initialiezers as soon as the DOM is parsed for Mozilla-based
Browsers as described at http://dean.edwards.name/weblog/2005/09/busted/ - a
IE solution was not chosen yet.

darcs-hash:20051210193709-7ad00-771461e56d9661caf9ca733a6d617f009e24d0b7.gz

inc/parser/xhtml.php

@@ -86,11 +86,10 @@ class Doku_Renderer_xhtml extends Doku_Renderer {
     function toc_open() {
         global $lang;
         $this->doc .= '<div class="toc">'.DOKU_LF;
-        $this->doc .= '<div class="tocheader">';
-        $this->doc .= ' <script type="text/javascript">showTocToggle("+","-")</script>';
+        $this->doc .= '<div class="tocheader" id="toc__header">';
         $this->doc .= $lang['toc'];
         $this->doc .= '</div>'.DOKU_LF;
-        $this->doc .= '<div id="tocinside">'.DOKU_LF;
+        $this->doc .= '<div id="toc__inside">'.DOKU_LF;
     }
     
     function tocbranch_open($level) {

lib/exe/js.php

@@ -77,6 +77,7 @@ function js_out(){
     // init stuff
     js_runonstart("ajax_qsearch.init('qsearch_in','qsearch_out')");
     js_runonstart("addEvent(document,'click',closePopups)");
+    js_runonstart('addTocToggle()');
 
     if($edit){
         // size controls
@@ -114,6 +115,13 @@ function js_out(){
     // load user script
     @readfile(DOKU_CONF.'userscript.js');
 
+
+    // initialize init pseudo event
+    echo 'if (document.addEventListener) {';
+    echo '    document.addEventListener("DOMContentLoaded", window.fireoninit, null);';
+    echo '}';
+    echo 'addEvent(window,"load",window.fireoninit);';
+
     // end output buffering and get contents
     $js = ob_get_contents();
     ob_end_clean();
@@ -184,7 +192,7 @@ function js_escape($string){
  * @author Andreas Gohr <andi@splitbrain.org>
  */
 function js_runonstart($func){
-    print "addEvent(window,'load',function(){ $func; });";
+    echo "addInitEvent(function(){ $func; });";
 }
 
 /**

lib/scripts/events.js

@@ -59,4 +59,54 @@ fixEvent.preventDefault = function() {
 };
 fixEvent.stopPropagation = function() {
 	this.cancelBubble = true;
-};
+};
\ No newline at end of file
+
+
+/**
+ * Pseudo event handler to be fired after the DOM was parsed or
+ * on window load at last.
+ *
+ * @author based upon some code by Dean Edwards
+ * @author Andreas Gohr
+ * @see    http://dean.edwards.name/weblog/2005/09/busted/
+ */
+window.fireoninit = function() {
+  // quit if this function has already been called
+  if (arguments.callee.done) return;
+  // flag this function so we don't do the same thing twice
+  arguments.callee.done = true;
+
+	if (typeof window.oninit == 'function') {
+		window.oninit();
+  }
+}
+
+/**
+ * This is a pseudo Event that will be fired by the above function
+ *
+ * Use addInitEvent to bind to this event!
+ *
+ * @author Andreas Gohr
+ */
+window.oninit = function() {
+}
+
+/**
+ * Bind a function to the window.init pseudo event
+ *
+ * @author Simon Willison
+ * @see http://simon.incutio.com/archive/2004/05/26/addLoadEvent
+ */
+function addInitEvent(func) {
+  var oldoninit = window.oninit;
+  if (typeof window.oninit != 'function') {
+    window.oninit = func;
+  } else {
+    window.oninit = function() {
+      oldoninit();
+      func();
+    };
+  }
+}
+
+

lib/scripts/script.js

@@ -97,6 +97,19 @@ function escapeQuotes(text) {
   return text;
 }
 
+/**
+ * Adds a node as the first childenode to the given parent
+ *
+ * @see appendChild()
+ */
+function prependChild(parent,element) {
+	if(!parent.firstChild){
+		parent.appendChild(element);
+	}else{
+		parent.insertBefore(element,parent.firstChild);
+	}
+}
+
 /**
  * Prints a animated gif to show the search is performed
  *
@@ -143,37 +156,45 @@ function suggestWikiname(){
 }
 
 /**
- * This prints the switch to toggle the Table of Contents
+ * Adds the toggle switch to the TOC
  */
-function showTocToggle(showtxt,hidetxt) {
-  if(document.getElementById) {
-		show = '<img src="'+DOKU_BASE+'lib/images/arrow_down.gif" alt="'+showtxt+'">';
-		hide = '<img src="'+DOKU_BASE+'lib/images/arrow_up.gif" alt="'+hidetxt+'">';
-
-    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></div>');
-  }
+function addTocToggle() {
+	if(!document.getElementById) return;
+	var header = document.getElementById('toc__header');
+  if(!header) return;
+
+  var showimg     = document.createElement('img');
+	showimg.id      = 'toc__show';
+  showimg.src     = DOKU_BASE+'lib/images/arrow_down.gif';
+  showimg.alt     = '+';
+	showimg.onclick = toggleToc;
+  showimg.style.display = 'none';
+
+	var hideimg     = document.createElement('img');
+	hideimg.id      = 'toc__hide';
+  hideimg.src     = DOKU_BASE+'lib/images/arrow_up.gif';
+  hideimg.alt     = '-';
+	hideimg.onclick = toggleToc;
+	
+  prependChild(header,showimg);
+  prependChild(header,hideimg);
 }
 
 /**
  * This toggles the visibility of the Table of Contents
  */
 function toggleToc() {
-  var toc = document.getElementById('tocinside');
-  var showlink=document.getElementById('showlink');
-  var hidelink=document.getElementById('hidelink');
+  var toc = document.getElementById('toc__inside');
+  var showimg = document.getElementById('toc__show');
+  var hideimg = document.getElementById('toc__hide');
   if(toc.style.display == 'none') {
-    toc.style.display = tocWas;
-    hidelink.style.display='';
-    showlink.style.display='none';
+    toc.style.display      = '';
+    hideimg.style.display = '';
+    showimg.style.display = 'none';
   } else {
-    tocWas = toc.style.display;
-    toc.style.display = 'none';
-    hidelink.style.display='none';
-    showlink.style.display='';
-
+    toc.style.display      = 'none';
+    hideimg.style.display = 'none';
+    showimg.style.display = '';
   }
 }
 

lib/tpl/default/design.css

@@ -482,17 +482,18 @@ div.tocheader {
 }
 
 div.toctoggle {
-  float:right;
-  margin-top:0.3em;
-  margin-right:3px;
 }
 
-div.toctoggle img {
+div.tocheader img {
   width:0.8em;
   height:0.8em;
+  float:right;
+  margin-top:0.3em;
+  margin-right:3px;
+  cursor: pointer;
 }
 
-#tocinside {
+#toc__inside {
   border: 1px solid __dark__;
   background-color: __white__;
   text-align: left;