diff --git a/inc/parser/xhtml.php b/inc/parser/xhtml.php
index f6dcbc03888d72fcc85d13551287d140092ed1bf..73c2ada1c8053adfd7948fa5c9a9d097a5147333 100644
--- a/inc/parser/xhtml.php
+++ b/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) {
diff --git a/lib/exe/js.php b/lib/exe/js.php
index ca1d83948ec69da680e668d1be427dab259a0820..b776f957bcf9329abc560957b2f1234ad185369f 100644
--- a/lib/exe/js.php
+++ b/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; });";
}
/**
diff --git a/lib/scripts/events.js b/lib/scripts/events.js
index f6360219d84cb56d8db268b7255aabbe0806bc50..fb65b1bd707946c29db9aae5b9f709959f5d84f1 100644
--- a/lib/scripts/events.js
+++ b/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();
+ };
+ }
+}
+
+
diff --git a/lib/scripts/script.js b/lib/scripts/script.js
index b9185926574f32228796a5349562c9da68a1f473..d589aa0b404995aeaca0108154a78a2c609a7c7b 100644
--- a/lib/scripts/script.js
+++ b/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 = '';
}
}
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 303bff0f7aa951360ba1233fd3c32050fecde97f..229bbc58cd37256172b4d36e476f741b40e4e8a2 100644
--- a/lib/tpl/default/design.css
+++ b/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;