From 0b36d151572e050b51d82e7429fee847ebb33e22 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak <alec@alec.pl> Date: Thu, 20 Nov 2014 06:03:22 -0500 Subject: [PATCH] Add method to display operation (uploading) progress in UI message --- program/js/app.js | 183 +++++++++++++++++++++++++++++++++++---------- 1 files changed, 142 insertions(+), 41 deletions(-) diff --git a/program/js/app.js b/program/js/app.js index c643188..fd0d2e1 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -556,13 +556,14 @@ // show message if (this.pending_message) - this.display_message(this.pending_message[0], this.pending_message[1], this.pending_message[2]); + this.display_message.apply(this, this.pending_message); // init treelist widget if (this.gui_objects.folderlist && window.rcube_treelist_widget) { this.treelist = new rcube_treelist_widget(this.gui_objects.folderlist, { selectable: true, id_prefix: 'rcmli', + parent_focus: true, id_encode: this.html_identifier_encode, id_decode: this.html_identifier_decode, check_droptarget: function(node) { return !node.virtual && ref.check_droptarget(node.id) } @@ -1659,7 +1660,7 @@ } skip = obj.data('parent'); } - }, 10); + }, 10, e); }; // global keypress event handler @@ -2481,7 +2482,7 @@ // expand all threads with unread children this.expand_unread = function() { - var r, tbody = this.gui_objects.messagelist.tBodies[0], + var r, tbody = this.message_list.tbody, new_row = tbody.firstChild; while (new_row) { @@ -3318,7 +3319,7 @@ if (!this.gui_objects.messageform) return false; - var i, input_from = $("[name='_from']"), + var i, pos, input_from = $("[name='_from']"), input_to = $("[name='_to']"), input_subject = $("input[name='_subject']"), input_message = $("[name='_message']").get(0), @@ -3352,16 +3353,24 @@ } if (!html_mode) { - this.set_caret_pos(input_message, this.env.top_posting ? 0 : $(input_message).val().length); + pos = this.env.top_posting ? 0 : input_message.value.length; + this.set_caret_pos(input_message, pos); + // add signature according to selected identity // if we have HTML editor, signature is added in callback if (input_from.prop('type') == 'select-one') { this.change_identity(input_from[0]); } + + // scroll to the bottom of the textarea (#1490114) + if (pos) { + $(input_message).scrollTop(input_message.scrollHeight); + } } // check for locally stored compose data - this.compose_restore_dialog(0, html_mode) + if (this.env.save_localstorage) + this.compose_restore_dialog(0, html_mode) if (input_to.val() == '') input_to.focus(); @@ -3615,11 +3624,15 @@ this.toggle_editor = function(props, obj, e) { // @todo: this should work also with many editors on page - var result = this.editor.toggle(props.html); + var result = this.editor.toggle(props.html, props.noconvert || false); + + // satisfy the expectations of aftertoggle-editor event subscribers + props.mode = props.html ? 'html' : 'plain'; if (!result && e) { // fix selector value if operation failed - $(e.target).filter('select').val(props.html ? 'plain' : 'html'); + props.mode = props.html ? 'plain' : 'html'; + $(e.target).filter('select').val(props.mode); } if (result) { @@ -3646,7 +3659,7 @@ this.save_response = function() { // show dialog to enter a name and to modify the text to be saved - var buttons = {}, text = this.editor.get_content(true, true), + var buttons = {}, text = this.editor.get_content({selection: true, format: 'text', nosig: true}), html = '<form class="propform">' + '<div class="prop block"><label>' + this.get_label('responsename') + '</label>' + '<input type="text" name="name" id="ffresponsename" size="40" /></div>' + @@ -3793,7 +3806,7 @@ } // save compose form content to local storage every 5 seconds - if (!this.local_save_timer && window.localStorage) { + if (!this.local_save_timer && window.localStorage && this.env.save_localstorage) { // track typing activity and only save on changes this.compose_type_activity = this.compose_type_activity_last = 0; $(document).bind('keypress', function(e){ ref.compose_type_activity++; }); @@ -3834,7 +3847,7 @@ if (val = $('[name="_' + hash_fields[i] + '"]').val()) str += val + ':'; - str += this.editor.get_content(); + str += this.editor.get_content({refresh: false}); if (this.env.attachments) for (id in this.env.attachments) @@ -3849,6 +3862,10 @@ // store the contents of the compose form to localstorage this.save_compose_form_local = function() { + // feature is disabled + if (!this.env.save_localstorage) + return; + var formdata = { session:this.env.session_id, changed:new Date().getTime() }, ed, empty = true; @@ -3918,7 +3935,7 @@ // initialize HTML editor if ((formdata._is_html == '1' && !html_mode) || (formdata._is_html != '1' && html_mode)) { - this.command('toggle-editor', {id: this.env.composebody, html: !html_mode}); + this.command('toggle-editor', {id: this.env.composebody, html: !html_mode, noconvert: true}); } } }; @@ -3955,6 +3972,19 @@ if (!show_sig) show_sig = this.env.show_sig; + var id = obj.options[obj.selectedIndex].value, + sig = this.env.identity, + delim = this.env.recipients_separator, + rx_delim = RegExp.escape(delim); + + // enable manual signature insert + if (this.env.signatures && this.env.signatures[id]) { + this.enable_command('insert-sig', true); + this.env.compose_commands.push('insert-sig'); + } + else + this.enable_command('insert-sig', false); + // first function execution if (!this.env.identities_initialized) { this.env.identities_initialized = true; @@ -3963,11 +3993,6 @@ if (this.env.opened_extwin) return; } - - var id = obj.options[obj.selectedIndex].value, - sig = this.env.identity, - delim = this.env.recipients_separator, - rx_delim = RegExp.escape(delim); // update reply-to/bcc fields with addresses defined in identities $.each(['replyto', 'bcc'], function() { @@ -4001,14 +4026,6 @@ if (old_val || new_val) input.val(input_val).change(); }); - - // enable manual signature insert - if (this.env.signatures && this.env.signatures[id]) { - this.enable_command('insert-sig', true); - this.env.compose_commands.push('insert-sig'); - } - else - this.enable_command('insert-sig', false); this.editor.change_signature(id, show_sig); this.env.identity = id; @@ -4439,7 +4456,7 @@ this.ksearch_destroy(); // insert all members of a group - if (typeof this.env.contacts[id] === 'object' && this.env.contacts[id].type == 'group') { + if (typeof this.env.contacts[id] === 'object' && this.env.contacts[id].type == 'group' && !this.env.contacts[id].email) { insert += this.env.contacts[id].name + this.env.recipients_delimiter; this.group2expand[this.env.contacts[id].id] = $.extend({ input: this.ksearch_input }, this.env.contacts[id]); this.http_request('mail/group-expand', {_source: this.env.contacts[id].source, _gid: this.env.contacts[id].id}, false); @@ -4583,7 +4600,7 @@ id = i + this.env.contacts.length; $('<li>').attr('id', 'rcmkSearchItem' + id) .attr('role', 'option') - .html(this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>')) + .html('<i class="icon"></i>' + this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>')) .addClass(type || '') .appendTo(ul) .mouseover(function() { ref.ksearch_select(this); }) @@ -4687,7 +4704,7 @@ source = this.env.source ? this.env.address_sources[this.env.source] : null; // we don't have dblclick handler here, so use 200 instead of this.dblclick_time - if (id = list.get_single_selection()) + if (this.env.contentframe && (id = list.get_single_selection())) this.preview_timer = setTimeout(function(){ ref.load_contact(id, 'show'); }, 200); else if (this.env.contentframe) this.show_contentframe(false); @@ -5745,6 +5762,8 @@ this.subscription_list = new rcube_treelist_widget(this.gui_objects.subscriptionlist, { selectable: true, + tabexit: false, + parent_focus: true, id_prefix: 'rcmli', id_encode: this.html_identifier_encode, id_decode: this.html_identifier_decode, @@ -5862,8 +5881,9 @@ row.attr({id: 'rcmli' + this.html_identifier_encode(id), 'class': class_name}); if (!refrow || !refrow.length) { - // remove old subfolders and toggle + // remove old data, subfolders and toggle $('ul,div.treetoggle', row).remove(); + row.removeData('filtered'); } // set folder name @@ -5990,7 +6010,7 @@ this.subscription_list.expand(this.folder_id2name(parent.id)); } - row = row.get(0); + row = row.show().get(0); if (row.scrollIntoView) row.scrollIntoView(); @@ -6134,6 +6154,37 @@ $('#folder-size').replaceWith(size); }; + // filter folders by namespace + this.folder_filter = function(prefix) + { + this.subscription_list.reset_search(); + + this.subscription_list.container.children('li').each(function() { + var i, folder = ref.folder_id2name(this.id); + // show all folders + if (prefix == '---') { + } + // got namespace prefix + else if (prefix) { + if (folder !== prefix) { + $(this).data('filtered', true).hide(); + return + } + } + // no namespace prefix, filter out all other namespaces + else { + // first get all namespace roots + for (i in ref.env.ns_roots) { + if (folder === ref.env.ns_roots[i]) { + $(this).data('filtered', true).hide(); + return; + } + } + } + + $(this).removeData('filtered').show(); + }); + }; /*********************************************************/ /********* GUI functionality *********/ @@ -6296,7 +6347,7 @@ }; // display a system message, list of types in common.css (below #message definition) - this.display_message = function(msg, type, timeout) + this.display_message = function(msg, type, timeout, key) { // pass command to parent window if (this.is_framed()) @@ -6305,18 +6356,34 @@ if (!this.gui_objects.message) { // save message in order to display after page loaded if (type != 'loading') - this.pending_message = [msg, type, timeout]; + this.pending_message = [msg, type, timeout, key]; return 1; } - type = type ? type : 'notice'; + if (!type) + type = 'notice'; - var key = this.html_identifier(msg), - date = new Date(), + if (!key) + key = this.html_identifier(msg); + + var date = new Date(), id = type + date.getTime(); - if (!timeout) - timeout = this.message_time * (type == 'error' || type == 'warning' ? 2 : 1); + if (!timeout) { + switch (type) { + case 'error': + case 'warning': + timeout = this.message_time * 2; + break; + + case 'uploading': + timeout = 0; + break; + + default: + timeout = this.message_time; + } + } if (type == 'loading') { key = 'loading'; @@ -6349,7 +6416,7 @@ if (type == 'loading') { this.messages[key].labels = [{'id': id, 'msg': msg}]; } - else { + else if (type != 'uploading') { obj.click(function() { return ref.hide_message(obj); }) .attr('role', 'alert'); } @@ -6358,6 +6425,7 @@ if (timeout > 0) setTimeout(function() { ref.hide_message(id, type != 'loading'); }, timeout); + return id; }; @@ -6434,6 +6502,35 @@ this.hide_message_object(m[k].obj); this.messages = {}; + }; + + // display uploading message with progress indicator + // data should contain: name, total, current, percent, text + this.display_progress = function(data) + { + if (!data || !data.name) + return; + + var msg = this.messages['progress' + data.name]; + + if (!data.label) + data.label = this.get_label('uploadingmany'); + + if (!msg) { + if (!data.percent || data.percent < 100) + this.display_message(data.label, 'uploading', 0, 'progress' + data.name); + return; + } + + if (!data.total || data.percent >= 100) { + this.hide_message(msg.obj); + return; + } + + if (data.text) + data.label += ' ' + data.text; + + msg.obj.text(data.label); }; // open a jquery UI dialog with the given content @@ -6862,7 +6959,7 @@ // truncate stack down to the one containing the ref link for (var i = this.menu_stack.length - 1; stack && i >= 0; i--) { if (!$(ref).parents('#'+this.menu_stack[i]).length) - this.hide_menu(this.menu_stack[i]); + this.hide_menu(this.menu_stack[i], event); } if (stack && this.menu_stack.length) { obj.data('parent', $.last(this.menu_stack)); @@ -7786,13 +7883,17 @@ // and return the message uid this.get_single_uid = function() { - return this.env.uid ? this.env.uid : (this.message_list ? this.message_list.get_single_selection() : null); + var uid = this.env.uid || (this.message_list ? this.message_list.get_single_selection() : null); + var result = ref.triggerEvent('get_single_uid', { uid: uid }); + return result || uid; }; // same as above but for contacts this.get_single_cid = function() { - return this.env.cid ? this.env.cid : (this.contact_list ? this.contact_list.get_single_selection() : null); + var cid = this.env.cid || (this.contact_list ? this.contact_list.get_single_selection() : null); + var result = ref.triggerEvent('get_single_cid', { cid: cid }); + return result || cid; }; // get the IMP mailbox of the message with the given UID -- Gitblit v1.9.1