Send email js fixes and cleanup

diff --git a/templates/CRM/Contact/Form/Task/Email.tpl b/templates/CRM/Contact/Form/Task/Email.tpl
index 50fa8f376665543f0efae30bda52b79d0b316ce4..e5bf8413377ef21c67dc4a762b350eecdf7330bd 100644 (file)
--- a/templates/CRM/Contact/Form/Task/Email.tpl
+++ b/templates/CRM/Contact/Form/Task/Email.tpl
@@ -37,16 +37,27 @@
     </tr>
     <tr class="crm-contactEmail-form-block-recipient">
        <td class="label">{if $single eq false}{ts}Recipient(s){/ts}{else}{$form.to.label}{/if}</td>
-       <td>{$form.to.html}{if $noEmails eq true}&nbsp;&nbsp;{$form.emailAddress.html}{/if}
-    <div class="spacer"></div>
-       <span class="bold"><a href="#" id="addcc">{ts}Add CC{/ts}</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="addbcc">{ts}Add BCC{/ts}</a></span>
+       <td>
+         {$form.to.html}{if $noEmails eq true}&nbsp;&nbsp;{$form.emailAddress.html}{/if}
+         <div>
+           <a href="#" rel="cc_id" class="add-cc-link crm-hover-button" {if $form.cc_id.value}style="display:none;"{/if}>{ts}Add CC{/ts}</a>&nbsp;&nbsp;
+           <a href="#" rel="bcc_id" class="add-cc-link crm-hover-button" {if $form.bcc_id.value}style="display:none;"{/if}>{ts}Add BCC{/ts}</a>
+         </div>
        </td>
     </tr>
-    <tr class="crm-contactEmail-form-block-cc_id" id="cc" {if ! $form.cc_id.value}style="display:none;"{/if}>
-        <td class="label">{$form.cc_id.label}</td><td>{$form.cc_id.html}</td>
+    <tr class="crm-contactEmail-form-block-cc_id" {if !$form.cc_id.value}style="display:none;"{/if}>
+      <td class="label">{$form.cc_id.label}</td>
+      <td>
+        {$form.cc_id.html}
+        <a class="crm-hover-button clear-cc-link" rel="cc_id" title="{ts}Clear{/ts}" href="#"><span class="icon close-icon"></span></a>
+      </td>
     </tr>
-    <tr class="crm-contactEmail-form-block-bcc_id" id="bcc" {if ! $form.bcc_id.value}style="display:none;"{/if}>
-        <td class="label">{$form.bcc_id.label}</td><td>{$form.bcc_id.html}</td>
+    <tr class="crm-contactEmail-form-block-bcc_id" {if !$form.bcc_id.value}style="display:none;"{/if}>
+      <td class="label">{$form.bcc_id.label}</td>
+      <td>
+        {$form.bcc_id.html}
+        <a class="crm-hover-button clear-cc-link" rel="bcc_id" title="{ts}Clear{/ts}" href="#"><span class="icon close-icon"></span></a>
+      </td>
     </tr>
 
 {if $emailTask}
@@ -78,54 +89,52 @@
 <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
 </div>
 <script type="text/javascript">
-var toContact = ccContact = bccContact = '';
-
-{if $toContact}
-    toContact  = {$toContact};
-{/if}
 
-{if $ccContact}
-    ccContact  = {$ccContact};
-{/if}
+{literal}
+CRM.$(function($) {
+  var $form = $("#{/literal}{$form.formName}{literal}");
 
-{if $bccContact}
-    bccContact = {$bccContact};
-{/if}
+  $('.add-cc-link', $form).click(function(e) {
+    e.preventDefault();
+    var type = $(this).attr('rel');
+    $(this).hide();
+    $('.crm-contactEmail-form-block-'+type, $form).show();
+  });
 
-{literal}
-CRM.$(function($){
-  cj('#addcc').toggleClick( function() { cj(this).text('Remove CC');
-                                  cj('tr#cc').show().find('ul').find('input').focus();
-                   },function() { cj(this).text('Add CC');cj('#cc_id').val('');
-                                  cj('tr#cc ul li:not(:last)').remove();cj('#cc').hide();
-});
-  cj('#addbcc').toggleClick( function() { cj(this).text('Remove BCC');
-                                   cj('tr#bcc').show().find('ul').find('input').focus();
-                    },function() { cj(this).text('Add BCC');cj('#bcc_id').val('');
-                                   cj('tr#bcc ul li:not(:last)').remove();cj('#bcc').hide();
-});
+  $('.clear-cc-link', $form).click(function(e) {
+    e.preventDefault();
+    var type = $(this).attr('rel');
+    $('.add-cc-link[rel='+type+']', $form).show();
+    $('.crm-contactEmail-form-block-'+type, $form).hide().find('input.crm-ajax-select').select2('data', []);
+  });
 
   var sourceDataUrl = "{/literal}{crmURL p='civicrm/ajax/checkemail' q='id=1' h=0 }{literal}";
 
-  function emailSelect(el, prepopulate){
-    $(el).data('api-entity', 'contact').crmSelect2({
+  function emailSelect(el, prepopulate) {
+    $(el, $form).data('api-entity', 'contact').css({width: '40em', 'max-width': '90%'}).crmSelect2({
       minimumInputLength: 1,
       multiple: true,
       ajax: {
         url: sourceDataUrl,
         data: function(term) {
           return {
-            name: term,
+            name: term
           };
         },
         results: function(response) {
           return {
-            results: response,
+            results: response
           };
         }
       }
     }).select2('data', prepopulate);
   }
+
+  {/literal}
+  var toContact = {if $toContact}{$toContact}{else}''{/if},
+    ccContact = {if $ccContact}{$ccContact}{else}''{/if},
+    bccContact = {if $bccContact}{$bccContact}{else}''{/if};
+  {literal}
   emailSelect('#to', toContact);
   emailSelect('#cc_id', ccContact);
   emailSelect('#bcc_id', bccContact);