/** * Roundcube List Widget * * This file is part of the Roundcube Webmail client * * @licstart The following is the entire license notice for the * JavaScript code in this file. * * Copyright (c) 2005-2014, The Roundcube Dev Team * * The JavaScript code in this page is free software: you can * redistribute it and/or modify it under the terms of the GNU * General Public License (GNU GPL) as published by the Free Software * Foundation, either version 3 of the License, or (at your option) * any later version. The code is distributed WITHOUT ANY WARRANTY; * without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. * * As additional permission under GNU GPL version 3 section 7, you * may distribute non-source (e.g., minimized or compacted) forms of * that code without the copy of the GNU GPL normally required by * section 4, provided you include this license notice and a URL * through which recipients can access the Corresponding Source. * * @licend The above is the entire license notice * for the JavaScript code in this file. * * @author Thomas Bruederli * @author Charles McNulty * * @requires jquery.js, common.js */ /** * Roundcube List Widget class * @constructor */ function rcube_list_widget(list, p) { // static contants this.ENTER_KEY = 13; this.DELETE_KEY = 46; this.BACKSPACE_KEY = 8; this.list = list ? list : null; this.tagname = this.list ? this.list.nodeName.toLowerCase() : 'table'; this.id_regexp = /^rcmrow([a-z0-9\-_=\+\/]+)/i; this.rows = {}; this.selection = []; this.rowcount = 0; this.colcount = 0; this.subject_col = 0; this.modkey = 0; this.multiselect = false; this.multiexpand = false; this.multi_selecting = false; this.draggable = false; this.column_movable = false; this.keyboard = false; this.toggleselect = false; this.aria_listbox = false; this.parent_focus = true; this.checkbox_selection = false; this.drag_active = false; this.col_drag_active = false; this.column_fixed = null; this.last_selected = null; this.shift_start = null; this.focused = false; this.drag_mouse_start = null; this.dblclick_time = 500; // default value on MS Windows is 500 this.row_init = function(){}; // @deprecated; use list.addEventListener('initrow') instead // overwrite default paramaters if (p && typeof p === 'object') for (var n in p) this[n] = p[n]; // register this instance rcube_list_widget._instances.push(this); }; rcube_list_widget.prototype = { /** * get all message rows from HTML table and init each row */ init: function() { if (this.tagname == 'table' && this.list && this.list.tBodies[0]) { this.thead = this.list.tHead; this.tbody = this.list.tBodies[0]; } else if (this.tagname != 'table' && this.list) { this.tbody = this.list; } if ($(this.list).attr('role') == 'listbox') { this.aria_listbox = true; if (this.multiselect) $(this.list).attr('aria-multiselectable', 'true'); } var me = this; if (this.tbody) { this.rows = {}; this.rowcount = 0; var r, len, rows = this.tbody.childNodes; for (r=0, len=rows.length; r= 0) { this.init_fixed_header(); } var col, r, p = this; // add events for list columns moving if (this.column_movable && this.thead && this.thead.rows) { for (r=0; r') .attr('class', this.list.className + ' fixedcopy') .attr('role', 'presentation') .css({ position:'fixed' }) .append(clone) .append(''); $(this.list).before(this.fixed_header); var me = this; $(window).resize(function() { me.resize(); }); $(window).scroll(function() { var w = $(window); me.fixed_header.css({ marginLeft: -w.scrollLeft() + 'px', marginTop: -w.scrollTop() + 'px' }); }); } else { $(this.fixed_header).find('thead').replaceWith(clone); } // avoid scrolling header links being focused $(this.list.tHead).find('a.sortcol').attr('tabindex', '-1'); // set tabindex to fixed header sort links clone.find('a.sortcol').attr('tabindex', '0'); this.thead = clone.get(0); this.resize(); }, resize: function() { if (!this.fixed_header) return; var column_widths = []; // get column widths from original thead $(this.tbody).parent().find('thead th,thead td').each(function(index) { column_widths[index] = $(this).width(); }); // apply fixed widths to fixed table header $(this.thead).parent().width($(this.tbody).parent().width()); $(this.thead).find('th,td').each(function(index) { $(this).width(column_widths[index]); }); $(window).scroll(); }, /** * Remove all list rows */ clear: function(sel) { if (this.tagname == 'table') { var tbody = document.createElement('tbody'); this.list.insertBefore(tbody, this.tbody); this.list.removeChild(this.list.tBodies[1]); this.tbody = tbody; } else { $(this.row_tagname() + ':not(.thead)', this.tbody).remove(); } this.rows = {}; this.rowcount = 0; this.last_selected = null; if (sel) this.clear_selection(); // reset scroll position (in Opera) if (this.frame) this.frame.scrollTop = 0; // fix list header after removing any rows this.resize(); }, /** * 'remove' message row from list (just hide it) */ remove_row: function(uid, sel_next) { var self = this, node = this.rows[uid] ? this.rows[uid].obj : null; if (!node) return; node.style.display = 'none'; if (sel_next) this.select_next(); delete this.rows[uid]; this.rowcount--; // fix list header after removing any rows clearTimeout(this.resize_timeout) this.resize_timeout = setTimeout(function() { self.resize(); }, 50); }, /** * Add row to the list and initialize it */ insert_row: function(row, before) { var self = this, tbody = this.tbody; // create a real dom node first if (row.nodeName === undefined) { // for performance reasons use DOM instead of jQuery here var i, e, domcell, col, domrow = document.createElement(this.row_tagname()); if (row.id) domrow.id = row.id; if (row.uid) domrow.uid = row.uid; if (row.className) domrow.className = row.className; if (row.style) $.extend(domrow.style, row.style); for (i=0; row.cols && i < row.cols.length; i++) { col = row.cols[i]; domcell = col.dom; if (!domcell) { domcell = document.createElement(this.col_tagname()); if (col.className) domcell.className = col.className; if (col.innerHTML) domcell.innerHTML = col.innerHTML; for (e in col.events) domcell['on' + e] = col.events[e]; } domrow.appendChild(domcell); } row = domrow; } if (this.checkbox_selection) { var cell = document.createElement(this.col_tagname()), chbox = document.createElement('input'); chbox.type = 'checkbox'; chbox.onchange = function(e) { self.select_row(row.uid, CONTROL_KEY, true); e.stopPropagation(); }; cell.className = 'selection'; cell.onclick = function(e) { // this event handler fixes checkbox selection on touch devices if (e.target.nodeName != 'INPUT') chbox.click(); e.stopPropagation(); }; cell.appendChild(chbox); row.insertBefore(cell, row.firstChild); } if (before && tbody.childNodes.length) tbody.insertBefore(row, (typeof before == 'object' && before.parentNode == tbody) ? before : tbody.firstChild); else tbody.appendChild(row); this.init_row(row); this.rowcount++; // fix list header after adding any rows clearTimeout(this.resize_timeout) this.resize_timeout = setTimeout(function() { self.resize(); }, 50); }, /** * */ update_row: function(id, cols, newid, select) { var row = this.rows[id]; if (!row) return false; var i, domrow = row.obj; for (i = 0; cols && i < cols.length; i++) { this.get_cell(domrow, i).html(cols[i]); } if (newid) { delete this.rows[id]; domrow.uid = newid; domrow.id = 'rcmrow' + newid; this.init_row(domrow); if (select) this.selection[0] = newid; if (this.last_selected == id) this.last_selected = newid; } }, /** * Set focus to the list */ focus: function(e) { if (this.focused) return; this.focused = true; if (e) rcube_event.cancel(e); var focus_elem = null; if (this.last_selected && this.rows[this.last_selected]) { focus_elem = $(this.rows[this.last_selected].obj).find(this.col_tagname()).eq(this.subject_column()).attr('tabindex', '0'); } // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620) if (focus_elem && focus_elem.length) { // We now fix this by explicitly assigning focus to a dedicated link element this.focus_noscroll(focus_elem); } else { // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058) $('iframe,:focus:not(body)').blur(); window.focus(); } $(this.list).addClass('focus').removeAttr('tabindex'); // set internal focus pointer to first row if (!this.last_selected) this.select_first(CONTROL_KEY); }, /** * remove focus from the list */ blur: function(e) { this.focused = false; // avoid the table getting focus right again (on Shift+Tab) var me = this; setTimeout(function() { $(me.list).attr('tabindex', '0'); }, 20); if (this.last_selected && this.rows[this.last_selected]) { $(this.rows[this.last_selected].obj) .find(this.col_tagname()).eq(this.subject_column()).removeAttr('tabindex'); } $(this.list).removeClass('focus'); }, /** * Focus the given element without scrolling the list container */ focus_noscroll: function(elem) { var y = this.frame.scrollTop || this.frame.scrollY; elem.focus(); this.frame.scrollTop = y; }, /** * Set/unset the given column as hidden */ hide_column: function(col, hide) { var method = hide ? 'addClass' : 'removeClass'; if (this.fixed_header) $(this.row_tagname()+' '+this.col_tagname()+'.'+col, this.fixed_header)[method]('hidden'); $(this.row_tagname()+' '+this.col_tagname()+'.'+col, this.list)[method]('hidden'); }, /** * onmousedown-handler of message list column */ drag_column: function(e, col) { if (this.colcount > 1) { this.drag_start = true; this.drag_mouse_start = rcube_event.get_mouse_pos(e); rcube_event.add_listener({event:'mousemove', object:this, method:'column_drag_mouse_move'}); rcube_event.add_listener({event:'mouseup', object:this, method:'column_drag_mouse_up'}); // enable dragging over iframes this.add_dragfix(); // find selected column number for (var i=0; i= p.depth - 1) { last_expanded_parent_depth = p.depth; $(new_row).css('display', ''); r.expanded = true; this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row }); } } else if (row && (! p || p.depth <= depth)) break; } } } new_row = new_row.nextSibling; } this.resize(); this.triggerEvent('listupdate'); return false; }, collapse_all: function(row) { var depth, new_row, r; if (row) { row.expanded = false; depth = row.depth; new_row = row.obj.nextSibling; this.update_expando(row.id); 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) return false; } else { new_row = this.tbody.firstChild; depth = 0; } while (new_row) { if (new_row.nodeType == 1) { if (r = this.rows[new_row.uid]) { if (row && (!r.depth || r.depth <= depth)) break; if (row || r.depth) $(new_row).css('display', 'none'); if (r.has_children && r.expanded) { r.expanded = false; this.update_expando(r.id, false); this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row }); } } } new_row = new_row.nextSibling; } this.resize(); this.triggerEvent('listupdate'); return false; }, expand_all: function(row) { var depth, new_row, r; if (row) { row.expanded = true; depth = row.depth; new_row = row.obj.nextSibling; this.update_expando(row.id, true); this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj }); } else { new_row = this.tbody.firstChild; depth = 0; } while (new_row) { if (new_row.nodeType == 1) { if (r = this.rows[new_row.uid]) { if (row && r.depth <= depth) break; $(new_row).css('display', ''); if (r.has_children && !r.expanded) { r.expanded = true; this.update_expando(r.id, true); this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row }); } } } new_row = new_row.nextSibling; } this.resize(); this.triggerEvent('listupdate'); return false; }, update_expando: function(id, expanded) { var expando = document.getElementById('rcmexpando' + id); if (expando) expando.className = expanded ? 'expanded' : 'collapsed'; }, get_row_uid: function(row) { if (!row) return; if (!row.uid) { var uid = $(row).data('uid'); if (uid) row.uid = uid; else if (String(row.id).match(this.id_regexp)) row.uid = RegExp.$1; } return row.uid; }, /** * get first/next/previous/last rows that are not hidden */ get_next_row: function() { if (!this.rowcount) return false; var last_selected_row = this.rows[this.last_selected], new_row = last_selected_row ? last_selected_row.obj.nextSibling : null; while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none')) new_row = new_row.nextSibling; return new_row; }, get_prev_row: function() { if (!this.rowcount) return false; var last_selected_row = this.rows[this.last_selected], new_row = last_selected_row ? last_selected_row.obj.previousSibling : null; while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none')) new_row = new_row.previousSibling; return new_row; }, get_first_row: function() { if (this.rowcount) { var i, uid, rows = this.tbody.childNodes; for (i=0; i=0; i--) if (rows[i].id && (uid = this.get_row_uid(rows[i]))) return uid; } return null; }, row_tagname: function() { var row_tagnames = { table:'tr', ul:'li', '*':'div' }; return row_tagnames[this.tagname] || row_tagnames['*']; }, col_tagname: function() { var col_tagnames = { table:'td', '*':'span' }; return col_tagnames[this.tagname] || col_tagnames['*']; }, get_cell: function(row, index) { return $(this.col_tagname(), row).eq(index + (this.checkbox_selection ? 1 : 0)); }, /** * selects or unselects the proper row depending on the modifier key pressed */ select_row: function(id, mod_key, with_mouse) { var select_before = this.selection.join(','), in_selection_before = this.in_selection(id); if (!this.multiselect && with_mouse) mod_key = 0; if (!this.shift_start) this.shift_start = id if (!mod_key) { this.shift_start = id; this.highlight_row(id, false); this.multi_selecting = false; } else { switch (mod_key) { case SHIFT_KEY: this.shift_select(id, false); break; case CONTROL_KEY: if (with_mouse) { this.shift_start = id; this.highlight_row(id, true); } break; case CONTROL_SHIFT_KEY: this.shift_select(id, true); break; default: this.highlight_row(id, false); break; } this.multi_selecting = true; } if (this.last_selected && this.rows[this.last_selected]) { $(this.rows[this.last_selected].obj).removeClass('focused') .find(this.col_tagname()).eq(this.subject_column()).removeAttr('tabindex'); } // unselect if toggleselect is active and the same row was clicked again if (this.toggleselect && in_selection_before && !mod_key) { this.clear_selection(); } // trigger event if selection changed else if (this.selection.join(',') != select_before) { this.triggerEvent('select'); } if (this.rows[id]) { $(this.rows[id].obj).addClass('focused'); // set cursor focus to link inside selected row if (this.focused) this.focus_noscroll($(this.rows[id].obj).find(this.col_tagname()).eq(this.subject_column()).attr('tabindex', '0')); } if (!this.selection.length) this.shift_start = null; this.last_selected = id; }, /** * Alias method for select_row */ select: function(id) { this.select_row(id, false); this.scrollto(id); }, /** * Select row next to the last selected one. * Either below or above. */ select_next: function() { var next_row = this.get_next_row(), prev_row = this.get_prev_row(), new_row = (next_row) ? next_row : prev_row; if (new_row) this.select_row(new_row.uid, false, false); }, /** * Select first row */ select_first: function(mod_key) { var row = this.get_first_row(); if (row) { this.select_row(row, mod_key, false); this.scrollto(row); } }, /** * Select last row */ select_last: function(mod_key) { var row = this.get_last_row(); if (row) { this.select_row(row, mod_key, false); this.scrollto(row); } }, /** * Add all childs of the given row to selection */ select_children: function(uid) { var i, children = this.row_children(uid), len = children.length; for (i=0; i to_rowIndex) ? from_rowIndex : to_rowIndex); // iterate through the entire message list for (n in this.rows) { if (this._rowIndex(this.rows[n].obj) >= i && this._rowIndex(this.rows[n].obj) <= j) { if (!this.in_selection(n)) { this.highlight_row(n, true); } } else { if (this.in_selection(n) && !control) { this.highlight_row(n, true); } } } }, /** * Helper method to emulate the rowIndex property of non-tr elements */ _rowIndex: function(obj) { return (obj.rowIndex !== undefined) ? obj.rowIndex : $(obj).prevAll().length; }, /** * Check if given id is part of the current selection */ in_selection: function(id, index) { for (var n in this.selection) if (this.selection[n] == id) return index ? parseInt(n) : true; return false; }, /** * Select each row in list */ select_all: function(filter) { if (!this.rowcount) return false; // reset but remember selection first var n, select_before = this.selection.join(','); this.selection = []; for (n in this.rows) { if (!filter || this.rows[n][filter] == true) { this.last_selected = n; this.highlight_row(n, true, true); } else { $(this.rows[n].obj).removeClass('selected').removeAttr('aria-selected'); } } // trigger event if selection changed if (this.selection.join(',') != select_before) this.triggerEvent('select'); this.focus(); return true; }, /** * Invert selection */ invert_selection: function() { if (!this.rowcount) return false; // remember old selection var n, select_before = this.selection.join(','); for (n in this.rows) this.highlight_row(n, true); // trigger event if selection changed if (this.selection.join(',') != select_before) this.triggerEvent('select'); this.focus(); return true; }, /** * Unselect selected row(s) */ clear_selection: function(id, no_event) { var n, num_select = this.selection.length; // one row if (id) { for (n in this.selection) if (this.selection[n] == id) { this.selection.splice(n,1); break; } } // all rows else { for (n in this.selection) if (this.rows[this.selection[n]]) { $(this.rows[this.selection[n]].obj).removeClass('selected').removeAttr('aria-selected'); } this.selection = []; } if (this.checkbox_selection) $(this.row_tagname() + ':not(.selected) > .selection > input:checked', this.list).prop('checked', false); if (num_select && !this.selection.length && !no_event) { this.triggerEvent('select'); this.last_selected = null; } }, /** * Getter for the selection array */ get_selection: function(deep) { var res = $.merge([], this.selection); // return children of selected threads even if only root is selected if (deep !== false && res.length) { for (var uid, uids, i=0, len=res.length; i 1 || !this.in_selection(id)) { this.clear_selection(null, true); this.selection[0] = id; $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true'); if (this.checkbox_selection) $('.selection > input', this.rows[id].obj).prop('checked', true); } } else { var pre, post, p = this.in_selection(id, true); if (p === false) { // select row this.selection.push(id); $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true'); if (this.checkbox_selection) $('.selection > input', this.rows[id].obj).prop('checked', true); if (!norecur && !this.rows[id].expanded) this.highlight_children(id, true); } else { // unselect row pre = this.selection.slice(0, p); post = this.selection.slice(p+1, this.selection.length); this.selection = pre.concat(post); $(this.rows[id].obj).removeClass('selected').removeAttr('aria-selected'); if (this.checkbox_selection) $('.selection > input', this.rows[id].obj).prop('checked', false); 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