vindue

Angular2-based window manager for websites

Documentation

Getting started

Install with npm

npm install vindue --save

Importing in AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { WindowManagerModule } from 'vindue';

@NgModule({
    imports: [BrowserModule, FormsModule, WindowManagerModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

Usage in app.component

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <ee-tree
                [windows]="windows"
                [map]="map"
                [modules]="modules"
                [model]="model"
                (on)="on($event)">
        </ee-tree>
    `
})
export class AppComponent {
    /* Names of the views */
    windows: string[] = ["Window1", "Window2", "Window3"];

    /*
     * A function, which maps a view's name to
     * some html-template
     */
    map = {
        callback: function(v) {
            switch(v) {
                case "Window1": return "<h1>Window 1</h1>";
                case "Window2": return "<h1>Window 2</h1>";
                case "Window3": return "<h1>Window 3</h1>";
                case "TaskDetails": return "<h1>Moin</h1>";
                default: throw "No such view";
            }
        }
    };

    /*
     * Modules necessary for components/ directives
     * used in the html-templates
     */
    modules: any = [];

    /* A shared object passed to the views */
    model = { }

    /* Events received from views */
    on(e) { }
}

Additional styles for

full-screen app

html, body {
    width: 100%;
    height: 100%;
}

unlimited resizing of windows

.ee-panel > ee-panel-data {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px;
}