From d5acc30de20298eb6ed7545e70484599c4d95867 Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Mon, 9 Apr 2012 17:36:33 +0100 Subject: rewrote and improved HTML for TOC Attention: Template authors need to adjust their CSS! Original structure: div.toc > div#toc__header.tocheader.toctoggle > span#toc__toggle.toc_close|toc_open > span div#toc__inside > ul.toc > li.level1 > div.li > span.li > a.toc New structure: div#dw__toc.open|close > h3 > strong > span ul.toc > li.toc > div.li > a --- lib/scripts/page.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 5da4a9cc0..6e7d7faf7 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -96,26 +96,26 @@ dw_page = { * Adds the toggle switch to the TOC */ initTocToggle: function() { - var $header, $clicky, $toc, $tocul, setClicky; - $header = jQuery('#toc__header'); + var $wrapper, $header, $clicky, $toc, $tocul, setClicky; + $wrapper = jQuery('#dw__toc'); + $header = jQuery('h3', $wrapper); if(!$header.length) { return; } - $toc = jQuery('#toc__inside'); - $tocul = $toc.children('ul.toc'); + $toc = jQuery('div', $wrapper).first(); + $tocul = jQuery('ul', $toc); setClicky = function(hiding){ if(hiding){ $clicky.html('+'); - $clicky[0].className = 'toc_open'; + $wrapper.addClass('close').removeClass('open'); }else{ $clicky.html('−'); - $clicky[0].className = 'toc_close'; + $wrapper.addClass('open').removeClass('close'); } }; - $clicky = jQuery(document.createElement('span')) - .attr('id','toc__toggle'); + $clicky = jQuery(document.createElement('strong')); $header.css('cursor','pointer') .click(function () { var hidden; -- cgit v1.2.3 From c8388e443bcd0c09a0b142b31819d48abd559aa0 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 20 Apr 2012 17:20:17 +0200 Subject: made TOC togling script more generic Instead of a dedicated function to toggle the TOC we now have a function that allows to use this functionality everywhere. This will be used to toggle the sidebar in the mobile view (in an upcoming patch). Note, this required some changes to the CSS (to make it more generic). The CSS is still located in the TOC sections but should probably be moved into its own section instead. --- lib/scripts/page.js | 57 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 20 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 6e7d7faf7..84af1f18b 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -10,7 +10,7 @@ dw_page = { init: function(){ dw_page.sectionHighlight(); jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay); - dw_page.initTocToggle(); + dw_page.makeToggle('#dw__toc h3','#dw__toc > div'); }, /** @@ -93,47 +93,64 @@ dw_page = { }, /** - * Adds the toggle switch to the TOC + * Makes an element foldable by clicking its handle + * + * This is used for the TOC toggling, but can be used for other elements + * as well. A state indicator is inserted into the handle and can be styled + * by CSS. + * + * @param selector handle What should be clicked to toggle + * @param selector content This element will be toggled */ - initTocToggle: function() { - var $wrapper, $header, $clicky, $toc, $tocul, setClicky; - $wrapper = jQuery('#dw__toc'); - $header = jQuery('h3', $wrapper); - if(!$header.length) { - return; - } - $toc = jQuery('div', $wrapper).first(); - $tocul = jQuery('ul', $toc); + makeToggle: function(handle, content){ + var $handle, $content, $clicky, $child, setClicky; + $handle = jQuery(handle); + if(!$handle.length) return; + $content = jQuery(content); + if(!$content.length) return; + + // we animate the children + $child = $content.children(); + // class/display toggling setClicky = function(hiding){ if(hiding){ $clicky.html('+'); - $wrapper.addClass('close').removeClass('open'); + $handle.addClass('toggle_open'); + $handle.removeClass('toggle_close'); }else{ $clicky.html('−'); - $wrapper.addClass('open').removeClass('close'); + $handle.addClass('toggle_close'); + $handle.removeClass('toggle_open'); } }; - $clicky = jQuery(document.createElement('strong')); - $header.css('cursor','pointer') + // the state indicator + $clicky = jQuery(document.createElement('strong')) + .addClass('toggle'); + + // click function + $handle.css('cursor','pointer') .click(function () { var hidden; - // Assert that $toc instantly takes the whole TOC space - $toc.css('height', $toc.height()).show(); + // Assert that content instantly takes the whole space + $content.css('height', $content.height()).show(); - hidden = $tocul.stop(true, true).is(':hidden'); + // stop any running animation and get current state + hidden = $child.stop(true, true).is(':hidden'); + // update the state setClicky(!hidden); // Start animation and assure that $toc is hidden/visible - $tocul.dw_toggle(hidden, function () { - $toc.toggle(hidden); + $child.dw_toggle(hidden, function () { + $content.toggle(hidden); }); }) .prepend($clicky); + // initial state setClicky(); } }; -- cgit v1.2.3 From 48722ac855c79944285cbe8958fe5ed03bd835ed Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 22 Apr 2012 21:19:59 +0100 Subject: improved toc changes and sidebar toggling --- lib/scripts/page.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 84af1f18b..74dec37fb 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -116,18 +116,17 @@ dw_page = { setClicky = function(hiding){ if(hiding){ $clicky.html('+'); - $handle.addClass('toggle_open'); - $handle.removeClass('toggle_close'); + $handle.addClass('closed'); + $handle.removeClass('open'); }else{ $clicky.html('−'); - $handle.addClass('toggle_close'); - $handle.removeClass('toggle_open'); + $handle.addClass('open'); + $handle.removeClass('closed'); } }; // the state indicator - $clicky = jQuery(document.createElement('strong')) - .addClass('toggle'); + $clicky = jQuery(document.createElement('strong')); // click function $handle.css('cursor','pointer') -- cgit v1.2.3 From 688c5219ce1f6bf1dbda6e733bec881baaa24025 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 30 Jun 2012 12:03:59 +0200 Subject: fixed the toc/sidebar toggling script for real --- lib/scripts/page.js | 50 +++++++++++++++++++++++++++++++------------------- 1 file changed, 31 insertions(+), 19 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 74dec37fb..78943be7a 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -102,7 +102,7 @@ dw_page = { * @param selector handle What should be clicked to toggle * @param selector content This element will be toggled */ - makeToggle: function(handle, content){ + makeToggle: function(handle, content, state){ var $handle, $content, $clicky, $child, setClicky; $handle = jQuery(handle); if(!$handle.length) return; @@ -125,32 +125,44 @@ dw_page = { } }; - // the state indicator - $clicky = jQuery(document.createElement('strong')); + $handle[0].setState = function(state){ + var hidden; + if(!state) state = 1; - // click function - $handle.css('cursor','pointer') - .click(function () { - var hidden; + // Assert that content instantly takes the whole space + $content.css('height', $content.height()).show(); - // Assert that content instantly takes the whole space - $content.css('height', $content.height()).show(); + // stop any running animation + $child.stop(true, true); - // stop any running animation and get current state - hidden = $child.stop(true, true).is(':hidden'); + // was a state given or do we toggle? + if(state === -1) { + hidden = false; + } else if(state === 1) { + hidden = true; + } else { + hidden = $child.is(':hidden'); + } - // update the state - setClicky(!hidden); + // update the state + setClicky(!hidden); - // Start animation and assure that $toc is hidden/visible - $child.dw_toggle(hidden, function () { - $content.toggle(hidden); - }); - }) + // Start animation and assure that $toc is hidden/visible + $child.dw_toggle(hidden, function () { + $content.toggle(hidden); + }); + }; + + // the state indicator + $clicky = jQuery(document.createElement('strong')); + + // click function + $handle.css('cursor','pointer') + .click($handle[0].setState) .prepend($clicky); // initial state - setClicky(); + $handle[0].setState(state); } }; -- cgit v1.2.3