From 538e64c572220bba43960a3073468c0ce3dc5f4c Mon Sep 17 00:00:00 2001 From: Aleksander Machniak <alec@alec.pl> Date: Wed, 18 Dec 2013 14:57:35 -0500 Subject: [PATCH] Fix Closure-compiler warnings, small code improvements --- program/js/list.js | 239 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 150 insertions(+), 89 deletions(-) diff --git a/program/js/list.js b/program/js/list.js index 0707172..54daa98 100644 --- a/program/js/list.js +++ b/program/js/list.js @@ -20,7 +20,7 @@ /** * Roundcube List Widget class - * @contructor + * @constructor */ function rcube_list_widget(list, p) { @@ -31,10 +31,7 @@ this.list = list ? list : null; this.tagname = this.list ? this.list.nodeName.toLowerCase() : 'table'; - this.thead; - this.tbody; - this.fixed_header; - this.frame = null; + this.id_regexp = /^rcmrow([a-z0-9\-_=\+\/]+)/i; this.rows = {}; this.selection = []; this.rowcount = 0; @@ -55,7 +52,6 @@ this.column_fixed = null; this.last_selected = 0; this.shift_start = 0; - this.in_selection_before = false; this.focused = false; this.drag_mouse_start = null; this.dblclick_time = 500; // default value on MS Windows is 500 @@ -91,8 +87,7 @@ var r, len, rows = this.tbody.childNodes; for (r=0, len=rows.length; r<len; r++) { - this.init_row(rows[r]); - this.rowcount++; + this.rowcount += this.init_row(rows[r]) ? 1 : 0; } this.init_header(); @@ -111,7 +106,7 @@ init_row: function(row) { // make references in internal array and set event handlers - if (row && String(row.id).match(/^rcmrow([a-z0-9\-_=\+\/]+)/i)) { + if (row && String(row.id).match(this.id_regexp)) { var self = this, uid = RegExp.$1; row.uid = uid; @@ -148,6 +143,8 @@ this.row_init(this.rows[uid]); // legacy support this.triggerEvent('initrow', this.rows[uid]); + + return true; } }, @@ -248,6 +245,9 @@ // reset scroll position (in Opera) if (this.frame) this.frame.scrollTop = 0; + + // fix list header after removing any rows + this.resize(); }, @@ -256,7 +256,7 @@ */ remove_row: function(uid, sel_next) { - var node = this.rows[uid] ? this.rows[uid].obj : null; + var self = this, node = this.rows[uid] ? this.rows[uid].obj : null; if (!node) return; @@ -268,6 +268,10 @@ 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); }, @@ -276,7 +280,7 @@ */ insert_row: function(row, before) { - var tbody = this.tbody; + var self = this, tbody = this.tbody; // create a real dom node first if (row.nodeName === undefined) { @@ -304,6 +308,10 @@ 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); }, /** @@ -405,10 +413,7 @@ drag_row: function(e, id) { // don't do anything (another action processed before) - var evtarget = rcube_event.get_target(e), - tagname = evtarget.tagName.toLowerCase(); - - if (evtarget && (tagname == 'input' || tagname == 'img' || (tagname != 'a' && evtarget.onclick))) + if (!this.is_event_target(e)) return true; // accept right-clicks @@ -420,12 +425,13 @@ // selects currently unselected row if (!this.in_selection_before) { var mod_key = rcube_event.get_modifier(e); - this.select_row(id, mod_key, false); + this.select_row(id, mod_key, true); } if (this.draggable && this.selection.length && this.in_selection(id)) { this.drag_start = true; 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.touch) { @@ -446,19 +452,16 @@ */ click_row: function(e, id) { - var now = new Date().getTime(), - mod_key = rcube_event.get_modifier(e), - evtarget = rcube_event.get_target(e), - tagname = evtarget.tagName.toLowerCase(); - - if ((evtarget && (tagname == 'input' || tagname == 'img'))) + // don't do anything (another action processed before) + if (!this.is_event_target(e)) return true; - var dblclicked = now - this.rows[id].clicked < this.dblclick_time; + var now = new Date().getTime(), + dblclicked = now - this.rows[id].clicked < this.dblclick_time; - // selects/unselects currently selected row - if (!this.drag_active && this.in_selection_before == id && !dblclicked) - this.select_row(id, mod_key, true); + // unselects currently selected row + if (!this.drag_active && !dblclicked && this.in_selection_before == id) + this.select_row(id, rcube_event.get_modifier(e), true); this.drag_start = false; this.in_selection_before = false; @@ -479,6 +482,18 @@ this.rows[id].clicked = now; return false; +}, + + +/** + * Check target of the current event + */ +is_event_target: function(e) +{ + var target = rcube_event.get_target(e), + tagname = target.tagName.toLowerCase(); + + return !(target && (tagname == 'input' || tagname == 'img' || (tagname != 'a' && target.onclick))); }, @@ -523,17 +538,18 @@ collapse: function(row) { + var r, depth = row.depth, + new_row = row ? row.obj.nextSibling : null; + row.expanded = false; this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj }); - var depth = row.depth; - var new_row = row ? row.obj.nextSibling : null; - var r; while (new_row) { if (new_row.nodeType == 1) { - var r = this.rows[new_row.uid]; + r = this.rows[new_row.uid]; if (r && r.depth <= depth) break; + $(new_row).css('display', 'none'); if (r.expanded) { r.expanded = false; @@ -545,6 +561,7 @@ this.resize(); this.triggerEvent('listupdate'); + return false; }, @@ -726,7 +743,7 @@ var i, len, rows = this.tbody.childNodes; for (i=0, len=rows.length-1; i<len; i++) - if (rows[i].id && String(rows[i].id).match(/^rcmrow([a-z0-9\-_=\+\/]+)/i) && this.rows[RegExp.$1] != null) + if (rows[i].id && String(rows[i].id).match(this.id_regexp) && this.rows[RegExp.$1] != null) return RegExp.$1; } @@ -739,7 +756,7 @@ var i, rows = this.tbody.childNodes; for (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) + if (rows[i].id && String(rows[i].id).match(this.id_regexp) && this.rows[RegExp.$1] != null) return RegExp.$1; } @@ -769,6 +786,7 @@ select_row: function(id, mod_key, with_mouse) { var select_before = this.selection.join(','); + if (!this.multiselect) mod_key = 0; @@ -787,8 +805,10 @@ break; case CONTROL_KEY: - if (with_mouse) + if (with_mouse) { + this.shift_start = id; this.highlight_row(id, true); + } break; case CONTROL_SHIFT_KEY: @@ -799,6 +819,7 @@ this.highlight_row(id, false); break; } + this.multi_selecting = true; } @@ -884,7 +905,7 @@ for (i=0; i<len; i++) if (!this.in_selection(children[i])) - this.select_row(children[i], CONTROL_KEY); + this.select_row(children[i], CONTROL_KEY, true); }, @@ -938,7 +959,7 @@ in_selection: function(id) { for (var n in this.selection) - if (this.selection[n]==id) + if (this.selection[n] == id) return true; return false; @@ -1034,9 +1055,26 @@ /** * Getter for the selection array */ -get_selection: function() +get_selection: function(deep) { - return this.selection; + 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<len; i++) { + uid = res[i]; + if (this.rows[uid].has_children && !this.rows[uid].expanded) { + uids = this.row_children(uid); + for (var j=0, uids_len=uids.length; j<uids_len; j++) { + uid = uids[j]; + if (!this.in_selection(uid)) + res.push(uid); + } + } + } + } + + return res; }, @@ -1124,10 +1162,15 @@ // Stop propagation so that the browser doesn't scroll rcube_event.cancel(e); return this.use_arrow_key(keyCode, mod_key); - case 61: - case 107: // Plus sign on a numeric keypad (fc11 + firefox 3.5.2) - case 109: + case 32: + rcube_event.cancel(e); + return this.select_row(this.last_selected, mod_key, true); + + case 37: // Left arrow key + case 39: // Right arrow key + case 107: // Plus sign on a numeric keypad + case 109: // Minus sign on a numeric keypad // Stop propagation rcube_event.cancel(e); var ret = this.use_plusminus_key(keyCode, mod_key); @@ -1136,20 +1179,26 @@ this.triggerEvent('keypress'); this.modkey = 0; return ret; + case 36: // Home this.select_first(mod_key); return rcube_event.cancel(e); + case 35: // End this.select_last(mod_key); return rcube_event.cancel(e); + case 27: if (this.drag_active) return this.drag_mouse_up(e); + if (this.col_drag_active) { this.selected_column = null; return this.column_drag_mouse_up(e); } + return rcube_event.cancel(e); + default: this.key_pressed = keyCode; this.modkey = mod_key; @@ -1196,11 +1245,8 @@ if (!selected_row || !selected_row.has_children) return; - if (keyCode == 32) - keyCode = selected_row.expanded ? 109 : 61; - // expand - if (keyCode == 61 || keyCode == 107) { + if (keyCode == 39 || keyCode == 107) { if (selected_row.expanded) return; @@ -1243,14 +1289,15 @@ scroll_to = Number(row.offsetTop); } - if(this.fixed_header) + if (this.fixed_header) head_offset = Number(this.thead.offsetHeight); - + // if row is above the frame (or behind header) if (scroll_to < Number(this.frame.scrollTop) + head_offset) { // scroll window so that row isn't behind header this.frame.scrollTop = scroll_to - head_offset; - } else if (scroll_to + Number(row.offsetHeight) > Number(this.frame.scrollTop) + Number(this.frame.offsetHeight)) + } + else if (scroll_to + Number(row.offsetHeight) > Number(this.frame.scrollTop) + Number(this.frame.offsetHeight)) this.frame.scrollTop = (scroll_to + Number(row.offsetHeight)) - Number(this.frame.offsetHeight); } }, @@ -1271,60 +1318,71 @@ if (this.drag_start) { // check mouse movement, of less than 3 pixels, don't start dragging - var m = rcube_event.get_mouse_pos(e); + var m = rcube_event.get_mouse_pos(e), + limit = 10, selection = [], self = this; 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)) return false; + // remember dragging start position + this.drag_start_pos = {left: m.x, top: m.y}; + + // initialize drag layer if (!this.draglayer) this.draglayer = $('<div>').attr('id', 'rcmdraglayer') - .css({ position:'absolute', display:'none', 'z-index':2000 }) + .css({position: 'absolute', display: 'none', 'z-index': 2000}) .appendTo(document.body); + else + this.draglayer.html(''); - // also select childs of (collapsed) threads for dragging - var n, uid, selection = $.merge([], this.selection); - for (n in selection) { - uid = selection[n]; - if (!this.rows[uid].expanded) - this.select_children(uid); - } + // get selected rows (in display order), don't use this.selection here + $(this.row_tagname() + '.selected', this.tbody).each(function() { + if (!String(this.id).match(self.id_regexp)) + return; - // reset content - this.draglayer.html(''); + var uid = RegExp.$1, row = self.rows[uid]; - // get subjects of selected messages - var i, n, obj, me; - for (n=0; n<this.selection.length; n++) { - // only show 12 lines - if (n>12) { - this.draglayer.append('...'); - break; - } + if ($.inArray(uid, selection) > -1) + return; - me = this; - if (obj = this.rows[this.selection[n]].obj) { - $('> '+this.col_tagname(), obj).each(function(i,elem){ - if (n == 0) - me.drag_start_pos = $(elem).offset(); + selection.push(uid); - if (me.subject_col < 0 || (me.subject_col >= 0 && me.subject_col == i)) { - var subject = $(elem).text(); - - if (subject) { - // remove leading spaces - subject = $.trim(subject); - // truncate line to 50 characters - subject = (subject.length > 50 ? subject.substring(0, 50) + '...' : subject); - - var entry = $('<div>').text(subject); - me.draglayer.append(entry); - } - - return false; // break - } + // also handle children of (collapsed) trees for dragging (they might be not selected) + if (row.has_children && !row.expanded) + $.each(self.row_children(uid), function() { + if ($.inArray(this, selection) > -1) + return; + selection.push(this); }); + + // break the loop asap + if (selection.length > limit + 1) + return false; + }); + + // append subject (of every row up to the limit) to the drag layer + $.each(selection, function(i, uid) { + if (i > limit) { + self.draglayer.append('...'); + return false; } - } + + $('> ' + self.col_tagname(), self.rows[uid].obj).each(function(n, cell) { + if (self.subject_col < 0 || (self.subject_col >= 0 && self.subject_col == n)) { + var subject = $(cell).text(); + + if (subject) { + // remove leading spaces + subject = $.trim(subject); + // truncate line to 50 characters + subject = (subject.length > 50 ? subject.substring(0, 50) + '...' : subject); + + self.draglayer.append($('<div>').text(subject)); + return false; + } + } + }); + }); this.draglayer.show(); this.drag_active = true; @@ -1398,6 +1456,9 @@ if (!this.col_draglayer) { var lpos = $(this.list).offset(), cells = this.thead.rows[0].cells; + + // fix layer position when list is scrolled + lpos.top += this.list.scrollTop + this.list.parentNode.scrollTop; // create dragging layer this.col_draglayer = $('<div>').attr('id', 'rcmcoldraglayer') @@ -1509,7 +1570,7 @@ while (row) { if (row.nodeType == 1) { - if ((r = this.rows[row.uid])) { + if (r = this.rows[row.uid]) { if (!r.depth || r.depth <= depth) break; res.push(r.uid); @@ -1544,7 +1605,7 @@ */ del_dragfix: function() { - $('div.iframe-dragdrop-fix').each(function() { this.parentNode.removeChild(this); }); + $('div.iframe-dragdrop-fix').remove(); }, -- Gitblit v1.9.1