Add method to display operation (uploading) progress in UI message

Aleksander Machniak

2014-11-20 0b36d151572e050b51d82e7429fee847ebb33e22

 program/js/app.js

@@ -556,7 +556,7 @@

    // 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) {
@@ -1660,7 +1660,7 @@
        }
        skip = obj.data('parent');
      }
    }, 10);
    }, 10, e);
  };

  // global keypress event handler
@@ -2482,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) {
@@ -3319,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),
@@ -3353,11 +3353,18 @@
    }

    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);
      }
    }

@@ -3617,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) {
@@ -3648,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>' +
@@ -3836,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)
@@ -3924,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});
      }
    }
  };
@@ -3961,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;
@@ -3969,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() {
@@ -4007,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;
@@ -4693,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);
@@ -6336,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())
@@ -6345,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';
@@ -6389,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');
    }
@@ -6398,6 +6425,7 @@

    if (timeout > 0)
      setTimeout(function() { ref.hide_message(id, type != 'loading'); }, timeout);

    return id;
  };

@@ -6474,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
@@ -6902,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));
@@ -7826,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