afb-client/bower_components/foundation-apps/js/angular/components/tabs/tabs.js

   1 (function() {
   2   'use strict';
   3
   4   angular.module('foundation.tabs', ['foundation.core'])
   5     .controller('ZfTabsController', ZfTabsController)
   6     .directive('zfTabs', zfTabs)
   7     .directive('zfTabContent', zfTabContent)
   8     .directive('zfTab', zfTab)
   9     .directive('zfTabIndividual', zfTabIndividual)
  10     .directive('zfTabHref', zfTabHref)
  11     .directive('zfTabCustom', zfTabCustom)
  12     .directive('zfTabContentCustom', zfTabContentCustom)
  13     .service('FoundationTabs', FoundationTabs)
  14   ;
  15
  16   FoundationTabs.$inject = ['FoundationApi'];
  17
  18   function FoundationTabs(foundationApi) {
  19     var service    = {};
  20
  21     service.activate = activate;
  22
  23     return service;
  24
  25     //target should be element ID
  26     function activate(target) {
  27       foundationApi.publish(target, 'show');
  28     }
  29
  30   }
  31
  32   ZfTabsController.$inject = ['$scope', 'FoundationApi'];
  33
  34   function ZfTabsController($scope, foundationApi) {
  35     var controller = this;
  36     var tabs       = controller.tabs = $scope.tabs = [];
  37     var id         = '';
  38
  39     controller.select = function(selectTab) {
  40       tabs.forEach(function(tab) {
  41         tab.active = false;
  42         tab.scope.active = false;
  43
  44         if(tab.scope === selectTab) {
  45           foundationApi.publish(id, ['activate', tab]);
  46
  47           tab.active = true;
  48           tab.scope.active = true;
  49         }
  50       });
  51
  52     };
  53
  54     controller.addTab = function addTab(tabScope) {
  55       tabs.push({ scope: tabScope, active: false, parentContent: controller.id });
  56
  57       if(tabs.length === 1) {
  58         tabs[0].active = true;
  59         tabScope.active = true;
  60       }
  61     };
  62
  63     controller.getId = function() {
  64       return id;
  65     };
  66
  67     controller.setId = function(newId) {
  68       id = newId;
  69     };
  70   }
  71
  72   zfTabs.$inject = ['FoundationApi'];
  73
  74   function zfTabs(foundationApi) {
  75     var directive = {
  76       restrict: 'EA',
  77       transclude: 'true',
  78       replace: true,
  79       templateUrl: 'components/tabs/tabs.html',
  80       controller: 'ZfTabsController',
  81       scope: {
  82         displaced: '@?'
  83       },
  84       link: link
  85     };
  86
  87     return directive;
  88
  89     function link(scope, element, attrs, controller) {
  90       scope.id = attrs.id || foundationApi.generateUuid();
  91       scope.showTabContent = scope.displaced !== 'true';
  92       attrs.$set('id', scope.id);
  93       controller.setId(scope.id);
  94
  95       //update tabs in case tab-content doesn't have them
  96       var updateTabs = function() {
  97         foundationApi.publish(scope.id + '-tabs', scope.tabs);
  98       };
  99
 100       foundationApi.subscribe(scope.id + '-get-tabs', function() {
 101         updateTabs();
 102       });
 103     }
 104   }
 105
 106   zfTabContent.$inject = ['FoundationApi'];
 107
 108   function zfTabContent(foundationApi) {
 109     var directive = {
 110       restrict: 'A',
 111       transclude: 'true',
 112       replace: true,
 113       scope: {
 114         tabs: '=?',
 115         target: '@'
 116       },
 117       templateUrl: 'components/tabs/tab-content.html',
 118       link: link
 119     };
 120
 121     return directive;
 122
 123     function link(scope, element, attrs, ctrl) {
 124       scope.tabs = scope.tabs || [];
 125       var id = scope.target;
 126
 127       foundationApi.subscribe(id, function(msg) {
 128         if(msg[0] === 'activate') {
 129           var tabId = msg[1];
 130           scope.tabs.forEach(function (tab) {
 131             tab.scope.active = false;
 132             tab.active = false;
 133
 134             if(tab.scope.id === id) {
 135               tab.scope.active = true;
 136               tab.active = true;
 137             }
 138           });
 139         }
 140       });
 141
 142       //if tabs empty, request tabs
 143       if(scope.tabs.length === 0) {
 144         foundationApi.subscribe(id + '-tabs', function(tabs) {
 145           scope.tabs = tabs;
 146         });
 147
 148         foundationApi.publish(id + '-get-tabs', '');
 149       }
 150     }
 151   }
 152
 153   zfTab.$inject = ['FoundationApi'];
 154
 155   function zfTab(foundationApi) {
 156     var directive = {
 157       restrict: 'EA',
 158       templateUrl: 'components/tabs/tab.html',
 159       transclude: true,
 160       scope: {
 161         title: '@'
 162       },
 163       require: '^zfTabs',
 164       replace: true,
 165       link: link
 166     };
 167
 168     return directive;
 169
 170     function link(scope, element, attrs, controller, transclude) {
 171       scope.id = attrs.id || foundationApi.generateUuid();
 172       scope.active = false;
 173       scope.transcludeFn = transclude;
 174       controller.addTab(scope);
 175
 176       foundationApi.subscribe(scope.id, function(msg) {
 177         if(msg === 'show' || msg === 'open' || msg === 'activate') {
 178           scope.makeActive();
 179         }
 180       });
 181
 182       scope.makeActive = function() {
 183         controller.select(scope);
 184       };
 185     }
 186   }
 187
 188   zfTabIndividual.$inject = ['FoundationApi'];
 189
 190   function zfTabIndividual(foundationApi) {
 191     var directive = {
 192       restrict: 'EA',
 193       transclude: 'true',
 194       link: link
 195     };
 196
 197     return directive;
 198
 199     function link(scope, element, attrs, ctrl, transclude) {
 200       var tab = scope.$eval(attrs.tab);
 201       var id = tab.scope.id;
 202
 203       tab.scope.transcludeFn(tab.scope, function(tabContent) {
 204         element.append(tabContent);
 205       });
 206
 207       foundationApi.subscribe(tab.scope.id, function(msg) {
 208         foundationApi.publish(tab.parentContent, ['activate', tab.scope.id]);
 209         scope.$apply();
 210       });
 211
 212     }
 213   }
 214
 215   //custom tabs
 216
 217   zfTabHref.$inject = ['FoundationApi'];
 218
 219   function zfTabHref(foundationApi) {
 220     var directive = {
 221       restrict: 'A',
 222       replace: false,
 223       link: link
 224     }
 225
 226     return directive;
 227
 228     function link(scope, element, attrs, ctrl) {
 229       var target = attrs.zfTabHref;
 230
 231       foundationApi.subscribe(target, function(msg) {
 232         if(msg === 'activate' || msg === 'show' || msg === 'open') {
 233           makeActive();
 234         }
 235       });
 236
 237
 238       element.on('click', function(e) {
 239         foundationApi.publish(target, 'activate');
 240         makeActive();
 241         e.preventDefault();
 242       });
 243
 244       function makeActive() {
 245         element.parent().children().removeClass('is-active');
 246         element.addClass('is-active');
 247       }
 248     }
 249   }
 250
 251   zfTabCustom.$inject = ['FoundationApi'];
 252
 253   function zfTabCustom(foundationApi) {
 254     var directive = {
 255       restrict: 'A',
 256       replace: false,
 257       link: link
 258     };
 259
 260     return directive;
 261
 262     function link(scope, element, attrs, ctrl, transclude) {
 263       var children = element.children();
 264       angular.element(children[0]).addClass('is-active');
 265     }
 266   }
 267
 268   zfTabContentCustom.$inject = ['FoundationApi'];
 269
 270   function zfTabContentCustom(foundationApi) {
 271     return {
 272       restrict: 'A',
 273       link: link
 274     };
 275
 276     function link(scope, element, attrs) {
 277       var tabs = [];
 278       var children = element.children();
 279
 280       angular.forEach(children, function(node) {
 281         if(node.id) {
 282           var tabId = node.id;
 283           tabs.push(tabId);
 284           foundationApi.subscribe(tabId, function(msg) {
 285             if(msg === 'activate' || msg === 'show' || msg === 'open') {
 286               activateTabs(tabId);
 287             }
 288           });
 289
 290           if(tabs.length === 1) {
 291             var el = angular.element(node);
 292             el.addClass('is-active');
 293           }
 294         }
 295       });
 296
 297       function activateTabs(tabId) {
 298         var tabNodes = element.children();
 299         angular.forEach(tabNodes, function(node) {
 300           var el = angular.element(node);
 301           el.removeClass('is-active');
 302           if(el.attr('id') === tabId) {
 303             el.addClass('is-active');
 304           }
 305
 306         });
 307       }
 308     }
 309   }
 310
 311 })();