bia-framework/components/core-bar/core-bar.component.ts

Bia Framework to work with angular 2

//Angular
import {
    Component,
    ViewEncapsulation,
    EventEmitter,
    Output,
    Input,
    ViewContainerRef,
    ViewChild
} from '@angular/core';
import {NgClass, NgFor, NgIf} from '@angular/common';
//Components
import {Badge} from '../badge/badge';
import {CoreBarService} from "./core-bar.service";

import {CoreImage} from "../core-image/CoreImage";
import {CoreIcon} from "../core-icon/core-icon";
import {RippleEffect} from "../ripple-effect/RippleEffect";
import {IDynamicComponent} from "../../models/IDynamicComponent";
import {DynamicComponentLoader} from "../../services/DynamicComponentLoader";
import {IDropDownMenuModel} from "../../models/IDropdownMenu";
import {IMenuItem} from "../../models/ITopBar";
import {remote} from 'electron';
import {CoreAnimations} from "../core-animations/CoreAnimations";


@Component({
    selector: 'core-bar',
    encapsulation: ViewEncapsulation.None,
    templateUrl: "node_modules/bia-framework/components/core-bar/core-bar.template.html",
    styleUrls: ['node_modules/bia-framework/components/core-bar//core-bar.style.css'],
    providers: [DynamicComponentLoader],
    directives: [NgClass, NgFor, NgIf, Badge, RippleEffect,  CoreImage, CoreIcon],
    animations: [CoreAnimations.animationSideSlide()]

})
export class CoreBar
{
    @Input()
    contentVisibility:boolean = true;

    @Input()
    nativeVisibility:boolean = true;

    @Input()
    color:string;

    @Input()
    hasDropShadown:boolean;

    DropdownMenus:IDropDownMenuModel[];
    LeftMenuItems:IMenuItem[] = [];
    RightMenuItems:IMenuItem[] = [];
    Menus:IMenuItem[] = [];
    TitleBar:string;
    hasBarBg:boolean;

    @ViewChild('coreBarDynContainer', {read: ViewContainerRef})
    container:ViewContainerRef;


    @Output()
    private visibilityChange:EventEmitter<boolean> = new EventEmitter<boolean>();

    constructor(private coreBarService:CoreBarService, private dynamicComponentLoader:DynamicComponentLoader)
    {
        this.TitleBar = "";
        //subscribe to topbarSErvice events and Observables
        this.coreBarService.LeftItensChanged.subscribe(leftItem => this.LeftMenuItems = leftItem);
        this.coreBarService.RightItensChanged.subscribe(rightItem => this.RightMenuItems = rightItem);
        this.coreBarService.TitleChanged.subscribe(newTitle => this.TitleBar = newTitle);

        this.coreBarService.contentVisibilityChanged.subscribe(newVisibility => this.contentVisibility = newVisibility);
        this.coreBarService.nativeVisibilityChanged.subscribe(newVisibility => this.nativeVisibility = newVisibility);

        this.coreBarService.DropDownItemsChanged.subscribe(dropdownItems => this.DropdownMenus = dropdownItems);
        this.coreBarService.BarBgVisibilityChanged.subscribe(newbg => this.hasBarBg = newbg);
        this.coreBarService.DynamicContentChanged.subscribe((dynamic)=>this.loadDynamicContent(dynamic));
    }

    ngOnInit()
    {
        this.hasDropShadown = this.hasDropShadown || true;
        this.color = this.color || 'transparent';


    }

    public nativeClick = (type:string)=>
    {

        if (remote != null)
        {
            var window = remote.getCurrentWindow();

            if (type == "minimize")
            {
                window.minimize();
            }

            if (type == "toggle")
            {
                if (window.isMaximized())
                    window.unmaximize();
                else
                    window.maximize();
            }

            if (type == "close")
                window.close();
        }

    };

    public loadDynamicContent = (dynamicContent:IDynamicComponent):void =>
    {
        this.dynamicComponentLoader.load(this.container, dynamicContent);
    };


    public itemClicked = (item:IMenuItem):void =>
    {
        if (item.Click != null)
            item.Click();
    };
}