From 207819eca9f8ab6932ce9694043b8dc7c8d97801 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 19 Mar 2015 13:29:11 -0400
Subject: [PATCH] CRM-15706 - Refactor Angular uiAccordions and add help

---
 js/angular-crm-ui.js                   | 16 ++++++++++++----
 js/angular-crmMailing.js               |  3 ++-
 partials/crmMailing/edit-unified.html  |  4 ++--
 partials/crmMailing/edit-unified2.html | 18 +++++++++---------
 partials/crmMailing/edit-wizard.html   | 20 ++++++++++----------
 partials/crmMailing/edit-workflow.html | 22 +++++++++++-----------
 partials/crmMailing/edit.html          | 10 +++++-----
 partials/crmMailingAB/edit.html        | 20 ++++++++++----------
 partials/crmMailingAB/list.html        |  2 +-
 9 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index c97a861444..f055ca6c7d 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -10,15 +10,23 @@
     .directive('crmUiAccordion', function() {
       return {
         scope: {
-          crmTitle: '@',
-          crmCollapsed: '@'
+          crmUiAccordion: '='
         },
-        template: '<div class="crm-accordion-wrapper" ng-class="cssClasses"><div class="crm-accordion-header">{{$parent.$eval(crmTitle)}}</div><div class="crm-accordion-body" ng-transclude></div></div>',
+        template: '<div ng-class="cssClasses"><div class="crm-accordion-header">{{crmUiAccordion.title}} <a crm-ui-help="help" ng-if="help"></a></div><div class="crm-accordion-body" ng-transclude></div></div>',
         transclude: true,
         link: function (scope, element, attrs) {
           scope.cssClasses = {
-            collapsed: scope.$parent.$eval(attrs.crmCollapsed)
+            'crm-accordion-wrapper': true,
+            collapsed: scope.crmUiAccordion.collapsed
           };
+          scope.help = null;
+          scope.$watch('crmUiAccordion', function(crmUiAccordion) {
+            if (crmUiAccordion && crmUiAccordion.help) {
+              scope.help = crmUiAccordion.help.clone({}, {
+                title: crmUiAccordion.title
+              });
+            }
+          });
         }
       };
     })
diff --git a/js/angular-crmMailing.js b/js/angular-crmMailing.js
index b111c3969a..0404547a5e 100644
--- a/js/angular-crmMailing.js
+++ b/js/angular-crmMailing.js
@@ -72,13 +72,14 @@
     $location.replace();
   });
 
-  angular.module('crmMailing').controller('EditMailingCtrl', function EditMailingCtrl($scope, selectedMail, $location, crmMailingMgr, crmStatus, attachments, crmMailingPreviewMgr, crmBlocker, CrmAutosaveCtrl, $timeout) {
+  angular.module('crmMailing').controller('EditMailingCtrl', function EditMailingCtrl($scope, selectedMail, $location, crmMailingMgr, crmStatus, attachments, crmMailingPreviewMgr, crmBlocker, CrmAutosaveCtrl, $timeout, crmUiHelp) {
     $scope.mailing = selectedMail;
     $scope.attachments = attachments;
     $scope.crmMailingConst = CRM.crmMailing;
     $scope.checkPerm = CRM.checkPerm;
 
     var ts = $scope.ts = CRM.ts(null);
+    $scope.hs = crmUiHelp({file: 'CRM/Mailing/MailingUI'});
     var block = $scope.block = crmBlocker();
     var myAutosave = null;
 
diff --git a/partials/crmMailing/edit-unified.html b/partials/crmMailing/edit-unified.html
index 35854109ef..2e634ffe6e 100644
--- a/partials/crmMailing/edit-unified.html
+++ b/partials/crmMailing/edit-unified.html
@@ -35,11 +35,11 @@
       </div>
     </div>
 
-    <div crm-ui-accordion crm-title="ts('Preview')">
+    <div crm-ui-accordion="{title: ts('Preview')}" >
       <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
     </div>
 
-    <div crm-ui-accordion crm-title="ts('Schedule')">
+    <div crm-ui-accordion="{title: ts('Schedule')}" >
       <div crm-mailing-block-schedule crm-mailing="mailing"/>
     </div>
 
diff --git a/partials/crmMailing/edit-unified2.html b/partials/crmMailing/edit-unified2.html
index cc20ff2afb..8d3ec0fe0a 100644
--- a/partials/crmMailing/edit-unified2.html
+++ b/partials/crmMailing/edit-unified2.html
@@ -10,32 +10,32 @@
     <div crm-mailing-block-summary crm-mailing="mailing"/>
     <div crm-mailing-block-mailing crm-mailing="mailing"/>
 
-    <div crm-ui-accordion crm-title="ts('HTML')">
+    <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
       <div crm-mailing-body-html crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+    <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
       <div crm-mailing-body-text crm-mailing="mailing"/>
     </div>
     <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
-    <div crm-ui-accordion id="tab-header" crm-title="ts('Header and Footer')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Header and Footer'), collapsed: true}" id="tab-header" >
       <div crm-mailing-block-header-footer crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion id="tab-attachment" crm-title="ts('Attachments')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Attachments'), collapsed: true}" id="tab-attachment" >
       <div crm-attachments="attachments"/>
     </div>
-    <div crm-ui-accordion id="tab-pub" crm-title="ts('Publication')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Publication'), collapsed: true}" id="tab-pub" >
       <div crm-mailing-block-publication crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion id="tab-response" crm-title="ts('Responses')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Responses'), collapsed: true}" id="tab-response" >
       <div crm-mailing-block-responses crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion id="tab-tracking" crm-title="ts('Tracking')" crm-collapsed='true'>
+    <div crm-ui-accordion="{title: ts('Tracking'), collapsed: true}" id="tab-tracking" >
       <div crm-mailing-block-tracking crm-mailing="mailing"/>
     </div>
-    <div crm-ui-accordion crm-title="ts('Preview')">
+    <div crm-ui-accordion="{title: ts('Preview')}" >
       <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
     </div>
-    <div crm-ui-accordion id="tab-schedule" crm-title="ts('Schedule')">
+    <div crm-ui-accordion="{title: ts('Schedule')}" id="tab-schedule" >
       <div crm-mailing-block-schedule crm-mailing="mailing"/>
     </div>
 
diff --git a/partials/crmMailing/edit-wizard.html b/partials/crmMailing/edit-wizard.html
index 4337c859f1..f8b4fa3001 100644
--- a/partials/crmMailing/edit-wizard.html
+++ b/partials/crmMailing/edit-wizard.html
@@ -12,42 +12,42 @@
       <div crm-ui-wizard-step crm-title="ts('Content')" ng-form="contentForm">
         <div crm-mailing-block-summary crm-mailing="mailing"/>
         <div crm-mailing-block-mailing crm-mailing="mailing"/>
-        <div crm-ui-accordion crm-title="ts('HTML')">
+        <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
           <div crm-mailing-body-html crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+        <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
           <div crm-mailing-body-text crm-mailing="mailing"/>
         </div>
         <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
-        <div crm-ui-accordion crm-title="ts('Header and Footer')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Header and Footer'), collapsed: true}">
           <div crm-mailing-block-header-footer crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Attachments')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Attachments'), collapsed: true}">
           <div crm-attachments="attachments"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
 
       <div crm-ui-wizard-step crm-title="ts('Options')" ng-form="optionsForm">
-        <div crm-ui-accordion crm-title="ts('Schedule')">
+        <div crm-ui-accordion="{title: ts('Schedule')}" >
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
 
-        <div crm-ui-accordion crm-title="ts('Responses')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Responses'), collapsed: true}">
           <div crm-mailing-block-responses crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Tracking')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Tracking'), collapsed: true}">
           <div crm-mailing-block-tracking crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Publication')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Publication'), collapsed: true}">
           <div crm-mailing-block-publication crm-mailing="mailing"/>
         </div>
       </div>
 
       <div crm-ui-wizard-step crm-title="ts('Review')" ng-form="reviewForm">
-        <div crm-ui-accordion crm-title="ts('Review')">
+        <div crm-ui-accordion="{title: ts('Review')}" >
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
         <center>
diff --git a/partials/crmMailing/edit-workflow.html b/partials/crmMailing/edit-workflow.html
index cd530abb80..bbc2a82031 100644
--- a/partials/crmMailing/edit-workflow.html
+++ b/partials/crmMailing/edit-workflow.html
@@ -12,44 +12,44 @@
       <div crm-ui-wizard-step="10" crm-title="ts('Content')" ng-form="contentForm" ng-if="checkPerm('create mailings') || checkPerm('access CiviMail')">
         <div crm-mailing-block-summary crm-mailing="mailing"/>
         <div crm-mailing-block-mailing crm-mailing="mailing"/>
-        <div crm-ui-accordion crm-title="ts('HTML')">
+        <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
           <div crm-mailing-body-html crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+        <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
           <div crm-mailing-body-text crm-mailing="mailing"/>
         </div>
         <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
-        <div crm-ui-accordion crm-title="ts('Header and Footer')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Header and Footer'), collapsed: true}">
           <div crm-mailing-block-header-footer crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Attachments')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Attachments'), collapsed: true}">
           <div crm-attachments="attachments"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
 
       <div crm-ui-wizard-step="20" crm-title="ts('Options')" ng-form="optionsForm" ng-if="checkPerm('create mailings') || checkPerm('access CiviMail')">
-        <div crm-ui-accordion crm-title="ts('Responses')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Responses'), collapsed: true}">
           <div crm-mailing-block-responses crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Tracking')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Tracking'), collapsed: true}">
           <div crm-mailing-block-tracking crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Publication')" crm-collapsed="true">
+        <div crm-ui-accordion="{title: ts('Publication'), collapsed: true}">
           <div crm-mailing-block-publication crm-mailing="mailing"/>
         </div>
       </div>
 
       <div crm-ui-wizard-step="40" crm-title="ts('Review')" ng-form="schedForm" ng-if="checkPerm('schedule mailings') || checkPerm('access CiviMail')">
-        <div crm-ui-accordion crm-title="ts('Review')">
+        <div crm-ui-accordion="{title: ts('Review')}" >
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Schedule')">
+        <div crm-ui-accordion="{title: ts('Schedule')}" >
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Approval')" ng-if="checkPerm('approve mailings') || checkPerm('access CiviMail')">
+        <div crm-ui-accordion="{title: ts('Approval')}"  ng-if="checkPerm('approve mailings') || checkPerm('access CiviMail')">
           <div crm-mailing-block-approve crm-mailing="mailing"/>
         </div>
         <center ng-if="!checkPerm('approve mailings') && !checkPerm('access CiviMail')">
diff --git a/partials/crmMailing/edit.html b/partials/crmMailing/edit.html
index b46a54ca28..b799f7d04d 100644
--- a/partials/crmMailing/edit.html
+++ b/partials/crmMailing/edit.html
@@ -13,10 +13,10 @@
           <div crm-ui-tab id="tab-mailing" crm-title="ts('Mailing')">
             <div crm-mailing-block-summary crm-mailing="mailing"/>
             <div crm-mailing-block-mailing crm-mailing="mailing"/>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML'), help: hs('html')}" >
               <div crm-mailing-body-html crm-mailing="mailing"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!mailing.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !mailing.body_text, help: hs('text')}">
               <div crm-mailing-body-text crm-mailing="mailing"/>
             </div>
             <span ng-model="placeholder" crm-ui-validate="mailing.body_html || mailing.body_text"></span>
@@ -37,15 +37,15 @@
             <div crm-mailing-block-tracking crm-mailing="mailing"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
       <div crm-ui-wizard-step crm-title="ts('Review and Schedule')" ng-form="reviewForm">
-        <div crm-ui-accordion crm-title="ts('Review')">
+        <div crm-ui-accordion="{title: ts('Review')}" >
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
-        <div crm-ui-accordion crm-title="ts('Schedule')">
+        <div crm-ui-accordion="{title: ts('Schedule')}" >
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
         <center>
diff --git a/partials/crmMailingAB/edit.html b/partials/crmMailingAB/edit.html
index 75a7c5ea56..e50d798c0a 100644
--- a/partials/crmMailingAB/edit.html
+++ b/partials/crmMailingAB/edit.html
@@ -49,10 +49,10 @@
                 subjectB: 1
                 }"
               crm-abtest="abtest"></div>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML')}" >
               <div crm-mailing-body-html crm-mailing="abtest.mailings.a"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!abtest.mailings.a.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !abtest.mailings.a.body_text}">
               <div crm-mailing-body-text crm-mailing="abtest.mailings.a"/>
             </div>
           </div>
@@ -73,10 +73,10 @@
             <div crm-mailing-block-responses crm-mailing="abtest.mailings.a"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview (A)')">
+        <div crm-ui-accordion="{title: ts('Preview (A)')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.a" on-preview="previewMailing('a', preview.mode)" on-send="sendTest('a', preview.recipient)" />
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview (B)')">
+        <div crm-ui-accordion="{title: ts('Preview (B)')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.b" on-preview="previewMailing('b', preview.mode)" on-send="sendTest('b', preview.recipient)" />
         </div>
       </div>
@@ -91,10 +91,10 @@
                 subjectA: 1
                 }"
               crm-abtest="abtest"></div>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML')}" >
               <div crm-mailing-body-html crm-mailing="abtest.mailings.a"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!abtest.mailings.a.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !abtest.mailings.a.body_text}">
               <div crm-mailing-body-text crm-mailing="abtest.mailings.a"/>
             </div>
           </div>
@@ -111,7 +111,7 @@
             <div crm-mailing-block-responses crm-mailing="abtest.mailings.a"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.a" on-preview="previewMailing('a', preview.mode)" on-send="sendTest('a', preview.recipient)" />
         </div>
       </div>
@@ -126,10 +126,10 @@
                 subjectB: 1
                 }"
               crm-abtest="abtest"></div>
-            <div crm-ui-accordion crm-title="ts('HTML')">
+            <div crm-ui-accordion="{title: ts('HTML')}" >
               <div crm-mailing-body-html crm-mailing="abtest.mailings.b"/>
             </div>
-            <div crm-ui-accordion crm-title="ts('Plain Text')" crm-collapsed='!abtest.mailings.b.body_text'>
+            <div crm-ui-accordion="{title: ts('Plain Text'), collapsed: !abtest.mailings.b.body_text}">
               <div crm-mailing-body-text crm-mailing="abtest.mailings.b"/>
             </div>
           </div>
@@ -146,7 +146,7 @@
             <div crm-mailing-block-responses crm-mailing="abtest.mailings.b"/>
           </div>
         </div>
-        <div crm-ui-accordion crm-title="ts('Preview')">
+        <div crm-ui-accordion="{title: ts('Preview')}" >
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.b" on-preview="previewMailing('b', preview.mode)" on-send="sendTest('b', preview.recipient)" />
         </div>
       </div>
diff --git a/partials/crmMailingAB/list.html b/partials/crmMailingAB/list.html
index 361f9c867c..1944350ecb 100644
--- a/partials/crmMailingAB/list.html
+++ b/partials/crmMailingAB/list.html
@@ -5,7 +5,7 @@ Required vars: mailingABList
 
 <span crm-ui-order="{var: 'myOrder', defaults: ['-created_date']}"></span>
 
-<div crm-ui-accordion crm-title="ts('Filter')" crm-collapsed="true">
+<div crm-ui-accordion="{title: ts('Filter'), collapsed: true}">
   <form name="filterForm">
     <span>
       <input class="big crm-form-text" ng-model="filter.name" placeholder="{{ts('Name')}}"/>
-- 
2.25.1