highlight section on section edit button mouseover

Ignore-this: 128d5873729a0a00558465b45d5d9f58

Some people seem to have problems to see which section will be edited when
using a section editing button. This patch adds a litle bit JavaScript magic
to highlight the edited section to be, when hovering over a section button.

darcs-hash:20090214161135-7ad00-59db7d9185784ba1fec2f2c2da30c6e64ae1ccc3.gz

2 files changed, 32 insertions, 2 deletions

diff --git a/lib/scripts/script.js b/lib/scripts/script.js
index 2421f3577..5ef9aef85 100644
--- a/lib/scripts/script.js
+++ b/lib/scripts/script.js
@@ -520,7 +520,7 @@ addInitEvent(function(){
 /**
  * Display error for Windows Shares on browsers other than IE
  *
- * Michael Klier <chi@chimeric.de>
+ * @author Michael Klier <chi@chimeric.de>
  */
 function checkWindowsShares() {
     var elems = getElementsByClass('windows',document,'a');
@@ -539,8 +539,34 @@ function checkWindowsShares() {
 /**
  * Add the event handler for the Windows Shares check
  *
- * Michael Klier <chi@chimeric.de>
+ * @author Michael Klier <chi@chimeric.de>
  */
 addInitEvent(function(){
     checkWindowsShares();
 });
+
+/**
+ * Highlight the section when hovering over the appropriate section edit button
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+addInitEvent(function(){
+    var btns = getElementsByClass('btn_secedit',document,'form');
+    for(var i=0; i<btns.length; i++){
+        addEvent(btns[i],'mouseover',function(e){
+            var tgt = e.target;
+            if(tgt.form) tgt = tgt.form;
+            tgt = tgt.parentNode.previousSibling;
+            if(tgt.nodeName != "DIV") tgt = tgt.previousSibling;
+            if(tgt.nodeName != "DIV") return;
+            tgt.className += ' section_highlight';
+        });
+
+        addEvent(btns[i],'mouseout',function(e){
+            var secs = getElementsByClass('section_highlight',document,'div');
+            for(var j=0; j<secs.length; j++){
+                secs[j].className = secs[j].className.replace(/ section_highlight/,'');
+            }
+        });
+    }
+});
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index d8e4ddad9..0d84d94ab 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -711,6 +711,10 @@ div.dokuwiki ul.search_quickhits li {
   width: 30%;
 }
 
+div.dokuwiki div.section_highlight {
+  background-color: __background_alt__;
+}
+
 /* ------------------ Additional ---------------------- */
 
 div.footerinc {