Some hacks to make Larry work in IE7

thomascube

2012-02-15 19b34b7058117832de44682a7d3eb4ada9859be4

 skins/larry/ui.js

@@ -14,6 +14,7 @@

function rcube_mail_ui()
{
  var env = {};
  var popups = {};
  var popupconfig = {
    forwardmenu:        { editable:1 },
@@ -33,23 +34,38 @@
  var compose_headers = {};

  // export public methods
  this.set = setenv;
  this.init = init;
  this.init_tabs = init_tabs;
  this.show_about = show_about;
  this.show_popup = show_popup;
  this.set_searchmod = set_searchmod;
  this.show_uploadform = show_uploadform;
  this.show_header_row = show_header_row;
  this.hide_header_row = hide_header_row;


  /**
   *
   */
  function setenv(key, val)
  {
    env[key] = val;
  }

  /**
   * Initialize UI
   * Called on document.ready
   */
  function init()
  {
    rcmail.addEventListener('message', message_displayed);

    /***  mail task  ***/
    if (rcmail.env.task == 'mail') {
      rcmail.addEventListener('menu-open', show_listoptions);
      rcmail.addEventListener('menu-save', save_listoptions);
      rcmail.addEventListener('aftersend-attachment', show_uploadform);
      rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
      rcmail.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') });

      var dragmenu = $('#dragmessagemenu');
      if (dragmenu.length) {
@@ -57,56 +73,105 @@
        popups.dragmessagemenu = dragmenu;
      }

      var previewframe = $('#mailpreviewframe').is(':visible');
      $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
      $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
      $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });

      if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
        layout_messageview();
        $("#all-headers").resizable({ handles: 's', minHeight: 50 });
        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
      }
      else if (rcmail.env.action == 'compose') {
        rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); });
        rcmail.addEventListener('aftersend-attachment', show_uploadform);
        rcmail.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); });
        layout_composeview();

        $('#composeoptionstoggle').click(function(){
          $(this).toggleClass('enabled');
        // Show input elements with non-empty value
        var field, fields = ['cc', 'bcc', 'replyto', 'followupto'];
        for (var f=0; f < fields.length; f++) {
          if ((field = $('#_'+fields[f])) && field.length && field.val() != '')
            show_header_row(fields[f], true);
        }

        $('#composeoptionstoggle').parent().click(function(){
          $('#composeoptionstoggle').toggleClass('enabled');
          $('#composeoptions').toggle();
          layout_composeview();
          return false;
        });
        }).css('cursor', 'pointer');

        new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right',
          orientation:'v', relative:true, start:248, min:150, size:12 }).init();
          orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init();
      }
      else if (rcmail.env.action == 'list' || !rcmail.env.action) {
          mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
            orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 });
          if (previewframe)
            mailviewsplit.init();
        var previewframe = $('#mailpreviewframe').is(':visible');
        $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
        $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
        $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });

        mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
          orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 });
        if (previewframe)
          mailviewsplit.init();

        rcmail.addEventListener('setquota', update_quota);
      }
      

      if ($('#mailview-left').length) {
        new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right',
          orientation:'v', relative:true, start:248, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init();
      }
    }
    /***  settings task  ***/
    else if (rcmail.env.task == 'settings') {
      var tab = '#settingstabpreferences';
      if (rcmail.env.action)
        tab = '#settingstab' + (rcmail.env.action.indexOf('identity')>0 ? 'identities' : rcmail.env.action.replace(/\./g, ''));
      rcmail.addEventListener('init', function(){
        var tab = '#settingstabpreferences';
        if (rcmail.env.action)
          tab = '#settingstab' + (rcmail.env.action.indexOf('identity')>0 ? 'identities' : rcmail.env.action.replace(/\./g, ''));

      $(tab).addClass('selected')
        .children().first().removeAttr('onclick').click(function() { return false; });
        $(tab).addClass('selected')
          .children().first().removeAttr('onclick').click(function() { return false; });
      });

      if (rcmail.env.action == 'folders') {
        new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details',
          orientation:'v', relative:true, start:305, min:150, size:12 }).init();
      }
      else if (rcmail.env.action.indexOf('identit') >= 0) {
      else if (rcmail.env.action == 'identities') {
        new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details',
          orientation:'v', relative:true, start:305, min:150, size:12 }).init();
      }
    }
    /***  addressbook task  ***/
    else if (rcmail.env.task == 'addressbook') {
      rcmail.addEventListener('afterupload-photo', show_uploadform);

      if (rcmail.env.action == '') {
        new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
          orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init();
        new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
          orientation:'v', relative:true, start:296, min:220, size:12 }).init();
      }
    }
    /***  login page  ***/
    else if (rcmail.env.task == 'login') {
      if (bw.ie && bw.vendver < 9) {
        var popup = $('<div>')
          .addClass('readtext')
          .html("Roundcube will not work well with the crappy browser ya' using. Get yourself a new internet browsing software and don't come back without!<p>Sincerly,<br/>the Roundcube Dev Team</p>")
          .appendTo(document.body)
          .dialog({
            dialogClass: 'alert',
            closeOnEscape: true,
            title: "No way, are you serious?",
            close: function() {
              popup.dialog('destroy').remove();
            },
            width: 450
          });
      }
    }

    // turn a group of fieldsets into tabs
    $('.tabbed').each(function(idx, elem){ init_tabs(elem); })

    $(document.body).bind('mouseup', function(e){
      var config, obj, target = e.target;
@@ -132,8 +197,13 @@
        }
      }
    });
    
    $(window).resize(resize);

    $(window).resize(function(e) {
      // check target due to bugs in jquery
      // http://bugs.jqueryui.com/ticket/7514
      // http://bugs.jquery.com/ticket/9841
      if (e.target == window) resize();
    });
  }

  /**
@@ -148,6 +218,39 @@
      layout_composeview();
    }
  }

  /**
   * Triggered when a new user message is displayed
   */
  function message_displayed(p)
  {
    // show a popup dialog on errors
    if (p.type == 'error') {
      if (!me.messagedialog) {
        me.messagedialog = $('<div>').addClass('popupdialog');
      }

      var pos = $(p.object).offset();
      me.messagedialog.dialog('close');
      me.messagedialog.html(p.message)
        .dialog({
          resizable: false,
          closeOnEscape: true,
          dialogClass: 'popupmessage ' + p.type,
          title: null,
          close: function() {
            me.messagedialog.dialog('destroy').hide();
          },
          position: ['center', pos.top - 160],
          hide: { effect:'drop', direction:'down' },
          width: 420,
          minHeight: 90
        }).show();

      window.setTimeout(function(){ me.messagedialog.dialog('close'); }, Math.max(2000, p.timeout / 2));
    }
  }


  /**
   * Adjust UI objects of the mail view screen
@@ -166,6 +269,7 @@

  function render_mailboxlist(splitter)
  {
    // TODO: implement smart shortening of long folder names
  }


@@ -179,22 +283,33 @@
  function layout_composeview()
  {
    var body = $('#composebody'),
      form = $('#compose-content'),
      bottom = $('#composeview-bottom'),
      w, h;

    bottom.css('height', (bottom.parent().height() - bottom.position().top) + 'px');
    bottom.css('height', (form.height() - bottom.position().top) + 'px');

    w = body.parent().width() - 8;
    w = body.parent().width() - 6;
    h = body.parent().height() - 36;
    body.width(w).height(h);

    if (window.tinyMCE && tinyMCE.get('composebody')) {
      $('#composebody_tbl').width((w+11)+'px').height('').css('margin-top', '1px');
      $('#composebody_ifr').width((w+11)+'px').height((h-24)+'px');
      $('#composebody_tbl').width((w+10)+'px').height('').css('margin-top', '1px');
      $('#composebody_ifr').width((w+10)+'px').height((h-22)+'px');
    }
    else {
      $('#googie_edit_layer').height(h+'px');
    }
    
    var abooks = $('#directorylist');
    $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
  }


  function update_quota(p)
  {
    var y = p.total ? Math.ceil(p.percent / 100 * 20) * 24 : 0;
    $('#quotadisplay').css('background-position', '0 -'+y+'px');
  }


@@ -324,6 +439,26 @@
      rcmail.message_list.scrollto(uid);

    rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) });
  }


  /**
   * Switch between short and full headers display in message preview
   */
  function toggle_preview_headers(button)
  {
    $('#preview-shortheaders').toggle();
    var full = $('#preview-allheaders').toggle();
    
    // add toggle button to full headers table
    if (!full.data('mod')) {
      $('<a>').attr('href', '#hide')
        .addClass('iconlink remove')
        .html('Hide')
        .appendTo($('<td>').appendTo($('tr:first', full)))
        .click(function(){ toggle_preview_headers(this);return false });
      full.data('mod', true);
    }
  }


@@ -494,6 +629,17 @@
      $dialog.dialog('close');
      return;
    }
    
    // add icons to clone file input field
    if (rcmail.env.action == 'compose' && !$dialog.data('extended')) {
      $('<a>')
        .addClass('iconlink add')
        .attr('href', '#add')
        .html('Add')
        .appendTo($('input[type="file"]', $dialog).parent())
        .click(add_uploadfile);
      $dialog.data('extended', true);
    }

    $dialog.dialog({
      modal: true,
@@ -505,24 +651,42 @@
        catch(e){ }  // ignore errors

        $dialog.dialog('destroy').hide();
        $('div.addline', $dialog).remove();
      },
      width: 480
    }).show();

    if (!document.all)
      $('input[type=file]', $dialog).click();
      $('input[type=file]', $dialog).first().click();
  }

  function add_uploadfile(e)
  {
    var div = $(this).parent();
    var clone = div.clone().addClass('addline').insertAfter(div);
    clone.children('.iconlink').click(add_uploadfile);
    clone.children('input').val('');

    if (!document.all)
      $('input[type=file]', clone).click();
  }


  /**
   *
   */
  function show_header_row(which)
  function show_header_row(which, updated)
  {
    if (compose_headers[which])
    var row = $('#compose-' + which);
    if (row.is(':visible'))
      return;  // nothing to be done here

    if (compose_headers[which] && !updated)
      $('#_' + which).val(compose_headers[which]);
    $('#compose-' + which).show();

    row.show();
    $('#' + which + '-link').hide();
    this.resize_compose_body();
    layout_composeview();
    return false;
  }

@@ -538,14 +702,104 @@

    $('#compose-' + which).hide();
    $('#' + which + '-link').show();
    this.resize_compose_body();
    layout_composeview();
    return false;
  }


  /**
   * Fieldsets-to-tabs converter
   */
  function init_tabs(elem, current)
  {
    var content = $(elem),
      id = content.get(0).id,
      fs = content.children('fieldset');

    if (!fs.length)
      return;

    if (!id) {
      id = 'rcmtabcontainer';
      content.attr('id', id);
    }

    // first hide not selected tabs
    current = current || 0;
    fs.each(function(idx) { if (idx != current) $(this).hide(); });

    // create tabs container
    var tabs = $('<div>').addClass('tabsbar').prependTo(content);

    // convert fildsets into tabs
    fs.each(function(idx) {
      var tab, a, elm = $(this), legend = elm.children('legend');

      // create a tab
      a   = $('<a>').text(legend.text()).attr('href', '#');
      tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'})
        .click(function() { show_tab(id, idx); return false })

      // remove legend
      legend.remove();
      // style fieldset
      elm.addClass('tab');
      // style selected tab
      if (idx == current)
        tab.addClass('selected');

      // add the tab to container
      tab.append(a).appendTo(tabs);
    });
  }

  function show_tab(id, index)
  {
    var fs = $('#'+id).children('fieldset');

    fs.each(function(idx) {
      // Show/hide fieldset (tab content)
      $(this)[index==idx ? 'show' : 'hide']();
      // Select/unselect tab
      $('#tab'+idx).toggleClass('selected', idx==index);
    });
  }

  /**
   * Show about page as jquery UI dialog
   */
  function show_about(elem)
  {
    var frame = $('<iframe>').attr('id', 'aboutframe')
      .attr('src', rcmail.url('settings/about'))
      .attr('frameborder', '0')
      .appendTo(document.body);

    var h = Math.floor($(window).height() * 0.75);
    var buttons = {};
    var supportln = $('#supportlink');
    if (supportln.length && (env.supporturl = supportln.attr('href')))
      buttons[supportln.html()] = function(e){ env.supporturl.indexOf('mailto:') < 0 ? window.open(env.supporturl) : location.href = env.supporturl };

    frame.dialog({
      modal: true,
      resizable: false,
      closeOnEscape: true,
      title: elem ? elem.title || elem.innerHTML : null,
      close: function() {
        frame.dialog('destroy').remove();
      },
      buttons: buttons,
      width: 640,
      height: h
    }).width(640);
  }
}



/**
 * Roundcube splitter GUI class
 * Roundcube UI splitter class
 *
 * @constructor
 */
@@ -564,11 +818,16 @@
  this.callback = p.callback;

  var me = this;
  rcube_splitter._instances[this.id] = me;

  this.init = function()
  {
    this.p1 = $(this.p.p1);
    this.p2 = $(this.p.p2);

    // check if referenced elements exist, otherwise abort
    if (!this.p1.length || !this.p2.length)
      return;

    // create and position the handle for this splitter
    this.p1pos = this.relative ? this.p1.position() : this.p1.offset();
@@ -589,11 +848,9 @@
      this.handle.css({ left:left+'px', top:'0px' });
    }

    this.elm = this.handle.get(0);

    // listen to window resize on IE
    if (bw.ie)
      $(window).resize(function(e){ onResize(e) });
      $(window).resize(onResize);

    // read saved position from cookie
    var cookie = bw.get_cookie(this.id);
@@ -619,7 +876,7 @@
      this.handle.css('top', Math.round(this.pos - this.halfsize + this.offset)+'px');
      if (bw.ie) {
        var new_height = parseInt(this.p2.parent().outerHeight(), 10) - parseInt(this.p2.css('top'), 10) - (bw.ie8 ? 2 : 0);
        this.p2.css('height') = (new_height > 0 ? new_height : 0) + 'px';
        this.p2.css('height', (new_height > 0 ? new_height : 0) + 'px');
      }
    }
    else {
@@ -634,6 +891,14 @@

    this.p2.resize();
    this.p1.resize();

    // also resize iframe covers
    if (this.drag_active) {
      $('iframe').each(function(i, elem) {
        var pos = $(this).offset();
        $('#iframe-splitter-fix-'+i).css({ top: pos.top+'px', left: pos.left+'px', width:elem.offsetWidth+'px', height: elem.offsetHeight+'px' });
      });
    }

    if (typeof this.render == 'function')
      this.render(this);
@@ -656,10 +921,12 @@
    $(document).bind('mousemove.'+this.id, onDrag).bind('mouseup.'+this.id, onDragStop);

    // enable dragging above iframes
    $('iframe').each(function() {
      $('<div class="iframe-splitter-fix"></div>')
    $('iframe').each(function(i, elem) {
      $('<div>')
        .attr('id', 'iframe-splitter-fix-'+i)
        .addClass('iframe-splitter-fix')
        .css({ background: '#fff',
          width: this.offsetWidth+'px', height: this.offsetHeight+'px',
          width: elem.offsetWidth+'px', height: elem.offsetHeight+'px',
          position: 'absolute', opacity: '0.001', zIndex: 1000
        })
        .css($(this).offset())
@@ -715,7 +982,7 @@
    me.drag_active = false;

    // remove temp divs
    $('div.iframe-splitter-fix').each(function(){ this.parentNode.removeChild(this); });
    $('div.iframe-splitter-fix').remove();

    me.set_cookie();

@@ -753,3 +1020,11 @@
} // end class rcube_splitter


// static getter for splitter instances
rcube_splitter._instances = {};

rcube_splitter.get_instance = function(id)
{
  return rcube_splitter._instances[id];
};