#2541, alter section highlighting to insert a container into the DOM to hold the elements being highlighted & later remove it

4 files changed, 30 insertions, 21 deletions

diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index b8e83cb0c..4ab0bf9b5 100644
--- a/lib/scripts/page.js
+++ b/lib/scripts/page.js
@@ -22,24 +22,27 @@ dw_page = {
         jQuery('form.btn_secedit')
             .mouseover(function(){
                 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
-                while($tgt.length > 0 && !$tgt.hasClass('sectionedit' + nr)) {
-                    // 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');
+                    nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2],
+                    $highlight = jQuery(),                                             // holder for elements in the section to be highlighted
+                    $highlightWrap = jQuery('<div class="section_highlight"></div>');  // section highlight wrapper
+
+                // Walk the dom tree in reverse to find the sibling which is or contains the section edit marker
+                while($tgt.length > 0 && !($tgt.hasClass('sectionedit' + nr) || $tgt.find('.sectionedit' + nr).length)) {
+                    $tgt = $tgt.prev();
+                    $highlight = $highlight.add($tgt);
                 }
+              // insert the section highlight wrapper before the last element added to $highlight
+              $highlight.filter(':last').before($highlightWrap);
+              // and move the elements to be highlighted inside the section highlight wrapper
+              $highlight.detach().appendTo($highlightWrap);
             })
             .mouseout(function(){
-                jQuery('.section_highlight').removeClass('section_highlight');
+                // find the section highlight wrapper...
+                var $highlightWrap = jQuery('.section_highlight');
+                // ...move its children in front of it (as siblings)...
+                $highlightWrap.before($highlightWrap.children().detach());
+                // ...and remove the section highlight wrapper
+                $highlightWrap.detach();
             });
     },
 
diff --git a/lib/tpl/dokuwiki/css/_edit.css b/lib/tpl/dokuwiki/css/_edit.css
index e4182774e..bae69ad96 100644
--- a/lib/tpl/dokuwiki/css/_edit.css
+++ b/lib/tpl/dokuwiki/css/_edit.css
@@ -140,8 +140,10 @@ div.picker button.toolbutton {
 }
 /* style for section highlighting (only sections below headings) */
 .dokuwiki div.section_highlight {
-    margin: -3em -1em -.01em -1em; /* negative side margin = side padding + side border */
-    padding: 3em .5em .01em .5em;
+    margin-left: -1em; /* negative side margin = side padding + side border */
+    margin-right: -1em; /* negative side margin = side padding + side border */
+    padding-left: .5em;
+    padding-right: .5em;
     border: solid __background_alt__;
     border-width: 0 .5em;
 }
diff --git a/lib/tpl/dokuwiki/css/design.css b/lib/tpl/dokuwiki/css/design.css
index 501e0a613..87610663d 100644
--- a/lib/tpl/dokuwiki/css/design.css
+++ b/lib/tpl/dokuwiki/css/design.css
@@ -421,8 +421,10 @@
 }
 
 .dokuwiki div.section_highlight {
-    margin: -3em -2em -.01em -2em;
-    padding: 3em 1em .01em 1em;
+    margin-left:  -2em;
+    margin-right: -2em;
+    padding-left: 1em;
+    padding-right: 1em;
     border-width: 0 1em;
 }
 [dir=rtl] .dokuwiki div.section_highlight {
diff --git a/lib/tpl/dokuwiki/css/mobile.css b/lib/tpl/dokuwiki/css/mobile.css
index cc61ab06c..7f106b046 100644
--- a/lib/tpl/dokuwiki/css/mobile.css
+++ b/lib/tpl/dokuwiki/css/mobile.css
@@ -92,8 +92,10 @@
 
 /* _edit */
 .dokuwiki div.section_highlight {
-    margin: -3em -1em -.01em -1em;
-    padding: 3em .5em .01em .5em;
+    margin-left: -1em;
+    margin-right: -1em;
+    padding-left: .5em;
+    padding-right: .5em;
     border-width: 0 .5em;
 }
 .dokuwiki div.preview {