From 8dc87e62fbc13246d6f95219b4d9253f4fa9d385 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Fri, 25 Apr 2014 12:13:32 -0400 Subject: [PATCH] Avoid popupmenus being closed when scrollbar is clicked (#1489832) --- skins/classic/functions.js | 378 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 275 insertions(+), 103 deletions(-) diff --git a/skins/classic/functions.js b/skins/classic/functions.js index 9b83b90..39dd96e 100644 --- a/skins/classic/functions.js +++ b/skins/classic/functions.js @@ -10,7 +10,7 @@ { var el, cl, container = $('#tabsbar'), last_tab = $('span:last', container), - tab = '#settingstabdefault', + tab = '#settingstabpreferences', action = window.rcmail && rcmail.env.action ? rcmail.env.action : null; // move About tab to the end @@ -22,15 +22,10 @@ // get selected tab if (action) - tab = '#settingstab' + (action == 'preferences' ? 'default' : (action.indexOf('identity')>0 ? 'identities' : action.replace(/\./g, ''))); + tab = '#settingstab' + (action.indexOf('identity')>0 ? 'identities' : action.replace(/\./g, '')); $(tab).addClass('tablink-selected'); $('a', tab).removeAttr('onclick').click(function() { return false; }); -} - -function rcube_show_advanced(visible) -{ - $('tr.advanced').css('display', (visible ? (bw.ie ? 'block' : 'table-row') : 'none')); } // Fieldsets-to-tabs converter @@ -97,8 +92,9 @@ forwardmenu: {id:'forwardmenu', editable:1}, searchmenu: {id:'searchmenu', editable:1}, messagemenu: {id:'messagemenu'}, + attachmentmenu: {id:'attachmentmenu'}, listmenu: {id:'listmenu', editable:1}, - dragmessagemenu:{id:'dragmessagemenu', sticky:1}, + dragmenu: {id:'dragmenu', sticky:1}, groupmenu: {id:'groupoptionsmenu', above:1}, mailboxmenu: {id:'mailboxoptionsmenu', above:1}, composemenu: {id:'composeoptionsmenu', editable:1, overlap:1}, @@ -138,37 +134,32 @@ { var obj = this.popups[popup].obj, above = this.popups[popup].above, - ref = rcube_find_object(popup+'link'); + ref = $(this.popups[popup].link ? this.popups[popup].link : rcube_find_object(popup+'link')); if (typeof show == 'undefined') show = obj.is(':visible') ? false : true; else if (this.popups[popup].toggle && show && this.popups[popup].obj.is(':visible') ) show = false; - if (show && ref) { - var parent = $(ref).parent(), + if (show && ref.length) { + var parent = ref.parent(), win = $(window), - pos = parent.hasClass('dropbutton') ? parent.offset() : $(ref).offset(); + pos = parent.hasClass('dropbutton') ? parent.offset() : ref.offset(); - if (!above && pos.top + ref.offsetHeight + obj.height() > win.height()) + if (!above && pos.top + ref.height() + obj.height() > win.height()) above = true; if (pos.left + obj.width() > win.width()) pos.left = win.width() - obj.width() - 30; - obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) }); + obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.height())) }); } obj[show?'show':'hide'](); - - if (bw.ie6 && this.popups[popup].overlap) { - $('select').css('visibility', show?'hidden':'inherit'); - $('select', obj).css('visibility', 'inherit'); - } }, -dragmessagemenu: function(show) +dragmenu: function(show) { - this.popups.dragmessagemenu.obj[show?'show':'hide'](); + this.popups.dragmenu.obj[show?'show':'hide'](); }, forwardmenu: function(show) @@ -211,11 +202,13 @@ var n, all, list = $('input:checkbox[name="s_mods[]"]', obj), mbox = rcmail.env.mailbox, - mods = rcmail.env.search_mods; + mods = rcmail.env.search_mods, + scope = rcmail.env.search_scope || 'base'; if (rcmail.env.task == 'mail') { mods = mods[mbox] ? mods[mbox] : mods['*']; all = 'text'; + $('input:radio[name="s_scope"]').prop('checked', false).filter('#s_scope_'+scope).prop('checked', true); } else { all = '*'; @@ -240,7 +233,11 @@ { var all, m, task = rcmail.env.task, mods = rcmail.env.search_mods, - mbox = rcmail.env.mailbox; + mbox = rcmail.env.mailbox, + scope = $('input[name="s_scope"]:checked').val(); + + if (scope == 'all') + mbox = '*'; if (!mods) mods = {}; @@ -262,23 +259,24 @@ m[elem.value] = 1; // mark all fields - if (elem.value != all) - return; + if (elem.value == all) { + $('input:checkbox[name="s_mods[]"]').map(function() { + if (this == elem) + return; - $('input:checkbox[name="s_mods[]"]').map(function() { - if (this == elem) - return; + this.checked = true; + if (elem.checked) { + this.disabled = true; + delete m[this.value]; + } + else { + this.disabled = false; + m[this.value] = 1; + } + }); + } - this.checked = true; - if (elem.checked) { - this.disabled = true; - delete m[this.value]; - } - else { - this.disabled = false; - m[this.value] = 1; - } - }); + rcmail.set_searchmods(m); }, listmenu: function(show) @@ -323,14 +321,11 @@ } }); $('#listmenu fieldset').css("min-height", maxheight+"px") - // IE6 complains if you set this attribute using either method: - //$('#listmenu fieldset').css({'height':'auto !important'}); - //$('#listmenu fieldset').css("height","auto !important"); .height(maxheight); }; }, -open_listmenu: function(e) +open_listmenu: function() { this.listmenu(); }, @@ -360,7 +355,7 @@ for (i in rcmail.env.spell_langs) { li = $('<li>'); - link = $('<a href="#">').text(rcmail.env.spell_langs[i]) + link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i]) .addClass('active').data('lang', i) .click(function() { rcmail.spellcheck_lang_set($(this).data('lang')); @@ -385,6 +380,35 @@ this.show_popupmenu('spellmenu', show); }, +show_attachmentmenu: function(elem) +{ + var id = elem.parentNode.id.replace(/^attach/, ''); + + $('#attachmenuopen').unbind('click').attr('onclick', '').click(function(e) { + return rcmail.command('open-attachment', id, this); + }); + + $('#attachmenudownload').unbind('click').attr('onclick', '').click(function() { + rcmail.command('download-attachment', id, this); + }); + + this.popups.attachmentmenu.link = elem; + rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}); +}, + +menu_open: function(p) +{ + if (p && p.props && p.props.menu == 'attachmentmenu') + this.show_popup('attachmentmenu'); + else + this.open_listmenu(); +}, + +menu_save: function(prop) +{ + this.save_listmenu(); +}, + body_mouseup: function(evt, p) { var i, target = rcube_event.get_target(evt); @@ -392,8 +416,10 @@ for (i in this.popups) { if (this.popups[i].obj.is(':visible') && target != rcube_find_object(i+'link') && !this.popups[i].toggle + && target != this.popups[i].obj.get(0) // check if scroll bar was clicked (#1489832) && (!this.popups[i].editable || !this.target_overlaps(target, this.popups[i].id)) && (!this.popups[i].sticky || !rcube_mouse_is_over(evt, rcube_find_object(this.popups[i].id))) + && !$(target).is('.folder-selector-link') && !$(target).children('.folder-selector-link').length ) { window.setTimeout('rcmail_ui.show_popup("'+i+'",false);', 50); } @@ -444,7 +470,7 @@ } else { prev_frm.hide(); - if (bw.ie6 || bw.ie7) { + if (bw.ie7) { var fr = document.getElementById('mailcontframe'); fr.style.bottom = 0; fr.style.height = parseInt(fr.parentNode.offsetHeight)+'px'; @@ -467,14 +493,18 @@ /* Message composing */ init_compose_form: function() { - var f, field, fields = ['cc', 'bcc', 'replyto', 'followupto'], + var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto'], div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); // Show input elements with non-empty value for (f=0; f<fields.length; f++) { - if ((field = $('#_'+fields[f])) && field.length && field.val() != '') - rcmail_ui.show_header_form(fields[f]); + v = fields[f]; field = $('#_'+v); + if (field.length) { + field.on('change', {v:v}, function(e) { if (this.value) rcmail_ui.show_header_form(e.data.v); }); + if (field.val() != '') + rcmail_ui.show_header_form(v); + } } // prevent from form data loss when pressing ESC key in IE @@ -496,17 +526,26 @@ div.style.top = (parseInt(headers_div.offsetHeight, 10) + 3) + 'px'; $(window).resize(); + + // fixes contacts-table position when there's more than one addressbook + $('#contacts-table').css('top', $('#directorylist').height() + 24 + 'px'); + + // contacts search submit + $('#quicksearchbox').keydown(function(e) { + if (rcube_event.get_keycode(e) == 13) + rcmail.command('search'); + }); }, resize_compose_body: function() { - var div = $('#compose-div .boxlistcontent'), w = div.width(), h = div.height(); - w -= 8; // 2 x 3px padding + 2 x 1px border - h -= 4; + var div = $('#compose-div .boxlistcontent'), + w = div.width() - 2, h = div.height(), + x = bw.ie || bw.opera ? 4 : 0; - $('#compose-body_tbl').width((w+6)+'px').height(''); - $('#compose-body_ifr').width((w+6)+'px').height((h-54)+'px'); - $('#compose-body').width(w+'px').height(h+'px'); + $('#compose-body_tbl').width((w+3)+'px').height(''); + $('#compose-body_ifr').width((w+3)+'px').height((h-54)+'px'); + $('#compose-body').width((w-x)+'px').height(h+'px'); $('#googie_edit_layer').height(h+'px'); }, @@ -530,7 +569,7 @@ if ((row = document.getElementById('compose-' + id))) { var div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); - row.style.display = (document.all && !window.opera) ? 'block' : 'table-row'; + $(row).show(); div.style.top = (parseInt(headers_div.offsetHeight, 10) + 3) + 'px'; this.resize_compose_body(); } @@ -550,11 +589,11 @@ for (var i=0; i<links.length; i++) if (links[i].style.display != 'none') for (var j=i+1; j<links.length; j++) - if (links[j].style.display != 'none') + if (links[j].style.display != 'none') if ((ns = this.next_sibling(links[i]))) { - ns.style.display = ''; - break; - } + ns.style.display = ''; + break; + } document.getElementById('_' + id).value = ''; @@ -583,14 +622,130 @@ while (ps && ps.nodeType == 3) ps = ps.previousSibling; return ps; +}, + +enable_command: function(p) +{ + if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) { + var label = rcmail.gettext(p.status ? 'replylist' : 'replyall'); + $('a.button.replyAll').attr('title', label); + } } + +}; + +/** + * Roundcube generic layer (floating box) class + * + * @constructor + */ +function rcube_layer(id, attributes) +{ + this.name = id; + + // create a new layer in the current document + this.create = function(arg) + { + var l = (arg.x) ? arg.x : 0, + t = (arg.y) ? arg.y : 0, + w = arg.width, + h = arg.height, + z = arg.zindex, + vis = arg.vis, + parent = arg.parent, + obj = document.createElement('DIV'); + + obj.id = this.name; + obj.style.position = 'absolute'; + obj.style.visibility = (vis) ? (vis==2) ? 'inherit' : 'visible' : 'hidden'; + obj.style.left = l+'px'; + obj.style.top = t+'px'; + if (w) + obj.style.width = w.toString().match(/\%$/) ? w : w+'px'; + if (h) + obj.style.height = h.toString().match(/\%$/) ? h : h+'px'; + if (z) + obj.style.zIndex = z; + + if (parent) + parent.appendChild(obj); + else + document.body.appendChild(obj); + + this.elm = obj; + }; + + // create new layer + if (attributes != null) { + this.create(attributes); + this.name = this.elm.id; + } + else // just refer to the object + this.elm = document.getElementById(id); + + if (!this.elm) + return false; + + + // ********* layer object properties ********* + + this.css = this.elm.style; + this.event = this.elm; + this.width = this.elm.offsetWidth; + this.height = this.elm.offsetHeight; + this.x = parseInt(this.elm.offsetLeft); + this.y = parseInt(this.elm.offsetTop); + this.visible = (this.css.visibility=='visible' || this.css.visibility=='show' || this.css.visibility=='inherit') ? true : false; + + + // ********* layer object methods ********* + + // move the layer to a specific position + this.move = function(x, y) + { + this.x = x; + this.y = y; + this.css.left = Math.round(this.x)+'px'; + this.css.top = Math.round(this.y)+'px'; + }; + + // change the layers width and height + this.resize = function(w,h) + { + this.css.width = w+'px'; + this.css.height = h+'px'; + this.width = w; + this.height = h; + }; + + // show or hide the layer + this.show = function(a) + { + if(a == 1) { + this.css.visibility = 'visible'; + this.visible = true; + } + else if(a == 2) { + this.css.visibility = 'inherit'; + this.visible = true; + } + else { + this.css.visibility = 'hidden'; + this.visible = false; + } + }; + + // write new content into a Layer + this.write = function(cont) + { + this.elm.innerHTML = cont; + }; }; /** * Scroller */ - function rcmail_scroller(list, top, bottom) { var ref = this; @@ -630,31 +785,37 @@ function iframe_events() { // this==iframe - var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; - rcube_event.add_listener({ element: doc, object:rcmail_ui, method:'body_mouseup', event:'mouseup' }); + try { + var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; + rcube_event.add_listener({ element: doc, object:rcmail_ui, method:'body_mouseup', event:'mouseup' }); + } + catch (e) { + // catch possible "Permission denied" error in IE + }; }; // Abbreviate mailbox names to fit width of the container function rcube_render_mailboxlist() { - var list = $('#mailboxlist > li a, #mailboxlist ul:visible > li a'); + var list = $('#mailboxlist > li > a, #mailboxlist ul:visible > li > a'); // it's too slow with really big number of folders, especially on IE - if (list.length > 500 * (bw.ie ? 0.2 : 1)) + if (list.length > (bw.ie && bw.vendver < 9 ? 40 : 100)) return; - list.each(function(){ + list.each(function() { var elem = $(this), text = elem.data('text'); if (!text) { - text = elem.text().replace(/\s+\(.+$/, ''); + text = elem.text().replace(/\s+\([0-9]+\)$/, ''); elem.data('text', text); } + if (text.length < 6) return; - var abbrev = fit_string_to_size(text, elem, elem.width() - elem.children('span.unreadcount').width()); + var abbrev = fit_string_to_size(text, elem, elem.width() - elem.children('span.unreadcount').width() - 16); if (abbrev != text) elem.attr('title', text); elem.contents().filter(function(){ return (this.nodeType == 3); }).get(0).data = abbrev; @@ -664,19 +825,23 @@ // inspired by https://gist.github.com/24261/7fdb113f1e26111bd78c0c6fe515f6c0bf418af5 function fit_string_to_size(str, elem, len) { - var w, span, result = str, ellip = '...'; + var w, span, $span, result = str, ellip = '...'; if (!rcmail.env.tmp_span) { // it should be appended to elem to use the same css style // but for performance reasons we'll append it to body (once) - span = $('<b>').css({visibility: 'hidden', padding: '0px'}) + span = $('<b>').css({visibility: 'hidden', padding: '0px', + 'font-family': elem.css('font-family'), + 'font-size': elem.css('font-size')}) .appendTo($('body', document)).get(0); rcmail.env.tmp_span = span; } else { span = rcmail.env.tmp_span; } - span.innerHTML = result; + + $span = $(span); + $span.text(result); // on first run, check if string fits into the length already. w = span.offsetWidth; @@ -689,7 +854,7 @@ while (true) { offLeft = mid - cut; offRight = mid + cut; - span.innerHTML = str.substring(0,offLeft) + ellip + str.substring(offRight); + $span.text(str.substring(0,offLeft) + ellip + str.substring(offRight)); // break loop if string fits size if (offLeft < 3 || span.offsetWidth) @@ -753,7 +918,7 @@ var bar2 = $('<div>'); bar2.css({position: 'absolute', top: pos.top + 1, left: pos.left + 1, width: width + 'px', height: height + 'px', zIndex: 98}) - .addClass('quota_bg'); + .addClass('quota_bg'); if (quota >= limit_high) { main.addClass(' quota_text_high'); @@ -776,8 +941,8 @@ // Optional parameters used by TinyMCE var rcmail_editor_settings = { - skin : "default", // "default", "o2k7" - skin_variant : "" // "", "silver", "black" + skin: "default", // "default", "o2k7" + skin_variant: "" // "", "silver", "black" }; var rcmail_ui; @@ -788,40 +953,47 @@ rcube_event.add_listener({ object:rcmail_ui, method:'body_mouseup', event:'mouseup' }); rcube_event.add_listener({ object:rcmail_ui, method:'body_keydown', event:'keydown' }); - if (rcmail.env.quota_content) - update_quota(rcmail.env.quota_content); - rcmail.addEventListener('setquota', update_quota); + rcmail.addEventListener('init', function() { + if (rcmail.env.quota_content) + update_quota(rcmail.env.quota_content); + rcmail.addEventListener('setquota', update_quota); - $('iframe').load(iframe_events) - .contents().mouseup(function(e){rcmail_ui.body_mouseup(e)}); + $('iframe').load(iframe_events) + .contents().mouseup(function(e){rcmail_ui.body_mouseup(e)}); - if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui); - rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui); - rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui); - rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); - rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); + if (rcmail.env.task == 'mail') { + rcmail.addEventListener('enable-command', 'enable_command', rcmail_ui); + rcmail.addEventListener('menu-open', 'menu_open', rcmail_ui); + rcmail.addEventListener('menu-save', 'menu_save', rcmail_ui); + rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui); + rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); + rcmail.gui_object('dragmenu', 'dragmenu'); - if (rcmail.gui_objects.mailboxlist) { - rcmail.addEventListener('responseaftermark', rcube_render_mailboxlist); - rcmail.addEventListener('responseaftergetunread', rcube_render_mailboxlist); - rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist); - rcmail.addEventListener('aftercollapse-folder', rcube_render_mailboxlist); + if (rcmail.gui_objects.mailboxlist) { + rcmail.treelist.addEventListener('expand', rcube_render_mailboxlist); + rcmail.addEventListener('responseaftermark', rcube_render_mailboxlist); + rcmail.addEventListener('responseaftergetunread', rcube_render_mailboxlist); + rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist); + rcmail.addEventListener('responseafterrefresh', rcube_render_mailboxlist); + rcmail.addEventListener('afterimport-messages', function(){ rcmail_ui.show_popup('uploadform', false); }); + } - new rcmail_scroller('#mailboxlist-content', '#mailboxlist-title', '#mailboxlist-footer'); + if (rcmail.env.action == 'compose') + rcmail_ui.init_compose_form(); + else if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') + // add menu link for each attachment + $('#attachment-list > li[id^="attach"]').each(function() { + $(this).append($('<a class="drop"></a>').click(function() { rcmail_ui.show_attachmentmenu(this); })); + }); } + else if (rcmail.env.task == 'addressbook') { + rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); }); - if (rcmail.env.action == 'compose') - rcmail_ui.init_compose_form(); - } - else if (rcmail.env.task == 'addressbook') { - rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); }); - - if (rcmail.gui_objects.folderlist) - new rcmail_scroller('#directorylist-content', '#directorylist-title', '#directorylist-footer'); - } - else if (rcmail.env.task == 'settings') { - if (rcmail.gui_objects.subscriptionlist) - new rcmail_scroller('#folderlist-content', '#folderlist-title', '#folderlist-footer'); - } + rcmail.gui_object('dragmenu', 'dragmenu'); + } + else if (rcmail.env.task == 'settings') { + if (rcmail.gui_objects.subscriptionlist) + new rcmail_scroller('#folderlist-content', '#folderlist-title', '#folderlist-footer'); + } + }); } -- Gitblit v1.9.1