Add new feature to save and recall text snippets (aka canned responses) whe...

Thomas Bruederli

2013-07-25 0b1de8a487034724e8acbdccf8a7b506d1ecaeed

Add new feature to save and recall text snippets (aka canned responses) when composing messages

 program/js/app.js

@@ -256,7 +256,9 @@
        }
        else if (this.env.action == 'compose') {
          this.env.address_group_stack = [];
          this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel', 'toggle-editor', 'list-adresses', 'pushgroup', 'search', 'reset-search', 'extwin'];
          this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel',
            'toggle-editor', 'list-adresses', 'pushgroup', 'search', 'reset-search', 'extwin',
            'insert-response', 'save-response', 'edit-responses'];

          if (this.env.drafts_mailbox)
            this.env.compose_commands.push('savedraft')
@@ -270,6 +272,22 @@
            this.env.spellcheck.spelling_state_observer = function(s) { ref.spellcheck_state(); };
            this.env.compose_commands.push('spellcheck')
            this.enable_command('spellcheck', true);
          }

          // init canned response functions
          if (this.gui_objects.responseslist) {
            $('a.insertresponse', this.gui_objects.responseslist)
              .mousedown(function(e){ return rcube_event.cancel(e); })
              .mouseup(function(e){
                ref.command('insert-response', $(this).attr('rel'));
                $(document.body).trigger('mouseup');  // hides the menu
                return rcube_event.cancel(e);
              });

              // avoid textarea loosing focus when hitting the save-response button/link
              for (var i=0; this.buttons['save-response'] && i < this.buttons['save-response'].length; i++) {
                $('#'+this.buttons['save-response'][i].id).mousedown(function(e){ return rcube_event.cancel(e); })
              }
          }

          document.onmouseup = function(e){ return p.doc_mouse_up(e); };
@@ -3281,6 +3299,108 @@
    }

    return true;
  };

  this.insert_response = function(key)
  {
    var insert = this.env.textresponses[key] ? this.env.textresponses[key].text : null;
    if (!insert)
      return false;

    // get cursor pos
    var textarea = rcube_find_object(this.env.composebody),
      selection = $(textarea).is(':focus') ? this.get_input_selection(textarea) : { start:0, end:0 },
      inp_value = textarea.value;
      pre = inp_value.substring(0, selection.start),
      end = inp_value.substring(selection.end, inp_value.length);

    // insert response text
    textarea.value = pre + insert + end;

    // set caret after inserted text
    this.set_caret_pos(textarea, selection.start + insert.length);
    textarea.focus();
  };

  /**
   * Open the dialog to save a new canned response
   */
  this.save_response = function()
  {
    var textarea = rcube_find_object(this.env.composebody),
      text = '', sigstart;

    if (textarea && $(textarea).is(':focus')) {
      text = this.get_input_selection(textarea).text;
    }

    if (!text && textarea) {
      text = textarea.value;

      // strip off signature
      sigstart = text.indexOf('-- \n');
      if (sigstart > 0) {
        text = textarea.value.substring(0, sigstart);
      }
    }

    // show dialog to enter a name and to modify the text to be saved
    var buttons = {},
      html = '<form class="propform">' +
      '<div class="prop block"><label>' + this.get_label('responsename') + '</label>' +
      '<input type="text" name="name" id="ffresponsename" size="40" /></div>' +
      '<div class="prop block"><label>' + this.get_label('responsetext') + '</label>' +
      '<textarea name="text" id="ffresponsetext" cols="40" rows="8"></textarea></div>' +
      '</form>';

    buttons[this.gettext('save')] = function(e) {
      var name = $('#ffresponsename').val(),
        text = $('#ffresponsetext').val();

      if (!text) {
        $('#ffresponsetext').select();
        return false;
      }
      if (!name)
        name = text.substring(0,40);

      var lock = ref.display_message(ref.get_label('savingresponse'), 'loading');
      ref.http_post('settings/responses', { _insert:1, _name:name, _text:text }, lock);
      $(this).dialog('close');
    };

    buttons[this.gettext('cancel')] = function() {
      $(this).dialog('close');
    };

    this.show_popup_dialog(html, this.gettext('savenewresponse'), buttons);

    $('#ffresponsetext').val(text);
    $('#ffresponsename').select();
  };

  this.add_response_item = function(response)
  {
    var key = response.key;
    this.env.textresponses[key] = response;

    // append to responses list
    if (this.gui_objects.responseslist) {
      var li = $('<li>').appendTo(this.gui_objects.responseslist);
      $('<a>').addClass('insertresponse active')
        .attr('href', '#')
        .attr('rel', key)
        .html(response.name)
        .appendTo(li)
        .mousedown(function(e){
          return rcube_event.cancel(e);
        })
        .mouseup(function(e){
          ref.command('insert-response', key);
          $(document.body).trigger('mouseup');  // hides the menu
          return rcube_event.cancel(e);
        });
    }
  };

  this.stop_spellchecking = function()
@@ -6822,6 +6942,54 @@
    }
  };

  // get selected text from an input field
  // http://stackoverflow.com/questions/7186586/how-to-get-the-selected-text-in-textarea-using-jquery-in-internet-explorer-7
  this.get_input_selection = function(obj)
  {
    var start = 0, end = 0,
      normalizedValue, range,
      textInputRange, len, endRange;

    if (typeof obj.selectionStart == "number" && typeof obj.selectionEnd == "number") {
        normalizedValue = obj.value;
        start = obj.selectionStart;
        end = obj.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == obj) {
            len = obj.value.length;
            normalizedValue = obj.value.replace(/\r\n/g, "\n");

            // create a working TextRange that lives only in the input
            textInputRange = obj.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = obj.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return { start:start, end:end, text:normalizedValue.substr(start, end-start) };
  };

  // disable/enable all fields of a form
  this.lock_form = function(form, lock)
  {

 program/lib/Roundcube/html.php

@@ -33,7 +33,7 @@
    public static $doctype = 'xhtml';
    public static $lc_tags = true;
    public static $common_attrib = array('id','class','style','title','align');
    public static $containers = array('iframe','div','span','p','h1','h2','h3','form','textarea','table','thead','tbody','tr','th','td','style','script');
    public static $containers = array('iframe','div','span','p','h1','h2','h3','ul','form','textarea','table','thead','tbody','tr','th','td','style','script');


    /**

 program/localization/en_US/labels.inc

@@ -232,6 +232,14 @@
$labels['resumeediting'] = 'Resume editing';
$labels['revertto']      = 'Revert to';

$labels['responses'] = 'Responses';
$labels['insertresponse'] = 'Insert a response';
$labels['manageresponses'] = 'Manage responses';
$labels['savenewresponse'] = 'Save new response';
$labels['editresponses'] = 'Edit responses';
$labels['responsename'] = 'Name';
$labels['responsetext'] = 'Response Text';

$labels['attach'] = 'Attach';
$labels['attachments'] = 'Attachments';
$labels['upload'] = 'Upload';

 program/localization/en_US/messages.inc

@@ -46,6 +46,7 @@
$messages['savingmessage'] = 'Saving message...';
$messages['messagesaved'] = 'Message saved to Drafts.';
$messages['successfullysaved'] = 'Successfully saved.';
$messages['savingresponse'] = 'Saving response text...';
$messages['addedsuccessfully'] = 'Contact added successfully to address book.';
$messages['contactexists'] = 'A contact with the same e-mail address already exists.';
$messages['contactnameexists'] = 'A contact with the same name already exists.';

 program/steps/mail/compose.inc

@@ -127,7 +127,8 @@
$OUTPUT->add_label('nosubject', 'nosenderwarning', 'norecipientwarning', 'nosubjectwarning', 'cancel',
    'nobodywarning', 'notsentwarning', 'notuploadedwarning', 'savingmessage', 'sendingmessage', 
    'messagesaved', 'converting', 'editorwarning', 'searching', 'uploading', 'uploadingmany',
    'fileuploaderror', 'sendmessage');
    'fileuploaderror', 'sendmessage', 'savenewresponse', 'responsename', 'responsetext', 'save',
    'savingresponse');

$OUTPUT->set_env('compose_id', $COMPOSE['id']);
$OUTPUT->set_pagetitle(rcube_label('compose'));
@@ -1696,6 +1697,44 @@
}


/**
 *
 */
function rcmail_compose_responses_list($attrib)
{
    global $RCMAIL, $OUTPUT;

    $attrib += array('id' => 'rcmresponseslist', 'tagname' => 'ul', 'cols' => 1);

    $jsenv = array();
    $items = array();
    foreach ($RCMAIL->config->get('compose_responses', array()) as $response) {
        $key = $response['key'] ? $response['key'] : substr(md5($response['name']), 0, 16);
        $items[strtolower($response['name'])] = html::a(array(
            'href '=> '#'.urlencode($response['name']),
            'class' => rtrim('insertresponse ' . $attrib['itemclass']),
            'rel' => $key,
        ), Q($response['name']));

        $jsenv[$key] = $response;
    }

    // sort list by name
    ksort($items, SORT_LOCALE_STRING);
    
    $list = new html_table($attrib);
    foreach ($items as $item) {
        $list->add(array(), $item);
    }

    // set client env
    $OUTPUT->set_env('textresponses', $jsenv);
    $OUTPUT->add_gui_object('responseslist', $attrib['id']);

    return $list->show();
}


// register UI objects
$OUTPUT->add_handlers(array(
  'composeheaders' => 'rcmail_compose_headers',
@@ -1712,6 +1751,7 @@
  'storetarget' => 'rcmail_store_target_selection',
  'addressbooks' => 'rcmail_addressbook_list',
  'addresslist' => 'rcmail_contacts_list',
  'responseslist' => 'rcmail_compose_responses_list',
));

$OUTPUT->send('compose');

 program/steps/settings/responses.inc

New file
@@ -0,0 +1,53 @@
<?php

/*
 +-----------------------------------------------------------------------+
 | program/steps/settings/responses.inc                                  |
 |                                                                       |
 | This file is part of the Roundcube Webmail client                     |
 | Copyright (C) 2013, The Roundcube Dev Team                            |
 |                                                                       |
 | Licensed under the GNU General Public License version 3 or            |
 | any later version with exceptions for skins & plugins.                |
 | See the README file for a full license statement.                     |
 |                                                                       |
 | PURPOSE:                                                              |
 |   Manage and save canned response texts                               |
 |                                                                       |
 +-----------------------------------------------------------------------+
 | Author: Thomas Bruederli <roundcube@gmail.com>                        |
 +-----------------------------------------------------------------------+
*/


if (!empty($_POST['_insert'])) {
    $name = get_input_value('_name', RCUBE_INPUT_POST);
    $text = trim(get_input_value('_text', RCUBE_INPUT_POST));

    if (!empty($name) && !empty($text)) {
        $dupes = 0;
        $responses = $RCMAIL->config->get('compose_responses', array());
        foreach ($responses as $resp) {
            if (strcasecmp($name, preg_replace('/\s\(\d+\)$/', '', $resp['name'])) == 0)
                $dupes++;
        }
        if ($dupes) {  // require a unique name
            $name .= ' (' . ++$dupes . ')';
        }

        $response = array('name' => $name, 'text' => $text, 'format' => 'text', 'key' => substr(md5($name), 0, 16));
        $responses[] = $response;

        if ($RCMAIL->user->save_prefs(array('compose_responses' => $responses))) {
            $RCMAIL->output->command('add_response_item', $response);
            $RCMAIL->output->command('display_message', rcube_label('successfullysaved'), 'confirmation');
        }
        else {
            $RCMAIL->output->command('display_message', rcube_label('errorsaving'), 'error');
        }
    }
}

// send response
$RCMAIL->output->send();


 skins/larry/styles.css

@@ -1440,6 +1440,20 @@
    font-size: 12px;
}

.propform div.prop {
    margin-bottom: 0.5em;
}

.propform div.prop.block label {
    display: block;
    margin-bottom: 0.3em;
}

.propform div.prop.block input,
.propform div.prop.block textarea {
    width: 95%;
}

fieldset.floating {
    float: left;
    margin-right: 10px;
@@ -1922,6 +1936,7 @@
}

ul.toolbarmenu,
ul.toolbarmenu ul,
#rcmKSearchpane ul {
    margin: 0;
    padding: 0;
@@ -1940,13 +1955,13 @@
}

.googie_list tr:first-child td,
ul.toolbarmenu li:first-child,
ul.toolbarmenu > li:first-child,
select.decorated option:first-child {
    border-top: 0;
}

.googie_list tr:last-child td,
ul.toolbarmenu li:last-child,
ul.toolbarmenu > li:last-child,
select.decorated option:last-child {
    border-bottom: 0;
}
@@ -1998,6 +2013,11 @@
    color: #fff;
    padding: 4px 8px;
    text-shadow: 0px 1px 1px #333;
}

ul.toolbarmenu li.separator label {
    color: #bbb;
    font-style: italic;
}

ul.toolbarmenu li a.icon {
@@ -2078,6 +2098,15 @@
    background-position: 0 -1532px;
}

#snippetslist {
    max-width: 200px;
}

#snippetslist li a {
    overflow: hidden;
    text-overflow: ellipsis;
}

#rcmKSearchpane {
    border-radius: 0 0 4px 4px;
    border-top: 0;

 skins/larry/templates/compose.html

@@ -30,6 +30,7 @@
    <roundcube:endif />
    <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
    <roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
    <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" onmousedown="return false" onmouseup="UI.show_popup('responsesmenu');return false"><roundcube:label name="responses" /></a>
    <roundcube:container name="toolbar" id="compose-toolbar" />
</div>
</div>
@@ -194,6 +195,16 @@

<div id="spellmenu" class="popupmenu"></div>

<div id="responsesmenu" class="popupmenu">
    <ul class="toolbarmenu" id="textresponsesmenu">
        <li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li>
        <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
        <li class="separator"><label><roundcube:label name="manageresponses" /></label></li>
        <li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" /></li>
        <li><roundcube:button command="edit-responses" type="link" label="editresponses" classAct="active" /></li>
    </ul>
</div>

<roundcube:include file="/includes/footer.html" />

</body>