Issue#377 - Add ability to allow users to delete emails from recipient input.

2 files changed, 41 insertions, 4 deletions

diff --git a/web-ui/app/js/mail_view/ui/recipients/recipient.js b/web-ui/app/js/mail_view/ui/recipients/recipient.js
index f8909fe1..2048a978 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipient.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipient.js
@@ -19,10 +19,11 @@
 define(
   [
     'flight/lib/component',
-    'views/templates'
+    'views/templates',
+    'page/events'
   ],
 
-  function (defineComponent, templates) {
+  function (defineComponent, templates, events) {
 
     return defineComponent(recipient);
 
@@ -36,6 +37,24 @@ define(
         return component;
       };
 
+      this.recipientDelActions = function () {
+        this.on(this.$node.find('.recipient-del'), 'click', function (event) {
+          this.doSelect();
+          this.trigger(events.ui.recipients.deleteRecipient, {recipientsName : this.attr.address});
+          event.preventDefault();
+        });
+
+        this.on(this.$node.find('.recipient-del'), 'mouseover', function () {
+          this.$node.find('.recipient-value').addClass('deleting');
+          this.$node.find('.recipient-del').addClass('deleteTooltip');
+        });
+
+        this.on(this.$node.find('.recipient-del'), 'mouseout', function () {
+          this.$node.find('.recipient-value').removeClass('deleting');
+          this.$node.find('.recipient-del').removeClass('deleteTooltip');
+        });
+      };
+
       this.destroy = function () {
         this.$node.remove();
         this.teardown();
@@ -49,6 +68,10 @@ define(
         this.$node.find('.recipient-value').removeClass('selected');
       };
 
+      this.isSelected = function () {
+        return this.$node.find('.recipient-value').hasClass('selected');
+      }
+
       this.discoverEncryption = function () {
         this.$node.addClass('discorver-encryption');
         var p = $.getJSON('/keys?search=' + this.attr.address).promise();
@@ -58,11 +81,12 @@ define(
         }.bind(this));
           p.fail(function () {
             this.$node.find('.recipient-value').addClass('not-encrypted');
-          this.$node.removeClass('discorver-encryption');
+            this.$node.removeClass('discorver-encryption');
         }.bind(this));
       };
 
       this.after('initialize', function () {
+        this.recipientDelActions();
         this.discoverEncryption();
       });
     }
diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients.js b/web-ui/app/js/mail_view/ui/recipients/recipients.js
index d2a5160d..d9a894a6 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients.js
@@ -20,11 +20,12 @@ define(
     'flight/lib/component',
     'views/templates',
     'page/events',
+    'helpers/iterator',
     'mail_view/ui/recipients/recipients_input',
     'mail_view/ui/recipients/recipient',
     'mail_view/ui/recipients/recipients_iterator'
   ],
-  function (defineComponent, templates, events, RecipientsInput, Recipient, RecipientsIterator) {
+  function (defineComponent, templates, events, Iterator, RecipientsInput, Recipient, RecipientsIterator) {
     'use strict';
 
     return defineComponent(recipients);
@@ -62,6 +63,17 @@ define(
         this.addressesUpdated();
       };
 
+      this.deleteRecipient = function (event, recipient) {
+        var iter = new Iterator(this.attr.recipients, /*startingIndex=*/-1);
+
+        while(iter.hasNext() && iter.next()) {
+          if (iter.current().isSelected() && iter.current().address === recipient.address) {
+            iter.removeCurrent().destroy();
+            break;
+          }
+        }
+      };
+
       this.deleteLastRecipient = function () {
         this.attr.recipients.pop().destroy();
         this.addressesUpdated();
@@ -127,6 +139,7 @@ define(
         this.attachInput();
         this.initializeAddresses();
 
+        this.on(events.ui.recipients.deleteRecipient, this.deleteRecipient);
         this.on(events.ui.recipients.deleteLast, this.deleteLastRecipient);
         this.on(events.ui.recipients.selectLast, this.selectLastRecipient);
         this.on(events.ui.recipients.entered, this.recipientEntered);