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

program/js/app.js

@@ -256,7 +256,9 @@ function rcube_webmail()
         }
         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')
@@ -272,6 +274,22 @@ function rcube_webmail()
             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); };
 
           // init message compose form
@@ -3283,6 +3301,108 @@ function rcube_webmail()
     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()
   {
     var ed;
@@ -6822,6 +6942,54 @@ function rcube_webmail()
     }
   };
 
+  // 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 @@ class html
     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['checkspelling'] = 'Check spelling';
 $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['messagesent'] = 'Message sent successfully.';
 $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 @@ if (!is_array($COMPOSE))
 $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 compose_file_drop_area($attrib)
 }
 
 
+/**
+ *
+ */
+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 @@ $OUTPUT->add_handlers(array(
   '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

@@ -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 @@ body.iframe .footerleft.floating:before,
 	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 @@ select.decorated option {
 }
 
 ul.toolbarmenu,
+ul.toolbarmenu ul,
 #rcmKSearchpane ul {
 	margin: 0;
 	padding: 0;
@@ -1940,13 +1955,13 @@ ul.toolbarmenu li,
 }
 
 .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;
 }
@@ -2000,6 +2015,11 @@ ul.toolbarmenu li label {
 	text-shadow: 0px 1px 1px #333;
 }
 
+ul.toolbarmenu li.separator label {
+	color: #bbb;
+	font-style: italic;
+}
+
 ul.toolbarmenu li a.icon {
 	color: #eee;
 	padding: 2px 6px;
@@ -2078,6 +2098,15 @@ ul.toolbarmenu li span.conversation {
 	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>