consumerportal/js/src/controllers/generic/tabs.ts

mydna Custimised for you

/// <reference path="../../includes.ts" />

module app {

    class NavController {

        public $onInit: Function;
        public $onChanges: Function;
        public open: boolean = false;
        public value: string;
        public label: string;
        public eventName: string;
        public tabClass: string;
        public tabs: any[];
        private random: number = Math.random();

        public static $inject = ["$scope"];
        constructor(
            private $scope:any) {

            this.$onChanges = (values: any) => {
                if (values.tabs && values.tabs.currentValue) {
                    let found: boolean = false;
                    this.tabs.forEach((tab: any) => {
                        if (tab.value === this.value) {
                            this.selectTab(tab);
                            found = true;
                        }
                    });
                    if (!found && this.tabs.length > 0) {
                        this.selectTab(this.tabs[0]);
                    }
                }
            };
        }

        selectTab(tab: any) {
            if (this.value !== tab.value || this.label !== tab.label) {
                this.open = false;
                this.value = tab.value;
                this.label = tab.label;
                this.$scope.$emit(this.eventName || 'tabSelected', tab);
            }
        }


        private removeListeners() {
            $(document).off('click.toggle' + this.random);
            $(window).off('scroll.popup' + this.random);
        }

        public $onDestroy() {
            this.removeListeners();
        }

        private close = () => {
            this.open = false;
            this.removeListeners();
            this.$scope.$apply();
        };

        public toggleTabs(ev: any) {
            if (!this.open) {
                this.open = true;
                setTimeout(() => {
                    $(document).on('click.toggle' + this.random, this.close);
                    $(window).on('scroll.popup' + this.random, this.close)
                });
            }
        }
    }

    class Tabs {
        public bindings: any = {
            eventName: '<',
            tabs: '<',
            value: '<',
            tabClass: '<',
            message: '<',
            shortMessage: '<',
            selectedClass: '<'
        };
        public template: string = `
            <div class="tabs {{vm.tabClass}}">
                <div class="menu {{vm.selectedClass}}" ng-click="vm.toggleTabs()"><div class="chevron" ng-class="{open: vm.open}"></div><div ng-transclude></div><span ng-if="vm.shortMessage" ng-bind="vm.shortMessage"></span><div>{{vm.label}}</div></div>
                <span ng-if="vm.message" ng-bind="vm.message"></span>
                <div class="links" ng-class="{open: vm.open}">
                    <div ng-repeat="link in vm.tabs" ng-click="vm.selectTab(link)" class="{{vm.selectedClass}}" ng-class="{selected: link.value === vm.value}">{{link.label}}</div>
                </div>
            </div>
        `;
        public controller: any = NavController;
        public controllerAs: string = 'vm';
        public transclude: boolean = true;

        constructor() {
        }

    }
    angular
        .module('app')
        .component('mydnaTabs', new Tabs());
}