From f8f8576410bcf9767ebc64a8d128cbf75e91840b Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Thu, 12 Feb 2015 08:53:38 -0800
Subject: [PATCH] crmMailingToken - Use $broadcast to link insertions and their
 targets

---
 js/angular-crm-ui.js                     | 33 ++++++++++++++++++++++++
 js/angular-crmMailing/directives.js      | 29 +++++----------------
 partials/crmMailing/body_html.html       | 19 +++++++++-----
 partials/crmMailing/body_text.html       | 18 +++++++++----
 partials/crmMailing/mailing.html         |  3 ++-
 partials/crmMailingAB/joint-mailing.html |  9 ++++---
 6 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index cfc451866a..0527396f20 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -277,6 +277,39 @@
       };
     })
 
+    // Example:
+    //   <a ng-click="$broadcast('my-insert-target', 'some new text')>Insert</a>
+    //   <textarea crm-ui-insert-rx='my-insert-target'></textarea>
+    // TODO Consider ways to separate the plain-text/rich-text implementations
+    .directive('crmUiInsertRx', function() {
+      return {
+        link: function(scope, element, attrs) {
+          scope.$on(attrs.crmUiInsertRx, function(e, tokenName) {
+            var id = element.attr('id');
+            if (CKEDITOR.instances[id]) {
+              CKEDITOR.instances[id].insertText(tokenName);
+              $(element).select2('close').select2('val', '');
+              CKEDITOR.instances[id].focus();
+            }
+            else {
+              var crmForEl = $('#' + id);
+              var origVal = crmForEl.val();
+              var origPos = crmForEl[0].selectionStart;
+              var newVal = origVal.substring(0, origPos) + tokenName + origVal.substring(origPos, origVal.length);
+              crmForEl.val(newVal);
+              var newPos = (origPos + tokenName.length);
+              crmForEl[0].selectionStart = newPos;
+              crmForEl[0].selectionEnd = newPos;
+
+              $(element).select2('close').select2('val', '');
+              crmForEl.triggerHandler('change');
+              crmForEl.focus();
+            }
+          });
+        }
+      };
+    })
+
     // Define a rich text editor.
     // example: <textarea crm-ui-id="myForm.body_html" crm-ui-richtext name="body_html" ng-model="mailing.body_html"></textarea>
     .directive('crmUiRichtext', function ($timeout) {
diff --git a/js/angular-crmMailing/directives.js b/js/angular-crmMailing/directives.js
index 1ba5449fbe..214ed8e5e3 100644
--- a/js/angular-crmMailing/directives.js
+++ b/js/angular-crmMailing/directives.js
@@ -180,13 +180,13 @@
     };
   });
 
-  // example: <input name="subject" /> <input crm-mailing-token crm-for="subject"/>
+  // example: <input name="subject" /> <input crm-mailing-token on-select="doSomething(token.name)" />
   // WISHLIST: Instead of global CRM.crmMailing.mailTokens, accept token list as an input
   angular.module('crmMailing').directive('crmMailingToken', function () {
     return {
       require: '^crmUiIdScope',
       scope: {
-        crmFor: '@'
+        onSelect: '@'
       },
       template: '<input type="text" class="crmMailingToken" />',
       link: function (scope, element, attrs, crmUiIdCtrl) {
@@ -197,28 +197,11 @@
           placeholder: ts('Tokens')
         });
         $(element).on('select2-selecting', function (e) {
-          var id = crmUiIdCtrl.get(attrs.crmFor);
-          if (CKEDITOR.instances[id]) {
-            CKEDITOR.instances[id].insertText(e.val);
-            $(element).select2('close').select2('val', '');
-            CKEDITOR.instances[id].focus();
-          }
-          else {
-            var crmForEl = $('#' + id);
-            var origVal = crmForEl.val();
-            var origPos = crmForEl[0].selectionStart;
-            var newVal = origVal.substring(0, origPos) + e.val + origVal.substring(origPos, origVal.length);
-            crmForEl.val(newVal);
-            var newPos = (origPos + e.val.length);
-            crmForEl[0].selectionStart = newPos;
-            crmForEl[0].selectionEnd = newPos;
-
-            $(element).select2('close').select2('val', '');
-            crmForEl.triggerHandler('change');
-            crmForEl.focus();
-          }
-
           e.preventDefault();
+          $(element).select2('close').select2('val', '');
+          scope.$parent.$eval(attrs.onSelect, {
+            token: {name: e.val}
+          });
         });
       }
     };
diff --git a/partials/crmMailing/body_html.html b/partials/crmMailing/body_html.html
index 1953d51291..9fd7469b77 100644
--- a/partials/crmMailing/body_html.html
+++ b/partials/crmMailing/body_html.html
@@ -2,12 +2,19 @@
 Required vars: mailing
 -->
 <div ng-form="htmlForm" crm-ui-id-scope>
-  <div style="float: right;">
-    <input crm-mailing-token crm-for="htmlForm.body_html"/>
-  </div>
-
   <div ng-controller="EmailBodyCtrl">
-    <textarea crm-ui-id="htmlForm.body_html" crm-ui-richtext name="body_html" ng-model="mailing.body_html" ng-blur="checkTokens(mailing)"></textarea>
-    <span ng-model="body_html_tokens" crm-ui-validate="hasAllTokens(mailing, 'body_html')"></span>
+    <div style="float: right;">
+      <input crm-mailing-token on-select="$broadcast('insert:body_html', token.name)"/>
+    </div>
+
+    <div>
+      <textarea
+        crm-ui-id="htmlForm.body_html"
+        crm-ui-richtext name="body_html"
+        crm-ui-insert-rx="insert:body_html"
+        ng-model="mailing.body_html"
+        ng-blur="checkTokens(mailing)"></textarea>
+      <span ng-model="body_html_tokens" crm-ui-validate="hasAllTokens(mailing, 'body_html')"></span>
+    </div>
   </div>
 </div>
diff --git a/partials/crmMailing/body_text.html b/partials/crmMailing/body_text.html
index 2d4665c8dd..1e2ad5cda3 100644
--- a/partials/crmMailing/body_text.html
+++ b/partials/crmMailing/body_text.html
@@ -2,11 +2,19 @@
 Required vars: mailing, crmMailingConst
 -->
 <div ng-form="textForm" crm-ui-id-scope>
-  <div style="float: right;">
-    <input crm-mailing-token crm-for="textForm.body_text"/>
-  </div>
   <div ng-controller="EmailBodyCtrl">
-    <textarea crm-ui-id="textForm.body_text" name="body_text" ng-model="mailing.body_text" ng-blur="checkTokens(mailing)"></textarea>
-    <span ng-model="body_text_tokens" crm-ui-validate="hasAllTokens(mailing, 'body_text')"></span>
+    <div style="float: right;">
+      <input crm-mailing-token on-select="$broadcast('insert:body_text', token.name)" />
+    </div>
+
+    <div>
+      <textarea
+        crm-ui-id="textForm.body_text"
+        crm-ui-insert-rx="insert:body_text"
+        name="body_text"
+        ng-model="mailing.body_text"
+        ng-blur="checkTokens(mailing)"></textarea>
+      <span ng-model="body_text_tokens" crm-ui-validate="hasAllTokens(mailing, 'body_text')"></span>
+    </div>
   </div>
 </div>
diff --git a/partials/crmMailing/mailing.html b/partials/crmMailing/mailing.html
index 9bbfd28295..de2068fdda 100644
--- a/partials/crmMailing/mailing.html
+++ b/partials/crmMailing/mailing.html
@@ -54,10 +54,11 @@ It could perhaps be thinned by 30-60% by making more directives.
     </div>
     <div crm-ui-field="subform.subject" crm-title="ts('Subject')">
       <div style="float: right;">
-        <input crm-mailing-token crm-for="subform.subject" />
+        <input crm-mailing-token on-select="$broadcast('insert:subject', token.name)" />
       </div>
       <input
         crm-ui-id="subform.subject"
+        crm-ui-insert-rx="insert:subject"
         type="text"
         class="crm-form-text"
         ng-model="mailing.subject"
diff --git a/partials/crmMailingAB/joint-mailing.html b/partials/crmMailingAB/joint-mailing.html
index 1059048bd0..e0585bea62 100644
--- a/partials/crmMailingAB/joint-mailing.html
+++ b/partials/crmMailingAB/joint-mailing.html
@@ -152,10 +152,11 @@ processed by Angular; if false, the field will be hidden and completely ignored
 
     <div crm-ui-field="subform.subject" crm-title="ts('Subject')" ng-if="fields.subject">
       <div style="float: right;">
-        <input crm-mailing-token crm-for="subform.subject" />
+        <input crm-mailing-token on-select="$broadcast('insert:subject', token.name)" />
       </div>
       <input
         crm-ui-id="subform.subject"
+        crm-ui-insert-rx="insert:subject"
         type="text"
         class="crm-form-text"
         ng-model="abtest.mailings.a.subject"
@@ -165,10 +166,11 @@ processed by Angular; if false, the field will be hidden and completely ignored
     </div>
     <div crm-ui-field="subform.subjectA" crm-title="ts('Subject (A)')" ng-if="fields.subjectA">
       <div style="float: right;">
-        <input crm-mailing-token crm-for="subform.subjectA" />
+        <input crm-mailing-token on-select="$broadcast('insert:subjectA', token.name)" />
       </div>
       <input
         crm-ui-id="subform.subjectA"
+        crm-ui-insert-rx="insert:subjectA"
         type="text"
         class="crm-form-text"
         ng-model="abtest.mailings.a.subject"
@@ -178,10 +180,11 @@ processed by Angular; if false, the field will be hidden and completely ignored
     </div>
     <div crm-ui-field="subform.subjectB" crm-title="ts('Subject (B)')" ng-if="fields.subjectB">
       <div style="float: right;">
-        <input crm-mailing-token crm-for="subform.subjectB" />
+        <input crm-mailing-token on-select="$broadcast('insert:subjectB', token.name)" />
       </div>
       <input
         crm-ui-id="subform.subjectB"
+        crm-ui-insert-rx="insert:subjectB"
         type="text"
         class="crm-form-text"
         ng-model="abtest.mailings.b.subject"
-- 
2.25.1