diff options
| -rw-r--r-- | inc/parser/xhtml.php | 5 | ||||
| -rw-r--r-- | lib/exe/js.php | 10 | ||||
| -rw-r--r-- | lib/scripts/events.js | 52 | ||||
| -rw-r--r-- | lib/scripts/script.js | 65 | ||||
| -rw-r--r-- | lib/tpl/default/design.css | 11 |
5 files changed, 111 insertions, 32 deletions
diff --git a/inc/parser/xhtml.php b/inc/parser/xhtml.php index f6dcbc038..73c2ada1c 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 ca1d83948..b776f957b 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 f6360219d..fb65b1bd7 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 b91859265..d589aa0b4 100644 --- a/lib/scripts/script.js +++ b/lib/scripts/script.js @@ -98,6 +98,19 @@ function escapeQuotes(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 * * @author Andreas Gohr <andi@splitbrain.org> @@ -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 303bff0f7..229bbc58c 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; |