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, RoundCube Dev, - Switzerland                 |
   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 3055 2009-10-23 18:11:41Z 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
  37   this.subject_col = -1;
  38   this.shiftkey = false;
  39   this.multiselect = false;
  40   this.multi_selecting = false;
  41   this.draggable = false;
  42   this.keyboard = false;
  43   this.toggleselect = false;
  44
  45   this.dont_select = false;
  46   this.drag_active = false;
  47   this.last_selected = 0;
  48   this.shift_start = 0;
  49   this.in_selection_before = false;
  50   this.focused = false;
  51   this.drag_mouse_start = null;
  52   this.dblclick_time = 600;
  53   this.row_init = function(){};
  54
  55   // overwrite default paramaters
  56   if (p && typeof(p)=='object')
  57     for (var n in p)
  58       this[n] = p[n];
  59   }
  60
  61
  62 rcube_list_widget.prototype = {
  63
  64
  65 /**
  66  * get all message rows from HTML table and init each row
  67  */
  68 init: function()
  69 {
  70   if (this.list && this.list.tBodies[0])
  71   {
  72     this.rows = new Array();
  73     this.rowcount = 0;
  74
  75     var row;
  76     for(var r=0; r<this.list.tBodies[0].childNodes.length; r++)
  77     {
  78       row = this.list.tBodies[0].childNodes[r];
  79       while (row && (row.nodeType != 1 || row.style.display == 'none'))
  80       {
  81         row = row.nextSibling;
  82         r++;
  83       }
  84
  85       this.init_row(row);
  86       this.rowcount++;
  87     }
  88
  89     this.frame = this.list.parentNode;
  90
  91     // set body events
  92     if (this.keyboard) {
  93       rcube_event.add_listener({element:document, event:bw.opera?'keypress':'keydown', object:this, method:'key_press'});
  94       rcube_event.add_listener({element:document, event:'keydown', object:this, method:'key_down'});
  95     }
  96   }
  97 },
  98
  99
 100 /**
 101  * Init list row and set mouse events on it
 102  */
 103 init_row: function(row)
 104 {
 105   // make references in internal array and set event handlers
 106   if (row && String(row.id).match(/rcmrow([a-z0-9\-_=\+\/]+)/i))
 107   {
 108     var p = this;
 109     var uid = RegExp.$1;
 110     row.uid = uid;
 111     this.rows[uid] = {uid:uid, id:row.id, obj:row, classname:row.className};
 112
 113     // set eventhandlers to table row
 114     row.onmousedown = function(e){ return p.drag_row(e, this.uid); };
 115     row.onmouseup = function(e){ return p.click_row(e, this.uid); };
 116
 117     if (document.all)
 118       row.onselectstart = function() { return false; };
 119
 120     this.row_init(this.rows[uid]);
 121   }
 122 },
 123
 124
 125 /**
 126  * Remove all list rows
 127  */
 128 clear: function(sel)
 129 {
 130   var tbody = document.createElement('tbody');
 131   this.list.insertBefore(tbody, this.list.tBodies[0]);
 132   this.list.removeChild(this.list.tBodies[1]);
 133   this.rows = new Array();
 134   this.rowcount = 0;
 135
 136   if (sel) this.clear_selection();
 137 },
 138
 139
 140 /**
 141  * 'remove' message row from list (just hide it)
 142  */
 143 remove_row: function(uid, sel_next)
 144 {
 145   if (this.rows[uid].obj)
 146     this.rows[uid].obj.style.display = 'none';
 147
 148   if (sel_next)
 149     this.select_next();
 150
 151   this.rows[uid] = null;
 152   this.rowcount--;
 153 },
 154
 155
 156 /**
 157  * Add row to the list and initialize it
 158  */
 159 insert_row: function(row, attop)
 160 {
 161   if (this.background)
 162     var tbody = this.background;
 163   else
 164     var tbody = this.list.tBodies[0];
 165
 166   if (attop && tbody.rows.length)
 167     tbody.insertBefore(row, tbody.firstChild);
 168   else
 169     tbody.appendChild(row);
 170
 171   this.init_row(row);
 172   this.rowcount++;
 173 },
 174
 175
 176
 177 /**
 178  * Set focus to the list
 179  */
 180 focus: function(e)
 181 {
 182   this.focused = true;
 183   for (var n=0; n<this.selection.length; n++)
 184   {
 185     id = this.selection[n];
 186     if (this.rows[id] && this.rows[id].obj) {
 187       $(this.rows[id].obj).addClass('selected').removeClass('unfocused');
 188     }
 189   }
 190
 191   if (e || (e = window.event))
 192     rcube_event.cancel(e);
 193 },
 194
 195
 196 /**
 197  * remove focus from the list
 198  */
 199 blur: function()
 200 {
 201   var id;
 202   this.focused = false;
 203   for (var n=0; n<this.selection.length; n++)
 204   {
 205     id = this.selection[n];
 206     if (this.rows[id] && this.rows[id].obj) {
 207       $(this.rows[id].obj).removeClass('selected').addClass('unfocused');
 208     }
 209   }
 210 },
 211
 212
 213 /**
 214  * onmousedown-handler of message list row
 215  */
 216 drag_row: function(e, id)
 217 {
 218   // don't do anything (another action processed before)
 219   var evtarget = rcube_event.get_target(e);
 220   var tagname = evtarget.tagName.toLowerCase();
 221   if (this.dont_select || (evtarget && (tagname == 'input' || tagname == 'img')))
 222     return true;
 223
 224   // accept right-clicks
 225   if (rcube_event.get_button(e) == 2)
 226     return true;
 227
 228   this.in_selection_before = this.in_selection(id) ? id : false;
 229
 230   // selects currently unselected row
 231   if (!this.in_selection_before)
 232   {
 233     var mod_key = rcube_event.get_modifier(e);
 234     this.select_row(id, mod_key, false);
 235   }
 236
 237   if (this.draggable && this.selection.length)
 238   {
 239     this.drag_start = true;
 240     this.drag_mouse_start = rcube_event.get_mouse_pos(e);
 241     rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'drag_mouse_move'});
 242     rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'drag_mouse_up'});
 243
 244     // add listener for iframes
 245     var iframes = document.getElementsByTagName('iframe');
 246     this.iframe_events = Object();
 247     for (var n in iframes)
 248     {
 249       var iframedoc = null;
 250       if (iframes[n].contentDocument)
 251         iframedoc = iframes[n].contentDocument;
 252       else if (iframes[n].contentWindow)
 253         iframedoc = iframes[n].contentWindow.document;
 254       else if (iframes[n].document)
 255         iframedoc = iframes[n].document;
 256
 257       if (iframedoc)
 258       {
 259         var list = this;
 260         var pos = $('#'+iframes[n].id).offset();
 261         this.iframe_events[n] = function(e) { e._offset = pos; return list.drag_mouse_move(e); }
 262
 263         if (iframedoc.addEventListener)
 264           iframedoc.addEventListener('mousemove', this.iframe_events[n], false);
 265         else if (iframes[n].attachEvent)
 266           iframedoc.attachEvent('onmousemove', this.iframe_events[n]);
 267         else
 268           iframedoc['onmousemove'] = this.iframe_events[n];
 269
 270         rcube_event.add_listener({element:iframedoc, event:'mouseup', object:this, method:'drag_mouse_up'});
 271       }
 272     }
 273   }
 274
 275   return false;
 276 },
 277
 278
 279 /**
 280  * onmouseup-handler of message list row
 281  */
 282 click_row: function(e, id)
 283 {
 284   var now = new Date().getTime();
 285   var mod_key = rcube_event.get_modifier(e);
 286   var evtarget = rcube_event.get_target(e);
 287   var tagname = evtarget.tagName.toLowerCase();
 288
 289   if ((evtarget && (tagname == 'input' || tagname == 'img')))
 290     return true;
 291
 292   // don't do anything (another action processed before)
 293   if (this.dont_select)
 294     {
 295     this.dont_select = false;
 296     return false;
 297     }
 298
 299   var dblclicked = now - this.rows[id].clicked < this.dblclick_time;
 300
 301   // unselects currently selected row
 302   if (!this.drag_active && this.in_selection_before == id && !dblclicked)
 303     this.select_row(id, mod_key, false);
 304
 305   this.drag_start = false;
 306   this.in_selection_before = false;
 307
 308   // row was double clicked
 309   if (this.rows && dblclicked && this.in_selection(id))
 310     this.triggerEvent('dblclick');
 311   else
 312     this.triggerEvent('click');
 313
 314   if (!this.drag_active)
 315     rcube_event.cancel(e);
 316
 317   this.rows[id].clicked = now;
 318   return false;
 319 },
 320
 321
 322 /**
 323  * get first/next/previous/last rows that are not hidden
 324  */
 325 get_next_row: function()
 326 {
 327   if (!this.rows)
 328     return false;
 329
 330   var last_selected_row = this.rows[this.last_selected];
 331   var new_row = last_selected_row ? last_selected_row.obj.nextSibling : null;
 332   while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none'))
 333     new_row = new_row.nextSibling;
 334
 335   return new_row;
 336 },
 337
 338 get_prev_row: function()
 339 {
 340   if (!this.rows)
 341     return false;
 342
 343   var last_selected_row = this.rows[this.last_selected];
 344   var new_row = last_selected_row ? last_selected_row.obj.previousSibling : null;
 345   while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none'))
 346     new_row = new_row.previousSibling;
 347
 348   return new_row;
 349 },
 350
 351 get_first_row: function()
 352 {
 353   if (this.rowcount)
 354     {
 355     var rows = this.list.tBodies[0].rows;
 356
 357     for(var i=0; i<rows.length-1; i++)
 358       if(rows[i].id && String(rows[i].id).match(/rcmrow([a-z0-9\-_=\+\/]+)/i) && this.rows[RegExp.$1] != null)
 359         return RegExp.$1;
 360     }
 361
 362   return null;
 363 },
 364
 365 get_last_row: function()
 366 {
 367   if (this.rowcount)
 368     {
 369     var rows = this.list.tBodies[0].rows;
 370
 371     for(var i=rows.length-1; i>=0; i--)
 372       if(rows[i].id && String(rows[i].id).match(/rcmrow([a-z0-9\-_=\+\/]+)/i) && this.rows[RegExp.$1] != null)
 373         return RegExp.$1;
 374     }
 375
 376   return null;
 377 },
 378
 379
 380 /**
 381  * selects or unselects the proper row depending on the modifier key pressed
 382  */
 383 select_row: function(id, mod_key, with_mouse)
 384 {
 385   var select_before = this.selection.join(',');
 386   if (!this.multiselect)
 387     mod_key = 0;
 388
 389   if (!this.shift_start)
 390     this.shift_start = id
 391
 392   if (!mod_key)
 393   {
 394     this.shift_start = id;
 395     this.highlight_row(id, false);
 396     this.multi_selecting = false;
 397   }
 398   else
 399   {
 400     switch (mod_key)
 401     {
 402       case SHIFT_KEY:
 403         this.shift_select(id, false);
 404         break;
 405
 406       case CONTROL_KEY:
 407         if (!with_mouse)
 408           this.highlight_row(id, true);
 409         break;
 410
 411       case CONTROL_SHIFT_KEY:
 412         this.shift_select(id, true);
 413         break;
 414
 415       default:
 416         this.highlight_row(id, false);
 417         break;
 418     }
 419     this.multi_selecting = true;
 420   }
 421
 422   // trigger event if selection changed
 423   if (this.selection.join(',') != select_before)
 424     this.triggerEvent('select');
 425
 426   if (this.last_selected != 0 && this.rows[this.last_selected])
 427     $(this.rows[this.last_selected].obj).removeClass('focused');
 428
 429   // unselect if toggleselect is active and the same row was clicked again
 430   if (this.toggleselect && this.last_selected == id)
 431   {
 432     this.clear_selection();
 433     id = null;
 434   }
 435   else
 436     $(this.rows[id].obj).addClass('focused');
 437
 438   if (!this.selection.length)
 439     this.shift_start = null;
 440
 441   this.last_selected = id;
 442 },
 443
 444
 445 /**
 446  * Alias method for select_row
 447  */
 448 select: function(id)
 449 {
 450   this.select_row(id, false);
 451   this.scrollto(id);
 452 },
 453
 454
 455 /**
 456  * Select row next to the last selected one.
 457  * Either below or above.
 458  */
 459 select_next: function()
 460 {
 461   var next_row = this.get_next_row();
 462   var prev_row = this.get_prev_row();
 463   var new_row = (next_row) ? next_row : prev_row;
 464   if (new_row)
 465     this.select_row(new_row.uid, false, false);
 466 },
 467
 468 /**
 469  * Select first row
 470  */
 471 select_first: function()
 472 {
 473   var first_row = this.get_first_row();
 474   if (first_row)
 475     this.select_row(first_row, false, false);
 476 },
 477
 478
 479 /**
 480  * Perform selection when shift key is pressed
 481  */
 482 shift_select: function(id, control)
 483 {
 484   if (!this.rows[this.shift_start] || !this.selection.length)
 485     this.shift_start = id;
 486
 487   var from_rowIndex = this.rows[this.shift_start].obj.rowIndex;
 488   var to_rowIndex = this.rows[id].obj.rowIndex;
 489
 490   var i = ((from_rowIndex < to_rowIndex)? from_rowIndex : to_rowIndex);
 491   var j = ((from_rowIndex > to_rowIndex)? from_rowIndex : to_rowIndex);
 492
 493   // iterate through the entire message list
 494   for (var n in this.rows)
 495   {
 496     if ((this.rows[n].obj.rowIndex >= i) && (this.rows[n].obj.rowIndex <= j))
 497     {
 498       if (!this.in_selection(n))
 499         this.highlight_row(n, true);
 500     }
 501     else
 502     {
 503       if  (this.in_selection(n) && !control)
 504         this.highlight_row(n, true);
 505     }
 506   }
 507 },
 508
 509
 510 /**
 511  * Check if given id is part of the current selection
 512  */
 513 in_selection: function(id)
 514 {
 515   for(var n in this.selection)
 516     if (this.selection[n]==id)
 517       return true;
 518
 519   return false;
 520 },
 521
 522
 523 /**
 524  * Select each row in list
 525  */
 526 select_all: function(filter)
 527 {
 528   if (!this.rows || !this.rows.length)
 529     return false;
 530
 531   // reset but remember selection first
 532   var select_before = this.selection.join(',');
 533   this.selection = new Array();
 534
 535   for (var n in this.rows)
 536   {
 537     if (!filter || (this.rows[n] && this.rows[n][filter] == true))
 538     {
 539       this.last_selected = n;
 540       this.highlight_row(n, true);
 541     }
 542     else if (this.rows[n])
 543     {
 544       $(this.rows[n].obj).removeClass('selected').removeClass('unfocused');
 545     }
 546   }
 547
 548   // trigger event if selection changed
 549   if (this.selection.join(',') != select_before)
 550     this.triggerEvent('select');
 551
 552   this.focus();
 553
 554   return true;
 555 },
 556
 557
 558 /**
 559  * Invert selection
 560  */
 561 invert_selection: function()
 562 {
 563   if (!this.rows || !this.rows.length)
 564     return false;
 565
 566   // remember old selection
 567   var select_before = this.selection.join(',');
 568
 569   for (var n in this.rows)
 570     this.highlight_row(n, true);
 571
 572   // trigger event if selection changed
 573   if (this.selection.join(',') != select_before)
 574     this.triggerEvent('select');
 575
 576   this.focus();
 577
 578   return true;
 579 },
 580
 581
 582 /**
 583  * Unselect selected row(s)
 584  */
 585 clear_selection: function(id)
 586 {
 587   var num_select = this.selection.length;
 588
 589   // one row
 590   if (id)
 591     {
 592     for (var n=0; n<this.selection.length; n++)
 593       if (this.selection[n] == id) {
 594         this.selection.splice(n,1);
 595         break;
 596       }
 597     }
 598   // all rows
 599   else
 600     {
 601     for (var n=0; n<this.selection.length; n++)
 602       if (this.rows[this.selection[n]]) {
 603         $(this.rows[this.selection[n]].obj).removeClass('selected').removeClass('unfocused');
 604         }
 605
 606     this.selection = new Array();
 607     }
 608
 609   if (num_select && !this.selection.length)
 610     this.triggerEvent('select');
 611 },
 612
 613
 614 /**
 615  * Getter for the selection array
 616  */
 617 get_selection: function()
 618 {
 619   return this.selection;
 620 },
 621
 622
 623 /**
 624  * Return the ID if only one row is selected
 625  */
 626 get_single_selection: function()
 627 {
 628   if (this.selection.length == 1)
 629     return this.selection[0];
 630   else
 631     return null;
 632 },
 633
 634
 635 /**
 636  * Highlight/unhighlight a row
 637  */
 638 highlight_row: function(id, multiple)
 639 {
 640   if (this.rows[id] && !multiple)
 641   {
 642     if (this.selection.length > 1 || !this.in_selection(id))
 643     {
 644       this.clear_selection();
 645       this.selection[0] = id;
 646       $(this.rows[id].obj).addClass('selected');
 647     }
 648   }
 649   else if (this.rows[id])
 650   {
 651     if (!this.in_selection(id))  // select row
 652     {
 653       this.selection[this.selection.length] = id;
 654       $(this.rows[id].obj).addClass('selected');
 655     }
 656     else  // unselect row
 657     {
 658       var p = find_in_array(id, this.selection);
 659       var a_pre = this.selection.slice(0, p);
 660       var a_post = this.selection.slice(p+1, this.selection.length);
 661       this.selection = a_pre.concat(a_post);
 662       $(this.rows[id].obj).removeClass('selected').removeClass('unfocused');
 663     }
 664   }
 665 },
 666
 667
 668 /**
 669  * Handler for keyboard events
 670  */
 671 key_press: function(e)
 672 {
 673   if (this.focused != true)
 674     return true;
 675
 676   var keyCode = rcube_event.get_keycode(e);
 677   var mod_key = rcube_event.get_modifier(e);
 678
 679   switch (keyCode)
 680   {
 681     case 40:
 682     case 38:
 683     case 63233: // "down", in safari keypress
 684     case 63232: // "up", in safari keypress
 685       // Stop propagation so that the browser doesn't scroll
 686       rcube_event.cancel(e);
 687       return this.use_arrow_key(keyCode, mod_key);
 688     default:
 689       this.shiftkey = e.shiftKey;
 690       this.key_pressed = keyCode;
 691       this.triggerEvent('keypress');
 692
 693       if (this.key_pressed == this.BACKSPACE_KEY)
 694         return rcube_event.cancel(e);
 695   }
 696
 697   return true;
 698 },
 699
 700 /**
 701  * Handler for keydown events
 702  */
 703 key_down: function(e)
 704 {
 705   switch (rcube_event.get_keycode(e))
 706   {
 707     case 27:
 708       if (this.drag_active)
 709         return this.drag_mouse_up(e);
 710
 711     case 40:
 712     case 38:
 713     case 63233:
 714     case 63232:
 715       if (!rcube_event.get_modifier(e) && this.focused)
 716         return rcube_event.cancel(e);
 717
 718     default:
 719   }
 720
 721   return true;
 722 },
 723
 724
 725 /**
 726  * Special handling method for arrow keys
 727  */
 728 use_arrow_key: function(keyCode, mod_key)
 729 {
 730   var new_row;
 731   // Safari uses the nonstandard keycodes 63232/63233 for up/down, if we're
 732   // using the keypress event (but not the keydown or keyup event).
 733   if (keyCode == 40 || keyCode == 63233) // down arrow key pressed
 734     new_row = this.get_next_row();
 735   else if (keyCode == 38 || keyCode == 63232) // up arrow key pressed
 736     new_row = this.get_prev_row();
 737
 738   if (new_row)
 739   {
 740     this.select_row(new_row.uid, mod_key, true);
 741     this.scrollto(new_row.uid);
 742   }
 743
 744   return false;
 745 },
 746
 747
 748 /**
 749  * Try to scroll the list to make the specified row visible
 750  */
 751 scrollto: function(id)
 752 {
 753   var row = this.rows[id].obj;
 754   if (row && this.frame)
 755   {
 756     var scroll_to = Number(row.offsetTop);
 757
 758     if (scroll_to < Number(this.frame.scrollTop))
 759       this.frame.scrollTop = scroll_to;
 760     else if (scroll_to + Number(row.offsetHeight) > Number(this.frame.scrollTop) + Number(this.frame.offsetHeight))
 761       this.frame.scrollTop = (scroll_to + Number(row.offsetHeight)) - Number(this.frame.offsetHeight);
 762   }
 763 },
 764
 765
 766 /**
 767  * Handler for mouse move events
 768  */
 769 drag_mouse_move: function(e)
 770 {
 771   if (this.drag_start)
 772   {
 773     // check mouse movement, of less than 3 pixels, don't start dragging
 774     var m = rcube_event.get_mouse_pos(e);
 775
 776     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))
 777       return false;
 778
 779     if (!this.draglayer)
 780       this.draglayer = $('<div>').attr('id', 'rcmdraglayer').css({ position:'absolute', display:'none', 'z-index':2000 }).appendTo(document.body);
 781
 782     // get subjects of selectedd messages
 783     var names = '';
 784     var c, i, node, subject, obj;
 785     for(var n=0; n<this.selection.length; n++)
 786     {
 787       if (n>12)  // only show 12 lines
 788       {
 789         names += '...';
 790         break;
 791       }
 792
 793       if (this.rows[this.selection[n]].obj)
 794       {
 795         obj = this.rows[this.selection[n]].obj;
 796         subject = '';
 797
 798         for(c=0, i=0; i<obj.childNodes.length; i++)
 799         {
 800           if (obj.childNodes[i].nodeName == 'TD')
 801           {
 802             if (((node = obj.childNodes[i].firstChild) && (node.nodeType==3 || node.nodeName=='A')) &&
 803               (this.subject_col < 0 || (this.subject_col >= 0 && this.subject_col == c)))
 804             {
 805               if (n == 0) {
 806                 if (node.nodeType == 3)
 807                   this.drag_start_pos = $(obj.childNodes[i]).offset();
 808                 else
 809                   this.drag_start_pos = $(node).offset();
 810               }
 811               subject = node.nodeType==3 ? node.data : node.innerHTML;
 812               // remove leading spaces
 813               subject = subject.replace(/^\s+/i, '');
 814               // truncate line to 50 characters
 815               names += (subject.length > 50 ? subject.substring(0, 50)+'...' : subject) + '<br />';
 816               break;
 817             }
 818             c++;
 819           }
 820         }
 821       }
 822     }
 823
 824     this.draglayer.html(names);
 825     this.draglayer.show();
 826
 827     this.drag_active = true;
 828     this.triggerEvent('dragstart');
 829   }
 830
 831   if (this.drag_active && this.draglayer)
 832   {
 833     var pos = rcube_event.get_mouse_pos(e);
 834     this.draglayer.css({ left:(pos.x+20)+'px', top:(pos.y-5 + (bw.ie ? document.documentElement.scrollTop : 0))+'px' });
 835     this.triggerEvent('dragmove', e?e:window.event);
 836   }
 837
 838   this.drag_start = false;
 839
 840   return false;
 841 },
 842
 843
 844 /**
 845  * Handler for mouse up events
 846  */
 847 drag_mouse_up: function(e)
 848 {
 849   document.onmousemove = null;
 850
 851   if (this.draglayer && this.draglayer.is(':visible')) {
 852     if (this.drag_start_pos)
 853       this.draglayer.animate(this.drag_start_pos, 300, 'swing').hide(20);
 854     else
 855       this.draglayer.hide();
 856   }
 857
 858   this.drag_active = false;
 859   this.triggerEvent('dragend');
 860
 861   rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'drag_mouse_move'});
 862   rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'drag_mouse_up'});
 863
 864   var iframes = document.getElementsByTagName('iframe');
 865   for (var n in iframes) {
 866     var iframedoc;
 867
 868     if (iframes[n].contentDocument)
 869       iframedoc = iframes[n].contentDocument;
 870     else if (iframes[n].contentWindow)
 871       iframedoc = iframes[n].contentWindow.document;
 872     else if (iframes[n].document)
 873       iframedoc = iframes[n].document;
 874
 875     if (iframedoc) {
 876       if (this.iframe_events[n]) {
 877         if (iframedoc.removeEventListener)
 878           iframedoc.removeEventListener('mousemove', this.iframe_events[n], false);
 879         else if (iframedoc.detachEvent)
 880           iframedoc.detachEvent('onmousemove', this.iframe_events[n]);
 881         else
 882           iframedoc['onmousemove'] = null;
 883         }
 884       rcube_event.remove_listener({element:iframedoc, event:'mouseup', object:this, method:'drag_mouse_up'});
 885       }
 886     }
 887
 888   return rcube_event.cancel(e);
 889 },
 890
 891
 892 /**
 893  * Creating the list in background
 894  */
 895 set_background_mode: function(flag)
 896 {
 897   if (flag) {
 898     this.background = document.createElement('tbody');
 899   } else if (this.background) {
 900     this.list.replaceChild(this.background, this.list.tBodies[0]);
 901     this.background = null;
 902   }
 903 }
 904
 905 };
 906
 907 rcube_list_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
 908 rcube_list_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
 909 rcube_list_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;