Register button event handlers in javascript and save some html code

2 files changed, 45 insertions, 33 deletions

diff --git a/program/include/rcube_template.php b/program/include/rcube_template.php
index ecb5a8942..599f30cdf 100755
--- a/program/include/rcube_template.php
+++ b/program/include/rcube_template.php
@@ -840,9 +840,9 @@ class rcube_template extends rcube_html_page
             else if (in_array($attrib['command'], $a_static_commands)) {
                 $attrib['href'] = rcmail_url($attrib['command']);
             }
-	    else if ($attrib['command'] == 'permaurl' && !empty($this->env['permaurl'])) {
-	        $attrib['href'] = $this->env['permaurl'];
-	    }
+            else if ($attrib['command'] == 'permaurl' && !empty($this->env['permaurl'])) {
+              $attrib['href'] = $this->env['permaurl'];
+            }
         }
 
         // overwrite attributes
@@ -857,35 +857,6 @@ class rcube_template extends rcube_html_page
                 $attrib['prop']
             );
         }
-        if ($command && $attrib['imageover']) {
-            $attrib['onmouseover'] = sprintf(
-                "return %s.button_over('%s','%s')",
-                JS_OBJECT_NAME,
-                $command,
-                $attrib['id']
-            );
-            $attrib['onmouseout'] = sprintf(
-                "return %s.button_out('%s','%s')",
-                JS_OBJECT_NAME,
-                $command,
-                $attrib['id']
-            );
-        }
-
-        if ($command && $attrib['imagesel']) {
-            $attrib['onmousedown'] = sprintf(
-                "return %s.button_sel('%s','%s')",
-                JS_OBJECT_NAME,
-                $command,
-                $attrib['id']
-            );
-            $attrib['onmouseup'] = sprintf(
-                "return %s.button_out('%s','%s')",
-                JS_OBJECT_NAME,
-                $command,
-                $attrib['id']
-            );
-        }
 
         $out = '';
 
diff --git a/program/js/app.js b/program/js/app.js
index b192297f7..c8a8c5875 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -142,6 +142,9 @@ function rcube_webmail()
     // find all registered gui objects
     for (var n in this.gui_objects)
       this.gui_objects[n] = rcube_find_object(this.gui_objects[n]);
+      
+    // init registered buttons
+    this.init_buttons();
 
     // tell parent window that this frame is loaded
     if (this.env.framed && parent.rcmail && parent.rcmail.set_busy)
@@ -3343,12 +3346,50 @@ function rcube_webmail()
 
   // eable/disable buttons for page shifting
   this.set_page_buttons = function()
-    {
+  {
     this.enable_command('nextpage', (this.env.pagecount > this.env.current_page));
     this.enable_command('lastpage', (this.env.pagecount > this.env.current_page));
     this.enable_command('previouspage', (this.env.current_page > 1));
     this.enable_command('firstpage', (this.env.current_page > 1));
+  };
+  
+  // set event handlers on registered buttons
+  this.init_buttons = function()
+  {
+    for (var cmd in this.buttons) {
+      if (typeof cmd != 'string')
+        continue;
+      
+      for (var i=0; i< this.buttons[cmd].length; i++) {
+        var prop = this.buttons[cmd][i];
+        var elm = document.getElementById(prop.id);
+        if (!elm)
+          continue;
+
+        var preload = false;
+        if (prop.type == 'image') {
+          elm = elm.parentNode;
+          preload = true;
+          new Image().src = prop.sel;
+        }
+        
+        elm._command = cmd;
+        elm._id = prop.id;
+        if (prop.sel) {
+          elm.onmousedown = function(e){ return rcmail.button_sel(this._command, this._id); };
+          elm.onmouseup = function(e){ return rcmail.button_out(this._command, this._id); };
+          if (preload)
+            new Image().src = prop.sel;
+        }
+        if (prop.over) {
+          elm.onmouseover = function(e){ return rcmail.button_over(this._command, this._id); };
+          elm.onmouseout = function(e){ return rcmail.button_out(this._command, this._id); };
+          if (preload)
+            new Image().src = prop.over;
+        }
+      }
     }
+  };
 
   // set button to a specific state
   this.set_button = function(command, state)