feat(splitter): splitter component (#53)

commitlint.config.js

@@ -28,6 +28,7 @@ module.exports = {
                 'progress-spinner',
                 'radio',
                 'select',
+                'splitter',
                 'tabs',
                 'timepicker',
                 'tooltip',

package.json

@@ -157,6 +157,7 @@
         "server-dev:progress-spinner": "npm run server-dev -- --env.component progress-spinner",
         "server-dev:radio": "npm run server-dev -- --env.component radio",
         "server-dev:select": "npm run server-dev -- --env.component select",
+        "server-dev:splitter": "npm run server-dev -- --env.component splitter",
         "server-dev:tag": "npm run server-dev -- --env.component tag",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:tree": "npm run server-dev -- --env.component tree",

src/lib-dev/splitter/module.ts

@@ -0,0 +1,34 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McSplitterModule } from '../../lib/splitter';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent {}
+
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McSplitterModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/splitter/styles.scss

@@ -0,0 +1,43 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/visual/prebuilt/default-visual';
+
+.container {
+    margin: 8px;
+}
+
+.horizontal-block {
+    height: 100px;
+    border: 1px solid black;
+}
+
+.vertical-block {
+    height: 300px;
+    border: 1px solid black;
+}
+
+.min-width-enabled {
+    min-width: 200px;
+}
+
+// custom color
+mc-splitter.custom-color > mc-gutter {
+    background-color: #03A9F4;
+    color: white;
+}
+
+mc-splitter.custom-color > mc-gutter:hover {
+    background-color: #8bc34a;
+    color: black;
+}
+
+// custom gutter image
+mc-splitter.custom-gutter > mc-gutter {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
+}
+
+mc-splitter.custom-gutter > mc-gutter > i {
+    display: none;
+}

src/lib-dev/splitter/template.html

@@ -0,0 +1,95 @@
+<div class="layout-margin">
+    <h1 class="mc-h1">Splitter examples</h1>
+
+    <p>
+        Import mosaic-icons to use default gutter icon.
+    </p>
+
+    <br>
+
+    <h2 class="mc-h2">Horizontal</h2>
+
+    <mc-splitter class="horizontal-block" direction="horizontal">
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">Vertical</h2>
+
+    <mc-splitter class="vertical-block" direction="vertical">
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">Default direction</h2>
+
+    <mc-splitter class="horizontal-block">
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">Disabled</h2>
+
+    <mc-splitter class="horizontal-block" direction="horizontal" disabled>
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">min-width for the first area</h2>
+
+    <mc-splitter class="horizontal-block">
+        <mc-splitter-area class="min-width-enabled">first (with min-width)</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area class="min-width-enabled">third (with min-width)</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">Nested</h2>
+
+    <mc-splitter class="horizontal-block">
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>
+            <mc-splitter direction="vertical">
+                <mc-splitter-area>top</mc-splitter-area>
+                <mc-splitter-area>center</mc-splitter-area>
+                <mc-splitter-area>bottom</mc-splitter-area>
+            </mc-splitter>
+        </mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">With custom color</h2>
+
+    <mc-splitter class="horizontal-block custom-color">
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+
+    <h2 class="mc-h2">With custom gutter image</h2>
+
+    <mc-splitter class="horizontal-block custom-gutter">
+        <mc-splitter-area>first</mc-splitter-area>
+        <mc-splitter-area>second</mc-splitter-area>
+        <mc-splitter-area>third</mc-splitter-area>
+    </mc-splitter>
+
+    <br>
+</div>

src/lib/core/theming/_all-theme.scss

@@ -20,6 +20,7 @@
 @import '../option/option-theme';
 @import '../../tag/tag-theme';
 @import '../../tooltip/tooltip-theme';
+@import '../../splitter/splitter-theme';
 
 
 @mixin mosaic-theme($theme) {
@@ -46,4 +47,5 @@
     @include mc-option-theme($theme);
     @include mc-tag-theme($theme);
     @include mc-tooltip-theme($theme);
+    @include mc-splitter-theme($theme);
 }

src/lib/public-api.ts

@@ -19,5 +19,6 @@ export * from '@ptsecurity/mosaic/radio';
 export * from '@ptsecurity/mosaic/tree';
 export * from '@ptsecurity/mosaic/tag';
 export * from '@ptsecurity/mosaic/select';
+export * from '@ptsecurity/mosaic/splitter';
 export * from '@ptsecurity/mosaic/tooltip';
 

src/lib/splitter/_splitter-theme.scss

@@ -0,0 +1,19 @@
+@mixin mc-splitter-theme($theme) {
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+
+    mc-gutter {
+        background-color: mc-color($second, 60);
+        color: mc-color($second, 600);
+
+        &:hover {
+            background-color: mc-color($second, 100);
+            color: mc-color($second, 800);
+        }
+
+        &[disabled] {
+            background-color: mc-color($second, 60);
+            color: mc-color($second, 600);
+        }
+    }
+}

src/lib/splitter/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/lib/splitter/public-api.ts

@@ -0,0 +1,2 @@
+export * from './splitter.module';
+export * from './splitter.component';

src/lib/splitter/spliltter.spec.ts

@@ -0,0 +1,115 @@
+import { Component, Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { Direction, McGutterDirective, McSplitterAreaDirective, McSplitterComponent, McSplitterModule } from './index';
+
+
+function createTestComponent<T>(component: Type<T>) {
+    TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+            imports: [ McSplitterModule ],
+            declarations: [ component ],
+            providers: []
+        })
+        .compileComponents();
+
+    return TestBed.createComponent<T>(component);
+}
+
+function checkDirection<T>(fixture: ComponentFixture<T>,
+                           direction: Direction,
+                           guttersCount: number,
+                           gutterSize: number) {
+
+    const splitter = fixture.debugElement.query(By.directive(McSplitterComponent));
+    const gutters = fixture.debugElement.queryAll(By.directive(McGutterDirective));
+
+    const expectedDirection = direction === Direction.Vertical
+        ? 'column'
+        : 'row';
+
+    const expectedWidth = (direction === Direction.Vertical)
+        ? ''
+        : `${gutterSize}px`;
+
+    const expectedHeight = (direction === Direction.Vertical)
+        ? `${gutterSize}px`
+        : '100%';
+
+    expect(splitter.nativeElement.style.flexDirection).toBe(expectedDirection);
+
+    expect(gutters.length).toBe(guttersCount);
+    expect(gutters.every((gutter) => gutter.nativeElement.style.width === expectedWidth)).toBe(true);
+    expect(gutters.every((gutter) => gutter.nativeElement.style.height === expectedHeight)).toBe(true);
+}
+
+
+@Component({
+    selector: 'mc-demo-spllitter',
+    template: `
+        <mc-splitter>
+            <mc-splitter-area>first</mc-splitter-area>
+            <mc-splitter-area>second</mc-splitter-area>
+            <mc-splitter-area>third</mc-splitter-area>
+        </mc-splitter>
+    `
+})
+class McSplitterDefaultDirection {}
+
+@Component({
+    selector: 'mc-demo-spllitter',
+    template: `
+        <mc-splitter [direction]="direction">
+            <mc-splitter-area>first</mc-splitter-area>
+            <mc-splitter-area>second</mc-splitter-area>
+            <mc-splitter-area>third</mc-splitter-area>
+        </mc-splitter>
+    `
+})
+class McSplitterDirection {
+    direction: Direction = Direction.Vertical;
+}
+
+describe('McSplitter', () => {
+    describe('direction', () => {
+        it('should be default', () => {
+            const fixture = createTestComponent(McSplitterDefaultDirection);
+
+            fixture.detectChanges();
+
+            const areas = fixture.debugElement.queryAll(By.directive(McSplitterAreaDirective));
+            const expectedAreasCount = 3;
+            const expectedGuttersCount = expectedAreasCount - 1;
+            const expectedGutterSize = 6;
+
+            checkDirection(fixture, Direction.Horizontal, expectedGuttersCount, expectedGutterSize);
+
+            expect(areas.length).toBe(expectedAreasCount);
+        });
+
+
+        it('should be horizontal', () => {
+            const fixture = createTestComponent(McSplitterDirection);
+            const expectedGuttersCount = 2;
+            const expectedGutterSize = 6;
+
+            fixture.componentInstance.direction = Direction.Horizontal;
+            fixture.detectChanges();
+
+            checkDirection(fixture, Direction.Horizontal, expectedGuttersCount, expectedGutterSize);
+        });
+
+        it('should be vertical', () => {
+            const fixture = createTestComponent(McSplitterDirection);
+            const expectedGuttersCount = 2;
+            const expectedGutterSize = 6;
+
+            fixture.componentInstance.direction = Direction.Vertical;
+            fixture.detectChanges();
+
+            checkDirection(fixture, Direction.Vertical, expectedGuttersCount, expectedGutterSize);
+        });
+    });
+});

src/lib/splitter/splitter.component.html

@@ -0,0 +1,12 @@
+<ng-content></ng-content>
+<ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">
+    <mc-gutter *ngIf="last === false"
+               [direction]="direction"
+               [disabled]="disabled"
+               [size]="gutterSize"
+               [order]="index * 2 + 1"
+               (mousedown)="onMouseDown($event, index, index + 1)"
+    >
+        <i mc-icon="mc-ellipsis_16" [class.icon-vertical]="direction === 'vertical'" *ngIf="!disabled"></i>
+    </mc-gutter>
+</ng-template>