CRM-15578 - crmUiTabSet - Basic implementation

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index ba90939ac01f9a91b339756f4e0066a1ac51b7d6..5fc728e3cc557be729d53f17af3354fa5d6874e1 100644 (file)
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -153,22 +153,40 @@
     })
 
     // example <div crm-ui-tab crm-title="ts('My Title')">...content...</div>
+    // WISHLIST: use a full Angular component instead of an incomplete jQuery wrapper
     .directive('crmUiTab', function($parse) {
       return {
+        require: '^crmUiTabSet',
+        restrict: 'EA',
         scope: {
-          crmTitle: '@'
+          crmTitle: '@',
+          id: '@'
         },
-        template: '<div><b>(Tab: {{$parent.$eval(crmTitle)}})</b><span ng-transclude/></div>',
+        template: '<div ng-transclude></div>',
         transclude: true,
-        link: function (scope, element, attrs) {}
+        link: function (scope, element, attrs, crmUiTabSetCtrl) {
+          crmUiTabSetCtrl.add(scope);
+        }
       };
     })
 
     // example: <div crm-ui-tab-set><div crm-ui-tab crm-title="Tab 1">...</div><div crm-ui-tab crm-title="Tab 2">...</div></div>
     .directive('crmUiTabSet', function() {
       return {
-        template: '<div><span ng-transclude/></div>',
+        restrict: 'EA',
+        scope: {
+          crmUiTabSet: '@'
+        },
+        templateUrl: partialUrl('tabset.html'),
         transclude: true,
+        controllerAs: 'crmUiTabSetCtrl',
+        controller: function($scope, $parse) {
+          var tabs = $scope.tabs = []; // array<$scope>
+          this.add = function(tab) {
+            if (!tab.id) throw "Tab is missing 'id'";
+            tabs.push(tab);
+          };
+        },
         link: function (scope, element, attrs) {}
       };
     })

diff --git a/partials/crmMailing2/edit.html b/partials/crmMailing2/edit.html
index 011498cd938e40ff9dc1a60df33be8f0040ae5a3..5db03e2f2d331892192275282d81456c3a715763 100644 (file)
--- a/partials/crmMailing2/edit.html
+++ b/partials/crmMailing2/edit.html
@@ -3,23 +3,23 @@
     <div crm-ui-accordion crm-title="ts('Summary')">
       <div ng-include="partialUrl('summary.html')" />
     </div>
-    <div crm-ui-tabset>
-      <div crm-ui-tab crm-title="ts('Mailing')">
+    <div crm-ui-tab-set>
+      <div crm-ui-tab id="tab-mailing" crm-title="ts('Mailing')">
         <div ng-include="partialUrl('mailing.html')" />
       </div>
-      <div crm-ui-tab crm-title="ts('Attachments')">
+      <div crm-ui-tab id="tab-attachment" crm-title="ts('Attachments')">
         <div ng-include="partialUrl('attachments.html')" />
       </div>
-      <div crm-ui-tab crm-title="ts('Header and Footer')">
+      <div crm-ui-tab id="tab-header" crm-title="ts('Header and Footer')">
         <div ng-include="partialUrl('headerFooter.html')" />
       </div>
-      <div crm-ui-tab crm-title="ts('Publication')">
+      <div crm-ui-tab id="tab-pub" crm-title="ts('Publication')">
         <div ng-include="partialUrl('publication.html')" />
       </div>
-      <div crm-ui-tab crm-title="ts('Responses')">
+      <div crm-ui-tab id="tab-response" crm-title="ts('Responses')">
         <div ng-include="partialUrl('responses.html')" />
       </div>
-      <div crm-ui-tab crm-title="ts('Tracking')">
+      <div crm-ui-tab id="tab-tracking" crm-title="ts('Tracking')">
         <div ng-include="partialUrl('tracking.html')" />
       </div>
     </div>

diff --git a/partials/crmUi/tabset.html b/partials/crmUi/tabset.html
new file mode 100644 (file)
index 0000000..1538270
--- /dev/null
+++ b/partials/crmUi/tabset.html
@@ -0,0 +1,8 @@
+<div ui-jq="tabs" class="crm-tabset">
+  <ul>
+    <li ng-repeat="tab in tabs">
+      <a href="#{{tab.id}}">{{tab.$parent.$eval(tab.crmTitle)}}</a>
+    </li>
+  </ul>
+  <div ng-transclude/>
+</div>
\ No newline at end of file