CRM-14258 - Use select2 for inserting tokens
authorColeman Watts <coleman@civicrm.org>
Sat, 22 Feb 2014 01:21:43 +0000 (20:21 -0500)
committerColeman Watts <coleman@civicrm.org>
Sat, 22 Feb 2014 01:21:43 +0000 (20:21 -0500)
16 files changed:
CRM/Admin/Form/MessageTemplates.php
CRM/Admin/Form/Preferences/Address.php
CRM/Core/Form.php
CRM/Mailing/BAO/Mailing.php
CRM/Utils/Token.php
css/civicrm.css
templates/CRM/Admin/Form/MessageTemplates.tpl
templates/CRM/Admin/Form/Preferences/Address.tpl
templates/CRM/Admin/Page/MessageTemplates.tpl
templates/CRM/Contact/Form/Task/Email.tpl
templates/CRM/Contact/Form/Task/EmailCommon.tpl
templates/CRM/Contact/Form/Task/PDFLetterCommon.tpl
templates/CRM/Contact/Form/Task/SMSCommon.tpl
templates/CRM/Mailing/Form/InsertTokens.tpl
templates/CRM/Mailing/Form/Upload.tpl
templates/CRM/common/Filter.tpl [deleted file]

index fbb5b3098c7aa4ec16ce9631ff0d96a2e506cbb4..38b09b2d557d7294971ef9059960551a0596b322 100644 (file)
@@ -158,36 +158,7 @@ class CRM_Admin_Form_MessageTemplates extends CRM_Admin_Form {
     //get the tokens.
     $tokens = CRM_Core_SelectValues::contactTokens();
 
-    //sorted in ascending order tokens by ignoring word case
-    natcasesort($tokens);
-    $this->assign('tokens', json_encode($tokens));
-
-    $this->add('select', 'token1', ts('Insert Tokens'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onchange' => "return tokenReplText(this);",
-      )
-    );
-
-    $this->add('select', 'token2', ts('Insert Tokens'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onchange' => "return tokenReplHtml(this);",
-      )
-    );
-
-    $this->add('select', 'token3', ts('Insert Tokens'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onchange' => "return tokenReplText(this);",
-      )
-    );
+    $this->assign('tokens', CRM_Utils_Token::formatTokensForDisplay($tokens));
 
     $this->add('textarea', 'msg_text', ts('Text Message'),
       "cols=50 rows=6"
index 01862a2b486a6bb724813d3fdc42535bc4adf312..34c9be613ac5f3604f77f9a05620dbf4a6439990 100644 (file)
@@ -151,17 +151,7 @@ class CRM_Admin_Form_Preferences_Address extends CRM_Admin_Form_Preferences {
 
     //get the tokens for Mailing Label field
     $tokens = CRM_Core_SelectValues::contactTokens();
-    natcasesort($tokens);
-    $this->assign('tokens', json_encode($tokens));
-
-    $this->add('select', 'token1', ts('Insert Token'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onclick' => "return tokenReplText(this);",
-      )
-    );
+    $this->assign('tokens', CRM_Utils_Token::formatTokensForDisplay($tokens));
 
     parent::buildQuickForm();
   }
index 0899588c65b54917faa06e1341381076de5c55a3..23ab78413e4a43b8ca540c78d804c36eb2540b75 100644 (file)
@@ -1271,6 +1271,7 @@ class CRM_Core_Form extends HTML_QuickForm_Page {
     if ($props['entity'] == 'contact' && isset($props['create']) && !(CRM_Core_Permission::check('edit all contacts') || CRM_Core_Permission::check('add contacts'))) {
       unset($props['create']);
     }
+    // Convenient shortcut to passing in array create links
     if ($props['entity'] == 'contact' && isset($props['create']) && $props['create'] === TRUE) {
       if (empty($props['api']['params']['contact_type'])) {
         $props['create'] = CRM_Core_BAO_UFGroup::getCreateLinks(array('new_individual', 'new_organization', 'new_household'));
index 7dcdaa5809c8a05bbbc6b2a61b6e63da310e3fc4..34ab8f3bc456fc2e9dffe95d20d65a897ac06ed1 100644 (file)
@@ -2389,16 +2389,6 @@ LEFT JOIN civicrm_mailing_group g ON g.mailing_id   = m.id
     //get the tokens.
     $tokens = CRM_Core_SelectValues::contactTokens();
 
-    //token selector for subject
-    //CRM-5058
-    $form->add('select', 'token3', ts('Insert Token'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onclick' => "return tokenReplText(this);",
-      )
-    );
     $className = CRM_Utils_System::getClassName($form);
     if ($className == 'CRM_Mailing_Form_Upload') {
       $tokens = array_merge(CRM_Core_SelectValues::mailingTokens(), $tokens);
@@ -2413,27 +2403,7 @@ LEFT JOIN civicrm_mailing_group g ON g.mailing_id   = m.id
     }
 
     //sorted in ascending order tokens by ignoring word case
-    natcasesort($tokens);
-    $form->assign('tokens', json_encode($tokens));
-
-    $form->add('select', 'token1', ts('Insert Tokens'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onclick' => "return tokenReplText(this);",
-      )
-    );
-
-    $form->add('select', 'token2', ts('Insert Tokens'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onclick' => "return tokenReplHtml(this);",
-      )
-    );
-
+    $form->assign('tokens', CRM_Utils_Token::formatTokensForDisplay($tokens));
 
     $form->_templates = CRM_Core_BAO_MessageTemplate::getMessageTemplates(FALSE);
     if (!empty($form->_templates)) {
@@ -2498,19 +2468,7 @@ LEFT JOIN civicrm_mailing_group g ON g.mailing_id   = m.id
       $tokens = array_merge($form->listTokens(), $tokens);
     }
 
-    //sorted in ascending order tokens by ignoring word case
-    natcasesort($tokens);
-
-    $form->assign('tokens', json_encode($tokens));
-
-    $form->add('select', 'token1', ts('Insert Tokens'),
-      $tokens, FALSE,
-      array(
-        'size' => "5",
-        'multiple' => TRUE,
-        'onchange' => "return tokenReplHtml(this);",
-      )
-    );
+    $form->assign('tokens', CRM_Utils_Token::formatTokensForDisplay($tokens));
 
     $form->_templates = CRM_Core_BAO_MessageTemplate::getMessageTemplates(FALSE);
     if (!empty($form->_templates)) {
index e6ad765924f4be0c6a6ca72fedf512efc1bbe813..813c5dfc704e0db01d7823bd84cee99dcb430e69 100644 (file)
@@ -1531,4 +1531,39 @@ class CRM_Utils_Token {
     );
   }
 
+  /**
+   * Formats a token list for the select2 widget
+   * @param $tokens
+   * @return array
+   */
+  static function formatTokensForDisplay($tokens) {
+    $sorted = $output = array();
+
+    // Sort in ascending order by ignoring word case
+    natcasesort($tokens);
+
+    // Attempt to place tokens into optgroups
+    // TODO: These groupings could be better and less hackish. Getting them pre-grouped from upstream would be nice.
+    foreach ($tokens as $k => $v) {
+      // Check to see if this token is already in a group e.g. for custom fields
+      $split = explode(' :: ', $v);
+      if (!empty($split[1])) {
+        $sorted[$split[1]][] = array('id' => $k, 'text' => $split[0]);
+      }
+      // Group by entity
+      else {
+        $split = explode('.', trim($k, '{}'));
+        $entity = isset($split[1]) ? ucfirst($split[0]) : 'Contact';
+        $sorted[ts($entity)][] = array('id' => $k, 'text' => $v);
+      }
+    }
+
+    ksort($sorted);
+    foreach ($sorted as $k => $v) {
+      $output[] = array('text' => $k, 'children' => $v);
+    }
+
+    return $output;
+  }
+
 }
index 803481e9f5e3edf0afe509698b83cd8068b68588..286b678f00f55c40a6659ef6684436616f800993 100644 (file)
@@ -3893,6 +3893,19 @@ div.m ul#civicrm-menu,
   margin: 0;
   padding: 0;
 }
+.crm-container .crm-action-menu .select2-default span.select2-chosen {
+  color: #2786C2;
+}
+.crm-container .crm-action-menu .select2-default span.select2-chosen:before {
+  background: url("../i/icons/jquery-ui-2786C2.png") no-repeat scroll -64px -112px;
+  content: "";
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin-right: 3px;
+  position: relative;
+  top: 3px;
+}
 
 /* Special styling for specific form buttons */
 #crm-container span.crm-button_qf_Main_upload input,
index 092d9bb6b6c00d83de91c80e167d0cb5806c6dbc..0ee7810de7473bda2f4a6dfb8abdff7b5987ac01 100644 (file)
         <tr>
             <td class="label-left">{$form.msg_subject.label}</td>
             <td>
-                  {$form.msg_subject.html|crmAddClass:huge}
-                <a href="#" onClick="return showToken('Subject', 3);">{$form.token3.label}</a>
-                {help id="id-token-text" file="CRM/Contact/Form/Task/Email.hlp"}
-                  <div id='tokenSubject' style="display:none">
-                     <input  style="border:1px solid #999999;" type="text" id="filter3" size="20" name="filter3" onkeyup="filter(this, 3)"/><br />
-                     <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-                     {$form.token3.html}
-                  </div>
+              {$form.msg_subject.html|crmAddClass:huge}
+              <input class="crm-token-selector big" data-field="msg_subject" />
+              {help id="id-token-subject" tplFile=$tplFile isAdmin=$isAdmin file="CRM/Contact/Form/Task/Email.hlp"}
              <br /><span class="description">{ts}Subject for email message.{/ts} {ts 1=$tokenDocsRepeated}Tokens may be included (%1).{/ts}</span>
             </td>
         </tr>
                 {ts}Plain-Text Format{/ts}
         </div><!-- /.crm-accordion-header -->
             <div class="crm-accordion-body">
-                <span class="helpIcon" id="helptext">
-                  <a href="#" onClick="return showToken('Text', 1);">{$form.token1.label}</a>
-                  {help id="id-token-text" file="CRM/Contact/Form/Task/Email.hlp"}
-                  <div id='tokenText' style="display:none">
-                    <input  style="border:1px solid #999999;" type="text" id="filter1" size="20" name="filter1" onkeyup="filter(this, 1)"/><br />
-                    <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-                      {$form.token1.html}
-                  </div>
-                </span>
-              <div class="clear"></div>
+              <div class="helpIcon" id="helptext">
+                <input class="crm-token-selector big" data-field="msg_text" />
+                {help id="id-token-text" tplFile=$tplFile file="CRM/Contact/Form/Task/Email.hlp"}
+              </div>
                 <div class='text'>
                     {$form.msg_text.html|crmAddClass:huge}
                     <div class="description">{ts}Text formatted message.{/ts} {ts 1=$tokenDocsRepeated}Tokens may be included (%1).{/ts}</div>
             {help id="id-message-text" file="CRM/Contact/Form/Task/Email.hlp"}
         </div><!-- /.crm-accordion-header -->
          <div class="crm-accordion-body">
-                <span class="helpIcon" id="helphtml">
-                  <a href="#" onClick="return showToken('Html', 2);">{$form.token2.label}</a>
-                  {help id="id-token-html" file="CRM/Contact/Form/Task/Email.hlp"}
-                  <div id='tokenHtml' style="display:none">
-                    <input style="border:1px solid #999999;" type="text" id="filter2" size="20" name="filter2" onkeyup="filter(this, 2)"/><br />
-                    <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-                      {$form.token2.html}
-                  </div>
-                </span>
+           <div class="helpIcon" id="helphtml">
+             <input class="crm-token-selector big" data-field="html_message" />
+             {help id="id-token-html" tplFile=$tplFile isAdmin=$isAdmin editor=$editor file="CRM/Contact/Form/Task/Email.hlp"}
+           </div>
                 <div class="clear"></div>
                 <div class='html'>
                     {$form.msg_html.html}
index 1a5ca2d806ccff10c224d205393d54f9f905e553..14bc44311880f7f5f60bd18028a2248450ab9ece 100644 (file)
         <tr class="crm-preferences-address-form-block-mailing_format">
             <td class="label">{$form.mailing_format.label}<br />{help id='label-tokens'}</td>
             <td>
-                <span>
-                     <a href="#" onClick="return showToken('Text', 1);">{ts}Insert Tokens{/ts}</a>
-                     <div id='tokenText' style="display:none">
-                         <input  style="border:1px solid #999999;" type="text" id="filter1" size="20" name="filter1" onkeyup="filter(this, 1)"/><br />
-                         <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-                         {$form.token1.html}
-                     </div>
-                </span><br />
+              <div class="helpIcon" id="helphtml">
+                <input class="crm-token-selector big" data-field="mailing_format" />
+                {help id="id-token-text" tplFile=$tplFile file="CRM/Contact/Form/Task/Email.hlp"}
+              </div>
                 {$form.mailing_format.html|crmAddClass:huge12}<br />
                 <span class="description">{ts}Content and format for mailing labels.{/ts}</span>
             </td>
index b0f2637130a97f86a5ff7dc03f97ce835505af39..68b05052208100a071f4d677e8673c3d0a872a27 100644 (file)
@@ -87,6 +87,9 @@
 
 {if $rows and $action ne 2 and $action ne 4}
 
+  {* include wysiwyg related files*}
+  {include file="CRM/common/wysiwyg.tpl" includeWysiwygEditor=true}
+
   <div id='mainTabContainer'>
     <ul>
       <li id='tab_user'>    <a href='#user'     title='{ts}User-driven Messages{/ts}'>    {ts}User-driven Messages{/ts}    </a></li>
index ab3e1d02c3f6f161e0ab6f4ba0c09a2c97ce17a5..e74cbd02669ab767fba127fb34fe39183cda4a59 100644 (file)
 {/if}
     <tr class="crm-contactEmail-form-block-subject">
        <td class="label">{$form.subject.label}</td>
-       <td>{$form.subject.html|crmAddClass:huge}&nbsp;
-        <a href="#" onClick="return showToken('Subject', 3);">{$form.token3.label}</a>
-      {help id="id-token-subject" file="CRM/Contact/Form/Task/Email.hlp"}
-        <div id='tokenSubject' style="display:none">
-        <input style="border:1px solid #999999;" type="text" id="filter3" size="20" name="filter3" onkeyup="filter(this, 3)"/><br />
-        <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-        {$form.token3.html}
-        </div>
+       <td>
+         {$form.subject.html|crmAddClass:huge}&nbsp;
+         <input class="crm-token-selector big" data-field="subject" />
+         {help id="id-token-subject" tplFile=$tplFile isAdmin=$isAdmin file="CRM/Contact/Form/Task/Email.hlp"}
        </td>
     </tr>
 </table>
index 9ff138512c41f6585d412f36298a92f5c0695c6b..379bd41734e69b2e246aa3abd9e47828f92df6d2 100644 (file)
     {help id="id-message-text" file="CRM/Contact/Form/Task/Email.hlp"}
 </div><!-- /.crm-accordion-header -->
  <div class="crm-accordion-body">
-  <span class="helpIcon" id="helphtml">
-  <a href="#" onClick="return showToken('Html', 2);">{$form.token2.label}</a>
-  {help id="id-token-html" tplFile=$tplFile isAdmin=$isAdmin editor=$editor file="CRM/Contact/Form/Task/Email.hlp"}
-  <div id="tokenHtml" style="display:none;">
-      <input style="border:1px solid #999999;" type="text" id="filter2" size="20" name="filter2" onkeyup="filter(this, 2)"/><br />
-      <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-      {$form.token2.html}
+  <div class="helpIcon" id="helphtml">
+    <input class="crm-token-selector big" data-field="html_message" />
+    {help id="id-token-html" tplFile=$tplFile isAdmin=$isAdmin editor=$editor file="CRM/Contact/Form/Task/Email.hlp"}
   </div>
-    </span>
-    <div class="clear"></div>
+  <div class="clear"></div>
     <div class='html'>
   {if $editor EQ 'textarea'}
       <div class="help description">{ts}NOTE: If you are composing HTML-formatted messages, you may want to enable a Rich Text (WYSIWYG) editor (Administer &raquo; Customize Data & Screens &raquo; Display Preferences).{/ts}</div>
   {ts}Plain-Text Format{/ts}
   </div><!-- /.crm-accordion-header -->
  <div class="crm-accordion-body">
-
- <span class="helpIcon" id="helptext">
-  <a href="#" onClick="return showToken('Text', 1);">{$form.token1.label}</a>
-  {help id="id-token-text" tplFile=$tplFile file="CRM/Contact/Form/Task/Email.hlp"}
-  <div id='tokenText' style="display:none">
-      <input  style="border:1px solid #999999;" type="text" id="filter1" size="20" name="filter1" onkeyup="filter(this, 1)"/><br />
-      <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-      {$form.token1.html}
-  </div>
-    </span>
-    <div class="clear"></div>
-
+   <div class="helpIcon" id="helptext">
+     <input class="crm-token-selector big" data-field="text_message" />
+     {help id="id-token-text" tplFile=$tplFile file="CRM/Contact/Form/Task/Email.hlp"}
+   </div>
     <div class='text'>
       {$form.text_message.html}<br />
     </div>
index bfdb907366a05f998352d019d918f7424f00d3fc..01a2f69c24a81fb6e3a0e2e02d9538b09eb5e51f 100644 (file)
     {$form.html_message.label}
 </div><!-- /.crm-accordion-header -->
  <div class="crm-accordion-body">
-  {if $action neq 4}
-  <span class="helpIcon" id="helphtml">
-  <a href="#" onClick="return showToken('Html', 1);">{$form.token1.label}</a>
-  {help id="id-token-html" file="CRM/Contact/Form/Task/Email.hlp" tplFile=$tplFile isAdmin=$isAdmin editor=$editor}
-  <div id="tokenHtml" style="display:none;">
-      <input style="border:1px solid #999999;" type="text" id="filter1" size="20" name="filter1" onkeyup="filter(this, 1)"/><br />
-      <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-      {$form.token1.html}
-  </div>
-  </span>
-  {/if}
+   <div class="helpIcon" id="helphtml">
+     <input class="crm-token-selector big" data-field="html_message" />
+     {help id="id-token-html" tplFile=$tplFile isAdmin=$isAdmin editor=$editor file="CRM/Contact/Form/Task/Email.hlp"}
+   </div>
     <div class="clear"></div>
     <div class='html'>
   {if $editor EQ 'textarea'}
@@ -134,41 +127,6 @@ var currentMetric = document.getElementById('metric').value;
 showBindFormatChkBox();
 selectPaper( document.getElementById('paper_size').value );
 
-function tokenReplHtml ( )
-{
-    var token1 = cj("#token1").val( )[0];
-    var editor = {/literal}"{$editor}"{literal};
-    if ( editor == "tinymce" ) {
-        var content= tinyMCE.get('html_message').getContent() +token1;
-        tinyMCE.get('html_message').setContent(content);
-    } else if ( editor == "joomlaeditor" ) {
-        tinyMCE.execCommand('mceInsertContent',false, token1);
-        var msg       = document.getElementById(html_message).value;
-        var cursorlen = document.getElementById(html_message).selectionStart;
-        var textlen   = msg.length;
-        document.getElementById(html_message).value = msg.substring(0, cursorlen) + token1 + msg.substring(cursorlen, textlen);
-        var cursorPos = (cursorlen + token1.length);
-        document.getElementById(html_message).selectionStart = cursorPos;
-        document.getElementById(html_message).selectionEnd   = cursorPos;
-        document.getElementById(html_message).focus();
-  } else if ( editor == "ckeditor" ) {
-        oEditor = CKEDITOR.instances[html_message];
-        oEditor.insertHtml(token1.toString() );
-    } else if ( editor == "drupalwysiwyg" ) {
-        Drupal.wysiwyg.instances[html_message].insert(token1.toString());
-    } else {
-    var msg       = document.getElementById(html_message).value;
-        var cursorlen = document.getElementById(html_message).selectionStart;
-        var textlen   = msg.length;
-        document.getElementById(html_message).value = msg.substring(0, cursorlen) + token1 + msg.substring(cursorlen, textlen);
-        var cursorPos = (cursorlen + token1.length);
-        document.getElementById(html_message).selectionStart = cursorPos;
-        document.getElementById(html_message).selectionEnd   = cursorPos;
-        document.getElementById(html_message).focus();
-    }
-    verify();
-}
-
 function showBindFormatChkBox()
 {
     var templateExists = true;
index 797d7c541ed8167bd45f9768c4522c5481dd82ff..9be797cf68df594087d3ca867f9ddc0889a40432 100644 (file)
   </div><!-- /.crm-accordion-header -->
  <div class="crm-accordion-body">
  <div id='char-count-message'></div>
- <span class="helpIcon" id="helptext">
-  <a href="#" onClick="return showToken('Text', 1);">{$form.token1.label}</a>
-  {help id="id-token-text" file="CRM/Contact/Form/Task/SMS.hlp"}
-  <div id='tokenText' style="display:none">
-      <input  style="border:1px solid #999999;" type="text" id="filter1" size="20" name="filter1" onkeyup="filter(this, 1)"/><br />
-      <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-      {$form.token1.html}
-  </div>
-    </span>
-    <div class="clear"></div>
+   <div class="helpIcon" id="helptext">
+     <input class="crm-token-selector big" data-field="text_message" />
+     {help id="id-token-text" tplFile=$tplFile file="CRM/Contact/Form/Task/SMS.hlp"}
+   </div>
     <div class='text'>
   {$form.text_message.html}<br />
     </div>
index e715501a56802b55e528e4c1a4ec9ef3f65b47f9..9e502dd44dfb8c0a4cf1c2e8e36dab7d966d9734 100644 (file)
@@ -29,6 +29,7 @@
 <script type="text/javascript" src="{$config->resourceBase}packages/jquery/plugins/jquery-fieldselection.js"></script>
 
 <script type="text/javascript">
+cj('form#{$form.formName}').data('tokens', {$tokens|@json_encode});
 var text_message = null;
 var html_message = null;
 var isPDF        = false;
@@ -286,61 +287,65 @@ if ( isMailing ) {
   {literal}
 }
 
-function tokenReplText(element) {
-  var token     = cj("#"+element.id).val( )[0];
-  if ( element.id == 'token3' ) {
-    ( isMailing ) ? text_message = "subject" : text_message = "msg_subject";
-  }
-  else if ( element.id == 'token1' ) {
-    ( isMailing ) ? text_message = "text_message" : text_message = "msg_text";
-  }
-
-  cj( "#"+ text_message ).replaceSelection( token );
-
-  if ( isMailing ) {
-    verify();
+cj(function($) {
+  function insertToken() {
+    var
+      token = $(this).val(),
+      field = $(this).data('field');
+    if (field === 'html_message') {
+      tokenReplHtml(token);
+    } else {
+      $('#' + field).replaceSelection(token);
+    }
+    $(this).select2('val', '');
+    if (isMailing) {
+      verify();
+    }
   }
-}
 
-function tokenReplHtml() {
-  var token2     = cj("#token2").val( )[0];
-  var editor     = {/literal}"{$editor}"{literal};
-  if ( editor == "tinymce" ) {
-    tinyMCE.execInstanceCommand('html_message',"mceInsertContent",false, token2 );
-  }
-  else if ( editor == "joomlaeditor" ) {
-    tinyMCE.execCommand('mceInsertContent',false, token2);
-    var msg       = document.getElementById(html_message).value;
-    var cursorlen = document.getElementById(html_message).selectionStart;
-    var textlen   = msg.length;
-    document.getElementById(html_message).value = msg.substring(0, cursorlen) + token2 + msg.substring(cursorlen, textlen);
-    var cursorPos = (cursorlen + token2.length);
-    document.getElementById(html_message).selectionStart = cursorPos;
-    document.getElementById(html_message).selectionEnd   = cursorPos;
-    document.getElementById(html_message).focus();
-  }
-  else if ( editor == "ckeditor" ) {
-    oEditor = CKEDITOR.instances[html_message];
-    oEditor.insertHtml(token2.toString() );
-  }
-  else if ( editor == "drupalwysiwyg" ) {
-    if (Drupal.wysiwyg.instances[html_message].insert) {
-      Drupal.wysiwyg.instances[html_message].insert(token2.toString() );
+  function tokenReplHtml(token) {
+    var editor     = {/literal}"{$editor}"{literal};
+    if ( editor == "tinymce" ) {
+      tinyMCE.execInstanceCommand('html_message',"mceInsertContent",false, token );
+    }
+    else if ( editor == "joomlaeditor" ) {
+      tinyMCE.execCommand('mceInsertContent',false, token);
+      var msg       = document.getElementById(html_message).value;
+      var cursorlen = document.getElementById(html_message).selectionStart;
+      var textlen   = msg.length;
+      document.getElementById(html_message).value = msg.substring(0, cursorlen) + token + msg.substring(cursorlen, textlen);
+      var cursorPos = (cursorlen + token.length);
+      document.getElementById(html_message).selectionStart = cursorPos;
+      document.getElementById(html_message).selectionEnd   = cursorPos;
+      document.getElementById(html_message).focus();
+    }
+    else if ( editor == "ckeditor" ) {
+      oEditor = CKEDITOR.instances[html_message];
+      oEditor.insertHtml(token.toString() );
+    }
+    else if ( editor == "drupalwysiwyg" ) {
+      if (Drupal.wysiwyg.instances[html_message].insert) {
+        Drupal.wysiwyg.instances[html_message].insert(token.toString() );
+      }
+      else {
+        alert("Sorry, your editor doesn't support this function yet.");
+      }
     }
     else {
-      alert("Sorry, your editor doesn't support this function yet.");
+      cj( "#"+ html_message ).replaceSelection( token );
     }
   }
-  else {
-    cj( "#"+ html_message ).replaceSelection( token2 );
-  }
 
-  if ( isMailing ) {
-    verify();
-  }
-}
+  // Initialize token selector widgets
+  var form = $('#{/literal}{$form.formName}{literal}');
+  $('input.crm-token-selector', form)
+    .addClass('crm-action-menu')
+    .change(insertToken)
+    .select2({
+      data: form.data('tokens'),
+      placeholder: '{/literal}{ts escape='js'}Insert Token{/ts}{literal}'
+    });
 
-cj(function() {
   cj('.accordion .head').addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ");
   cj('.resizable-textarea textarea').css( 'width', '99%' );
   cj('.grippie').css( 'margin-right', '3px');
@@ -365,105 +370,63 @@ cj(function() {
   if ( !isMailing ) {
     cj("div.text").show();
   }
-});
 
-{/literal}{include file="CRM/common/Filter.tpl"}{literal}
-function showToken(element, id ) {
-  initFilter(id);
-  cj("#token"+id).css({"width":"290px", "size":"8"});
-  var tokenTitle = {/literal}'{ts escape="js"}Select Token{/ts}'{literal};
-  cj("#token"+element ).show( ).dialog({
-    title       : tokenTitle,
-    modal       : true,
-    width       : '310px',
-    resizable   : false,
-    bgiframe    : false,
-    overlay     : { opacity: 0.5, background: "black" },
-    beforeclose : function(event, ui) { cj(this).dialog("destroy"); },
-    buttons     : {
-      "Done": function() {
-        cj(this).dialog("close");
-        //focus on editor/textarea after token selection
-        if (element == 'Text') {
-          cj('#' + text_message).focus();
+  function setSignature() {
+    var emailID = $("#fromEmailAddress").val( );
+    if ( !isNaN( emailID ) ) {
+      var dataUrl = {/literal}"{crmURL p='civicrm/ajax/signature' h=0 }"{literal};
+      $.post( dataUrl, {emailID: emailID}, function( data ) {
+        var editor     = {/literal}"{$editor}"{literal};
+
+        if (data.signature_text) {
+          // get existing text & html and append signatue
+          var textMessage =  $("#"+ text_message).val( ) + '\n\n--\n' + data.signature_text;
+
+          // append signature
+          $("#"+ text_message).val( textMessage );
         }
-        else if (element == 'Html' ) {
-          switch ({/literal}"{$editor}"{literal}) {
-            case 'ckeditor': { oEditor = CKEDITOR.instances[html_message]; oEditor.focus(); break;}
-            case 'tinymce'  : { tinyMCE.get(html_message).focus(); break; }
-            case 'joomlaeditor' : { tinyMCE.get(html_message).focus(); break; }
-            default         : { cj("#"+ html_message).focus(); break; }
+
+        if ( data.signature_html ) {
+          var htmlMessage =  $("#"+ html_message).val( ) + '<br/><br/>--<br/>' + data.signature_html;
+
+          // set wysiwg editor
+          if ( editor == "ckeditor" ) {
+            oEditor = CKEDITOR.instances[html_message];
+            var htmlMessage = oEditor.getData( ) + '<br/><br/>--' + data.signature_html;
+            oEditor.setData( htmlMessage  );
+          }
+          else if ( editor == "tinymce" ) {
+            tinyMCE.execInstanceCommand('html_message',"mceInsertContent",false, htmlMessage);
+          }
+          else if ( editor == "drupalwysiwyg" ) {
+            if (Drupal.wysiwyg.instances[html_message].setContent) {
+              Drupal.wysiwyg.instances[html_message].setContent(htmlMessage);
+            }
+            // @TODO: Remove this when http://drupal.org/node/614146 drops
+            else if (Drupal.wysiwyg.instances[html_message].insert) {
+              alert("Please note your editor doesn't completely support this function. You may need to clear the contents of the editor prior to choosing a new template.");
+              Drupal.wysiwyg.instances[html_message].insert(htmlMessage);
+            }
+            else {
+              alert("Sorry, your editor doesn't support this function yet.");
+            }
+          }
+          else {
+            $("#"+ html_message).val(htmlMessage);
           }
         }
-        else if (element == 'Subject') {
-          var subject = null;
-          ( isMailing ) ? subject = "subject" : subject = "msg_subject";
-          cj('#'+subject).focus();
-        }
-      }
+      }, 'json');
     }
-  });
-  return false;
-}
-
-cj(function() {
+  }
   if (!cj().find('div.crm-error').text()) {
     cj(window).load(function () {
       setSignature();
     });
   }
-
   cj("#fromEmailAddress").change( function( ) {
     setSignature( );
   });
 });
 
-function setSignature( ) {
-  var emailID = cj("#fromEmailAddress").val( );
-  if ( !isNaN( emailID ) ) {
-    var dataUrl = {/literal}"{crmURL p='civicrm/ajax/signature' h=0 }"{literal};
-    cj.post( dataUrl, {emailID: emailID}, function( data ) {
-      var editor     = {/literal}"{$editor}"{literal};
-
-      if (data.signature_text) {
-        // get existing text & html and append signatue
-        var textMessage =  cj("#"+ text_message).val( ) + '\n\n--\n' + data.signature_text;
-
-        // append signature
-        cj("#"+ text_message).val( textMessage );
-      }
-
-      if ( data.signature_html ) {
-        var htmlMessage =  cj("#"+ html_message).val( ) + '<br/><br/>--<br/>' + data.signature_html;
-
-        // set wysiwg editor
-        if ( editor == "ckeditor" ) {
-          oEditor = CKEDITOR.instances[html_message];
-          var htmlMessage = oEditor.getData( ) + '<br/><br/>--' + data.signature_html;
-          oEditor.setData( htmlMessage  );
-        }
-        else if ( editor == "tinymce" ) {
-          tinyMCE.execInstanceCommand('html_message',"mceInsertContent",false, htmlMessage);
-        }
-        else if ( editor == "drupalwysiwyg" ) {
-          if (Drupal.wysiwyg.instances[html_message].setContent) {
-            Drupal.wysiwyg.instances[html_message].setContent(htmlMessage);
-          }
-          // @TODO: Remove this when http://drupal.org/node/614146 drops
-          else if (Drupal.wysiwyg.instances[html_message].insert) {
-            alert("Please note your editor doesn't completely support this function. You may need to clear the contents of the editor prior to choosing a new template.");
-            Drupal.wysiwyg.instances[html_message].insert(htmlMessage);
-          }
-          else {
-            alert("Sorry, your editor doesn't support this function yet.");
-          }
-        }
-        else {
-          cj("#"+ html_message).val(htmlMessage);
-        }
-      }
-    }, 'json');
-  }
-}
 </script>
 {/literal}
index 9c61e58f6ff7800cd105b96d287a4035472cbf71..985aa71d1861322b26e0b476a85f0cb73d81326a 100644 (file)
   <td>{$form.template.html}</td>
     </tr>
     <tr class="crm-mailing-upload-form-block-subject"><td class="label">{$form.subject.label}</td>
-        <td colspan="2">{$form.subject.html|crmAddClass:huge}
-                        <a href="#" onClick="return showToken('Subject', 3);">{$form.token3.label}</a>
-                        {help id="id-token-subject" file="CRM/Contact/Form/Task/Email.hlp"}
-                        <div id='tokenSubject' style="display:none">
-                           <input style="border:1px solid #999999;" type="text" id="filter3" size="20" name="filter3" onkeyup="filter(this, 3)"/><br />
-                           <span class="description">{ts}Begin typing to filter list of tokens{/ts}</span><br/>
-                           {$form.token3.html}
-                        </div>
+        <td colspan="2">
+          {$form.subject.html|crmAddClass:huge}&nbsp;
+          <input class="crm-token-selector big" data-field="subject" />
+          {help id="id-token-subject" tplFile=$tplFile isAdmin=$isAdmin file="CRM/Contact/Form/Task/Email.hlp"}
         </td>
     </tr>
     <tr class="crm-mailing-upload-form-block-upload_type"><td></td><td colspan="2">{$form.upload_type.label} {$form.upload_type.html} {help id="upload-compose"}</td></tr>
diff --git a/templates/CRM/common/Filter.tpl b/templates/CRM/common/Filter.tpl
deleted file mode 100644 (file)
index bb6190e..0000000
+++ /dev/null
@@ -1,138 +0,0 @@
-{*
- +--------------------------------------------------------------------+
- | CiviCRM version 4.4                                                |
- +--------------------------------------------------------------------+
- | Copyright CiviCRM LLC (c) 2004-2013                                |
- +--------------------------------------------------------------------+
- | This file is a part of CiviCRM.                                    |
- |                                                                    |
- | CiviCRM is free software; you can copy, modify, and distribute it  |
- | under the terms of the GNU Affero General Public License           |
- | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
- |                                                                    |
- | CiviCRM is distributed in the hope that it will be useful, but     |
- | WITHOUT ANY WARRANTY; without even the implied warranty of         |
- | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
- | See the GNU Affero General Public License for more details.        |
- |                                                                    |
- | You should have received a copy of the GNU Affero General Public   |
- | License and the CiviCRM Licensing Exception along                  |
- | with this program; if not, contact CiviCRM LLC                     |
- | at info[AT]civicrm[DOT]org. If you have questions about the        |
- | GNU Affero General Public License or the licensing of CiviCRM,     |
- | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
- +--------------------------------------------------------------------+
-*}
-{literal}
-var stregexp = new RegExp;
-
-function initFilter( id ) {
-    //build the array
-    filterArray = new Array();
-    filterArray = {/literal}{$tokens}{literal};
-
-    tempArray  = new Array();
-    remvdArray = new Array();
-
-    //get select object
-    selObj = document.getElementById("token"+ id);
-
-    //rebuild the list
-    buildOptions(filterArray);
-
-    //clear the input box
-    document.getElementById("filter"+id).value = "";
-
-    //clear the last typed value
-    lastVal = "";
-}
-
-function filter( ob, id ) {
-    str = ob.value;
-    //if the length of str is 0, keep original array as option
-    if ( str.length == 0 ) {
-        buildOptions(filterArray);
-        remvdArray.length = 0;
-    } else {
-        //clear tempArray
-        tempArray.length = 0;
-
-        //set up temporary array
-        for ( i = 0; i < selObj.options.length; i++ ) {
-            tempArray[selObj.options[i].value] = selObj.options[i].text;
-        }
-        //escape the special character
-        str = str.replace(/([\\"'()\]\[])/g, "\\$1");
-
-        //case-insensitive regexp
-        stregexp = new RegExp( str, "i" );
-
-        //remove appropriate item(s)
-        if ( lastVal.length < str.length ) {
-            for ( j = selObj.options.length-1; j > -1; j-- ) {
-                if ( selObj.options[j].text.match( stregexp ) == null ) {
-                    //delete unwanted option
-                    delete tempArray[selObj.options[j].value];
-                }
-            }
-        } else {
-            //add appropriate item(s)
-            //if a removed item matches the new pattern, add it to the list of names
-            for ( key in remvdArray) {
-                tempName = remvdArray[key].toString();
-                if ( tempName.match(stregexp) != null ) {
-                    tempArray[key] = tempName;
-                }
-            }
-
-            //sort the names array
-            tempArray.sort();
-        }
-
-        //build the new select list
-        buildOptions(tempArray);
-    }
-
-    //remember the last value on which we narrowed
-    lastVal = str;
-}
-
-function buildOptions( arrayName ) {
-    //clear the select list
-    selObj.options.length = 0;
-    //to select only valid tokens in tokens list
-    var tokenRegx = new RegExp (/{(\w+\.\w+)}/);
-    var i = 0;
-    for ( script in arrayName ) {
-        if ( script.match(tokenRegx) != null ) {
-             var option = new Option( arrayName[script], script );
-             selObj.options[i] = option;
-             i++;
-        }
-    }
-    buildRemvd();
-}
-
-function buildRemvd( ) {
-    //clear the removed items array
-    remvdArray.length = 0;
-    var remToken = null;
-    //build the removed items array
-    for ( key in filterArray ) {
-        //for filtering tokens
-        remToken =  filterArray[key].toString();
-        if ( remToken.match(stregexp) == null ) {
-            //remember which item was removed
-            remvdArray[key] = filterArray[key];
-        }
-    }
-}
-
-function getMatches(id) {
-    if ( selObj.options.length == 1 ) {
-        document.getElementById("match"+id).innerHTML = "{/literal}{ts escape='js'}1 match{/ts}{literal}";
-    } else {
-        document.getElementById("match"+id).innerHTML = selObj.options.length +"&nbsp;{/literal}{ts escape='js'}matches{/ts}{literal}";
-    }
-}
-{/literal}