Add splitter for preferences sections list

Aleksander Machniak

2012-08-08 94015ea223dd67d118e0d3c638cc16b0ba3b1cc3

 skins/larry/ui.js

@@ -24,6 +24,7 @@
    groupmenu:          { above:1 },
    mailboxmenu:        { above:1 },
    composeoptionsmenu: { editable:1, overlap:1 },
    spellmenu:          { callback: spellmenu },
    // toggle: #1486823, #1486930
    'attachment-form':  { editable:1, above:1, toggle:!bw.ie&&!bw.linux },
    'upload-form':      { editable:1, toggle:!bw.ie&&!bw.linux }
@@ -75,7 +76,8 @@

      if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
        layout_messageview();
        $("#all-headers").resizable({ handles: 's', minHeight: 50 });
        rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); });
        rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); });
        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
      }
      else if (rcmail.env.action == 'compose') {
@@ -108,16 +110,18 @@
        $('#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 });
          orientation:'h', relative:true, start:310, min:150, size:12, offset:4 });
        if (previewframe)
          mailviewsplit.init();

        new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer');

        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();
          orientation:'v', relative:true, start:226, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init();
      }
    }
    /***  settings task  ***/
@@ -133,11 +137,19 @@

      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();
          orientation:'v', relative:true, start:266, min:180, size:12 }).init();

        new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer');

        rcmail.addEventListener('setquota', update_quota);
      }
      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();
          orientation:'v', relative:true, start:266, min:180, size:12 }).init();
      }
      else if (rcmail.env.action == 'preferences') {
        new rcube_splitter({ id:'prefviewsplitter', p1:'#sectionslist', p2:'#preferences-box',
          orientation:'v', relative:true, start:266, min:180, size:12 }).init();
      }
    }
    /***  addressbook task  ***/
@@ -148,62 +160,95 @@
        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
          });
          orientation:'v', relative:true, start:286, min:270, size:12 }).init();

        new rcube_scroller('#directorylist-content', '#directorylist-header', '#directorylist-footer');
      }
    }

    // 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;
      for (var id in popups) {
        obj = popups[id];
        config = popupconfig[id];
        if (obj.is(':visible')
          && target.id != id+'link'
          && !config.toggle
          && (!config.editable || !target_overlaps(target, obj.get(0)))
          && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0)))
        ) {
          var myid = id+'';
          window.setTimeout(function(){ show_popupmenu(myid, false) }, 10);
        }
    // decorate select elements
    $('select.decorated').each(function(){
      if (bw.opera) {
        $(this).removeClass('decorated');
        return;
      }
    })
    .bind('keyup', function(e){
      if (e.keyCode == 27) {
        for (var id in popups) {
          if (popups[id].is(':visible'))
            show_popup(id, false);
        }
      }

      var select = $(this),
        height = Math.max(select.height(), 26) - 2,
        width = select.width() - 22,
        title = $('option', this).first().text();

      if ($('option:selected', this).val() != '')
        title = $('option:selected', this).text();

      var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>')
        .css('position', 'absolute')
        .offset(select.position())
        .insertAfter(select);

      overlay.children().width(width).height(height).css('line-height', (height - 1) + 'px');

      select.change(function() {
          var val = $('option:selected', this).text();
          $(this).next().children().html(val);
        });

      var parent = select.parent();
      if (parent.css('position') != 'absolute')
        parent.css('position', 'relative');

      // re-set original select width to fix click action and options width in some browsers
      select.width(overlay.width());
    });

    $(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();
    });
    $(document.body)
      .bind('mouseup', body_mouseup)
      .bind('keyup', function(e){
        if (e.keyCode == 27) {
          for (var id in popups) {
            if (popups[id].is(':visible'))
              show_popup(id, false);
          }
        }
      });

    $('iframe').load(function(e){
      // this = iframe
      var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null;
      $(doc).mouseup(body_mouseup);
    })
    .contents().mouseup(body_mouseup);

    // don't use $(window).resize() due to some unwanted side-effects
    window.onresize = resize;
    resize();
  }

  /**
   * Handler for mouse-up events on the document body.
   * This will close all open popup menus
   */
  function body_mouseup(e)
  {
    var config, obj, target = e.target;
    if (target.className == 'inner')
        target = e.target.parentNode;
    for (var id in popups) {
      obj = popups[id];
      config = popupconfig[id];
      if (obj.is(':visible')
        && target.id != id+'link'
        && !config.toggle
        && (!config.editable || !target_overlaps(target, obj.get(0)))
        && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0)))
      ) {
        var myid = id+'';
        window.setTimeout(function(){ show_popupmenu(myid, false) }, 10);
      }
    }
  }

  /**
@@ -217,6 +262,20 @@
    if (rcmail.env.task == 'mail' && rcmail.env.action == 'compose') {
      layout_composeview();
    }

    // make iframe footer buttons float if scrolling is active
    $('body.iframe .footerleft').each(function(){
      var footer = $(this),
        body = $(document.body),
        floating = footer.hasClass('floating'),
        overflow = body.outerHeight(true) > $(window).height();
      if (overflow != floating) {
        var action = overflow ? 'addClass' : 'removeClass';
        footer[action]('floating');
        body[action]('floatingbuttons');
      }
    })

  }

  /**
@@ -225,23 +284,24 @@
  function message_displayed(p)
  {
    // show a popup dialog on errors
    if (p.type == 'error') {
    if (p.type == 'error' && rcmail.env.task != 'login') {
      if (!me.messagedialog) {
        me.messagedialog = $('<div>').addClass('popupdialog');
      }

      var pos = $(p.object).offset();
      pos.top -= (rcmail.env.task == 'login' ? 20 : 160);
      me.messagedialog.dialog('close');
      me.messagedialog.html(p.message)
        .dialog({
          resizable: false,
          closeOnEscape: true,
          dialogClass: 'popupmessage ' + p.type,
          title: null,
          title: env.errortitle,
          close: function() {
            me.messagedialog.dialog('destroy').hide();
          },
          position: ['center', pos.top - 160],
          position: ['center', pos.top],
          hide: { effect:'drop', direction:'down' },
          width: 420,
          minHeight: 90
@@ -259,7 +319,7 @@
  {
    $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px');
    $('#message-objects div a').addClass('button');
    

    if (!$('#attachment-list li').length) {
      $('div.rightcol').hide();
      $('div.leftcol').css('margin-right', '0');
@@ -275,8 +335,7 @@

  function resize_leftcol(splitter)
  {
    if (splitter)
      $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px');
    // STUB
  }


@@ -289,18 +348,14 @@

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

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

    if (window.tinyMCE && tinyMCE.get('composebody')) {
      $('#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');
    }
    
    $('#composebody_tbl').width((w+8)+'px').height('').css('margin-top', '1px');
    $('#composebody_ifr').width((w+8)+'px').height((h-40)+'px');
    $('#googie_edit_layer').height(h+'px');

    var abooks = $('#directorylist');
    $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
  }
@@ -308,7 +363,13 @@

  function update_quota(p)
  {
    var y = p.total ? Math.ceil(p.percent / 100 * 20) * 24 : 0;
    var step = 24, step_count = 20,
      y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0;

    // never show full-circle if quota is close to 100% but below.
    if (p.total && y == step * step_count && p.percent < 100)
      y -= step;

    $('#quotadisplay').css('background-position', '0 -'+y+'px');
  }

@@ -376,7 +437,7 @@
      $('select').css('visibility', show?'hidden':'inherit');
      $('select', obj).css('visibility', 'inherit');
    }
    

    return show;
  }

@@ -409,7 +470,7 @@
    button.removeClass().addClass(visible ? 'enabled' : 'closed');

    if (visible) {
      $('#mailview-top').css({ bottom:'auto' });
      $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
      $('#mailview-bottom').css({ height:'auto' });

      rcmail.env.contentframe = 'messagecontframe';
@@ -428,7 +489,7 @@
      rcmail.env.contentframe = null;
      rcmail.show_contentframe(false);

      $('#mailview-top').css({ height:'auto', bottom:'28px' });
      $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'28px' });
      $('#mailview-bottom').css({ top:'auto', height:'26px' });

      if (mailviewsplit.handle)
@@ -448,17 +509,14 @@
  function toggle_preview_headers(button)
  {
    $('#preview-shortheaders').toggle();
    var full = $('#preview-allheaders').toggle();
    
    var full = $('#preview-allheaders').toggle(),
      button = $('a#previewheaderstoggle');

    // 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);
    }
    if (full.is(':visible'))
      button.attr('href', '#hide').removeClass('add').addClass('remove')
    else
      button.attr('href', '#details').removeClass('remove').addClass('add')
  }


@@ -508,6 +566,42 @@
  }


  function spellmenu(show)
  {
    var link, li,
      lang = rcmail.spellcheck_lang(),
      menu = popups.spellmenu,
      ul = $('ul', menu);

    if (!ul.length) {
      ul = $('<ul class="toolbarmenu selectable">');

      for (i in rcmail.env.spell_langs) {
        li = $('<li>');
        link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i])
          .addClass('active').data('lang', i)
          .click(function() {
            rcmail.spellcheck_lang_set($(this).data('lang'));
          });

        link.appendTo(li);
        li.appendTo(ul);
      }

      ul.appendTo(menu);
    }

    // select current language
    $('li', ul).each(function() {
      var el = $('a', this);
      if (el.data('lang') == lang)
        el.addClass('selected');
      else if (el.hasClass('selected'))
        el.removeClass('selected');
    });
  }


  /**
   *
   */
@@ -528,18 +622,10 @@
    $('input[name="view"][value="thread"]').prop('checked', rcmail.env.threading ? true : false);
    $('input[name="view"][value="list"]').prop('checked', rcmail.env.threading ? false : true);

    // list columns
    var found, cols = $('input[name="list_col[]"]');
    for (var i=0; i < cols.length; i++) {
      if (cols[i].value != 'from') {
        found = $.inArray(cols[i].value, rcmail.env.coltypes) != -1;
      }
      else {
        found = ($.inArray('from', rcmail.env.coltypes) != -1
          || $.inArray('to', rcmail.env.coltypes) != -1);
      }
      $(cols[i]).prop('checked', found);
    }
    // set checkboxes
    $('input[name="list_col[]"]').each(function() {
      $(this).prop('checked', $.inArray(this.value, rcmail.env.coltypes) != -1);
    });

    $dialog.dialog({
      modal: true,
@@ -712,8 +798,8 @@
   */
  function init_tabs(elem, current)
  {
    var id = elem.id,
      content = $(elem),
    var content = $(elem),
      id = content.get(0).id,
      fs = content.children('fieldset');

    if (!fs.length)
@@ -721,7 +807,7 @@

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

    // first hide not selected tabs
@@ -772,6 +858,7 @@
  {
    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);
@@ -796,9 +883,46 @@
}


/**
 * Roundcube Scroller class
 */
function rcube_scroller(list, top, bottom)
{
  var ref = this;

  this.list = $(list);
  this.top = $(top);
  this.bottom = $(bottom);
  this.step_size = 6;
  this.step_time = 20;
  this.delay = 500;

  this.top
    .mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); })
    .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });

  this.bottom
    .mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); })
    .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });

  this.scroll = function(dir)
  {
    var ref = this, size = this.step_size;

    if (!rcmail.drag_active)
      return;

    if (dir == 'down')
      size *= -1;

    this.list.get(0).scrollTop += size;
    this.ts = window.setTimeout(function() { ref.scroll(dir); }, this.step_time);
  };
};


/**
 * Roundcube splitter GUI class
 * Roundcube UI splitter class
 *
 * @constructor
 */
@@ -817,11 +941,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();
@@ -842,11 +971,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);
@@ -1016,3 +1143,10 @@
} // end class rcube_splitter


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

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