program/js/list.js.src

   1 /*
   2  +-----------------------------------------------------------------------+
   3  | Roundcube List Widget                                                 |
   4  |                                                                       |
   5  | This file is part of the Roundcube Webmail client                     |
   6  | Copyright (C) 2006-2009, The Roundcube Dev Team                       |
   7  | Licensed under the GNU GPL                                            |
   8  |                                                                       |
   9  +-----------------------------------------------------------------------+
  10  | Authors: Thomas Bruederli <roundcube@gmail.com>                       |
  11  |          Charles McNulty <charles@charlesmcnulty.com>                 |
  12  +-----------------------------------------------------------------------+
  13  | Requires: common.js                                                   |
  14  +-----------------------------------------------------------------------+
  15
  16   $Id: list.js 5757 2012-01-12 07:29:48Z alec $
  17 */
  18
  19
  20 /**
  21  * Roundcube List Widget class
  22  * @contructor
  23  */
  24 function rcube_list_widget(list, p)
  25 {
  26   // static contants
  27   this.ENTER_KEY = 13;
  28   this.DELETE_KEY = 46;
  29   this.BACKSPACE_KEY = 8;
  30
  31   this.list = list ? list : null;
  32   this.frame = null;
  33   this.rows = [];
  34   this.selection = [];
  35   this.rowcount = 0;
  36   this.colcount = 0;
  37
  38   this.subject_col = -1;
  39   this.modkey = 0;
  40   this.multiselect = false;
  41   this.multiexpand = false;
  42   this.multi_selecting = false;
  43   this.draggable = false;
  44   this.column_movable = false;
  45   this.keyboard = false;
  46   this.toggleselect = false;
  47
  48   this.dont_select = false;
  49   this.drag_active = false;
  50   this.col_drag_active = false;
  51   this.column_fixed = null;
  52   this.last_selected = 0;
  53   this.shift_start = 0;
  54   this.in_selection_before = false;
  55   this.focused = false;
  56   this.drag_mouse_start = null;
  57   this.dblclick_time = 600;
  58   this.row_init = function(){};
  59
  60   // overwrite default paramaters
  61   if (p && typeof p === 'object')
  62     for (var n in p)
  63       this[n] = p[n];
  64 };
  65
  66
  67 rcube_list_widget.prototype = {
  68
  69
  70 /**
  71  * get all message rows from HTML table and init each row
  72  */
  73 init: function()
  74 {
  75   if (this.list && this.list.tBodies[0]) {
  76     this.rows = [];
  77     this.rowcount = 0;
  78
  79     var r, len, rows = this.list.tBodies[0].rows;
  80
  81     for (r=0, len=rows.length; r<len; r++) {
  82       this.init_row(rows[r]);
  83       this.rowcount++;
  84     }
  85
  86     this.init_header();
  87     this.frame = this.list.parentNode;
  88
  89     // set body events
  90     if (this.keyboard) {
  91       rcube_event.add_listener({event:bw.opera?'keypress':'keydown', object:this, method:'key_press'});
  92       rcube_event.add_listener({event:'keydown', object:this, method:'key_down'});
  93     }
  94   }
  95 },
  96
  97
  98 /**
  99  * Init list row and set mouse events on it
 100  */
 101 init_row: function(row)
 102 {
 103   // make references in internal array and set event handlers
 104   if (row && String(row.id).match(/^rcmrow([a-z0-9\-_=\+\/]+)/i)) {
 105     var self = this,
 106       uid = RegExp.$1;
 107     row.uid = uid;
 108     this.rows[uid] = {uid:uid, id:row.id, obj:row};
 109
 110     // set eventhandlers to table row
 111     row.onmousedown = function(e){ return self.drag_row(e, this.uid); };
 112     row.onmouseup = function(e){ return self.click_row(e, this.uid); };
 113
 114     if (bw.iphone || bw.ipad) {
 115       row.addEventListener('touchstart', function(e) {
 116         if (e.touches.length == 1) {
 117           if (!self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid))
 118             e.preventDefault();
 119         }
 120       }, false);
 121       row.addEventListener('touchend', function(e) {
 122         if (e.changedTouches.length == 1)
 123           if (!self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid))
 124             e.preventDefault();
 125       }, false);
 126     }
 127
 128     if (document.all)
 129       row.onselectstart = function() { return false; };
 130
 131     this.row_init(this.rows[uid]);
 132   }
 133 },
 134
 135
 136 /**
 137  * Init list column headers and set mouse events on them
 138  */
 139 init_header: function()
 140 {
 141   if (this.list && this.list.tHead) {
 142     this.colcount = 0;
 143
 144     var col, r, p = this;
 145     // add events for list columns moving
 146     if (this.column_movable && this.list.tHead && this.list.tHead.rows) {
 147       for (r=0; r<this.list.tHead.rows[0].cells.length; r++) {
 148         if (this.column_fixed == r)
 149           continue;
 150         col = this.list.tHead.rows[0].cells[r];
 151         col.onmousedown = function(e){ return p.drag_column(e, this); };
 152         this.colcount++;
 153       }
 154     }
 155   }
 156 },
 157
 158
 159 /**
 160  * Remove all list rows
 161  */
 162 clear: function(sel)
 163 {
 164   var tbody = document.createElement('tbody');
 165
 166   this.list.insertBefore(tbody, this.list.tBodies[0]);
 167   this.list.removeChild(this.list.tBodies[1]);
 168   this.rows = [];
 169   this.rowcount = 0;
 170
 171   if (sel)
 172     this.clear_selection();
 173
 174   // reset scroll position (in Opera)
 175   if (this.frame)
 176     this.frame.scrollTop = 0;
 177 },
 178
 179
 180 /**
 181  * 'remove' message row from list (just hide it)
 182  */
 183 remove_row: function(uid, sel_next)
 184 {
 185   var obj = this.rows[uid] ? this.rows[uid].obj : null;
 186
 187   if (!obj)
 188     return;
 189
 190   obj.style.display = 'none';
 191
 192   if (sel_next)
 193     this.select_next();
 194
 195   delete this.rows[uid];
 196   this.rowcount--;
 197 },
 198
 199
 200 /**
 201  * Add row to the list and initialize it
 202  */
 203 insert_row: function(row, attop)
 204 {
 205   var tbody = this.list.tBodies[0];
 206
 207   if (attop && tbody.rows.length)
 208     tbody.insertBefore(row, tbody.firstChild);
 209   else
 210     tbody.appendChild(row);
 211
 212   this.init_row(row);
 213   this.rowcount++;
 214 },
 215
 216
 217
 218 /**
 219  * Set focus to the list
 220  */
 221 focus: function(e)
 222 {
 223   var n, id;
 224   this.focused = true;
 225
 226   for (n in this.selection) {
 227     id = this.selection[n];
 228     if (this.rows[id] && this.rows[id].obj) {
 229       $(this.rows[id].obj).addClass('selected').removeClass('unfocused');
 230     }
 231   }
 232
 233   // Un-focus already focused elements
 234   $('*:focus', window).blur();
 235   $('iframe').each(function() { this.blur(); });
 236
 237   if (e || (e = window.event))
 238     rcube_event.cancel(e);
 239 },
 240
 241
 242 /**
 243  * remove focus from the list
 244  */
 245 blur: function()
 246 {
 247   var n, id;
 248   this.focused = false;
 249   for (n in this.selection) {
 250     id = this.selection[n];
 251     if (this.rows[id] && this.rows[id].obj) {
 252       $(this.rows[id].obj).removeClass('selected').addClass('unfocused');
 253     }
 254   }
 255 },
 256
 257
 258 /**
 259  * onmousedown-handler of message list column
 260  */
 261 drag_column: function(e, col)
 262 {
 263   if (this.colcount > 1) {
 264     this.drag_start = true;
 265     this.drag_mouse_start = rcube_event.get_mouse_pos(e);
 266
 267     rcube_event.add_listener({event:'mousemove', object:this, method:'column_drag_mouse_move'});
 268     rcube_event.add_listener({event:'mouseup', object:this, method:'column_drag_mouse_up'});
 269
 270     // enable dragging over iframes
 271     this.add_dragfix();
 272
 273     // find selected column number
 274     for (var i=0; i<this.list.tHead.rows[0].cells.length; i++) {
 275       if (col == this.list.tHead.rows[0].cells[i]) {
 276         this.selected_column = i;
 277         break;
 278       }
 279     }
 280   }
 281
 282   return false;
 283 },
 284
 285
 286 /**
 287  * onmousedown-handler of message list row
 288  */
 289 drag_row: function(e, id)
 290 {
 291   // don't do anything (another action processed before)
 292   var evtarget = rcube_event.get_target(e),
 293     tagname = evtarget.tagName.toLowerCase();
 294
 295   if (this.dont_select || (evtarget && (tagname == 'input' || tagname == 'img')))
 296     return true;
 297
 298   // accept right-clicks
 299   if (rcube_event.get_button(e) == 2)
 300     return true;
 301
 302   this.in_selection_before = this.in_selection(id) ? id : false;
 303
 304   // selects currently unselected row
 305   if (!this.in_selection_before) {
 306     var mod_key = rcube_event.get_modifier(e);
 307     this.select_row(id, mod_key, false);
 308   }
 309
 310   if (this.draggable && this.selection.length) {
 311     this.drag_start = true;
 312     this.drag_mouse_start = rcube_event.get_mouse_pos(e);
 313     rcube_event.add_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
 314     rcube_event.add_listener({event:'mouseup', object:this, method:'drag_mouse_up'});
 315     if (bw.iphone || bw.ipad) {
 316       rcube_event.add_listener({event:'touchmove', object:this, method:'drag_mouse_move'});
 317       rcube_event.add_listener({event:'touchend', object:this, method:'drag_mouse_up'});
 318     }
 319
 320     // enable dragging over iframes
 321     this.add_dragfix();
 322   }
 323
 324   return false;
 325 },
 326
 327
 328 /**
 329  * onmouseup-handler of message list row
 330  */
 331 click_row: function(e, id)
 332 {
 333   var now = new Date().getTime(),
 334     mod_key = rcube_event.get_modifier(e),
 335     evtarget = rcube_event.get_target(e),
 336     tagname = evtarget.tagName.toLowerCase();
 337
 338   if ((evtarget && (tagname == 'input' || tagname == 'img')))
 339     return true;
 340
 341   // don't do anything (another action processed before)
 342   if (this.dont_select) {
 343     this.dont_select = false;
 344     return false;
 345   }
 346
 347   var dblclicked = now - this.rows[id].clicked < this.dblclick_time;
 348
 349   // unselects currently selected row
 350   if (!this.drag_active && this.in_selection_before == id && !dblclicked)
 351     this.select_row(id, mod_key, false);
 352
 353   this.drag_start = false;
 354   this.in_selection_before = false;
 355
 356   // row was double clicked
 357   if (this.rows && dblclicked && this.in_selection(id))
 358     this.triggerEvent('dblclick');
 359   else
 360     this.triggerEvent('click');
 361
 362   if (!this.drag_active) {
 363     // remove temp divs
 364     this.del_dragfix();
 365     rcube_event.cancel(e);
 366   }
 367
 368   this.rows[id].clicked = now;
 369   return false;
 370 },
 371
 372
 373 /*
 374  * Returns thread root ID for specified row ID
 375  */
 376 find_root: function(uid)
 377 {
 378    var r = this.rows[uid];
 379
 380    if (r && r.parent_uid)
 381      return this.find_root(r.parent_uid);
 382    else
 383      return uid;
 384 },
 385
 386
 387 expand_row: function(e, id)
 388 {
 389   var row = this.rows[id],
 390     evtarget = rcube_event.get_target(e),
 391     mod_key = rcube_event.get_modifier(e);
 392
 393   // Don't select this message
 394   this.dont_select = true;
 395   // Don't treat double click on the expando as double click on the message.
 396   row.clicked = 0;
 397
 398   if (row.expanded) {
 399     evtarget.className = 'collapsed';
 400     if (mod_key == CONTROL_KEY || this.multiexpand)
 401       this.collapse_all(row);
 402     else
 403       this.collapse(row);
 404   }
 405   else {
 406     evtarget.className = 'expanded';
 407     if (mod_key == CONTROL_KEY || this.multiexpand)
 408       this.expand_all(row);
 409     else
 410      this.expand(row);
 411   }
 412 },
 413
 414 collapse: function(row)
 415 {
 416   row.expanded = false;
 417   this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
 418   var depth = row.depth;
 419   var new_row = row ? row.obj.nextSibling : null;
 420   var r;
 421
 422   while (new_row) {
 423     if (new_row.nodeType == 1) {
 424       var r = this.rows[new_row.uid];
 425       if (r && r.depth <= depth)
 426         break;
 427       $(new_row).css('display', 'none');
 428       if (r.expanded) {
 429         r.expanded = false;
 430         this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
 431       }
 432     }
 433     new_row = new_row.nextSibling;
 434   }
 435
 436   return false;
 437 },
 438
 439 expand: function(row)
 440 {
 441   var r, p, depth, new_row, last_expanded_parent_depth;
 442
 443   if (row) {
 444     row.expanded = true;
 445     depth = row.depth;
 446     new_row = row.obj.nextSibling;
 447     this.update_expando(row.uid, true);
 448     this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
 449   }
 450   else {
 451     var tbody = this.list.tBodies[0];
 452     new_row = tbody.firstChild;
 453     depth = 0;
 454     last_expanded_parent_depth = 0;
 455   }
 456
 457   while (new_row) {
 458     if (new_row.nodeType == 1) {
 459       r = this.rows[new_row.uid];
 460       if (r) {
 461         if (row && (!r.depth || r.depth <= depth))
 462           break;
 463
 464         if (r.parent_uid) {
 465           p = this.rows[r.parent_uid];
 466           if (p && p.expanded) {
 467             if ((row && p == row) || last_expanded_parent_depth >= p.depth - 1) {
 468               last_expanded_parent_depth = p.depth;
 469               $(new_row).css('display', '');
 470               r.expanded = true;
 471               this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
 472             }
 473           }
 474           else
 475             if (row && (! p || p.depth <= depth))
 476               break;
 477         }
 478       }
 479     }
 480     new_row = new_row.nextSibling;
 481   }
 482
 483   return false;
 484 },
 485
 486
 487 collapse_all: function(row)
 488 {
 489   var depth, new_row, r;
 490
 491   if (row) {
 492     row.expanded = false;
 493     depth = row.depth;
 494     new_row = row.obj.nextSibling;
 495     this.update_expando(row.uid);
 496     this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
 497
 498     // don't collapse sub-root tree in multiexpand mode
 499     if (depth && this.multiexpand)
 500       return false;
 501   }
 502   else {
 503     new_row = this.list.tBodies[0].firstChild;
 504     depth = 0;
 505   }
 506
 507   while (new_row) {
 508     if (new_row.nodeType == 1) {
 509       if (r = this.rows[new_row.uid]) {
 510         if (row && (!r.depth || r.depth <= depth))
 511           break;
 512
 513         if (row || r.depth)
 514           $(new_row).css('display', 'none');
 515         if (r.has_children && r.expanded) {
 516           r.expanded = false;
 517           this.update_expando(r.uid, false);
 518           this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
 519         }
 520       }
 521     }
 522     new_row = new_row.nextSibling;
 523   }
 524
 525   return false;
 526 },
 527
 528 expand_all: function(row)
 529 {
 530   var depth, new_row, r;
 531
 532   if (row) {
 533     row.expanded = true;
 534     depth = row.depth;
 535     new_row = row.obj.nextSibling;
 536     this.update_expando(row.uid, true);
 537     this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded });
 538   }
 539   else {
 540     new_row = this.list.tBodies[0].firstChild;
 541     depth = 0;
 542   }
 543
 544   while (new_row) {
 545     if (new_row.nodeType == 1) {
 546       if (r = this.rows[new_row.uid]) {
 547         if (row && r.depth <= depth)
 548           break;
 549
 550         $(new_row).css('display', '');
 551         if (r.has_children && !r.expanded) {
 552           r.expanded = true;
 553           this.update_expando(r.uid, true);
 554           this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded });
 555         }
 556       }
 557     }
 558     new_row = new_row.nextSibling;
 559   }
 560   return false;
 561 },
 562
 563 update_expando: function(uid, expanded)
 564 {
 565   var expando = document.getElementById('rcmexpando' + uid);
 566   if (expando)
 567     expando.className = expanded ? 'expanded' : 'collapsed';
 568 },
 569
 570
 571 /**
 572  * get first/next/previous/last rows that are not hidden
 573  */
 574 get_next_row: function()
 575 {
 576   if (!this.rows)
 577     return false;
 578
 579   var last_selected_row = this.rows[this.last_selected],
 580     new_row = last_selected_row ? last_selected_row.obj.nextSibling : null;
 581
 582   while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none'))
 583     new_row = new_row.nextSibling;
 584
 585   return new_row;
 586 },
 587
 588 get_prev_row: function()
 589 {
 590   if (!this.rows)
 591     return false;
 592
 593   var last_selected_row = this.rows[this.last_selected],
 594     new_row = last_selected_row ? last_selected_row.obj.previousSibling : null;
 595
 596   while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none'))
 597     new_row = new_row.previousSibling;
 598
 599   return new_row;
 600 },
 601
 602 get_first_row: function()
 603 {
 604   if (this.rowcount) {
 605     var i, len, rows = this.list.tBodies[0].rows;
 606
 607     for (i=0, len=rows.length-1; i<len; i++)
 608       if (rows[i].id && String(rows[i].id).match(/^rcmrow([a-z0-9\-_=\+\/]+)/i) && this.rows[RegExp.$1] != null)
 609             return RegExp.$1;
 610   }
 611
 612   return null;
 613 },
 614
 615 get_last_row: function()
 616 {
 617   if (this.rowcount) {
 618     var i, rows = this.list.tBodies[0].rows;
 619
 620     for (i=rows.length-1; i>=0; i--)
 621       if (rows[i].id && String(rows[i].id).match(/^rcmrow([a-z0-9\-_=\+\/]+)/i) && this.rows[RegExp.$1] != null)
 622         return RegExp.$1;
 623   }
 624
 625   return null;
 626 },
 627
 628
 629 /**
 630  * selects or unselects the proper row depending on the modifier key pressed
 631  */
 632 select_row: function(id, mod_key, with_mouse)
 633 {
 634   var select_before = this.selection.join(',');
 635   if (!this.multiselect)
 636     mod_key = 0;
 637
 638   if (!this.shift_start)
 639     this.shift_start = id
 640
 641   if (!mod_key) {
 642     this.shift_start = id;
 643     this.highlight_row(id, false);
 644     this.multi_selecting = false;
 645   }
 646   else {
 647     switch (mod_key) {
 648       case SHIFT_KEY:
 649         this.shift_select(id, false);
 650         break;
 651
 652       case CONTROL_KEY:
 653         if (!with_mouse)
 654           this.highlight_row(id, true);
 655         break;
 656
 657       case CONTROL_SHIFT_KEY:
 658         this.shift_select(id, true);
 659         break;
 660
 661       default:
 662         this.highlight_row(id, false);
 663         break;
 664     }
 665     this.multi_selecting = true;
 666   }
 667
 668   // trigger event if selection changed
 669   if (this.selection.join(',') != select_before)
 670     this.triggerEvent('select');
 671
 672   if (this.last_selected != 0 && this.rows[this.last_selected])
 673     $(this.rows[this.last_selected].obj).removeClass('focused');
 674
 675   // unselect if toggleselect is active and the same row was clicked again
 676   if (this.toggleselect && this.last_selected == id) {
 677     this.clear_selection();
 678     id = null;
 679   }
 680   else
 681     $(this.rows[id].obj).addClass('focused');
 682
 683   if (!this.selection.length)
 684     this.shift_start = null;
 685
 686   this.last_selected = id;
 687 },
 688
 689
 690 /**
 691  * Alias method for select_row
 692  */
 693 select: function(id)
 694 {
 695   this.select_row(id, false);
 696   this.scrollto(id);
 697 },
 698
 699
 700 /**
 701  * Select row next to the last selected one.
 702  * Either below or above.
 703  */
 704 select_next: function()
 705 {
 706   var next_row = this.get_next_row(),
 707     prev_row = this.get_prev_row(),
 708     new_row = (next_row) ? next_row : prev_row;
 709
 710   if (new_row)
 711     this.select_row(new_row.uid, false, false);
 712 },
 713
 714
 715 /**
 716  * Select first row
 717  */
 718 select_first: function(mod_key)
 719 {
 720   var row = this.get_first_row();
 721   if (row) {
 722     if (mod_key) {
 723       this.shift_select(row, mod_key);
 724       this.triggerEvent('select');
 725       this.scrollto(row);
 726     }
 727     else {
 728       this.select(row);
 729     }
 730   }
 731 },
 732
 733
 734 /**
 735  * Select last row
 736  */
 737 select_last: function(mod_key)
 738 {
 739   var row = this.get_last_row();
 740   if (row) {
 741     if (mod_key) {
 742       this.shift_select(row, mod_key);
 743       this.triggerEvent('select');
 744       this.scrollto(row);
 745     }
 746     else {
 747       this.select(row);
 748     }
 749   }
 750 },
 751
 752
 753 /**
 754  * Add all childs of the given row to selection
 755  */
 756 select_childs: function(uid)
 757 {
 758   if (!this.rows[uid] || !this.rows[uid].has_children)
 759     return;
 760
 761   var depth = this.rows[uid].depth,
 762     row = this.rows[uid].obj.nextSibling;
 763
 764   while (row) {
 765     if (row.nodeType == 1) {
 766       if ((r = this.rows[row.uid])) {
 767         if (!r.depth || r.depth <= depth)
 768           break;
 769         if (!this.in_selection(r.uid))
 770           this.select_row(r.uid, CONTROL_KEY);
 771       }
 772     }
 773     row = row.nextSibling;
 774   }
 775 },
 776
 777
 778 /**
 779  * Perform selection when shift key is pressed
 780  */
 781 shift_select: function(id, control)
 782 {
 783   if (!this.rows[this.shift_start] || !this.selection.length)
 784     this.shift_start = id;
 785
 786   var n, from_rowIndex = this.rows[this.shift_start].obj.rowIndex,
 787     to_rowIndex = this.rows[id].obj.rowIndex,
 788     i = ((from_rowIndex < to_rowIndex)? from_rowIndex : to_rowIndex),
 789     j = ((from_rowIndex > to_rowIndex)? from_rowIndex : to_rowIndex);
 790
 791   // iterate through the entire message list
 792   for (n in this.rows) {
 793     if (this.rows[n].obj.rowIndex >= i && this.rows[n].obj.rowIndex <= j) {
 794       if (!this.in_selection(n)) {
 795         this.highlight_row(n, true);
 796       }
 797     }
 798     else {
 799       if (this.in_selection(n) && !control) {
 800         this.highlight_row(n, true);
 801       }
 802     }
 803   }
 804 },
 805
 806
 807 /**
 808  * Check if given id is part of the current selection
 809  */
 810 in_selection: function(id)
 811 {
 812   for (var n in this.selection)
 813     if (this.selection[n]==id)
 814       return true;
 815
 816   return false;
 817 },
 818
 819
 820 /**
 821  * Select each row in list
 822  */
 823 select_all: function(filter)
 824 {
 825   if (!this.rows || !this.rows.length)
 826     return false;
 827
 828   // reset but remember selection first
 829   var n, select_before = this.selection.join(',');
 830   this.selection = [];
 831
 832   for (n in this.rows) {
 833     if (!filter || this.rows[n][filter] == true) {
 834       this.last_selected = n;
 835       this.highlight_row(n, true);
 836     }
 837     else {
 838       $(this.rows[n].obj).removeClass('selected').removeClass('unfocused');
 839     }
 840   }
 841
 842   // trigger event if selection changed
 843   if (this.selection.join(',') != select_before)
 844     this.triggerEvent('select');
 845
 846   this.focus();
 847
 848   return true;
 849 },
 850
 851
 852 /**
 853  * Invert selection
 854  */
 855 invert_selection: function()
 856 {
 857   if (!this.rows || !this.rows.length)
 858     return false;
 859
 860   // remember old selection
 861   var n, select_before = this.selection.join(',');
 862
 863   for (n in this.rows)
 864     this.highlight_row(n, true);
 865
 866   // trigger event if selection changed
 867   if (this.selection.join(',') != select_before)
 868     this.triggerEvent('select');
 869
 870   this.focus();
 871
 872   return true;
 873 },
 874
 875
 876 /**
 877  * Unselect selected row(s)
 878  */
 879 clear_selection: function(id)
 880 {
 881   var n, num_select = this.selection.length;
 882
 883   // one row
 884   if (id) {
 885     for (n in this.selection)
 886       if (this.selection[n] == id) {
 887         this.selection.splice(n,1);
 888         break;
 889       }
 890   }
 891   // all rows
 892   else {
 893     for (n in this.selection)
 894       if (this.rows[this.selection[n]]) {
 895         $(this.rows[this.selection[n]].obj).removeClass('selected').removeClass('unfocused');
 896       }
 897
 898     this.selection = [];
 899   }
 900
 901   if (num_select && !this.selection.length)
 902     this.triggerEvent('select');
 903 },
 904
 905
 906 /**
 907  * Getter for the selection array
 908  */
 909 get_selection: function()
 910 {
 911   return this.selection;
 912 },
 913
 914
 915 /**
 916  * Return the ID if only one row is selected
 917  */
 918 get_single_selection: function()
 919 {
 920   if (this.selection.length == 1)
 921     return this.selection[0];
 922   else
 923     return null;
 924 },
 925
 926
 927 /**
 928  * Highlight/unhighlight a row
 929  */
 930 highlight_row: function(id, multiple)
 931 {
 932   if (this.rows[id] && !multiple) {
 933     if (this.selection.length > 1 || !this.in_selection(id)) {
 934       this.clear_selection();
 935       this.selection[0] = id;
 936       $(this.rows[id].obj).addClass('selected');
 937     }
 938   }
 939   else if (this.rows[id]) {
 940     if (!this.in_selection(id)) { // select row
 941       this.selection[this.selection.length] = id;
 942       $(this.rows[id].obj).addClass('selected');
 943     }
 944     else { // unselect row
 945       var p = $.inArray(id, this.selection),
 946         a_pre = this.selection.slice(0, p),
 947         a_post = this.selection.slice(p+1, this.selection.length);
 948
 949       this.selection = a_pre.concat(a_post);
 950       $(this.rows[id].obj).removeClass('selected').removeClass('unfocused');
 951     }
 952   }
 953 },
 954
 955
 956 /**
 957  * Handler for keyboard events
 958  */
 959 key_press: function(e)
 960 {
 961   var target = e.target || {};
 962   if (this.focused != true || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
 963     return true;
 964
 965   var keyCode = rcube_event.get_keycode(e),
 966     mod_key = rcube_event.get_modifier(e);
 967
 968   switch (keyCode) {
 969     case 40:
 970     case 38:
 971     case 63233: // "down", in safari keypress
 972     case 63232: // "up", in safari keypress
 973       // Stop propagation so that the browser doesn't scroll
 974       rcube_event.cancel(e);
 975       return this.use_arrow_key(keyCode, mod_key);
 976     case 61:
 977     case 107: // Plus sign on a numeric keypad (fc11 + firefox 3.5.2)
 978     case 109:
 979     case 32:
 980       // Stop propagation
 981       rcube_event.cancel(e);
 982       var ret = this.use_plusminus_key(keyCode, mod_key);
 983       this.key_pressed = keyCode;
 984       this.modkey = mod_key;
 985       this.triggerEvent('keypress');
 986       this.modkey = 0;
 987       return ret;
 988     case 36: // Home
 989       this.select_first(mod_key);
 990       return rcube_event.cancel(e);
 991     case 35: // End
 992       this.select_last(mod_key);
 993       return rcube_event.cancel(e);
 994     default:
 995       this.key_pressed = keyCode;
 996       this.modkey = mod_key;
 997       this.triggerEvent('keypress');
 998       this.modkey = 0;
 999
1000       if (this.key_pressed == this.BACKSPACE_KEY)
1001         return rcube_event.cancel(e);
1002   }
1003
1004   return true;
1005 },
1006
1007 /**
1008  * Handler for keydown events
1009  */
1010 key_down: function(e)
1011 {
1012   var target = e.target || {};
1013   if (this.focused != true || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
1014     return true;
1015
1016   switch (rcube_event.get_keycode(e)) {
1017     case 27:
1018       if (this.drag_active)
1019       return this.drag_mouse_up(e);
1020       if (this.col_drag_active) {
1021         this.selected_column = null;
1022         return this.column_drag_mouse_up(e);
1023       }
1024
1025     case 40:
1026     case 38:
1027     case 63233:
1028     case 63232:
1029     case 61:
1030     case 107:
1031     case 109:
1032     case 32:
1033       if (!rcube_event.get_modifier(e) && this.focused)
1034         return rcube_event.cancel(e);
1035
1036     default:
1037   }
1038
1039   return true;
1040 },
1041
1042
1043 /**
1044  * Special handling method for arrow keys
1045  */
1046 use_arrow_key: function(keyCode, mod_key)
1047 {
1048   var new_row;
1049   // Safari uses the nonstandard keycodes 63232/63233 for up/down, if we're
1050   // using the keypress event (but not the keydown or keyup event).
1051   if (keyCode == 40 || keyCode == 63233) // down arrow key pressed
1052     new_row = this.get_next_row();
1053   else if (keyCode == 38 || keyCode == 63232) // up arrow key pressed
1054     new_row = this.get_prev_row();
1055
1056   if (new_row) {
1057     this.select_row(new_row.uid, mod_key, false);
1058     this.scrollto(new_row.uid);
1059   }
1060
1061   return false;
1062 },
1063
1064
1065 /**
1066  * Special handling method for +/- keys
1067  */
1068 use_plusminus_key: function(keyCode, mod_key)
1069 {
1070   var selected_row = this.rows[this.last_selected];
1071   if (!selected_row)
1072     return;
1073
1074   if (keyCode == 32)
1075     keyCode = selected_row.expanded ? 109 : 61;
1076   if (keyCode == 61 || keyCode == 107)
1077     if (mod_key == CONTROL_KEY || this.multiexpand)
1078       this.expand_all(selected_row);
1079     else
1080      this.expand(selected_row);
1081   else
1082     if (mod_key == CONTROL_KEY || this.multiexpand)
1083       this.collapse_all(selected_row);
1084     else
1085       this.collapse(selected_row);
1086
1087   this.update_expando(selected_row.uid, selected_row.expanded);
1088
1089   return false;
1090 },
1091
1092
1093 /**
1094  * Try to scroll the list to make the specified row visible
1095  */
1096 scrollto: function(id)
1097 {
1098   var row = this.rows[id].obj;
1099   if (row && this.frame) {
1100     var scroll_to = Number(row.offsetTop);
1101
1102     // expand thread if target row is hidden (collapsed)
1103     if (!scroll_to && this.rows[id].parent_uid) {
1104       var parent = this.find_root(this.rows[id].uid);
1105       this.expand_all(this.rows[parent]);
1106       scroll_to = Number(row.offsetTop);
1107     }
1108
1109     if (scroll_to < Number(this.frame.scrollTop))
1110       this.frame.scrollTop = scroll_to;
1111     else if (scroll_to + Number(row.offsetHeight) > Number(this.frame.scrollTop) + Number(this.frame.offsetHeight))
1112       this.frame.scrollTop = (scroll_to + Number(row.offsetHeight)) - Number(this.frame.offsetHeight);
1113   }
1114 },
1115
1116
1117 /**
1118  * Handler for mouse move events
1119  */
1120 drag_mouse_move: function(e)
1121 {
1122   // convert touch event
1123   if (e.type == 'touchmove') {
1124     if (e.changedTouches.length == 1)
1125       e = rcube_event.touchevent(e.changedTouches[0]);
1126     else
1127       return rcube_event.cancel(e);
1128   }
1129
1130   if (this.drag_start) {
1131     // check mouse movement, of less than 3 pixels, don't start dragging
1132     var m = rcube_event.get_mouse_pos(e);
1133
1134     if (!this.drag_mouse_start || (Math.abs(m.x - this.drag_mouse_start.x) < 3 && Math.abs(m.y - this.drag_mouse_start.y) < 3))
1135       return false;
1136
1137     if (!this.draglayer)
1138       this.draglayer = $('<div>').attr('id', 'rcmdraglayer')
1139         .css({ position:'absolute', display:'none', 'z-index':2000 })
1140         .appendTo(document.body);
1141
1142     // also select childs of (collapsed) threads for dragging
1143     var n, uid, selection = $.merge([], this.selection);
1144     for (n in selection) {
1145       uid = selection[n];
1146       if (this.rows[uid].has_children && !this.rows[uid].expanded)
1147         this.select_childs(uid);
1148     }
1149
1150     // reset content
1151     this.draglayer.html('');
1152
1153     // get subjects of selected messages
1154     var c, i, n, subject, obj;
1155     for (n=0; n<this.selection.length; n++) {
1156       // only show 12 lines
1157       if (n>12) {
1158         this.draglayer.append('...');
1159         break;
1160       }
1161
1162       if (obj = this.rows[this.selection[n]].obj) {
1163         subject = '';
1164
1165         for (c=0, i=0; i<obj.childNodes.length; i++) {
1166               if (obj.childNodes[i].nodeName == 'TD') {
1167             if (n == 0)
1168                   this.drag_start_pos = $(obj.childNodes[i]).offset();
1169
1170                 if (this.subject_col < 0 || (this.subject_col >= 0 && this.subject_col == c)) {
1171                   var entry, node, tmp_node, nodes = obj.childNodes[i].childNodes;
1172                   // find text node
1173                   for (m=0; m<nodes.length; m++) {
1174                     if ((tmp_node = obj.childNodes[i].childNodes[m]) && (tmp_node.nodeType==3 || tmp_node.nodeName=='A'))
1175                       node = tmp_node;
1176                   }
1177
1178                   if (!node)
1179                     break;
1180
1181               subject = $(node).text();
1182                   // remove leading spaces
1183               subject = $.trim(subject);
1184               // truncate line to 50 characters
1185               subject = (subject.length > 50 ? subject.substring(0, 50) + '...' : subject);
1186
1187               entry = $('<div>').text(subject);
1188                   this.draglayer.append(entry);
1189               break;
1190             }
1191             c++;
1192           }
1193         }
1194       }
1195     }
1196
1197     this.draglayer.show();
1198     this.drag_active = true;
1199     this.triggerEvent('dragstart');
1200   }
1201
1202   if (this.drag_active && this.draglayer) {
1203     var pos = rcube_event.get_mouse_pos(e);
1204     this.draglayer.css({ left:(pos.x+20)+'px', top:(pos.y-5 + (bw.ie ? document.documentElement.scrollTop : 0))+'px' });
1205     this.triggerEvent('dragmove', e?e:window.event);
1206   }
1207
1208   this.drag_start = false;
1209
1210   return false;
1211 },
1212
1213
1214 /**
1215  * Handler for mouse up events
1216  */
1217 drag_mouse_up: function(e)
1218 {
1219   document.onmousemove = null;
1220
1221   if (e.type == 'touchend') {
1222     if (e.changedTouches.length != 1)
1223       return rcube_event.cancel(e);
1224   }
1225
1226   if (this.draglayer && this.draglayer.is(':visible')) {
1227     if (this.drag_start_pos)
1228       this.draglayer.animate(this.drag_start_pos, 300, 'swing').hide(20);
1229     else
1230       this.draglayer.hide();
1231   }
1232
1233   if (this.drag_active)
1234     this.focus();
1235   this.drag_active = false;
1236
1237   rcube_event.remove_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
1238   rcube_event.remove_listener({event:'mouseup', object:this, method:'drag_mouse_up'});
1239
1240   if (bw.iphone || bw.ipad) {
1241     rcube_event.remove_listener({event:'touchmove', object:this, method:'drag_mouse_move'});
1242     rcube_event.remove_listener({event:'touchend', object:this, method:'drag_mouse_up'});
1243   }
1244
1245   // remove temp divs
1246   this.del_dragfix();
1247
1248   this.triggerEvent('dragend');
1249
1250   return rcube_event.cancel(e);
1251 },
1252
1253
1254 /**
1255  * Handler for mouse move events for dragging list column
1256  */
1257 column_drag_mouse_move: function(e)
1258 {
1259   if (this.drag_start) {
1260     // check mouse movement, of less than 3 pixels, don't start dragging
1261     var i, m = rcube_event.get_mouse_pos(e);
1262
1263     if (!this.drag_mouse_start || (Math.abs(m.x - this.drag_mouse_start.x) < 3 && Math.abs(m.y - this.drag_mouse_start.y) < 3))
1264       return false;
1265
1266     if (!this.col_draglayer) {
1267       var lpos = $(this.list).offset(),
1268         cells = this.list.tHead.rows[0].cells;
1269
1270       // create dragging layer
1271       this.col_draglayer = $('<div>').attr('id', 'rcmcoldraglayer')
1272         .css(lpos).css({ position:'absolute', 'z-index':2001,
1273            'background-color':'white', opacity:0.75,
1274            height: (this.frame.offsetHeight-2)+'px', width: (this.frame.offsetWidth-2)+'px' })
1275         .appendTo(document.body)
1276         // ... and column position indicator
1277        .append($('<div>').attr('id', 'rcmcolumnindicator')
1278           .css({ position:'absolute', 'border-right':'2px dotted #555',
1279           'z-index':2002, height: (this.frame.offsetHeight-2)+'px' }));
1280
1281       this.cols = [];
1282       this.list_pos = this.list_min_pos = lpos.left;
1283       // save columns positions
1284       for (i=0; i<cells.length; i++) {
1285         this.cols[i] = cells[i].offsetWidth;
1286         if (this.column_fixed !== null && i <= this.column_fixed) {
1287           this.list_min_pos += this.cols[i];
1288         }
1289       }
1290     }
1291
1292     this.col_draglayer.show();
1293     this.col_drag_active = true;
1294     this.triggerEvent('column_dragstart');
1295   }
1296
1297   // set column indicator position
1298   if (this.col_drag_active && this.col_draglayer) {
1299     var i, cpos = 0, pos = rcube_event.get_mouse_pos(e);
1300
1301     for (i=0; i<this.cols.length; i++) {
1302       if (pos.x >= this.cols[i]/2 + this.list_pos + cpos)
1303         cpos += this.cols[i];
1304       else
1305         break;
1306     }
1307
1308     // handle fixed columns on left
1309     if (i == 0 && this.list_min_pos > pos.x)
1310       cpos = this.list_min_pos - this.list_pos;
1311     // empty list needs some assignment
1312     else if (!this.list.rowcount && i == this.cols.length)
1313       cpos -= 2;
1314     $('#rcmcolumnindicator').css({ width: cpos+'px'});
1315     this.triggerEvent('column_dragmove', e?e:window.event);
1316   }
1317
1318   this.drag_start = false;
1319
1320   return false;
1321 },
1322
1323
1324 /**
1325  * Handler for mouse up events for dragging list columns
1326  */
1327 column_drag_mouse_up: function(e)
1328 {
1329   document.onmousemove = null;
1330
1331   if (this.col_draglayer) {
1332     (this.col_draglayer).remove();
1333     this.col_draglayer = null;
1334   }
1335
1336   if (this.col_drag_active)
1337     this.focus();
1338   this.col_drag_active = false;
1339
1340   rcube_event.remove_listener({event:'mousemove', object:this, method:'column_drag_mouse_move'});
1341   rcube_event.remove_listener({event:'mouseup', object:this, method:'column_drag_mouse_up'});
1342   // remove temp divs
1343   this.del_dragfix();
1344
1345   if (this.selected_column !== null && this.cols && this.cols.length) {
1346     var i, cpos = 0, pos = rcube_event.get_mouse_pos(e);
1347
1348     // find destination position
1349     for (i=0; i<this.cols.length; i++) {
1350       if (pos.x >= this.cols[i]/2 + this.list_pos + cpos)
1351         cpos += this.cols[i];
1352       else
1353         break;
1354     }
1355
1356     if (i != this.selected_column && i != this.selected_column+1) {
1357       this.column_replace(this.selected_column, i);
1358     }
1359   }
1360
1361   this.triggerEvent('column_dragend');
1362
1363   return rcube_event.cancel(e);
1364 },
1365
1366
1367 /**
1368  * Creates a layer for drag&drop over iframes
1369  */
1370 add_dragfix: function()
1371 {
1372   $('iframe').each(function() {
1373     $('<div class="iframe-dragdrop-fix"></div>')
1374       .css({background: '#fff',
1375         width: this.offsetWidth+'px', height: this.offsetHeight+'px',
1376         position: 'absolute', opacity: '0.001', zIndex: 1000
1377       })
1378       .css($(this).offset())
1379       .appendTo(document.body);
1380   });
1381 },
1382
1383
1384 /**
1385  * Removes the layer for drag&drop over iframes
1386  */
1387 del_dragfix: function()
1388 {
1389   $('div.iframe-dragdrop-fix').each(function() { this.parentNode.removeChild(this); });
1390 },
1391
1392
1393 /**
1394  * Replaces two columns
1395  */
1396 column_replace: function(from, to)
1397 {
1398   var len, cells = this.list.tHead.rows[0].cells,
1399     elem = cells[from],
1400     before = cells[to],
1401     td = document.createElement('td');
1402
1403   // replace header cells
1404   if (before)
1405     cells[0].parentNode.insertBefore(td, before);
1406   else
1407     cells[0].parentNode.appendChild(td);
1408   cells[0].parentNode.replaceChild(elem, td);
1409
1410   // replace list cells
1411   for (r=0, len=this.list.tBodies[0].rows.length; r<len; r++) {
1412     row = this.list.tBodies[0].rows[r];
1413
1414     elem = row.cells[from];
1415     before = row.cells[to];
1416     td = document.createElement('td');
1417
1418     if (before)
1419       row.insertBefore(td, before);
1420     else
1421       row.appendChild(td);
1422     row.replaceChild(elem, td);
1423   }
1424
1425   // update subject column position
1426   if (this.subject_col == from)
1427     this.subject_col = to > from ? to - 1 : to;
1428   else if (this.subject_col < from && to <= this.subject_col)
1429     this.subject_col++;
1430   else if (this.subject_col > from && to >= this.subject_col)
1431     this.subject_col--;
1432
1433   this.triggerEvent('column_replace');
1434 }
1435
1436 };
1437
1438 rcube_list_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
1439 rcube_list_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
1440 rcube_list_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;