| | |
| | | | RoundCube List Widget | |
| | | | | |
| | | | This file is part of the RoundCube Webmail client | |
| | | | Copyright (C) 2006, RoundCube Dev, - Switzerland | |
| | | | Copyright (C) 2006-2008, RoundCube Dev, - Switzerland | |
| | | | Licensed under the GNU GPL | |
| | | | | |
| | | +-----------------------------------------------------------------------+ |
| | |
| | | // static contants |
| | | this.ENTER_KEY = 13; |
| | | this.DELETE_KEY = 46; |
| | | this.BACKSPACE_KEY = 8; |
| | | |
| | | this.list = list ? list : null; |
| | | this.frame = null; |
| | | this.rows = []; |
| | | this.selection = []; |
| | | this.rowcount = 0; |
| | | |
| | | this.subject_col = -1; |
| | | this.shiftkey = false; |
| | | this.multiselect = false; |
| | | this.multi_selecting = false; |
| | | this.draggable = false; |
| | | this.keyboard = false; |
| | | this.toggleselect = false; |
| | | |
| | | this.dont_select = false; |
| | | this.drag_active = false; |
| | | this.last_selected = 0; |
| | | this.shift_start = 0; |
| | | this.in_selection_before = false; |
| | | this.focused = false; |
| | | this.drag_mouse_start = null; |
| | | this.dblclick_time = 600; |
| | | this.row_init = function(){}; |
| | | this.events = { click:[], dblclick:[], select:[], keypress:[], dragstart:[], dragend:[] }; |
| | | this.events = { click:[], dblclick:[], select:[], keypress:[], dragstart:[], dragmove:[], dragend:[] }; |
| | | |
| | | // overwrite default paramaters |
| | | if (p && typeof(p)=='object') |
| | |
| | | if (this.list && this.list.tBodies[0]) |
| | | { |
| | | this.rows = new Array(); |
| | | this.rowcount = 0; |
| | | |
| | | var row; |
| | | for(var r=0; r<this.list.tBodies[0].childNodes.length; r++) |
| | |
| | | } |
| | | |
| | | this.init_row(row); |
| | | this.rowcount++; |
| | | } |
| | | |
| | | this.frame = this.list.parentNode; |
| | | |
| | | // set body events |
| | | if (this.keyboard) |
| | | rcube_event.add_listener({element:document, event:'keydown', object:this, method:'key_press'}); |
| | | if (this.keyboard) { |
| | | rcube_event.add_listener({element:document, event:'keyup', object:this, method:'key_press'}); |
| | | rcube_event.add_listener({element:document, event:'keydown', object:this, method:'key_down'}); |
| | | } |
| | | } |
| | | }, |
| | | |
| | |
| | | init_row: function(row) |
| | | { |
| | | // make references in internal array and set event handlers |
| | | if (row && String(row.id).match(/rcmrow([0-9]+)/)) |
| | | if (row && String(row.id).match(/rcmrow([a-z0-9\-_=]+)/i)) |
| | | { |
| | | var p = this; |
| | | var uid = RegExp.$1; |
| | |
| | | /** |
| | | * |
| | | */ |
| | | clear: function() |
| | | clear: function(sel) |
| | | { |
| | | var tbody = document.createElement('TBODY'); |
| | | this.list.insertBefore(tbody, this.list.tBodies[0]); |
| | | this.list.removeChild(this.list.tBodies[1]); |
| | | this.rows = new Array(); |
| | | this.rows = new Array(); |
| | | this.rowcount = 0; |
| | | |
| | | if (sel) this.clear_selection(); |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * 'remove' message row from list (just hide it) |
| | | */ |
| | | remove_row: function(uid) |
| | | remove_row: function(uid, sel_next) |
| | | { |
| | | if (this.rows[uid].obj) |
| | | this.rows[uid].obj.style.display = 'none'; |
| | | |
| | | if (sel_next) |
| | | this.select_next(); |
| | | |
| | | this.rows[uid] = null; |
| | | this.rowcount--; |
| | | }, |
| | | |
| | | |
| | |
| | | tbody.appendChild(row); |
| | | |
| | | this.init_row(row); |
| | | this.rowcount++; |
| | | }, |
| | | |
| | | |
| | | |
| | | /** |
| | | * Set focur to the list |
| | | * Set focus to the list |
| | | */ |
| | | focus: function(e) |
| | | { |
| | |
| | | for (var n=0; n<this.selection.length; n++) |
| | | { |
| | | id = this.selection[n]; |
| | | if (this.rows[id].obj) |
| | | if (this.rows[id] && this.rows[id].obj) |
| | | { |
| | | this.set_classname(this.rows[id].obj, 'selected', true); |
| | | this.set_classname(this.rows[id].obj, 'unfocused', false); |
| | |
| | | */ |
| | | drag_row: function(e, id) |
| | | { |
| | | this.in_selection_before = this.in_selection(id) ? id : false; |
| | | |
| | | // don't do anything (another action processed before) |
| | | if (this.dont_select) |
| | | var evtarget = rcube_event.get_target(e); |
| | | if (this.dont_select || (evtarget && (evtarget.tagName == 'INPUT' || evtarget.tagName == 'IMG'))) |
| | | return false; |
| | | |
| | | // accept right-clicks |
| | | if (rcube_event.get_button(e) == 2) |
| | | return true; |
| | | |
| | | this.in_selection_before = this.in_selection(id) ? id : false; |
| | | |
| | | // selects currently unselected row |
| | | if (!this.in_selection_before) |
| | |
| | | if (this.draggable && this.selection.length) |
| | | { |
| | | this.drag_start = true; |
| | | this.drag_mouse_start = rcube_event.get_mouse_pos(e); |
| | | this.drag_mouse_start = rcube_event.get_mouse_pos(e); |
| | | rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'drag_mouse_move'}); |
| | | rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'drag_mouse_up'}); |
| | | } |
| | |
| | | { |
| | | var now = new Date().getTime(); |
| | | var mod_key = rcube_event.get_modifier(e); |
| | | |
| | | var evtarget = rcube_event.get_target(e); |
| | | |
| | | if ((evtarget && (evtarget.tagName == 'INPUT' || evtarget.tagName == 'IMG'))) |
| | | return false; |
| | | |
| | | // don't do anything (another action processed before) |
| | | if (this.dont_select) |
| | | { |
| | |
| | | |
| | | |
| | | /** |
| | | * get next and previous rows that are not hidden |
| | | * get next/previous/last rows that are not hidden |
| | | */ |
| | | get_next_row: function() |
| | | { |
| | |
| | | return false; |
| | | |
| | | var last_selected_row = this.rows[this.last_selected]; |
| | | var new_row = last_selected_row && last_selected_row.obj.nextSibling; |
| | | var 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 false; |
| | | |
| | | var last_selected_row = this.rows[this.last_selected]; |
| | | var new_row = last_selected_row && last_selected_row.obj.previousSibling; |
| | | var 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_last_row: function() |
| | | { |
| | | if (this.rowcount) |
| | | { |
| | | var rows = this.list.tBodies[0].rows; |
| | | |
| | | // selects or unselects the proper row depending on the modifier key pressed |
| | | for(var i=rows.length-1; i>=0; i--) |
| | | if(rows[i].id && String(rows[i].id).match(/rcmrow([a-z0-9\-_=]+)/i) && this.rows[RegExp.$1] != null) |
| | | return RegExp.$1; |
| | | } |
| | | |
| | | return null; |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * 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(','); |
| | | if (!this.multiselect) |
| | | 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); |
| | | this.shift_select(id, false); |
| | | break; |
| | | |
| | | case CONTROL_KEY: |
| | | this.shift_start = id; |
| | | if (!with_mouse) |
| | | this.highlight_row(id, true); |
| | | this.highlight_row(id, true); |
| | | break; |
| | | |
| | | case CONTROL_SHIFT_KEY: |
| | |
| | | break; |
| | | |
| | | default: |
| | | this.highlight_row(id, false); |
| | | this.highlight_row(id, false); |
| | | break; |
| | | } |
| | | this.multi_selecting = true; |
| | | } |
| | | |
| | | // trigger event if selection changed |
| | |
| | | if (this.last_selected != 0 && this.rows[this.last_selected]) |
| | | this.set_classname(this.rows[this.last_selected].obj, 'focused', false); |
| | | |
| | | // unselect if toggleselect is active and the same row was clicked again |
| | | if (this.toggleselect && this.last_selected == id) |
| | | { |
| | | this.clear_selection(); |
| | | id = null; |
| | | } |
| | | else |
| | | this.set_classname(this.rows[id].obj, 'focused', true); |
| | | |
| | | if (!this.selection.length) |
| | | this.shift_start = null; |
| | | |
| | | this.last_selected = id; |
| | | this.set_classname(this.rows[id].obj, 'focused', true); |
| | | }, |
| | | |
| | | |
| | |
| | | */ |
| | | shift_select: function(id, control) |
| | | { |
| | | if (!this.rows[this.shift_start] || !this.selection.length) |
| | | this.shift_start = id; |
| | | |
| | | var from_rowIndex = this.rows[this.shift_start].obj.rowIndex; |
| | | var to_rowIndex = this.rows[id].obj.rowIndex; |
| | | |
| | |
| | | if (!this.rows || !this.rows.length) |
| | | return false; |
| | | |
| | | // reset selection first |
| | | // reset but remember selection first |
| | | var select_before = this.selection.join(','); |
| | | this.clear_selection(); |
| | | |
| | | for (var n in this.rows) |
| | |
| | | } |
| | | } |
| | | |
| | | return true; |
| | | // trigger event if selection changed |
| | | if (this.selection.join(',') != select_before) |
| | | this.trigger_event('select'); |
| | | |
| | | this.focus(); |
| | | |
| | | return true; |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * Unselect all selected rows |
| | | * Unselect selected row(s) |
| | | */ |
| | | clear_selection: function() |
| | | clear_selection: function(id) |
| | | { |
| | | for(var n=0; n<this.selection.length; n++) |
| | | if (this.rows[this.selection[n]]) |
| | | var num_select = this.selection.length; |
| | | |
| | | // one row |
| | | if (id) |
| | | { |
| | | this.set_classname(this.rows[this.selection[n]].obj, 'selected', false); |
| | | this.set_classname(this.rows[this.selection[n]].obj, 'unfocused', false); |
| | | for (var n=0; n<this.selection.length; n++) |
| | | if (this.selection[n] == id) |
| | | { |
| | | this.selection.splice(n,1); |
| | | break; |
| | | } |
| | | } |
| | | // all rows |
| | | else |
| | | { |
| | | for (var n=0; n<this.selection.length; n++) |
| | | if (this.rows[this.selection[n]]) |
| | | { |
| | | this.set_classname(this.rows[this.selection[n]].obj, 'selected', false); |
| | | this.set_classname(this.rows[this.selection[n]].obj, 'unfocused', false); |
| | | } |
| | | |
| | | this.selection = new Array(); |
| | | } |
| | | |
| | | this.selection = new Array(); |
| | | if (num_select && !this.selection.length) |
| | | this.trigger_event('select'); |
| | | }, |
| | | |
| | | |
| | |
| | | { |
| | | if (this.rows[id] && !multiple) |
| | | { |
| | | this.clear_selection(); |
| | | this.selection[0] = id; |
| | | this.set_classname(this.rows[id].obj, 'selected', true) |
| | | if (this.selection.length > 1 || !this.in_selection(id)) |
| | | { |
| | | this.clear_selection(); |
| | | this.selection[0] = id; |
| | | this.set_classname(this.rows[id].obj, 'selected', true); |
| | | } |
| | | } |
| | | else if (this.rows[id]) |
| | | { |
| | |
| | | */ |
| | | key_press: function(e) |
| | | { |
| | | if (this.focused != true) |
| | | if (this.focused != true) |
| | | return true; |
| | | |
| | | var keyCode = document.layers ? e.which : document.all ? event.keyCode : document.getElementById ? e.keyCode : 0; |
| | | var keyCode = rcube_event.get_keycode(e); |
| | | var mod_key = rcube_event.get_modifier(e); |
| | | switch (keyCode) |
| | | { |
| | | case 40: |
| | | case 38: |
| | | case 63233: // "down", in safari keypress |
| | | case 63232: // "up", in safari keypress |
| | | // Stop propagation so that the browser doesn't scroll |
| | | rcube_event.cancel(e); |
| | | return this.use_arrow_key(keyCode, mod_key); |
| | | break; |
| | | |
| | | default: |
| | | this.shiftkey = e.shiftKey; |
| | | this.key_pressed = keyCode; |
| | | this.trigger_event('keypress'); |
| | | |
| | | if (this.key_pressed == this.BACKSPACE_KEY) |
| | | return rcube_event.cancel(e); |
| | | } |
| | | |
| | | return true; |
| | | }, |
| | | |
| | | /** |
| | | * Handler for keydown events |
| | | */ |
| | | key_down: function(e) |
| | | { |
| | | switch (rcube_event.get_keycode(e)) |
| | | { |
| | | case 40: |
| | | case 38: |
| | | case 63233: |
| | | case 63232: |
| | | if (!rcube_event.get_modifier(e) && this.focused) |
| | | return rcube_event.cancel(e); |
| | | |
| | | default: |
| | | } |
| | | |
| | | return true; |
| | |
| | | use_arrow_key: function(keyCode, mod_key) |
| | | { |
| | | var new_row; |
| | | if (keyCode == 40) // down arrow key pressed |
| | | // Safari uses the nonstandard keycodes 63232/63233 for up/down, if we're |
| | | // using the keypress event (but not the keydown or keyup event). |
| | | if (keyCode == 40 || keyCode == 63233) // down arrow key pressed |
| | | new_row = this.get_next_row(); |
| | | else if (keyCode == 38) // up arrow key pressed |
| | | else if (keyCode == 38 || keyCode == 63232) // up arrow key pressed |
| | | new_row = this.get_prev_row(); |
| | | |
| | | if (new_row) |
| | |
| | | return false; |
| | | |
| | | if (!this.draglayer) |
| | | this.draglayer = new rcube_layer('rcmdraglayer', {x:0, y:0, width:300, vis:0, zindex:2000}); |
| | | this.draglayer = new rcube_layer('rcmdraglayer', {x:0, y:0, vis:0, zindex:2000}); |
| | | |
| | | // get subjects of selectedd messages |
| | | var names = ''; |
| | | var c, subject, obj; |
| | | var c, i, node, subject, obj; |
| | | for(var n=0; n<this.selection.length; n++) |
| | | { |
| | | if (n>12) // only show 12 lines |
| | |
| | | obj = this.rows[this.selection[n]].obj; |
| | | subject = ''; |
| | | |
| | | for(c=0; c<obj.childNodes.length; c++) |
| | | if (!subject && obj.childNodes[c].nodeName=='TD' && obj.childNodes[c].firstChild && obj.childNodes[c].firstChild.nodeType==3) |
| | | for(c=0, i=0; i<obj.childNodes.length; i++) |
| | | { |
| | | if (obj.childNodes[i].nodeName == 'TD') |
| | | { |
| | | subject = obj.childNodes[c].firstChild.data; |
| | | names += (subject.length > 50 ? subject.substring(0, 50)+'...' : subject) + '<br />'; |
| | | if (((node = obj.childNodes[i].firstChild) && (node.nodeType==3 || node.nodeName=='A')) && |
| | | (this.subject_col < 0 || (this.subject_col >= 0 && this.subject_col == c))) |
| | | { |
| | | subject = node.nodeType==3 ? node.data : node.innerHTML; |
| | | names += (subject.length > 50 ? subject.substring(0, 50)+'...' : subject) + '<br />'; |
| | | break; |
| | | } |
| | | c++; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | { |
| | | var pos = rcube_event.get_mouse_pos(e); |
| | | this.draglayer.move(pos.x+20, pos.y-5); |
| | | this.trigger_event('dragmove', e); |
| | | } |
| | | |
| | | this.drag_start = false; |
| | |
| | | rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'drag_mouse_move'}); |
| | | rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'drag_mouse_up'}); |
| | | |
| | | this.focus(); |
| | | |
| | | return rcube_event.cancel(e); |
| | | }, |
| | | |
| | |
| | | * This will execute all registered event handlers |
| | | * @private |
| | | */ |
| | | trigger_event: function(evt) |
| | | trigger_event: function(evt, p) |
| | | { |
| | | if (this.events[evt] && this.events[evt].length) { |
| | | for (var i=0; i<this.events[evt].length; i++) |
| | | if (typeof(this.events[evt][i]) == 'function') |
| | | this.events[evt][i](this); |
| | | this.events[evt][i](this, p); |
| | | } |
| | | } |
| | | |