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

1 files changed, 18 insertions, 15 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();
             });
     },