Fix messages list focus issue in Internet Explorer (#1489058)

Aleksander Machniak

2013-04-28 d0f616c6e04560a2f6a90b39b3d1d4391b327c74

 program/js/list.js

@@ -3,8 +3,11 @@
 | Roundcube List Widget                                                 |
 |                                                                       |
 | This file is part of the Roundcube Webmail client                     |
 | Copyright (C) 2006-2009, The Roundcube Dev Team                       |
 | Licensed under the GNU GPL                                            |
 | Copyright (C) 2006-2013, The Roundcube Dev Team                       |
 |                                                                       |
 | Licensed under the GNU General Public License version 3 or            |
 | any later version with exceptions for skins & plugins.                |
 | See the README file for a full license statement.                     |
 |                                                                       |
 +-----------------------------------------------------------------------+
 | Authors: Thomas Bruederli <roundcube@gmail.com>                       |
@@ -12,8 +15,6 @@
 +-----------------------------------------------------------------------+
 | Requires: common.js                                                   |
 +-----------------------------------------------------------------------+

  $Id$
*/


@@ -87,10 +88,8 @@
    this.frame = this.list.parentNode;

    // set body events
    if (this.keyboard) {
      rcube_event.add_listener({event:bw.opera?'keypress':'keydown', object:this, method:'key_press'});
      rcube_event.add_listener({event:'keydown', object:this, method:'key_down'});
    }
    if (this.keyboard)
      rcube_event.add_listener({event:'keydown', object:this, method:'key_press'});
  }
},

@@ -111,7 +110,7 @@
    row.onmousedown = function(e){ return self.drag_row(e, this.uid); };
    row.onmouseup = function(e){ return self.click_row(e, this.uid); };

    if (bw.iphone || bw.ipad) {
    if (bw.mobile) {
      row.addEventListener('touchstart', function(e) {
        if (e.touches.length == 1) {
          if (!self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid))
@@ -230,9 +229,10 @@
    }
  }

  // Un-focus already focused elements
  $('*:focus', window).blur();
  $('iframe').each(function() { this.blur(); });
  // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
  $(':focus:not(body)').blur();
  // un-focus iframe bodies (#1489058), this doesn't work in Opera and Chrome
  $('iframe').contents().find('body').blur();

  if (e || (e = window.event))
    rcube_event.cancel(e);
@@ -249,7 +249,7 @@
  for (n in this.selection) {
    id = this.selection[n];
    if (this.rows[id] && this.rows[id].obj) {
      $(this.rows[id].obj).removeClass('selected').addClass('unfocused');
      $(this.rows[id].obj).removeClass('selected focused').addClass('unfocused');
    }
  }
},
@@ -312,7 +312,7 @@
    this.drag_mouse_start = rcube_event.get_mouse_pos(e);
    rcube_event.add_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
    rcube_event.add_listener({event:'mouseup', object:this, method:'drag_mouse_up'});
    if (bw.iphone || bw.ipad) {
    if (bw.mobile) {
      rcube_event.add_listener({event:'touchmove', object:this, method:'drag_mouse_move'});
      rcube_event.add_listener({event:'touchend', object:this, method:'drag_mouse_up'});
    }
@@ -416,7 +416,7 @@
collapse: function(row)
{
  row.expanded = false;
  this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
  this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  var depth = row.depth;
  var new_row = row ? row.obj.nextSibling : null;
  var r;
@@ -429,12 +429,13 @@
      $(new_row).css('display', 'none');
      if (r.expanded) {
        r.expanded = false;
        this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
        this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
      }
    }
    new_row = new_row.nextSibling;
  }

  this.triggerEvent('listupdate');
  return false;
},

@@ -447,7 +448,7 @@
    depth = row.depth;
    new_row = row.obj.nextSibling;
    this.update_expando(row.uid, true);
    this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
    this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  }
  else {
    var tbody = this.list.tBodies[0];
@@ -470,7 +471,7 @@
              last_expanded_parent_depth = p.depth;
              $(new_row).css('display', '');
              r.expanded = true;
              this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
              this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
            }
          }
          else
@@ -482,6 +483,7 @@
    new_row = new_row.nextSibling;
  }

  this.triggerEvent('listupdate');
  return false;
},

@@ -495,7 +497,7 @@
    depth = row.depth;
    new_row = row.obj.nextSibling;
    this.update_expando(row.uid);
    this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
    this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });

    // don't collapse sub-root tree in multiexpand mode 
    if (depth && this.multiexpand)
@@ -517,15 +519,17 @@
        if (r.has_children && r.expanded) {
          r.expanded = false;
          this.update_expando(r.uid, false);
          this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
          this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
        }
      }
    }
    new_row = new_row.nextSibling;
  }

  this.triggerEvent('listupdate');
  return false;
},


expand_all: function(row)
{
@@ -536,7 +540,7 @@
    depth = row.depth;
    new_row = row.obj.nextSibling;
    this.update_expando(row.uid, true);
    this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
    this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  }
  else {
    new_row = this.list.tBodies[0].firstChild;
@@ -553,14 +557,17 @@
        if (r.has_children && !r.expanded) {
          r.expanded = true;
          this.update_expando(r.uid, true);
          this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
          this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
        }
      }
    }
    new_row = new_row.nextSibling;
  }

  this.triggerEvent('listupdate');
  return false;
},


update_expando: function(uid, expanded)
{
@@ -608,7 +615,7 @@

    for (i=0, len=rows.length-1; i<len; i++)
      if (rows[i].id && String(rows[i].id).match(/^rcmrow([a-z0-9\-_=\+\/]+)/i) && this.rows[RegExp.$1] != null)
       return RegExp.$1;
        return RegExp.$1;
  }

  return null;
@@ -734,7 +741,7 @@


/**
 * Select last row 
 * Select last row
 */
select_last: function(mod_key)
{
@@ -755,25 +762,13 @@
/**
 * Add all childs of the given row to selection
 */
select_childs: function(uid)
select_children: function(uid)
{
  if (!this.rows[uid] || !this.rows[uid].has_children)
    return;
  var i, children = this.row_children(uid), len = children.length;

  var depth = this.rows[uid].depth,
    row = this.rows[uid].obj.nextSibling;

  while (row) {
    if (row.nodeType == 1) {
      if ((r = this.rows[row.uid])) {
        if (!r.depth || r.depth <= depth)
          break;
        if (!this.in_selection(r.uid))
          this.select_row(r.uid, CONTROL_KEY);
      }
    }
    row = row.nextSibling;
  }
  for (i=0; i<len; i++)
    if (!this.in_selection(children[i]))
      this.select_row(children[i], CONTROL_KEY);
},


@@ -785,10 +780,16 @@
  if (!this.rows[this.shift_start] || !this.selection.length)
    this.shift_start = id;

  var n, from_rowIndex = this.rows[this.shift_start].obj.rowIndex,
    to_rowIndex = this.rows[id].obj.rowIndex,
    i = ((from_rowIndex < to_rowIndex)? from_rowIndex : to_rowIndex),
    j = ((from_rowIndex > to_rowIndex)? from_rowIndex : to_rowIndex);
  var n, i, j, to_row = this.rows[id],
    from_rowIndex = this.rows[this.shift_start].obj.rowIndex,
    to_rowIndex = to_row.obj.rowIndex;

  if (!to_row.expanded && to_row.has_children)
    if (to_row = this.rows[(this.row_children(id)).pop()])
      to_rowIndex = to_row.obj.rowIndex;

  i = ((from_rowIndex < to_rowIndex) ? from_rowIndex : to_rowIndex),
  j = ((from_rowIndex > to_rowIndex) ? from_rowIndex : to_rowIndex);

  // iterate through the entire message list
  for (n in this.rows) {
@@ -834,7 +835,7 @@
  for (n in this.rows) {
    if (!filter || this.rows[n][filter] == true) {
      this.last_selected = n;
      this.highlight_row(n, true);
      this.highlight_row(n, true, true);
    }
    else {
      $(this.rows[n].obj).removeClass('selected').removeClass('unfocused');
@@ -929,19 +930,24 @@
/**
 * Highlight/unhighlight a row
 */
highlight_row: function(id, multiple)
highlight_row: function(id, multiple, norecur)
{
  if (this.rows[id] && !multiple) {
  if (!this.rows[id])
    return;

  if (!multiple) {
    if (this.selection.length > 1 || !this.in_selection(id)) {
      this.clear_selection();
      this.selection[0] = id;
      $(this.rows[id].obj).addClass('selected');
    }
  }
  else if (this.rows[id]) {
  else {
    if (!this.in_selection(id)) { // select row
      this.selection[this.selection.length] = id;
      this.selection.push(id);
      $(this.rows[id].obj).addClass('selected');
      if (!norecur && !this.rows[id].expanded)
        this.highlight_children(id, true);
    }
    else { // unselect row
      var p = $.inArray(id, this.selection),
@@ -950,7 +956,25 @@

      this.selection = a_pre.concat(a_post);
      $(this.rows[id].obj).removeClass('selected').removeClass('unfocused');
      if (!norecur && !this.rows[id].expanded)
        this.highlight_children(id, false);
    }
  }
},


/**
 * Highlight/unhighlight all childs of the given row
 */
highlight_children: function(id, status)
{
  var i, selected,
    children = this.row_children(id), len = children.length;

  for (i=0; i<len; i++) {
    selected = this.in_selection(children[i]);
    if ((status && !selected) || (!status && selected))
      this.highlight_row(children[i], true, true);
  }
},

@@ -993,6 +1017,14 @@
    case 35: // End
      this.select_last(mod_key);
      return rcube_event.cancel(e);
    case 27:
      if (this.drag_active)
        return this.drag_mouse_up(e);
      if (this.col_drag_active) {
        this.selected_column = null;
        return this.column_drag_mouse_up(e);
      }
      return rcube_event.cancel(e);
    default:
      this.key_pressed = keyCode;
      this.modkey = mod_key;
@@ -1001,41 +1033,6 @@

      if (this.key_pressed == this.BACKSPACE_KEY)
        return rcube_event.cancel(e);
  }

  return true;
},

/**
 * Handler for keydown events
 */
key_down: function(e)
{
  var target = e.target || {};
  if (this.focused != true || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
    return true;
  
  switch (rcube_event.get_keycode(e)) {
    case 27:
      if (this.drag_active)
      return this.drag_mouse_up(e);
      if (this.col_drag_active) {
        this.selected_column = null;
        return this.column_drag_mouse_up(e);
      }

    case 40:
    case 38: 
    case 63233:
    case 63232:
    case 61:
    case 107:
    case 109:
    case 32:
      if (!rcube_event.get_modifier(e) && this.focused)
        return rcube_event.cancel(e);

    default:
  }

  return true;
@@ -1128,7 +1125,7 @@
    else
      return rcube_event.cancel(e);
  }
  

  if (this.drag_start) {
    // check mouse movement, of less than 3 pixels, don't start dragging
    var m = rcube_event.get_mouse_pos(e);
@@ -1145,15 +1142,15 @@
    var n, uid, selection = $.merge([], this.selection);
    for (n in selection) {
      uid = selection[n];
      if (this.rows[uid].has_children && !this.rows[uid].expanded)
        this.select_childs(uid);
      if (!this.rows[uid].expanded)
        this.select_children(uid);
    }

    // reset content
    this.draglayer.html('');

    // get subjects of selected messages
    var c, i, n, subject, obj;
    var i, n, obj;
    for (n=0; n<this.selection.length; n++) {
      // only show 12 lines
      if (n>12) {
@@ -1162,35 +1159,26 @@
      }

      if (obj = this.rows[this.selection[n]].obj) {
        subject = '';

        for (c=0, i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].nodeName == 'TD') {
        for (i=0; i<obj.childNodes.length; i++) {
          if (obj.childNodes[i].nodeName == 'TD') {
            if (n == 0)
             this.drag_start_pos = $(obj.childNodes[i]).offset();
              this.drag_start_pos = $(obj.childNodes[i]).offset();

           if (this.subject_col < 0 || (this.subject_col >= 0 && this.subject_col == c)) {
             var entry, node, tmp_node, nodes = obj.childNodes[i].childNodes;
             // find text node
             for (m=0; m<nodes.length; m++) {
               if ((tmp_node = obj.childNodes[i].childNodes[m]) && (tmp_node.nodeType==3 || tmp_node.nodeName=='A'))
                 node = tmp_node;
             }
            if (this.subject_col < 0 || (this.subject_col >= 0 && this.subject_col == i)) {
              var subject = $(obj.childNodes[i]).text();

             if (!node)
               break;
              if (!subject)
                break;

              subject = $(node).text();
             // remove leading spaces
              // remove leading spaces
              subject = $.trim(subject);
              // truncate line to 50 characters
              subject = (subject.length > 50 ? subject.substring(0, 50) + '...' : subject);

              entry = $('<div>').text(subject);
             this.draglayer.append(entry);
              var entry = $('<div>').text(subject);
              this.draglayer.append(entry);
              break;
            }
            c++;
          }
        }
      }
@@ -1219,7 +1207,7 @@
drag_mouse_up: function(e)
{
  document.onmousemove = null;
  

  if (e.type == 'touchend') {
    if (e.changedTouches.length != 1)
      return rcube_event.cancel(e);
@@ -1238,8 +1226,8 @@

  rcube_event.remove_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
  rcube_event.remove_listener({event:'mouseup', object:this, method:'drag_mouse_up'});
  
  if (bw.iphone || bw.ipad) {

  if (bw.mobile) {
    rcube_event.remove_listener({event:'touchmove', object:this, method:'drag_mouse_move'});
    rcube_event.remove_listener({event:'touchend', object:this, method:'drag_mouse_up'});
  }
@@ -1247,7 +1235,7 @@
  // remove temp divs
  this.del_dragfix();

  this.triggerEvent('dragend');
  this.triggerEvent('dragend', e);

  return rcube_event.cancel(e);
},
@@ -1360,13 +1348,39 @@
    }
  }

  this.triggerEvent('column_dragend');
  this.triggerEvent('column_dragend', e);

  return rcube_event.cancel(e);
},


/**
 * Returns IDs of all rows in a thread (except root) for specified root
 */
row_children: function(uid)
{
  if (!this.rows[uid] || !this.rows[uid].has_children)
    return [];

  var res = [], depth = this.rows[uid].depth,
    row = this.rows[uid].obj.nextSibling;

  while (row) {
    if (row.nodeType == 1) {
      if ((r = this.rows[row.uid])) {
        if (!r.depth || r.depth <= depth)
          break;
        res.push(r.uid);
      }
    }
    row = row.nextSibling;
  }

  return res;
},


/**
 * Creates a layer for drag&drop over iframes
 */
add_dragfix: function()