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 From 9f6d88deb91f2a191f2d1ef5c10ce42afead458f Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 1 Jul 2012 14:05:20 +0100 Subject: changed 'height' in JS to 'min-height' --- lib/scripts/page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 78943be7a..728887687 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -130,7 +130,7 @@ dw_page = { if(!state) state = 1; // Assert that content instantly takes the whole space - $content.css('height', $content.height()).show(); + $content.css('min-height', $content.height()).show(); // stop any running animation $child.stop(true, true); -- cgit v1.2.3 From e260f93b6cea05bc39bbd77b9db5bdc0c2c424bf Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Thu, 5 Jul 2012 22:58:24 +0100 Subject: xml compatibility fixes (mainly entities to unicode conversions) --- lib/scripts/page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 728887687..74aca9c06 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -119,7 +119,7 @@ dw_page = { $handle.addClass('closed'); $handle.removeClass('open'); }else{ - $clicky.html('−'); + $clicky.html('−'); $handle.addClass('open'); $handle.removeClass('closed'); } -- cgit v1.2.3 From ae22dee70061990f256be2671c0f585a572ce712 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 28 Jul 2012 12:29:24 +0200 Subject: remove min-height after toggling FS#2555 --- lib/scripts/page.js | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 74aca9c06..5ac81f33b 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -150,6 +150,7 @@ dw_page = { // Start animation and assure that $toc is hidden/visible $child.dw_toggle(hidden, function () { $content.toggle(hidden); + $content.css('min-height',''); // remove min-height again }); }; -- cgit v1.2.3 From 4802becf985a7e314243b0c4d0a30bd7f906d078 Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Sun, 9 Sep 2012 18:44:16 +0200 Subject: Fix section edit highlighting when the start marker is hidden This fixes the section edit highlighting when the start marker (normally a heading) is inside other HTML elements like a div from the wrap plugin. --- lib/scripts/page.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 5ac81f33b..b8e83cb0c 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -27,9 +27,14 @@ dw_page = { // Walk the DOM tree up (first previous siblings, then parents) // until boundary element while($tgt.length > 0 && !$tgt.hasClass('sectionedit' + nr)) { - // $.last gives the DOM-ordered last element: - // prev if present, else parent. - $tgt = $tgt.prev().add($tgt.parent()).last(); + // go down when the sectionedit begin marker is below $tgt + if ($tgt.find('.sectionedit' + nr).length > 0) { + $tgt = $tgt.children().last(); + } else { + // $.last gives the DOM-ordered last element: + // prev if present, else parent. + $tgt = $tgt.prev().add($tgt.parent()).last(); + } $tgt.addClass('section_highlight'); } }) -- cgit v1.2.3