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

mydna Custimised for you

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

module app {


    import IUser = services.IUser;

    class NavController {
        public open: boolean = false;
        public user: IUser;
        private random: number = Math.random();

        public links: any[];
        public selectedValue: string;

        public static $inject = ['$scope', 'userService'];
        constructor(
            private $scope: angular.IScope,
            private userService: services.IUserService
        ) {
            userService.user().then((user: IUser) => {
                this.user = user;
            });
        }

        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)
                });
            }
        }

        public subtitle() {
            let item: any = this.links.filter((l: any) => {return l.key === this.selectedValue})[0];
            return item.title || item.label;
        }

    }

    class Nav {
        public bindings: any = {
            title: '<',
            selectedValue: '<',
            links: '<',
            addClass: '<'
        };
        public template: string = `
            <div class="pageHeader" ng-class="vm.addClass">
                <div></div>
                <div>
                    <div ng-bind="vm.user.FirstName + '\\'s Personalised Gene Analysis'"></div>
                    <div ng-bind="vm.title + ' Report'"></div>
                    <div ng-bind="vm.subtitle()"></div>
                </div>
            </div>
            <div class="pageNav">
                <div class="menu" ng-click="vm.toggleTabs()"><div ng-bind="vm.title + ' Report Menu'"></div><div class="chevron" ng-class="{open: vm.open}"></div></div>
                <div class="links" ng-class="{open: vm.open}">
                    <a ng-repeat="link in vm.links" href="{{link.value}}" ng-class="{selected: link.key === vm.selectedValue}">{{link.label}}</a>
                </div>
            </div>
        `;
        public controller: any = NavController;
        public controllerAs: string = 'vm';

        constructor() {
        }
    }

    angular
        .module('app')
        .component('reportNavigator', new Nav());
}