From 3154780cb18b187d51cb2a8ea0e6ce10d14110db Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 2 Dec 2015 20:34:21 -0500
Subject: [PATCH] CRM-17620 - Cleanup and abstract expandRow js

---
 css/civicrm.css                            | 10 +++-
 js/crm.expandRow.js                        | 18 ++++++++
 templates/CRM/Contribute/Form/Selector.tpl | 10 ++--
 templates/CRM/common/expandRow.tpl         | 54 ----------------------
 4 files changed, 31 insertions(+), 61 deletions(-)
 create mode 100644 js/crm.expandRow.js
 delete mode 100644 templates/CRM/common/expandRow.tpl

diff --git a/css/civicrm.css b/css/civicrm.css
index 98389b4af7..3b2e1b254b 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -2245,9 +2245,17 @@ div.crm-master-accordion-header a.helpicon {
   display: none;
 }
 
+.crm-container .crm-expand-row {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  background-image: url("../i/TreePlus.gif");
+}
+
 .crm-container .crm-accordion-inner .crm-accordion-header,
 .crm-container .crm-accordion-wrapper .crm-master-accordion-header,
-.crm-container .crm-collapsible .collapsible-title {
+.crm-container .crm-collapsible .collapsible-title,
+.crm-container .crm-expand-row.expanded {
   background-image: url("../i/TreeMinus.gif");
   background-color: transparent;
   color: #3E3E3E;
diff --git a/js/crm.expandRow.js b/js/crm.expandRow.js
new file mode 100644
index 0000000000..de0f41051d
--- /dev/null
+++ b/js/crm.expandRow.js
@@ -0,0 +1,18 @@
+// http://civicrm.org/licensing
+CRM.$(function($) {
+  $('body')
+    .off('.crmExpandRow')
+    .on('click.crmExpandRow', 'a.crm-expand-row', function(e) {
+      var $row = $(this).closest('tr');
+      if ($(this).hasClass('expanded')) {
+        $row.next('.crm-child-row').remove();
+      } else {
+        var count = $('td', $row).length,
+          $newRow = $('<tr class="crm-child-row"><td colspan="' + count + '"></td></tr>')
+            .insertAfter($row);
+        CRM.loadPage(this.href, {target: $('td', $newRow.animate({height: '3em'}, 'fast'))});
+      }
+      $(this).toggleClass('expanded');
+      e.preventDefault();
+    });
+});
diff --git a/templates/CRM/Contribute/Form/Selector.tpl b/templates/CRM/Contribute/Form/Selector.tpl
index f7dddb6c18..0264241504 100644
--- a/templates/CRM/Contribute/Form/Selector.tpl
+++ b/templates/CRM/Contribute/Form/Selector.tpl
@@ -65,8 +65,9 @@
     <td>{$row.contact_type}</td>
       <td><a href="{crmURL p='civicrm/contact/view' q="reset=1&cid=`$row.contact_id`"}">{$row.sort_name}</a></td>
     {/if}
-    {assign var="targetRowID" value="paymentDetails"|cat:$row.contribution_id}
-    {include file='CRM/common/expandRow.tpl' rowEntityID=$row.contribution_id rowEntity='contribution' targetRowID=$targetRowID baseUrl='payment'}
+    <td>
+      <a class="crm-expand-row" href="{crmURL p='civicrm/payment' q="view=transaction&component=contribution&action=browse&cid=`$row.contact_id`&id=`$row.contribution_id`&selector=1"}"></a>
+    </td>
     {if $row.contribution_soft_credit_amount}
       <td class="right bold crm-contribution-amount">&nbsp;</td>
     {else}
@@ -96,14 +97,11 @@
     {/if}
     <td>{$row.action|replace:'xx':$row.contribution_id}</td>
   </tr>
-    <tr id="{$targetRowID}_row" class='{$rowClass} hiddenElement'>
-      <td style="border-right: none;"></td>
-      <td colspan= {if $context EQ 'Search'} "10" {else} "8" {/if} class="enclosingNested" id="{$targetRowID}">&nbsp;</td>
-    </tr>
   {/foreach}
 
 </table>
 {/strip}
 
 {include file="CRM/common/pager.tpl" location="bottom"}
+{crmScript ext='civicrm' file='js/crm.expandRow.js'}
 
diff --git a/templates/CRM/common/expandRow.tpl b/templates/CRM/common/expandRow.tpl
deleted file mode 100644
index e352bfc4de..0000000000
--- a/templates/CRM/common/expandRow.tpl
+++ /dev/null
@@ -1,54 +0,0 @@
- <td>
-    <span id="icon_{$targetRowID}_show" title="{ts}Show payments{/ts}">
-      <a href="#" data-entity_id='{$rowEntityID}' data-base_url="{$baseUrl}"
-         data-contact_id='{$row.contact_id}' data-entity='{$rowEntity}' data-target_row='{$targetRowID}'
-         onclick="subDetails(this);
-          showSubDetails(this);
-          return false;">
-        <img src="{$config->resourceBase}i/TreePlus.gif" class="action-icon" alt="{ts}open section{/ts}"/>
-      </a>
-    </span>
-    <span id="icon_{$targetRowID}_hide" class="hiddenElement">
-        <a data-entity_id='{$rowEntityID}' href="#"  data-contact_id='{$row.contact_id}' data-entity='{$rowEntity}' data-target_row='{$targetRowID}'
-           href="#" onclick="hideSubDetails(this);
-          return false;"><img src="{$config->resourceBase}i/TreeMinus.gif" class="action-icon" alt="{ts}open section{/ts}"/>
-        </a>
-    </span>
-  </td>
-
-  {literal}
-  <script type="text/javascript">
-      function subDetails(element) {
-        var entityId = cj(element).data('entity_id');
-        var targetRow = cj(element).data('target_row');
-        var rowElement = cj('#' + targetRow);
-        var contactId = cj(element).data('contact_id');
-        var entity = cj(element).data('entity');
-        var baseURL = 'civicrm/' + cj(element).data('base_url');
-        var dataUrl = CRM.url(baseURL, {
-          'view': 'transaction',
-          'component': entity,
-          'action': 'browse',
-          'cid': contactId,
-          'id': entityId,
-          'selector' : 1,
-        });
-        CRM.loadPage(dataUrl, {'target': rowElement});
-      }
-
-      function showSubDetails(element) {
-        var targetRow = cj(element).data('target_row');
-        cj('#' + targetRow + '_row').show();
-        cj('#icon_' + targetRow + '_show').hide();
-        cj('#icon_' + targetRow + '_hide').show();
-      }
-
-      function hideSubDetails(element) {
-        var targetRow = cj(element).data('target_row');
-        cj('#' + targetRow + '_row').hide();
-        cj('#icon_' + targetRow + '_show').show();
-        cj('#icon_' + targetRow + '_hide').hide();
-      }
-
-  </script>
-{/literal}
-- 
2.25.1