- Resize editor after switching to html mode - create toggle-editor command...

alecpl

2010-06-30 3940ba65be1993c4a2c2be4599f53d3018228783

- 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)

 program/js/app.js

@@ -225,7 +225,7 @@
          }
        }
        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 @@
        }
        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 @@
      // 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;
@@ -2804,6 +2803,30 @@
    // move body from html editor to textarea (just to be sure, #1485860)
    if (window.tinyMCE && tinyMCE.get(this.env.composebody))
      tinyMCE.triggerSave();

    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;
  };
@@ -5116,3 +5139,4 @@
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;


 program/js/editor.js

@@ -95,7 +95,6 @@
// 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 @@
  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')
    if (!res && select.tagName == 'SELECT')
          select.value = 'html';
        return false;
      }

      rcmail.html2plain(existingHtml, textAreaId);
    }

    tinyMCE.execCommand('mceRemoveControl', false, textAreaId);
    rcmail.display_spellcheck_controls(true);
    if (flagElement && (flag = rcube_find_object(flagElement)))
      flag.value = '0';
  }

 skins/default/functions.js

@@ -22,129 +22,7 @@
}

/**
 * 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()
@@ -417,9 +295,129 @@
    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;

@@ -436,7 +434,11 @@
    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();
  }
}


 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">