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)
16 FoundationTabs.$inject = ['FoundationApi'];
18 function FoundationTabs(foundationApi) {
21 service.activate = activate;
25 //target should be element ID
26 function activate(target) {
27 foundationApi.publish(target, 'show');
32 ZfTabsController.$inject = ['$scope', 'FoundationApi'];
34 function ZfTabsController($scope, foundationApi) {
35 var controller = this;
36 var tabs = controller.tabs = $scope.tabs = [];
39 controller.select = function(selectTab) {
40 tabs.forEach(function(tab) {
42 tab.scope.active = false;
44 if(tab.scope === selectTab) {
45 foundationApi.publish(id, ['activate', tab]);
48 tab.scope.active = true;
54 controller.addTab = function addTab(tabScope) {
55 tabs.push({ scope: tabScope, active: false, parentContent: controller.id });
57 if(tabs.length === 1) {
58 tabs[0].active = true;
59 tabScope.active = true;
63 controller.getId = function() {
67 controller.setId = function(newId) {
72 zfTabs.$inject = ['FoundationApi'];
74 function zfTabs(foundationApi) {
79 templateUrl: 'components/tabs/tabs.html',
80 controller: 'ZfTabsController',
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);
95 //update tabs in case tab-content doesn't have them
96 var updateTabs = function() {
97 foundationApi.publish(scope.id + '-tabs', scope.tabs);
100 foundationApi.subscribe(scope.id + '-get-tabs', function() {
106 zfTabContent.$inject = ['FoundationApi'];
108 function zfTabContent(foundationApi) {
117 templateUrl: 'components/tabs/tab-content.html',
123 function link(scope, element, attrs, ctrl) {
124 scope.tabs = scope.tabs || [];
125 var id = scope.target;
127 foundationApi.subscribe(id, function(msg) {
128 if(msg[0] === 'activate') {
130 scope.tabs.forEach(function (tab) {
131 tab.scope.active = false;
134 if(tab.scope.id === id) {
135 tab.scope.active = true;
142 //if tabs empty, request tabs
143 if(scope.tabs.length === 0) {
144 foundationApi.subscribe(id + '-tabs', function(tabs) {
148 foundationApi.publish(id + '-get-tabs', '');
153 zfTab.$inject = ['FoundationApi'];
155 function zfTab(foundationApi) {
158 templateUrl: 'components/tabs/tab.html',
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);
176 foundationApi.subscribe(scope.id, function(msg) {
177 if(msg === 'show' || msg === 'open' || msg === 'activate') {
182 scope.makeActive = function() {
183 controller.select(scope);
188 zfTabIndividual.$inject = ['FoundationApi'];
190 function zfTabIndividual(foundationApi) {
199 function link(scope, element, attrs, ctrl, transclude) {
200 var tab = scope.$eval(attrs.tab);
201 var id = tab.scope.id;
203 tab.scope.transcludeFn(tab.scope, function(tabContent) {
204 element.append(tabContent);
207 foundationApi.subscribe(tab.scope.id, function(msg) {
208 foundationApi.publish(tab.parentContent, ['activate', tab.scope.id]);
217 zfTabHref.$inject = ['FoundationApi'];
219 function zfTabHref(foundationApi) {
228 function link(scope, element, attrs, ctrl) {
229 var target = attrs.zfTabHref;
231 foundationApi.subscribe(target, function(msg) {
232 if(msg === 'activate' || msg === 'show' || msg === 'open') {
238 element.on('click', function(e) {
239 foundationApi.publish(target, 'activate');
244 function makeActive() {
245 element.parent().children().removeClass('is-active');
246 element.addClass('is-active');
251 zfTabCustom.$inject = ['FoundationApi'];
253 function zfTabCustom(foundationApi) {
262 function link(scope, element, attrs, ctrl, transclude) {
263 var children = element.children();
264 angular.element(children[0]).addClass('is-active');
268 zfTabContentCustom.$inject = ['FoundationApi'];
270 function zfTabContentCustom(foundationApi) {
276 function link(scope, element, attrs) {
278 var children = element.children();
280 angular.forEach(children, function(node) {
284 foundationApi.subscribe(tabId, function(msg) {
285 if(msg === 'activate' || msg === 'show' || msg === 'open') {
290 if(tabs.length === 1) {
291 var el = angular.element(node);
292 el.addClass('is-active');
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');