- Resize editor after switching to html mode

- create toggle-editor command in app.js, to make possible binding to this command
- Code cleanup in rcmail_ui (moved compose-related functions into rcmail_ui)

4 files changed, 168 insertions, 158 deletions

diff --git a/program/js/app.js b/program/js/app.js
index 3543ed3ce..a3b2b27ac 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -225,7 +225,7 @@ function rcube_webmail()
           }
         }
         else if (this.env.action == 'compose') {
-          this.enable_command('send-attachment', 'remove-attachment', 'send', true);
+          this.enable_command('send-attachment', 'remove-attachment', 'send', 'toggle-editor', true);
 
           if (this.env.spellcheck) {
             this.env.spellcheck.spelling_state_observer = function(s){ ref.set_spellcheck_state(s); };
@@ -321,7 +321,7 @@ function rcube_webmail()
         }
         else if (this.env.action=='edit-identity' || this.env.action=='add-identity') {
           this.enable_command('add', this.env.identities_level < 2);
-          this.enable_command('save', 'delete', 'edit', true);
+          this.enable_command('save', 'delete', 'edit', 'toggle-editor', true);
         }
         else if (this.env.action=='folders')
           this.enable_command('subscribe', 'unsubscribe', 'create-folder', 'rename-folder', 'delete-folder', 'enable-threading', 'disable-threading', true);
@@ -978,7 +978,6 @@ function rcube_webmail()
       // unified command call (command name == function name)
       default:
         var func = command.replace('-', '_');
-        alert(func);
         if (this[func] && typeof this[func] == 'function')
           this[func](props);
         break;
@@ -2808,6 +2807,30 @@ function rcube_webmail()
     return true;
   };
 
+  this.toggle_editor = function(props)
+  {
+    if (props.mode == 'html') {
+      this.display_spellcheck_controls(false);
+      this.plain2html($('#'+props.id).val(), props.id);
+      tinyMCE.execCommand('mceAddControl', false, props.id);
+    }
+    else {
+      var thisMCE = tinyMCE.get(props.id),
+        existingHtml = thisMCE.getContent();
+
+      if (existingHtml) {
+        if (!confirm(this.get_label('editorwarning'))) {
+          return false;
+	    }
+        this.html2plain(existingHtml, props.id);
+      }
+      tinyMCE.execCommand('mceRemoveControl', false, props.id);
+      this.display_spellcheck_controls(true);
+    }
+
+    return true;
+  };
+
   this.stop_spellchecking = function()
   {
     if (this.env.spellcheck && !this.spellcheck_ready) {
@@ -5116,3 +5139,4 @@ function rcube_webmail()
 rcube_webmail.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
 rcube_webmail.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
 rcube_webmail.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;
+
diff --git a/program/js/editor.js b/program/js/editor.js
index a5e3af3d5..fd128cb8f 100644
--- a/program/js/editor.js
+++ b/program/js/editor.js
@@ -95,7 +95,6 @@ function rcmail_editor_tabindex()
 // switch html/plain mode
 function rcmail_toggle_editor(select, textAreaId, flagElement)
 {
-  var composeElement = document.getElementById(textAreaId);
   var flag, ishtml;
 
   if (select.tagName != 'SELECT')
@@ -103,32 +102,17 @@ function rcmail_toggle_editor(select, textAreaId, flagElement)
   else
     ishtml = select.value == 'html';
 
-  if (ishtml) {
-    rcmail.display_spellcheck_controls(false);
+  var res = rcmail.command('toggle-editor', {id:textAreaId, mode:ishtml?'html':'plain'});
 
-    rcmail.plain2html(composeElement.value, textAreaId);
-    tinyMCE.execCommand('mceAddControl', false, textAreaId);
+  if (ishtml) {
     // #1486593
     setTimeout("rcmail_editor_tabindex();", 500);
     if (flagElement && (flag = rcube_find_object(flagElement)))
       flag.value = '1';
   }
   else {
-    var thisMCE = tinyMCE.get(textAreaId);
-    var existingHtml = thisMCE.getContent();
-
-    if (existingHtml) {
-      if (!confirm(rcmail.get_label('editorwarning'))) {
-        if (select.tagName == 'SELECT')
-	      select.value = 'html';
-        return false;
-	  }
-
-      rcmail.html2plain(existingHtml, textAreaId);
-    }
-
-    tinyMCE.execCommand('mceRemoveControl', false, textAreaId);
-    rcmail.display_spellcheck_controls(true);
+    if (!res && select.tagName == 'SELECT')
+	  select.value = 'html';
     if (flagElement && (flag = rcube_find_object(flagElement)))
       flag.value = '0';
   }
diff --git a/skins/default/functions.js b/skins/default/functions.js
index 3a97448ac..258742e69 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -22,129 +22,7 @@ function rcube_show_advanced(visible)
 }
 
 /**
- * Mail Composing
- */
-
-function rcmail_show_header_form(id)
-{
-  var row, s,
-    link = document.getElementById(id + '-link');
-
-  if ((s = rcmail_next_sibling(link)))
-    s.style.display = 'none';
-  else if ((s = rcmail_prev_sibling(link)))
-    s.style.display = 'none';
-    
-  link.style.display = 'none';
-
-  if ((row = document.getElementById('compose-' + id))) {
-    var div = document.getElementById('compose-div'),
-      headers_div = document.getElementById('compose-headers-div');
-    row.style.display = (document.all && !window.opera) ? 'block' : 'table-row';
-    div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
-    rcmail_resize_compose_body();
-  }
-
-  return false;
-}
-
-function rcmail_hide_header_form(id)
-{
-  var row, ns,
-    link = document.getElementById(id + '-link'),
-    parent = link.parentNode,
-    links = parent.getElementsByTagName('a');
-
-  link.style.display = '';
-
-  for (var i=0; i<links.length; i++)
-    if (links[i].style.display != 'none')
-      for (var j=i+1; j<links.length; j++)
-	    if (links[j].style.display != 'none')
-          if ((ns = rcmail_next_sibling(links[i]))) {
-	        ns.style.display = '';
-	        break;
-	      }
-
-  document.getElementById('_' + id).value = '';
-
-  if ((row = document.getElementById('compose-' + id))) {
-    var div = document.getElementById('compose-div'),
-      headers_div = document.getElementById('compose-headers-div');
-    row.style.display = 'none';
-    div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
-    rcmail_resize_compose_body();
-  }
-
-  return false;
-}
-
-function rcmail_next_sibling(elm)
-{
-  var ns = elm.nextSibling;
-  while (ns && ns.nodeType == 3)
-    ns = ns.nextSibling;
-  return ns;
-}
-
-function rcmail_prev_sibling(elm)
-{
-  var ps = elm.previousSibling;
-  while (ps && ps.nodeType == 3)
-    ps = ps.previousSibling;
-  return ps;
-}
-
-function rcmail_init_compose_form()
-{
-  var cc_field = document.getElementById('_cc'),
-    bcc_field = document.getElementById('_bcc'),
-    div = document.getElementById('compose-div'),
-    headers_div = document.getElementById('compose-headers-div');
-
-  if (cc_field && cc_field.value != '')
-    rcmail_show_header_form('cc');
-
-  if (bcc_field && bcc_field.value != '')
-    rcmail_show_header_form('bcc');
-
-  // prevent from form data loss when pressing ESC key in IE
-  if (bw.ie) {
-    var form = rcube_find_object('form');
-    form.onkeydown = function (e) {
-      if (rcube_event.get_keycode(e) == 27)
-        rcube_event.cancel(e);
-    };
-  }
-
-  $(window).resize(function() {
-    rcmail_resize_compose_body();
-  });
-
-  $('#compose-container').resize(function() {
-    rcmail_resize_compose_body();
-  });
-
-  div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
-  $(window).resize();
-}
-
-function rcmail_resize_compose_body(elem)
-{
-  var ed, div = $('#compose-div'), w = div.width(), h = div.height();
-  w = w-4;
-  h = h-25;
-
-  $('#compose-body').width(w-(bw.ie || bw.opera || bw.safari ? 2 : 0)+'px').height(h+'px');
-
-  if (window.tinyMCE && tinyMCE.get('compose-body')) {
-    $('#compose-body_tbl').width((w+4)+'px').height('');
-    $('#compose-body_ifr').width((w+2)+'px').height((h-54)+'px');
-  }
-}
-
-/**
- * Mailbox view
+ * Mail UI
  */
 
 function rcube_mail_ui()
@@ -160,7 +38,7 @@ function rcube_mail_ui()
     composemenu:'composeoptionsmenu',
     uploadform:'attachment-form'
   };
-  
+
   var obj;
   for (var k in this.popupmenus) {
     obj = $('#'+this.popupmenus[k])
@@ -181,7 +59,7 @@ show_popupmenu: function(obj, refname, show, above)
     var pos = $(ref).offset();
     obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
   }
-  
+
   obj[show?'show':'hide']();
 },
 
@@ -238,15 +116,15 @@ show_searchmenu: function(show)
   }
   this.searchmenu[show?'show':'hide']();
 },
- 
+
 set_searchmod: function(elem)
 {
   if (!rcmail.env.search_mods)
     rcmail.env.search_mods = {};
-  
+
   if (!rcmail.env.search_mods[rcmail.env.mailbox])
     rcmail.env.search_mods[rcmail.env.mailbox] = rcube_clone_object(rcmail.env.search_mods['*']);
-  
+
   if (!elem.checked)
     delete(rcmail.env.search_mods[rcmail.env.mailbox][elem.value]);
   else
@@ -417,10 +295,130 @@ switch_preview_pane: function(elem)
     rcmail.show_contentframe(false);
     rcmail.http_post('save-pref', '_name=preview_pane&_value=0');
   }
+},
+
+/* Message composing */
+init_compose_form: function()
+{
+  var cc_field = document.getElementById('_cc'),
+    bcc_field = document.getElementById('_bcc'),
+    div = document.getElementById('compose-div'),
+    headers_div = document.getElementById('compose-headers-div');
+
+  if (cc_field && cc_field.value != '')
+    rcmail_show_header_form('cc');
+
+  if (bcc_field && bcc_field.value != '')
+    rcmail_show_header_form('bcc');
+
+  // prevent from form data loss when pressing ESC key in IE
+  if (bw.ie) {
+    var form = rcube_find_object('form');
+    form.onkeydown = function (e) {
+      if (rcube_event.get_keycode(e) == 27)
+        rcube_event.cancel(e);
+    };
+  }
+
+  $(window).resize(function() {
+    rcmail_ui.resize_compose_body();
+  });
+
+  $('#compose-container').resize(function() {
+    rcmail_ui.resize_compose_body();
+  });
+
+  div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
+  $(window).resize();
+},
+
+resize_compose_body: function()
+{
+  var ed, div = $('#compose-div'), w = div.width(), h = div.height();
+  w = w-4;
+  h = h-25;
+
+  $('#compose-body').width(w-(bw.ie || bw.opera || bw.safari ? 2 : 0)+'px').height(h+'px');
+
+  if (window.tinyMCE && tinyMCE.get('compose-body')) {
+    $('#compose-body_tbl').width((w+4)+'px').height('');
+    $('#compose-body_ifr').width((w+2)+'px').height((h-54)+'px');
+  }
+},
+
+show_header_form: function(id)
+{
+  var row, s,
+    link = document.getElementById(id + '-link');
+
+  if ((s = this.next_sibling(link)))
+    s.style.display = 'none';
+  else if ((s = this.prev_sibling(link)))
+    s.style.display = 'none';
+
+  link.style.display = 'none';
+
+  if ((row = document.getElementById('compose-' + id))) {
+    var div = document.getElementById('compose-div'),
+      headers_div = document.getElementById('compose-headers-div');
+    row.style.display = (document.all && !window.opera) ? 'block' : 'table-row';
+    div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
+    this.resize_compose_body();
+  }
+
+  return false;
+},
+
+hide_header_form: function(id)
+{
+  var row, ns,
+    link = document.getElementById(id + '-link'),
+    parent = link.parentNode,
+    links = parent.getElementsByTagName('a');
+
+  link.style.display = '';
+
+  for (var i=0; i<links.length; i++)
+    if (links[i].style.display != 'none')
+      for (var j=i+1; j<links.length; j++)
+	    if (links[j].style.display != 'none')
+          if ((ns = this.next_sibling(links[i]))) {
+	        ns.style.display = '';
+	        break;
+	      }
+
+  document.getElementById('_' + id).value = '';
+
+  if ((row = document.getElementById('compose-' + id))) {
+    var div = document.getElementById('compose-div'),
+      headers_div = document.getElementById('compose-headers-div');
+    row.style.display = 'none';
+    div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px';
+    this.resize_compose_body();
+  }
+
+  return false;
+},
+
+next_sibling: function(elm)
+{
+  var ns = elm.nextSibling;
+  while (ns && ns.nodeType == 3)
+    ns = ns.nextSibling;
+  return ns;
+},
+
+prev_sibling: function(elm)
+{
+  var ps = elm.previousSibling;
+  while (ps && ps.nodeType == 3)
+    ps = ps.previousSibling;
+  return ps;
 }
 
 };
 
+
 var rcmail_ui;
 
 function rcube_init_mail_ui()
@@ -436,7 +434,11 @@ function rcube_init_mail_ui()
     rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui);
     rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui);
     rcmail.addEventListener('aftersend-attachment', 'show_uploadform', rcmail_ui);
+    rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body', rcmail_ui);
     rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
+
+    if (rcmail.env.action == 'compose')
+      rcmail_ui.init_compose_form();
   }
 }
 
diff --git a/skins/default/templates/compose.html b/skins/default/templates/compose.html
index 96f771f8f..bd5860372 100644
--- a/skins/default/templates/compose.html
+++ b/skins/default/templates/compose.html
@@ -13,7 +13,7 @@
 }
 </style>
 </head>
-<body onload="rcmail_init_compose_form(); rcube_init_mail_ui()">
+<body onload="rcube_init_mail_ui()">
 
 <roundcube:include file="/includes/taskbar.html" />
 <roundcube:include file="/includes/header.html" />
@@ -55,11 +55,11 @@
                 <roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" />
             </td>
             <td id="formlinks">
-		        <a href="#cc" onclick="return rcmail_show_header_form('cc')" id="cc-link"><roundcube:label name="addcc" /></a>
+		        <a href="#cc" onclick="return rcmail_ui.show_header_form('cc')" id="cc-link"><roundcube:label name="addcc" /></a>
 		        <span class="separator">|</span>
-		        <a href="#bcc" onclick="return rcmail_show_header_form('bcc')" id="bcc-link"><roundcube:label name="addbcc" /></a>
+		        <a href="#bcc" onclick="return rcmail_ui.show_header_form('bcc')" id="bcc-link"><roundcube:label name="addbcc" /></a>
 		        <span class="separator">|</span>
-		        <a href="#reply-to" onclick="return rcmail_show_header_form('replyto')" id="replyto-link"><roundcube:label name="addreplyto" /></a>
+		        <a href="#reply-to" onclick="return rcmail_ui.show_header_form('replyto')" id="replyto-link"><roundcube:label name="addreplyto" /></a>
             </td>
 	    </tr><tr>
 		    <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td>
@@ -68,7 +68,7 @@
             </td>
 	    </tr><tr id="compose-cc">
 		    <td class="title top">
-                <a href="#cc" onclick="return rcmail_hide_header_form('cc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
+                <a href="#cc" onclick="return rcmail_ui.hide_header_form('cc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
 		        <label for="_cc"><roundcube:label name="cc" /></label>
             </td>
 		    <td colspan="2" class="editfield">
@@ -76,7 +76,7 @@
             </td>
 	    </tr><tr id="compose-bcc">
 		    <td class="title top">
-                <a href="#bcc" onclick="return rcmail_hide_header_form('bcc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
+                <a href="#bcc" onclick="return rcmail_ui.hide_header_form('bcc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
 		        <label for="_bcc"><roundcube:label name="bcc" /></label>
             </td>
 		    <td colspan="2" class="editfield">
@@ -84,7 +84,7 @@
             </td>
 	    </tr><tr id="compose-replyto">
 		    <td class="title top">
-                <a href="#replyto" onclick="return rcmail_hide_header_form('replyto');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
+                <a href="#replyto" onclick="return rcmail_ui.hide_header_form('replyto');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a>
 		        <label for="_replyto"><roundcube:label name="replyto" /></label>
             </td>
 		    <td colspan="2" class="editfield">