From a243158ec6762d4f5cadbf0c90fe8112745ec23a Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 1 Apr 2014 12:21:33 -0400
Subject: [PATCH] Dialog & select2 improvements

---
 css/civicrm.css                                | 11 ++++++++++-
 js/Common.js                                   | 18 ++++++++++++------
 .../CRM/Activity/Form/Task/FileOnCase.tpl      |  2 +-
 templates/CRM/Admin/Page/Tag.tpl               |  2 +-
 templates/CRM/Case/Form/Activity/LinkCases.tpl |  2 +-
 templates/CRM/Case/Form/ActivityToCase.tpl     |  9 ++++-----
 templates/CRM/Case/Form/CaseView.js            |  1 +
 templates/CRM/Event/Form/Search/Common.tpl     |  2 +-
 templates/CRM/Mailing/Form/InsertTokens.tpl    |  2 +-
 9 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index 963990d80f..1901c8c72d 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3948,7 +3948,16 @@ div.m ul#civicrm-menu,
 .crm-container.ui-dialog {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
 }
-
+.crm-container.ui-dialog.ui-draggable:before {
+  display:block;
+  content: " ";
+  width: 16px;
+  height: 16px;
+  background: url("../i/icons/jquery-ui-3E3E3E.png") no-repeat -80px -224px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
 .crm-container .ui-dialog-titlebar.ui-widget-header {
   background: url("../i/crm-button-bg.gif") repeat-x scroll left center #70716B;
   color: #F5F6F1;
diff --git a/js/Common.js b/js/Common.js
index 6fc8544268..403cef2e21 100644
--- a/js/Common.js
+++ b/js/Common.js
@@ -246,7 +246,7 @@ CRM.validate = CRM.validate || {
     return $(this).each(function () {
       var
         $el = $(this),
-        defaults = {allowClear: !$el.hasClass('required')};
+        settings = {allowClear: !$el.hasClass('required')};
       // quickform doesn't support optgroups so here's a hack :(
       $('option[value^=crm_optgroup]', this).each(function () {
         $(this).nextUntil('option[value^=crm_optgroup]').wrapAll('<optgroup label="' + $(this).text() + '" />');
@@ -254,12 +254,16 @@ CRM.validate = CRM.validate || {
       });
       // Defaults for single-selects
       if ($el.is('select:not([multiple])')) {
-        defaults.minimumResultsForSearch = 10;
+        settings.minimumResultsForSearch = 10;
         if ($('option:first', this).val() === '') {
-          defaults.placeholderOption = 'first';
+          settings.placeholderOption = 'first';
         }
       }
-      $el.select2($.extend(defaults, $el.data('select-params') || {}, options || {}));
+      $.extend(settings, $el.data('select-params') || {}, options || {});
+      if (settings.ajax) {
+        $el.addClass('crm-ajax-select');
+      }
+      $el.select2(settings);
     });
   };
 
@@ -279,7 +283,7 @@ CRM.validate = CRM.validate || {
       $el.data('select-params', $.extend({}, $el.data('select-params') || {}, options.select));
       $el.data('api-params', $.extend({}, $el.data('api-params') || {}, options.api));
       $el.data('create-links', options.create || $el.data('create-links'));
-      $el.addClass('crm-ajax-select crm-' + entity + '-ref');
+      $el.addClass('crm-form-entityref crm-' + entity + '-ref');
       var settings = {
         // Use select2 ajax helper instead of CRM.api because it provides more value
         ajax: {
@@ -427,7 +431,7 @@ CRM.validate = CRM.validate || {
       }
       $el.parent().find('.ui-dialog-titlebar-close').attr('title', ts('Close'));
       // Add resize button
-      if ($el.parent().hasClass('crm-container')) {
+      if ($el.parent().hasClass('crm-container') && $el.dialog('option', 'resizable')) {
         $el.parent().find('.ui-dialog-titlebar').append($('<button class="crm-dialog-titlebar-resize ui-dialog-titlebar-close" title="'+ts('Resize')+'" style="right:2em;"/>').button({icons: {primary: 'ui-icon-newwin'}, text: false}));
         $('.crm-dialog-titlebar-resize', $el.parent()).click(function(e) {
           if ($el.data('origSize')) {
@@ -660,6 +664,7 @@ CRM.validate = CRM.validate || {
       message: ts('Are you sure you want to continue?'),
       width: 'auto',
       modal: true,
+      resizable: false,
       dialogClass: 'crm-container crm-confirm',
       close: function () {
         $(this).dialog('destroy').remove();
@@ -803,6 +808,7 @@ CRM.validate = CRM.validate || {
       .on('click', 'a.crm-image-popup', function(e) {
         CRM.confirm({
           title: ts('Preview'),
+          resizable: true,
           message: '<div class="crm-custom-image-popup"><img src=' + $(this).attr('href') + '></div>',
           options: null
         });
diff --git a/templates/CRM/Activity/Form/Task/FileOnCase.tpl b/templates/CRM/Activity/Form/Task/FileOnCase.tpl
index 1c81d51d38..14a415d4da 100644
--- a/templates/CRM/Activity/Form/Task/FileOnCase.tpl
+++ b/templates/CRM/Activity/Form/Task/FileOnCase.tpl
@@ -47,7 +47,7 @@
 <script type="text/javascript">
 CRM.$(function($) {
   var $form = $("#{/literal}{$form.formName}{literal}");
-  $('input[name=unclosed_case_id]', $form).select2({
+  $('input[name=unclosed_case_id]', $form).crmSelect2({
     placeholder: {/literal}'{ts escape="js"}- select case -{/ts}'{literal},
     minimumInputLength: 1,
     ajax: {
diff --git a/templates/CRM/Admin/Page/Tag.tpl b/templates/CRM/Admin/Page/Tag.tpl
index f700e3253f..f2ea634f9c 100644
--- a/templates/CRM/Admin/Page/Tag.tpl
+++ b/templates/CRM/Admin/Page/Tag.tpl
@@ -117,7 +117,7 @@ CRM.$(function($) {
       open: function() {
         var dialog = this;
         $('input[name=select_merge_tag]', dialog)
-          .select2({
+          .crmSelect2({
             placeholder: {/literal}'{ts escape="js"}- select tag -{/ts}'{literal},
             minimumInputLength: 1,
             ajax: {
diff --git a/templates/CRM/Case/Form/Activity/LinkCases.tpl b/templates/CRM/Case/Form/Activity/LinkCases.tpl
index 7f15ada691..b98ebfd2d7 100644
--- a/templates/CRM/Case/Form/Activity/LinkCases.tpl
+++ b/templates/CRM/Case/Form/Activity/LinkCases.tpl
@@ -34,7 +34,7 @@
 <script type="text/javascript">
   CRM.$(function($) {
     var $form = $("#{/literal}{$form.formName}{literal}");
-    $('input[name=link_to_case_id]', $form).select2({
+    $('input[name=link_to_case_id]', $form).crmSelect2({
       placeholder: {/literal}'{ts escape="js"}- select case -{/ts}'{literal},
       minimumInputLength: 1,
       ajax: {
diff --git a/templates/CRM/Case/Form/ActivityToCase.tpl b/templates/CRM/Case/Form/ActivityToCase.tpl
index 8a2d232286..1b7abd8d65 100644
--- a/templates/CRM/Case/Form/ActivityToCase.tpl
+++ b/templates/CRM/Case/Form/ActivityToCase.tpl
@@ -50,7 +50,7 @@
     var selectedCaseId = '';
     var contactId = '';
     CRM.$(function($) {
-      $('input[name=unclosed_case_id]', '#fileOnCaseDialog').select2({
+      $('input[name=unclosed_case_id]', '#fileOnCaseDialog').crmSelect2({
         placeholder: {/literal}'{ts escape="js"}- select case -{/ts}'{literal},
         minimumInputLength: 1,
         ajax: {
@@ -128,7 +128,7 @@
           title: dialogTitle,
           modal: true,
           width: 600,
-          height: 270,
+          height: 'auto',
           close: function( event, ui ) {
             cj('input[name=unclosed_case_id]', '#fileOnCaseDialog').select2('destroy');
             cj(this).hide().dialog("destroy");
@@ -138,7 +138,7 @@
           },
 
           buttons: {
-            "{/literal}{ts escape='js'}Ok{/ts}{literal}": function() {
+            "{/literal}{ts escape='js'}Save{/ts}{literal}": function() {
               var subject         = cj("#case_activity_subject").val( );
               var targetContactId = cj("#target_contact_id").val( );
 
@@ -147,7 +147,7 @@
                 return false;
               }
 
-              cj(this).dialog("destroy");
+              cj(this).dialog("close");
 
               var postUrl = {/literal}"{crmURL p='civicrm/ajax/activity/convert' h=0 }"{literal};
               cj.post( postUrl, { activityID: activityID, caseID: selectedCaseId, contactID: contactId, newSubject: subject, targetContactIds: targetContactId, mode: action, key: {/literal}"{crmKey name='civicrm/ajax/activity/convert'}"{literal} },
@@ -200,7 +200,6 @@
             },
             "{/literal}{ts escape='js'}Cancel{/ts}{literal}": function() {
               cj(this).dialog("close");
-              cj(this).dialog("destroy");
             }
           }
 
diff --git a/templates/CRM/Case/Form/CaseView.js b/templates/CRM/Case/Form/CaseView.js
index a6a11ad5a6..681198c048 100644
--- a/templates/CRM/Case/Form/CaseView.js
+++ b/templates/CRM/Case/Form/CaseView.js
@@ -207,6 +207,7 @@
         dialog = CRM.confirm({
           title: $(this).attr('title') || $(this).text(),
           message: detached[target],
+          resizable: true,
           open: miniForms[target].pre
         })
           .on('dialogclose', function() {
diff --git a/templates/CRM/Event/Form/Search/Common.tpl b/templates/CRM/Event/Form/Search/Common.tpl
index ca93d528f5..2658f14e35 100644
--- a/templates/CRM/Event/Form/Search/Common.tpl
+++ b/templates/CRM/Event/Form/Search/Common.tpl
@@ -91,7 +91,7 @@ campaignTrClass='' campaignTdClass='crm-event-form-block-participant_campaign_id
 <script type="text/javascript">
 CRM.$(function($) {
   // FIXME: This could be much simpler as an entityRef field but the priceFieldValue api doesn't currently support the filters we need
-  $('#participant_fee_id').select2({
+  $('#participant_fee_id').crmSelect2({
     placeholder: {/literal}'{ts escape="js"}- any -{/ts}'{literal},
     minimumInputLength: 1,
     allowClear: true,
diff --git a/templates/CRM/Mailing/Form/InsertTokens.tpl b/templates/CRM/Mailing/Form/InsertTokens.tpl
index 2e86012178..7ad51d8032 100644
--- a/templates/CRM/Mailing/Form/InsertTokens.tpl
+++ b/templates/CRM/Mailing/Form/InsertTokens.tpl
@@ -356,7 +356,7 @@ CRM.$(function($) {
   $('input.crm-token-selector', form)
     .addClass('crm-action-menu')
     .change(insertToken)
-    .select2({
+    .crmSelect2({
       data: form.data('tokens'),
       placeholder: '{/literal}{ts escape='js'}Insert Token{/ts}{literal}'
     });
-- 
2.25.1