X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ffoundation-apps%2Fjs%2Fangular%2Fcomponents%2Ftabs%2Ftabs.js;fp=afb-client%2Fbower_components%2Ffoundation-apps%2Fjs%2Fangular%2Fcomponents%2Ftabs%2Ftabs.js;h=3818a2ab3ecf614d74cadb2d9af6bd67440b53f5;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0 diff --git a/afb-client/bower_components/foundation-apps/js/angular/components/tabs/tabs.js b/afb-client/bower_components/foundation-apps/js/angular/components/tabs/tabs.js new file mode 100644 index 0000000..3818a2a --- /dev/null +++ b/afb-client/bower_components/foundation-apps/js/angular/components/tabs/tabs.js @@ -0,0 +1,311 @@ +(function() { + 'use strict'; + + angular.module('foundation.tabs', ['foundation.core']) + .controller('ZfTabsController', ZfTabsController) + .directive('zfTabs', zfTabs) + .directive('zfTabContent', zfTabContent) + .directive('zfTab', zfTab) + .directive('zfTabIndividual', zfTabIndividual) + .directive('zfTabHref', zfTabHref) + .directive('zfTabCustom', zfTabCustom) + .directive('zfTabContentCustom', zfTabContentCustom) + .service('FoundationTabs', FoundationTabs) + ; + + FoundationTabs.$inject = ['FoundationApi']; + + function FoundationTabs(foundationApi) { + var service = {}; + + service.activate = activate; + + return service; + + //target should be element ID + function activate(target) { + foundationApi.publish(target, 'show'); + } + + } + + ZfTabsController.$inject = ['$scope', 'FoundationApi']; + + function ZfTabsController($scope, foundationApi) { + var controller = this; + var tabs = controller.tabs = $scope.tabs = []; + var id = ''; + + controller.select = function(selectTab) { + tabs.forEach(function(tab) { + tab.active = false; + tab.scope.active = false; + + if(tab.scope === selectTab) { + foundationApi.publish(id, ['activate', tab]); + + tab.active = true; + tab.scope.active = true; + } + }); + + }; + + controller.addTab = function addTab(tabScope) { + tabs.push({ scope: tabScope, active: false, parentContent: controller.id }); + + if(tabs.length === 1) { + tabs[0].active = true; + tabScope.active = true; + } + }; + + controller.getId = function() { + return id; + }; + + controller.setId = function(newId) { + id = newId; + }; + } + + zfTabs.$inject = ['FoundationApi']; + + function zfTabs(foundationApi) { + var directive = { + restrict: 'EA', + transclude: 'true', + replace: true, + templateUrl: 'components/tabs/tabs.html', + controller: 'ZfTabsController', + scope: { + displaced: '@?' + }, + link: link + }; + + return directive; + + function link(scope, element, attrs, controller) { + scope.id = attrs.id || foundationApi.generateUuid(); + scope.showTabContent = scope.displaced !== 'true'; + attrs.$set('id', scope.id); + controller.setId(scope.id); + + //update tabs in case tab-content doesn't have them + var updateTabs = function() { + foundationApi.publish(scope.id + '-tabs', scope.tabs); + }; + + foundationApi.subscribe(scope.id + '-get-tabs', function() { + updateTabs(); + }); + } + } + + zfTabContent.$inject = ['FoundationApi']; + + function zfTabContent(foundationApi) { + var directive = { + restrict: 'A', + transclude: 'true', + replace: true, + scope: { + tabs: '=?', + target: '@' + }, + templateUrl: 'components/tabs/tab-content.html', + link: link + }; + + return directive; + + function link(scope, element, attrs, ctrl) { + scope.tabs = scope.tabs || []; + var id = scope.target; + + foundationApi.subscribe(id, function(msg) { + if(msg[0] === 'activate') { + var tabId = msg[1]; + scope.tabs.forEach(function (tab) { + tab.scope.active = false; + tab.active = false; + + if(tab.scope.id === id) { + tab.scope.active = true; + tab.active = true; + } + }); + } + }); + + //if tabs empty, request tabs + if(scope.tabs.length === 0) { + foundationApi.subscribe(id + '-tabs', function(tabs) { + scope.tabs = tabs; + }); + + foundationApi.publish(id + '-get-tabs', ''); + } + } + } + + zfTab.$inject = ['FoundationApi']; + + function zfTab(foundationApi) { + var directive = { + restrict: 'EA', + templateUrl: 'components/tabs/tab.html', + transclude: true, + scope: { + title: '@' + }, + require: '^zfTabs', + replace: true, + link: link + }; + + return directive; + + function link(scope, element, attrs, controller, transclude) { + scope.id = attrs.id || foundationApi.generateUuid(); + scope.active = false; + scope.transcludeFn = transclude; + controller.addTab(scope); + + foundationApi.subscribe(scope.id, function(msg) { + if(msg === 'show' || msg === 'open' || msg === 'activate') { + scope.makeActive(); + } + }); + + scope.makeActive = function() { + controller.select(scope); + }; + } + } + + zfTabIndividual.$inject = ['FoundationApi']; + + function zfTabIndividual(foundationApi) { + var directive = { + restrict: 'EA', + transclude: 'true', + link: link + }; + + return directive; + + function link(scope, element, attrs, ctrl, transclude) { + var tab = scope.$eval(attrs.tab); + var id = tab.scope.id; + + tab.scope.transcludeFn(tab.scope, function(tabContent) { + element.append(tabContent); + }); + + foundationApi.subscribe(tab.scope.id, function(msg) { + foundationApi.publish(tab.parentContent, ['activate', tab.scope.id]); + scope.$apply(); + }); + + } + } + + //custom tabs + + zfTabHref.$inject = ['FoundationApi']; + + function zfTabHref(foundationApi) { + var directive = { + restrict: 'A', + replace: false, + link: link + } + + return directive; + + function link(scope, element, attrs, ctrl) { + var target = attrs.zfTabHref; + + foundationApi.subscribe(target, function(msg) { + if(msg === 'activate' || msg === 'show' || msg === 'open') { + makeActive(); + } + }); + + + element.on('click', function(e) { + foundationApi.publish(target, 'activate'); + makeActive(); + e.preventDefault(); + }); + + function makeActive() { + element.parent().children().removeClass('is-active'); + element.addClass('is-active'); + } + } + } + + zfTabCustom.$inject = ['FoundationApi']; + + function zfTabCustom(foundationApi) { + var directive = { + restrict: 'A', + replace: false, + link: link + }; + + return directive; + + function link(scope, element, attrs, ctrl, transclude) { + var children = element.children(); + angular.element(children[0]).addClass('is-active'); + } + } + + zfTabContentCustom.$inject = ['FoundationApi']; + + function zfTabContentCustom(foundationApi) { + return { + restrict: 'A', + link: link + }; + + function link(scope, element, attrs) { + var tabs = []; + var children = element.children(); + + angular.forEach(children, function(node) { + if(node.id) { + var tabId = node.id; + tabs.push(tabId); + foundationApi.subscribe(tabId, function(msg) { + if(msg === 'activate' || msg === 'show' || msg === 'open') { + activateTabs(tabId); + } + }); + + if(tabs.length === 1) { + var el = angular.element(node); + el.addClass('is-active'); + } + } + }); + + function activateTabs(tabId) { + var tabNodes = element.children(); + angular.forEach(tabNodes, function(node) { + var el = angular.element(node); + el.removeClass('is-active'); + if(el.attr('id') === tabId) { + el.addClass('is-active'); + } + + }); + } + } + } + +})();