From f48fbadf2218e4ad1df6909374c30bddbb7a24bb Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 19 Aug 2011 11:24:07 +0200 Subject: added missing file yeah, yeah I know... --- lib/scripts/page.js | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 lib/scripts/page.js (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js new file mode 100644 index 000000000..189c1f148 --- /dev/null +++ b/lib/scripts/page.js @@ -0,0 +1,115 @@ +/** + * Page behaviours + * + * This class adds various behaviours to the rendered page + */ +dw_page = { + /** + * initialize page behaviours + */ + init: function(){ + dw_page.sectionHighlight(); + jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay); + }, + + /** + * Highlight the section when hovering over the appropriate section edit button + * + * @author Andreas Gohr + */ + sectionHighlight: function() { + jQuery('form.btn_secedit') + .mouseover(function(e){ + var tgt = this.parentNode; + var nr = tgt.className.match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2]; + do { + tgt = tgt.previousSibling; + } while (tgt !== null && typeof tgt.tagName === 'undefined'); + if (tgt === null) return; + while(typeof tgt.className === 'undefined' || + tgt.className.match('(\\s+|^)sectionedit' + nr + '(\\s+|$)') === null) { + if (typeof tgt.className !== 'undefined') { + jQuery(tgt).addClass('section_highlight'); + } + tgt = (tgt.previousSibling !== null) ? tgt.previousSibling : tgt.parentNode; + } + + jQuery(tgt).addClass('section_highlight'); + }) + .mouseout(function(e){ + jQuery('.section_highlight').removeClass('section_highlight'); + }); + }, + + /** + * Create/get a insitu popup used by the footnotes + * + * @param target - the DOM element at which the popup should be aligned at + * @param popup_id - the ID of the (new) DOM popup + * @return the Popup JQuery object + */ + insituPopup: function(target, popup_id) { + // get or create the popup div + var $fndiv = jQuery('#popup_id'); + + // popup doesn't exist, yet -> create it + if(!$fndiv.length){ + $fndiv = jQuery(document.createElement('div')) + .attr('id', popup_id) + .addClass('insitu-footnote JSpopup') + .mouseout(function(e){ + // autoclose on mouseout - ignoring bubbled up events + //FIXME can this made simpler in jQuery? + var p = e.relatedTarget || e.toElement; + while (p && p !== this) { + p = p.parentNode; + } + if (p === this) { + return; + } + jQuery(this).hide(); + }); + + jQuery('div.dokuwiki:first').append($fndiv); + } + + $fndiv.position({ + my: 'left top', + at: 'left center', + of: target + }); + + $fndiv.hide(); + return $fndiv; + }, + + /** + * Display an insitu footnote popup + * + * @author Andreas Gohr + * @author Chris Smith + */ + footnoteDisplay: function(e){ + var $fndiv = dw_page.insituPopup(e.target, 'insitu__fn'); + + // locate the footnote anchor element + var $a = jQuery("#fn__" + e.target.id.substr(5)); + if (!$a.length){ return; } + + // anchor parent is the footnote container, get its innerHTML + var content = new String ($a.parent().parent().html()); + + // strip the leading content anchors and their comma separators + content = content.replace(/.*<\/sup>/gi, ''); + content = content.replace(/^\s+(,\s+)+/,''); + + // prefix ids on any elements with "insitu__" to ensure they remain unique + content = content.replace(/\bid=(['"])([^"']+)\1/gi,'id="insitu__$2'); + + // now put the content into the wrapper + $fndiv.html(content); + $fndiv.show(); + } +}; + +jQuery(dw_page.init); -- cgit v1.2.3 From eea912192ec9661fe82639db9442586954f6932e Mon Sep 17 00:00:00 2001 From: Adrian Lang Date: Fri, 19 Aug 2011 12:10:36 +0200 Subject: Fix popup DOM element sharing, simplify event handling --- lib/scripts/page.js | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 189c1f148..f5d84e239 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -50,36 +50,24 @@ dw_page = { */ insituPopup: function(target, popup_id) { // get or create the popup div - var $fndiv = jQuery('#popup_id'); + var $fndiv = jQuery('#' + popup_id); // popup doesn't exist, yet -> create it - if(!$fndiv.length){ + if($fndiv.length === 0){ $fndiv = jQuery(document.createElement('div')) .attr('id', popup_id) .addClass('insitu-footnote JSpopup') - .mouseout(function(e){ - // autoclose on mouseout - ignoring bubbled up events - //FIXME can this made simpler in jQuery? - var p = e.relatedTarget || e.toElement; - while (p && p !== this) { - p = p.parentNode; - } - if (p === this) { - return; - } - jQuery(this).hide(); - }); - + .mouseleave(function () {jQuery(this).hide();}); jQuery('div.dokuwiki:first').append($fndiv); } - $fndiv.position({ + // position() does not support hidden elements + $fndiv.show().position({ my: 'left top', at: 'left center', of: target - }); + }).hide(); - $fndiv.hide(); return $fndiv; }, @@ -90,7 +78,7 @@ dw_page = { * @author Chris Smith */ footnoteDisplay: function(e){ - var $fndiv = dw_page.insituPopup(e.target, 'insitu__fn'); + var $fndiv = dw_page.insituPopup(this, 'insitu__fn'); // locate the footnote anchor element var $a = jQuery("#fn__" + e.target.id.substr(5)); -- cgit v1.2.3 From 2c5ba7b2e80436af80001c436908217885ce4be3 Mon Sep 17 00:00:00 2001 From: Adrian Lang Date: Fri, 19 Aug 2011 13:03:38 +0200 Subject: jQuerify edit section highlighting --- lib/scripts/page.js | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index f5d84e239..05c5ece20 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -19,24 +19,20 @@ dw_page = { */ sectionHighlight: function() { jQuery('form.btn_secedit') - .mouseover(function(e){ - var tgt = this.parentNode; - var nr = tgt.className.match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2]; - do { - tgt = tgt.previousSibling; - } while (tgt !== null && typeof tgt.tagName === 'undefined'); - if (tgt === null) return; - while(typeof tgt.className === 'undefined' || - tgt.className.match('(\\s+|^)sectionedit' + nr + '(\\s+|$)') === null) { - if (typeof tgt.className !== 'undefined') { - jQuery(tgt).addClass('section_highlight'); - } - tgt = (tgt.previousSibling !== null) ? tgt.previousSibling : tgt.parentNode; - } + .mouseover(function(){ + var $tgt = jQuery(this).parent(); + var nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2]; - jQuery(tgt).addClass('section_highlight'); + // 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(); + $tgt.addClass('section_highlight'); + } }) - .mouseout(function(e){ + .mouseout(function(){ jQuery('.section_highlight').removeClass('section_highlight'); }); }, -- cgit v1.2.3 From ba72dce1b47b01a626df51666b84593d8cbc1050 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sun, 21 Aug 2011 14:33:07 +0200 Subject: fixed TOC-Bug and moved TOC behaviour to page.js FS#2314 --- lib/scripts/page.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index 05c5ece20..f3d35609d 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -10,6 +10,7 @@ dw_page = { init: function(){ dw_page.sectionHighlight(); jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay); + dw_page.initTocToggle(); }, /** @@ -93,7 +94,38 @@ dw_page = { // now put the content into the wrapper $fndiv.html(content); $fndiv.show(); + }, + + /** + * Adds the toggle switch to the TOC + */ + initTocToggle: function() { + var $header = jQuery('#toc__header'); + if(!$header.length) return; + var $toc = jQuery('#toc__inside'); + + var setClicky = function(){ + if($toc.css('display') == 'none'){ + $clicky.html('+'); + $clicky[0].className = 'toc_open'; + }else{ + $clicky.html('−'); + $clicky[0].className = 'toc_close'; + } + }; + + var $clicky = jQuery(document.createElement('span')) + .attr('id','toc__toggle') + $header.css('cursor','pointer') + .click(function(){ + $toc.slideToggle(200,setClicky); + }) + .prepend($clicky); + + setClicky(); } + + }; jQuery(dw_page.init); -- cgit v1.2.3 From 10ecffd81cdbfc2eb72dda53c4039701687aae33 Mon Sep 17 00:00:00 2001 From: Adrian Lang Date: Mon, 22 Aug 2011 14:55:02 +0200 Subject: page.js: Improve footnote cleaning regex, cleaner toc toggling * elements are only removed from the start of a footnote * the TOC wrapper instantly gets the target size to reduce layout jumping --- lib/scripts/page.js | 60 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 35 insertions(+), 25 deletions(-) (limited to 'lib/scripts/page.js') diff --git a/lib/scripts/page.js b/lib/scripts/page.js index f3d35609d..e4033b76d 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -21,8 +21,8 @@ dw_page = { sectionHighlight: function() { jQuery('form.btn_secedit') .mouseover(function(){ - var $tgt = jQuery(this).parent(); - var nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2]; + var $tgt = jQuery(this).parent(), + nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2]; // Walk the DOM tree up (first previous siblings, then parents) // until boundary element @@ -74,38 +74,38 @@ dw_page = { * @author Andreas Gohr * @author Chris Smith */ - footnoteDisplay: function(e){ - var $fndiv = dw_page.insituPopup(this, 'insitu__fn'); + footnoteDisplay: function () { + var content = jQuery(jQuery(this).attr('href')) // Footnote text anchor + .closest('div.fn').html(); - // locate the footnote anchor element - var $a = jQuery("#fn__" + e.target.id.substr(5)); - if (!$a.length){ return; } - - // anchor parent is the footnote container, get its innerHTML - var content = new String ($a.parent().parent().html()); + if (content === null){ + return; + } // strip the leading content anchors and their comma separators - content = content.replace(/.*<\/sup>/gi, ''); - content = content.replace(/^\s+(,\s+)+/,''); + content = content.replace(/((^|\s*,\s*).*?<\/sup>)+\s*/gi, ''); // prefix ids on any elements with "insitu__" to ensure they remain unique content = content.replace(/\bid=(['"])([^"']+)\1/gi,'id="insitu__$2'); // now put the content into the wrapper - $fndiv.html(content); - $fndiv.show(); + dw_page.insituPopup(this, 'insitu__fn').html(content).show(); }, /** * Adds the toggle switch to the TOC */ initTocToggle: function() { - var $header = jQuery('#toc__header'); - if(!$header.length) return; - var $toc = jQuery('#toc__inside'); + var $header, $clicky, $toc, $tocul, setClicky; + $header = jQuery('#toc__header'); + if(!$header.length) { + return; + } + $toc = jQuery('#toc__inside'); + $tocul = $toc.children('ul.toc'); - var setClicky = function(){ - if($toc.css('display') == 'none'){ + setClicky = function(hiding){ + if(hiding){ $clicky.html('+'); $clicky[0].className = 'toc_open'; }else{ @@ -114,18 +114,28 @@ dw_page = { } }; - var $clicky = jQuery(document.createElement('span')) - .attr('id','toc__toggle') + $clicky = jQuery(document.createElement('span')) + .attr('id','toc__toggle'); $header.css('cursor','pointer') - .click(function(){ - $toc.slideToggle(200,setClicky); + .click(function () { + var hidden; + + // Assert that $toc instantly takes the whole TOC space + $toc.css('height', $toc.height()).show(); + + hidden = $tocul.stop(true, true).is(':hidden'); + + setClicky(!hidden); + + // Start animation and assure that $toc is hidden/visible + $tocul.dw_toggle(hidden, function () { + $toc.toggle(hidden); + }); }) .prepend($clicky); setClicky(); } - - }; jQuery(dw_page.init); -- cgit v1.2.3