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

mydna Custimised for you

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

module app {

    class Controller {

        public open: boolean = false;
        private random: number = Math.random();
        public label: string;

        public static $inject = [
            '$scope'
        ];

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

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

        constructor(
            private $scope:any) {
        }

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

    class Menu {
        public bindings: any = {
            label: '<',
            popupClass: '<',
            buttonClass: '<'
        };
        public transclude: boolean = true;
        public controller: any = Controller;
        public controllerAs: string = 'vm';
        public template: string = `
<div class="selector {{vm.buttonClass}}" ng-class="{open: vm.open}" ng-click="vm.toggleOpen($event)">
    <div class="chevron" ng-class="{open: vm.open}"></div>
    <div ng-bind="vm.label"></div>
    <div class="popup {{vm.popupClass}}" ng-class="{open: vm.open}" ng-transclude></div>
</div>`;

        constructor() {
        }

    }

    angular
        .module('app')
        .component('popupMenu', new Menu());
}