/** * 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) 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 constants 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 this.touch_start_time = 0; // start time of the touch event this.touch_event_time = 500; // maximum time a touch should be considered a left mouse button event, after this its something else (eg contextmenu event) // overwrite default parameters 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('id', this.list.id + '-fixedcopy') .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).on('resize', function() { me.resize(); }); $(this.container).on('scroll', function() { var w = $(this); 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'; // Select next row before deletion, because we need the reference if (sel_next) this.select_next(uid); 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) { this.insert_checkbox(row); } 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 existing record */ 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; } }, /** * Add selection checkbox to the list record */ insert_checkbox: function(row, tag_name) { var key, self = this, cell = document.createElement(this.col_tagname(tag_name)), chbox = document.createElement('input'); chbox.type = 'checkbox'; chbox.tabIndex = -1; chbox.onchange = function(e) { self.select_row(row.uid, key || CONTROL_KEY, true); e.stopPropagation(); key = null; }; chbox.onmousedown = function(e) { key = rcube_event.get_modifier(e); }; cell.className = 'selection'; // make the whole cell "touchable" for touch devices cell.onclick = function(e) { if (!$(e.target).is('input')) { key = rcube_event.get_modifier(e); $(chbox).prop('checked', !chbox.checked).change(); } e.stopPropagation(); }; cell.appendChild(chbox); row.insertBefore(cell, row.firstChild); }, /** * Enable checkbox selection */ enable_checkbox_selection: function() { this.checkbox_selection = true; // Add checkbox to existing records if any var r, len, cell, rows, row_tag = this.row_tagname().toUpperCase(); if (this.thead) { rows = this.thead.childNodes; for (r=0, len=rows.length; r