From fef904c6b16a83ee9aa6dfb7eff35d2934b07d19 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Fri, 26 Sep 2014 18:13:46 -0400 Subject: [PATCH] Enable/disable siganture commands before exiting the function in new compose window (#1490074) --- program/js/list.js | 404 ++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 239 insertions(+), 165 deletions(-) diff --git a/program/js/list.js b/program/js/list.js index 08e4444..fd14c63 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,11 +31,8 @@ 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.rows = []; + this.id_regexp = /^rcmrow([a-z0-9\-_=\+\/]+)/i; + this.rows = {}; this.selection = []; this.rowcount = 0; this.colcount = 0; @@ -50,13 +47,11 @@ this.keyboard = false; this.toggleselect = false; - this.dont_select = false; this.drag_active = false; this.col_drag_active = false; 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 @@ -86,14 +81,13 @@ } if (this.tbody) { - this.rows = []; + this.rows = {}; this.rowcount = 0; 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(); @@ -103,6 +97,8 @@ if (this.keyboard) rcube_event.add_listener({event:'keydown', object:this, method:'key_press'}); } + + return this; }, @@ -112,7 +108,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; @@ -122,17 +118,25 @@ row.onmousedown = function(e){ return self.drag_row(e, this.uid); }; row.onmouseup = function(e){ return self.click_row(e, this.uid); }; - if (bw.mobile) { + if (bw.touch) { row.addEventListener('touchstart', function(e) { if (e.touches.length == 1) { - if (!self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid)) - e.preventDefault(); + self.touchmoved = false; + self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid) } }, false); row.addEventListener('touchend', function(e) { - if (e.changedTouches.length == 1) - if (!self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid)) + if (e.changedTouches.length == 1) { + if (!self.touchmoved && !self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid)) e.preventDefault(); + } + }, false); + row.addEventListener('touchmove', function(e) { + if (e.changedTouches.length == 1) { + self.touchmoved = true; + if (self.drag_active) + e.preventDefault(); + } }, false); } @@ -141,6 +145,8 @@ this.row_init(this.rows[uid]); // legacy support this.triggerEvent('initrow', this.rows[uid]); + + return true; } }, @@ -157,7 +163,7 @@ $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone()); $(this.list.tHead).find('tr td').attr('style', ''); // remove fixed widths } - else if (this.list.className.indexOf('fixedheader') >= 0) { + else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0) { this.init_fixed_header(); } @@ -189,6 +195,12 @@ var me = this; $(window).resize(function(){ me.resize() }); + $(window).scroll(function(){ + var w = $(window); + me.fixed_header.css('marginLeft', (-w.scrollLeft()) + 'px'); + if (!bw.webkit) + me.fixed_header.css('marginTop', (-w.scrollTop()) + 'px'); + }); } else { $(this.fixed_header).find('thead').replaceWith(clone); @@ -215,6 +227,8 @@ $(this.thead).find('tr td').each(function(index) { $(this).css('width', column_widths[index]); }); + + $(window).scroll(); }, /** @@ -232,7 +246,7 @@ $(this.row_tagname() + ':not(.thead)', this.tbody).remove(); } - this.rows = []; + this.rows = {}; this.rowcount = 0; if (sel) @@ -241,6 +255,9 @@ // reset scroll position (in Opera) if (this.frame) this.frame.scrollTop = 0; + + // fix list header after removing any rows + this.resize(); }, @@ -249,7 +266,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; @@ -261,6 +278,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); }, @@ -269,7 +290,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) { @@ -279,11 +300,13 @@ if (row.className) domrow.className = row.className; if (row.style) $.extend(domrow.style, row.style); - for (var domcell, col, i=0; row.cols && i < row.cols.length; i++) { + for (var e, domcell, col, i=0; row.cols && i < row.cols.length; i++) { col = row.cols[i]; 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); } @@ -297,6 +320,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); }, /** @@ -340,7 +367,7 @@ // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620) // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058) - $(':focus:not(body)').blur(); + $('iframe,:focus:not(body)').blur(); window.focus(); if (e || (e = window.event)) @@ -398,30 +425,28 @@ 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 (this.dont_select || (evtarget && (tagname == 'input' || tagname == 'img'))) + if (!this.is_event_target(e)) return true; // accept right-clicks if (rcube_event.get_button(e) == 2) return true; - this.in_selection_before = this.in_selection(id) ? id : false; + this.in_selection_before = e && e.istouch || this.in_selection(id) ? id : false; // 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) { + 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.mobile) { + if (bw.touch) { rcube_event.add_listener({event:'touchmove', object:this, method:'drag_mouse_move'}); rcube_event.add_listener({event:'touchend', object:this, method:'drag_mouse_up'}); } @@ -439,31 +464,22 @@ */ 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; - // don't do anything (another action processed before) - if (this.dont_select) { - this.dont_select = false; - return false; - } - - var dblclicked = now - this.rows[id].clicked < this.dblclick_time; + var now = new Date().getTime(), + dblclicked = now - this.rows[id].clicked < this.dblclick_time; // unselects currently selected row - if (!this.drag_active && this.in_selection_before == id && !dblclicked) - this.select_row(id, mod_key, false); + 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; // row was double clicked - if (this.rows && dblclicked && this.in_selection(id)) { + if (this.rowcount && dblclicked && this.in_selection(id)) { this.triggerEvent('dblclick'); now = 0; } @@ -478,6 +494,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))); }, @@ -501,8 +529,6 @@ evtarget = rcube_event.get_target(e), mod_key = rcube_event.get_modifier(e); - // Don't select this message - this.dont_select = true; // Don't treat double click on the expando as double click on the message. row.clicked = 0; @@ -524,17 +550,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; @@ -546,6 +573,7 @@ this.resize(); this.triggerEvent('listupdate'); + return false; }, @@ -695,7 +723,7 @@ */ get_next_row: function() { - if (!this.rows) + if (!this.rowcount) return false; var last_selected_row = this.rows[this.last_selected], @@ -709,7 +737,7 @@ get_prev_row: function() { - if (!this.rows) + if (!this.rowcount) return false; var last_selected_row = this.rows[this.last_selected], @@ -727,7 +755,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; } @@ -740,7 +768,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; } @@ -770,6 +798,7 @@ select_row: function(id, mod_key, with_mouse) { var select_before = this.selection.join(','); + if (!this.multiselect) mod_key = 0; @@ -788,8 +817,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: @@ -800,6 +831,7 @@ this.highlight_row(id, false); break; } + this.multi_selecting = true; } @@ -857,14 +889,8 @@ { var row = this.get_first_row(); if (row) { - if (mod_key) { - this.shift_select(row, mod_key); - this.triggerEvent('select'); - this.scrollto(row); - } - else { - this.select(row); - } + this.select_row(row, mod_key, false); + this.scrollto(row); } }, @@ -876,14 +902,8 @@ { var row = this.get_last_row(); if (row) { - if (mod_key) { - this.shift_select(row, mod_key); - this.triggerEvent('select'); - this.scrollto(row); - } - else { - this.select(row); - } + this.select_row(row, mod_key, false); + this.scrollto(row); } }, @@ -897,7 +917,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); }, @@ -913,7 +933,8 @@ from_rowIndex = this._rowIndex(this.rows[this.shift_start].obj), to_rowIndex = this._rowIndex(to_row.obj); - if (!to_row.expanded && to_row.has_children) + // if we're going down the list, and we hit a thread, and it's closed, select the whole thread + if (from_rowIndex < to_rowIndex && !to_row.expanded && to_row.has_children) if (to_row = this.rows[(this.row_children(id)).pop()]) to_rowIndex = this._rowIndex(to_row.obj); @@ -935,6 +956,7 @@ } }, + /** * Helper method to emulate the rowIndex property of non-tr elements */ @@ -949,7 +971,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; @@ -961,7 +983,7 @@ */ select_all: function(filter) { - if (!this.rows || !this.rows.length) + if (!this.rowcount) return false; // reset but remember selection first @@ -993,7 +1015,7 @@ */ invert_selection: function() { - if (!this.rows || !this.rows.length) + if (!this.rowcount) return false; // remember old selection @@ -1015,7 +1037,7 @@ /** * Unselect selected row(s) */ -clear_selection: function(id) +clear_selection: function(id, no_event) { var n, num_select = this.selection.length; @@ -1037,7 +1059,7 @@ this.selection = []; } - if (num_select && !this.selection.length) + if (num_select && !this.selection.length && !no_event) this.triggerEvent('select'); }, @@ -1045,9 +1067,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] && 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; }, @@ -1073,7 +1112,7 @@ if (!multiple) { if (this.selection.length > 1 || !this.in_selection(id)) { - this.clear_selection(); + this.clear_selection(null, true); this.selection[0] = id; $(this.rows[id].obj).addClass('selected'); } @@ -1121,6 +1160,7 @@ key_press: function(e) { var target = e.target || {}; + if (this.focused != true || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT') return true; @@ -1135,32 +1175,41 @@ // 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 // Stop propagation rcube_event.cancel(e); - var ret = this.use_plusminus_key(keyCode, mod_key); + var ret = this.use_arrow_key(keyCode, mod_key); this.key_pressed = keyCode; this.modkey = mod_key; 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; @@ -1180,13 +1229,44 @@ */ use_arrow_key: function(keyCode, mod_key) { - var new_row; + var new_row, + selected_row = this.rows[this.last_selected]; + // 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 || keyCode == 63232) // up arrow key pressed new_row = this.get_prev_row(); + else { + if (!selected_row || !selected_row.has_children) + return; + + // expand + if (keyCode == 39) { + if (selected_row.expanded) + return; + + if (mod_key == CONTROL_KEY || this.multiexpand) + this.expand_all(selected_row); + else + this.expand(selected_row); + } + // collapse + else { + if (!selected_row.expanded) + return; + + if (mod_key == CONTROL_KEY || this.multiexpand) + this.collapse_all(selected_row); + else + this.collapse(selected_row); + } + + this.update_expando(selected_row.uid, selected_row.expanded); + + return false; + } if (new_row) { this.select_row(new_row.uid, mod_key, false); @@ -1198,41 +1278,15 @@ /** - * Special handling method for +/- keys - */ -use_plusminus_key: function(keyCode, mod_key) -{ - var selected_row = this.rows[this.last_selected]; - if (!selected_row) - return; - - if (keyCode == 32) - keyCode = selected_row.expanded ? 109 : 61; - if (keyCode == 61 || keyCode == 107) - if (mod_key == CONTROL_KEY || this.multiexpand) - this.expand_all(selected_row); - else - this.expand(selected_row); - else - if (mod_key == CONTROL_KEY || this.multiexpand) - this.collapse_all(selected_row); - else - this.collapse(selected_row); - - this.update_expando(selected_row.uid, selected_row.expanded); - - return false; -}, - - -/** * Try to scroll the list to make the specified row visible */ scrollto: function(id) { - var row = this.rows[id].obj; + var row = this.rows[id] ? this.rows[id].obj : null; + if (row && this.frame) { - var scroll_to = Number(row.offsetTop); + var scroll_to = Number(row.offsetTop), + head_offset = 0; // expand thread if target row is hidden (collapsed) if (!scroll_to && this.rows[id].parent_uid) { @@ -1241,8 +1295,14 @@ scroll_to = Number(row.offsetTop); } - if (scroll_to < Number(this.frame.scrollTop)) - this.frame.scrollTop = scroll_to; + 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)) this.frame.scrollTop = (scroll_to + Number(row.offsetHeight)) - Number(this.frame.offsetHeight); } @@ -1256,7 +1316,7 @@ { // convert touch event if (e.type == 'touchmove') { - if (e.changedTouches.length == 1) + if (e.touches.length == 1 && e.changedTouches.length == 1) e = rcube_event.touchevent(e.changedTouches[0]); else return rcube_event.cancel(e); @@ -1264,60 +1324,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 (!row || $.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; @@ -1362,7 +1433,7 @@ 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.mobile) { + if (bw.touch) { rcube_event.remove_listener({event:'touchmove', object:this, method:'drag_mouse_move'}); rcube_event.remove_listener({event:'touchend', object:this, method:'drag_mouse_up'}); } @@ -1391,6 +1462,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') @@ -1502,7 +1576,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); @@ -1537,7 +1611,7 @@ */ del_dragfix: function() { - $('div.iframe-dragdrop-fix').each(function() { this.parentNode.removeChild(this); }); + $('div.iframe-dragdrop-fix').remove(); }, -- Gitblit v1.9.1