| | |
| | | /* |
| | | +-----------------------------------------------------------------------+ |
| | | | RoundCube List Widget | |
| | | | Roundcube List Widget | |
| | | | | |
| | | | This file is part of the RoundCube Webmail client | |
| | | | Copyright (C) 2006-2009, RoundCube Dev, - Switzerland | |
| | | | This file is part of the Roundcube Webmail client | |
| | | | Copyright (C) 2006-2009, The Roundcube Dev Team | |
| | | | Licensed under the GNU GPL | |
| | | | | |
| | | +-----------------------------------------------------------------------+ |
| | |
| | | |
| | | |
| | | /** |
| | | * RoundCube List Widget class |
| | | * Roundcube List Widget class |
| | | * @contructor |
| | | */ |
| | | function rcube_list_widget(list, p) |
| | |
| | | this.row_init = function(){}; |
| | | |
| | | // overwrite default paramaters |
| | | if (p && typeof(p) == 'object') |
| | | if (p && typeof p === 'object') |
| | | for (var n in p) |
| | | this[n] = p[n]; |
| | | }; |
| | |
| | | { |
| | | // make references in internal array and set event handlers |
| | | if (row && String(row.id).match(/rcmrow([a-z0-9\-_=\+\/]+)/i)) { |
| | | var p = this; |
| | | var uid = RegExp.$1; |
| | | var self = this, |
| | | uid = RegExp.$1; |
| | | row.uid = uid; |
| | | this.rows[uid] = {uid:uid, id:row.id, obj:row}; |
| | | |
| | | // set eventhandlers to table row |
| | | row.onmousedown = function(e){ return p.drag_row(e, this.uid); }; |
| | | row.onmouseup = function(e){ return p.click_row(e, this.uid); }; |
| | | row.onmousedown = function(e){ return self.drag_row(e, this.uid); }; |
| | | row.onmouseup = function(e){ return self.click_row(e, this.uid); }; |
| | | |
| | | if (bw.iphone || bw.ipad) { |
| | | row.addEventListener('touchstart', function(e) { |
| | | if (e.touches.length == 1) { |
| | | if (!self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid)) |
| | | e.preventDefault(); |
| | | } |
| | | }, false); |
| | | row.addEventListener('touchend', function(e) { |
| | | if (e.changedTouches.length == 1) |
| | | if (!self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid)) |
| | | e.preventDefault(); |
| | | }, false); |
| | | } |
| | | |
| | | if (document.all) |
| | | row.onselectstart = function() { return false; }; |
| | |
| | | |
| | | if (sel) |
| | | this.clear_selection(); |
| | | |
| | | // reset scroll position (in Opera) |
| | | if (this.frame) |
| | | this.frame.scrollTop = 0; |
| | | }, |
| | | |
| | | |
| | |
| | | */ |
| | | focus: function(e) |
| | | { |
| | | var id; |
| | | var n, id; |
| | | this.focused = true; |
| | | for (var n in this.selection) { |
| | | |
| | | for (n in this.selection) { |
| | | id = this.selection[n]; |
| | | if (this.rows[id] && this.rows[id].obj) { |
| | | $(this.rows[id].obj).addClass('selected').removeClass('unfocused'); |
| | | } |
| | | } |
| | | |
| | | // Un-focus already focused elements |
| | | $('*:focus', window).blur(); |
| | | $('iframe').each(function() { this.blur(); }); |
| | | |
| | | if (e || (e = window.event)) |
| | | rcube_event.cancel(e); |
| | |
| | | */ |
| | | blur: function() |
| | | { |
| | | var id; |
| | | var n, id; |
| | | this.focused = false; |
| | | for (var n in this.selection) { |
| | | for (n in this.selection) { |
| | | id = this.selection[n]; |
| | | if (this.rows[id] && this.rows[id].obj) { |
| | | $(this.rows[id].obj).removeClass('selected').addClass('unfocused'); |
| | |
| | | this.drag_mouse_start = rcube_event.get_mouse_pos(e); |
| | | rcube_event.add_listener({event:'mousemove', object:this, method:'drag_mouse_move'}); |
| | | rcube_event.add_listener({event:'mouseup', object:this, method:'drag_mouse_up'}); |
| | | if (bw.iphone || bw.ipad) { |
| | | rcube_event.add_listener({event:'touchmove', object:this, method:'drag_mouse_move'}); |
| | | rcube_event.add_listener({event:'touchend', object:this, method:'drag_mouse_up'}); |
| | | } |
| | | |
| | | // enable dragging over iframes |
| | | this.add_dragfix(); |
| | |
| | | if (this.dont_select) { |
| | | this.dont_select = false; |
| | | return false; |
| | | } |
| | | } |
| | | |
| | | var dblclicked = now - this.rows[id].clicked < this.dblclick_time; |
| | | |
| | |
| | | var r = this.rows[new_row.uid]; |
| | | if (r && r.depth <= depth) |
| | | break; |
| | | $(new_row).hide(); |
| | | $(new_row).css('display', 'none'); |
| | | if (r.expanded) { |
| | | r.expanded = false; |
| | | this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded }); |
| | |
| | | |
| | | expand: function(row) |
| | | { |
| | | var depth, new_row; |
| | | var last_expanded_parent_depth; |
| | | var r, p, depth, new_row, last_expanded_parent_depth; |
| | | |
| | | if (row) { |
| | | row.expanded = true; |
| | |
| | | |
| | | while (new_row) { |
| | | if (new_row.nodeType == 1) { |
| | | var r = this.rows[new_row.uid]; |
| | | r = this.rows[new_row.uid]; |
| | | if (r) { |
| | | if (row && (!r.depth || r.depth <= depth)) |
| | | break; |
| | | |
| | | if (r.parent_uid) { |
| | | var p = this.rows[r.parent_uid]; |
| | | p = this.rows[r.parent_uid]; |
| | | if (p && p.expanded) { |
| | | if ((row && p == row) || last_expanded_parent_depth >= p.depth - 1) { |
| | | last_expanded_parent_depth = p.depth; |
| | | $(new_row).show(); |
| | | $(new_row).css('display', ''); |
| | | r.expanded = true; |
| | | this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded }); |
| | | } |
| | |
| | | break; |
| | | |
| | | if (row || r.depth) |
| | | $(new_row).hide(); |
| | | $(new_row).css('display', 'none'); |
| | | if (r.has_children && r.expanded) { |
| | | r.expanded = false; |
| | | this.update_expando(r.uid, false); |
| | |
| | | if (row && r.depth <= depth) |
| | | break; |
| | | |
| | | $(new_row).show(); |
| | | $(new_row).css('display', ''); |
| | | if (r.has_children && !r.expanded) { |
| | | r.expanded = true; |
| | | this.update_expando(r.uid, true); |
| | |
| | | */ |
| | | select_next: function() |
| | | { |
| | | var next_row = this.get_next_row(); |
| | | var prev_row = this.get_prev_row(); |
| | | var new_row = (next_row) ? next_row : prev_row; |
| | | 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); |
| | | this.select_row(new_row.uid, false, false); |
| | | }, |
| | | |
| | | |
| | |
| | | select_first: function(mod_key) |
| | | { |
| | | var row = this.get_first_row(); |
| | | if (row && mod_key) { |
| | | this.shift_select(row, mod_key); |
| | | this.triggerEvent('select'); |
| | | this.scrollto(row); |
| | | if (row) { |
| | | if (mod_key) { |
| | | this.shift_select(row, mod_key); |
| | | this.triggerEvent('select'); |
| | | this.scrollto(row); |
| | | } |
| | | else { |
| | | this.select(row); |
| | | } |
| | | } |
| | | else if (row) |
| | | this.select(row); |
| | | }, |
| | | |
| | | |
| | |
| | | select_last: function(mod_key) |
| | | { |
| | | var row = this.get_last_row(); |
| | | if (row && mod_key) { |
| | | this.shift_select(row, mod_key); |
| | | this.triggerEvent('select'); |
| | | this.scrollto(row); |
| | | if (row) { |
| | | if (mod_key) { |
| | | this.shift_select(row, mod_key); |
| | | this.triggerEvent('select'); |
| | | this.scrollto(row); |
| | | } |
| | | else { |
| | | this.select(row); |
| | | } |
| | | } |
| | | else if (row) |
| | | this.select(row); |
| | | }, |
| | | |
| | | |
| | |
| | | if (!this.rows[uid] || !this.rows[uid].has_children) |
| | | return; |
| | | |
| | | var depth = this.rows[uid].depth; |
| | | var row = this.rows[uid].obj.nextSibling; |
| | | var depth = this.rows[uid].depth, |
| | | row = this.rows[uid].obj.nextSibling; |
| | | |
| | | while (row) { |
| | | if (row.nodeType == 1) { |
| | | if ((r = this.rows[row.uid])) { |
| | |
| | | if (!this.rows[this.shift_start] || !this.selection.length) |
| | | this.shift_start = id; |
| | | |
| | | var from_rowIndex = this.rows[this.shift_start].obj.rowIndex, |
| | | var n, from_rowIndex = this.rows[this.shift_start].obj.rowIndex, |
| | | to_rowIndex = this.rows[id].obj.rowIndex, |
| | | i = ((from_rowIndex < to_rowIndex)? from_rowIndex : to_rowIndex), |
| | | j = ((from_rowIndex > to_rowIndex)? from_rowIndex : to_rowIndex); |
| | | |
| | | // iterate through the entire message list |
| | | for (var n in this.rows) { |
| | | for (n in this.rows) { |
| | | if (this.rows[n].obj.rowIndex >= i && this.rows[n].obj.rowIndex <= j) { |
| | | if (!this.in_selection(n)) { |
| | | this.highlight_row(n, true); |
| | | } |
| | | } |
| | | else { |
| | | if (this.in_selection(n) && !control) { |
| | | if (this.in_selection(n) && !control) { |
| | | this.highlight_row(n, true); |
| | | } |
| | | } |
| | |
| | | */ |
| | | in_selection: function(id) |
| | | { |
| | | for(var n in this.selection) |
| | | for (var n in this.selection) |
| | | if (this.selection[n]==id) |
| | | return true; |
| | | |
| | |
| | | return false; |
| | | |
| | | // reset but remember selection first |
| | | var select_before = this.selection.join(','); |
| | | var n, select_before = this.selection.join(','); |
| | | this.selection = []; |
| | | |
| | | for (var n in this.rows) { |
| | | for (n in this.rows) { |
| | | if (!filter || this.rows[n][filter] == true) { |
| | | this.last_selected = n; |
| | | this.highlight_row(n, true); |
| | |
| | | return false; |
| | | |
| | | // remember old selection |
| | | var select_before = this.selection.join(','); |
| | | var n, select_before = this.selection.join(','); |
| | | |
| | | for (var n in this.rows) |
| | | for (n in this.rows) |
| | | this.highlight_row(n, true); |
| | | |
| | | // trigger event if selection changed |
| | |
| | | */ |
| | | clear_selection: function(id) |
| | | { |
| | | var num_select = this.selection.length; |
| | | var n, num_select = this.selection.length; |
| | | |
| | | // one row |
| | | if (id) { |
| | | for (var n=0 in this.selection) |
| | | for (n in this.selection) |
| | | if (this.selection[n] == id) { |
| | | this.selection.splice(n,1); |
| | | break; |
| | |
| | | } |
| | | // all rows |
| | | else { |
| | | for (var n in this.selection) |
| | | for (n in this.selection) |
| | | if (this.rows[this.selection[n]]) { |
| | | $(this.rows[this.selection[n]].obj).removeClass('selected').removeClass('unfocused'); |
| | | } |
| | |
| | | $(this.rows[id].obj).addClass('selected'); |
| | | } |
| | | else { // unselect row |
| | | var p = $.inArray(id, this.selection); |
| | | var a_pre = this.selection.slice(0, p); |
| | | var a_post = this.selection.slice(p+1, this.selection.length); |
| | | var p = $.inArray(id, this.selection), |
| | | a_pre = this.selection.slice(0, p), |
| | | a_post = this.selection.slice(p+1, this.selection.length); |
| | | |
| | | this.selection = a_pre.concat(a_post); |
| | | $(this.rows[id].obj).removeClass('selected').removeClass('unfocused'); |
| | | } |
| | |
| | | if (this.focused != true) |
| | | return true; |
| | | |
| | | var keyCode = rcube_event.get_keycode(e); |
| | | var mod_key = rcube_event.get_modifier(e); |
| | | var keyCode = rcube_event.get_keycode(e), |
| | | mod_key = rcube_event.get_modifier(e); |
| | | |
| | | switch (keyCode) { |
| | | case 40: |
| | |
| | | */ |
| | | drag_mouse_move: function(e) |
| | | { |
| | | // convert touch event |
| | | if (e.type == 'touchmove') { |
| | | if (e.changedTouches.length == 1) |
| | | e = rcube_event.touchevent(e.changedTouches[0]); |
| | | else |
| | | return rcube_event.cancel(e); |
| | | } |
| | | |
| | | if (this.drag_start) { |
| | | // check mouse movement, of less than 3 pixels, don't start dragging |
| | | var m = rcube_event.get_mouse_pos(e); |
| | |
| | | this.select_childs(uid); |
| | | } |
| | | |
| | | // reset content |
| | | this.draglayer.html(''); |
| | | |
| | | // get subjects of selected messages |
| | | var names = ''; |
| | | var c, i, subject, obj; |
| | | for (var n=0; n<this.selection.length; n++) { |
| | | var c, i, n, subject, obj; |
| | | for (n=0; n<this.selection.length; n++) { |
| | | // only show 12 lines |
| | | if (n>12) { |
| | | names += '...'; |
| | | this.draglayer.append('...'); |
| | | break; |
| | | } |
| | | |
| | |
| | | this.drag_start_pos = $(obj.childNodes[i]).offset(); |
| | | |
| | | if (this.subject_col < 0 || (this.subject_col >= 0 && this.subject_col == c)) { |
| | | var node, tmp_node, nodes = obj.childNodes[i].childNodes; |
| | | var entry, node, tmp_node, nodes = obj.childNodes[i].childNodes; |
| | | // find text node |
| | | for (m=0; m<nodes.length; m++) { |
| | | if ((tmp_node = obj.childNodes[i].childNodes[m]) && (tmp_node.nodeType==3 || tmp_node.nodeName=='A')) |
| | |
| | | if (!node) |
| | | break; |
| | | |
| | | subject = node.nodeType==3 ? node.data : node.innerHTML; |
| | | subject = $(node).text(); |
| | | // remove leading spaces |
| | | subject = subject.replace(/^\s+/i, ''); |
| | | subject = $.trim(subject); |
| | | // truncate line to 50 characters |
| | | names += (subject.length > 50 ? subject.substring(0, 50)+'...' : subject) + '<br />'; |
| | | subject = (subject.length > 50 ? subject.substring(0, 50) + '...' : subject); |
| | | |
| | | entry = $('<div>').text(subject); |
| | | this.draglayer.append(entry); |
| | | break; |
| | | } |
| | | c++; |
| | |
| | | } |
| | | } |
| | | |
| | | this.draglayer.html(names); |
| | | this.draglayer.show(); |
| | | |
| | | this.drag_active = true; |
| | | this.triggerEvent('dragstart'); |
| | | } |
| | |
| | | drag_mouse_up: function(e) |
| | | { |
| | | document.onmousemove = null; |
| | | |
| | | if (e.type == 'touchend') { |
| | | if (e.changedTouches.length != 1) |
| | | return rcube_event.cancel(e); |
| | | } |
| | | |
| | | if (this.draglayer && this.draglayer.is(':visible')) { |
| | | if (this.drag_start_pos) |
| | |
| | | |
| | | rcube_event.remove_listener({event:'mousemove', object:this, method:'drag_mouse_move'}); |
| | | rcube_event.remove_listener({event:'mouseup', object:this, method:'drag_mouse_up'}); |
| | | |
| | | if (bw.iphone || bw.ipad) { |
| | | rcube_event.remove_listener({event:'touchmove', object:this, method:'drag_mouse_move'}); |
| | | rcube_event.remove_listener({event:'touchend', object:this, method:'drag_mouse_up'}); |
| | | } |
| | | |
| | | // remove temp divs |
| | | this.del_dragfix(); |
| | |
| | | */ |
| | | column_replace: function(from, to) |
| | | { |
| | | var cells = this.list.tHead.rows[0].cells, |
| | | var len, cells = this.list.tHead.rows[0].cells, |
| | | elem = cells[from], |
| | | before = cells[to], |
| | | td = document.createElement('td'); |
| | |
| | | cells[0].parentNode.replaceChild(elem, td); |
| | | |
| | | // replace list cells |
| | | for (r=0; r<this.list.tBodies[0].rows.length; r++) { |
| | | for (r=0, len=this.list.tBodies[0].rows.length; r<len; r++) { |
| | | row = this.list.tBodies[0].rows[r]; |
| | | |
| | | elem = row.cells[from]; |
| | |
| | | // update subject column position |
| | | if (this.subject_col == from) |
| | | this.subject_col = to > from ? to - 1 : to; |
| | | else if (this.subject_col < from && to <= this.subject_col) |
| | | this.subject_col++; |
| | | else if (this.subject_col > from && to >= this.subject_col) |
| | | this.subject_col--; |
| | | |
| | | this.triggerEvent('column_replace'); |
| | | } |