ngx-docks

Table of contents

1. Getting Started
2. Features
3. Installation
4. Usage
5. License
6. Contributing

Getting Started

ngx-docks is an Angular component for layout customization. It allows you to freely move, dock and undock all of the layout components up to your needs. The library was designed to be extremely flexible and light; Try it out and see how it can improve your website.

It was built for modern browsers using TypeScript, CSS3 and HTML5 and Angular >=4.0.0.

Check out the documentation & demos for more information!

Browsers support

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------- | --------- | --------- | --------- | --------- | | Edge | since 63.0 | ✓ | ✓ | ✓

Features

• Dynamic docks to presenting your own components in the way you want
• The ability to create your own docks layouts
• Resizable and draggable windows
• User own layouts saving
• Decoupled theme'ing with included Google Material theme
• Light codebase / No external dependencies
• AoT Compilation Support

Installation

To use ngx-docks in your project install it via npm:

npm i ngx-docks --save

Usage

Import DocksModule

You need to import the DocksModule in the module of your app where you want to use it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from "./components/demo-component";
import { DocksModule } from 'ngx-docks';

@NgModule({
  imports: [
      BrowserModule, 
      DocksModule
  ],
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
})
export class AppModule {}

Create docks board

You need to declare all components used in dynamic docks.

import {DockMap, DockMenuItem, DockPreset} from 'ngx-docks/lib/interface';
import {DocksModule} from 'ngx-docks';
...

export class AppComponent {

  public boardId = 'unique-board-id';
  public dockMap: DockMap = null;
  public menu: DockMenuItem[] = null;
  public presets: DockPreset[] = [];  // your own set of presets

  constructor() {
    [this.menu, this.dockMap] = DocksModule.createMenuAndMap([
      FirstDockWindowComponent,
      SecondDockWindowComponent,
      ThirdDockWindowComponent
    ]);
  }
}

And add board component to your page:

<div class="container">
  <ngx-dock-board
    [boardId]="boardId"
    [dockMap]="dockMap"
    [menu]="menu"
    [presets]="presets"
  ></ngx-dock-board>
</div>

Your dock components should contains static parameters:

```js
export class FirstDockWindowComponent {

    static dockTitle = 'Dock title';
    static dockKey = 'dock_key_id';
    
    constructor() { }
}

## <a name="license"></a>Licence

### Personal/Open-Source

Use in personal/open-source projects, such as:

    Your portfolio website
    Charity websites
    
Distribute, modify, and/or integrate the ngx-docks.js Library in multiple personal/open-source projects under the same GPLv3 license

The ngx-docks.js Library is made available under a GPLv3 license for open-source and personal projects.

GPLv3 license Summary:

    The GPLv3 allows others to copy, distribute and modify the software as long as they state what has been changed when, and ensure that any modifications are also licensed under the GPL. Software incorporating (via compiler) GPL-licensed code must also be made also available under the GPLv3 along with build & install instructions.




### Commercial

Client projects
Distribute, modify, and/or integrate the ngx-docks.js Library in one commercial application per license


You must purchase a commercial license for each project you plan to integrate the ngx-docks.js Library unlimited to number of developers.

Your end users do not need to purchase a license, providing they are not creating their own commercial applications. 


**DETAILS:**

Licensee may use ngx-docks component in any web application manufactured and marketed by the Licensed company.
The count of the applications is not restricted. 
The count of appearances of ngx-docks component in these applications is not restricted. 


Unlimited number of developers from licensed company may work with ngx-docks.


As developer is identified any person who works with ngx-docks 
and requires for his work some knowledge about ngx-docks API or configuration.

None of Licensee's customers may assign their own developers to work with any Licensee's application 
that require any knowledge about ngx-docks API or configuration.

Licensee must not sell or give to anybody outside the Licensed company ngx-docks component alone 
as the component to build any other web applications.
Licensee must not sell ngx-docks as part of any web component with the similar functionality as ngx-docks itself.

Licensee may modify any ngx-docks files to comply with their needs.

## <a name="contributing"></a>Contributing

Solvera  is a platform of digital natives united in a developer community. Well organized, communicative, and patient, focused on handling your business challenges in a highly IT-literate way.
        
We are the ideal companion to turn an arduous journey into a march of creativity, involvement and effectiveness.
        
As problem solvers, we work on the most diverse and challenging projects, we are comfortable in both start-up and enterprise environments alike.
        
A highly-skilled, experienced, and dedicated team makes us adept at tackling the most complex projects and delivering outstanding results.