Structure for #9677

primefaces · Dec 18, 2020 · d49cdf4 · d49cdf4
1 parent 0ef2b58
commit d49cdf4
Show file tree

Hide file tree

Showing 11 changed files with 428 additions and 0 deletions.
diff --git a/src/app/components/splitter/ng-package.json b/src/app/components/splitter/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
diff --git a/src/app/components/splitter/public_api.ts b/src/app/components/splitter/public_api.ts
@@ -0,0 +1 @@
+export * from './splitter';
diff --git a/src/app/components/splitter/splitter.css b/src/app/components/splitter/splitter.css
@@ -0,0 +1,58 @@
+.p-splitter {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.p-splitter-vertical {
+    flex-direction: column;
+}
+
+.p-splitter-panel {
+    flex-grow: 1;
+}
+
+.p-splitter-panel-nested {
+    display: flex;
+}
+
+.p-splitter-panel .p-splitter {
+    flex-grow: 1;
+    border: 0 none;
+}
+
+.p-splitter-gutter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+}
+
+.p-splitter-horizontal.p-splitter-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    height: 24px;
+    width: 100%;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    cursor: col-resize;
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    cursor: row-resize;
+    user-select: none;
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    cursor: row-resize;
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    width: 24px;
+    height: 100%;
+}
diff --git a/src/app/components/splitter/splitter.spec.ts b/src/app/components/splitter/splitter.spec.ts
@@ -0,0 +1,23 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Splitter, SplitterModule } from './splitter';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('Splitter', () => {
+
+	let tag: Splitter;
+	let fixture: ComponentFixture<Splitter>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [
+				NoopAnimationsModule
+			],
+			declarations: [
+				SplitterModule
+			]
+		});
+
+		fixture = TestBed.createComponent(Splitter);
+		tag = fixture.componentInstance;
+	});
+});
diff --git a/src/app/components/splitter/splitter.ts b/src/app/components/splitter/splitter.ts
@@ -0,0 +1,110 @@
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, QueryList, ElementRef, Inject, forwardRef, ChangeDetectorRef, TemplateRef, Directive } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomHandler } from '../dom/domhandler';
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'p-splitter',
+    template: `
+        <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
+            <ng-content></ng-content>
+        </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./splitter.css']
+})
+export class Splitter {
+
+    @Input() styleClass: string;
+
+    @Input() style: any;
+
+    @Input() stateStorage: string = "session";
+
+    @Input() stateKey: string;
+
+    @Input() layout: string = "horizontal";
+
+    @Input() gutterSize: number = 4;
+
+    // @ContentChildren(SplitterPanel) panelList: QueryList<SplitterPanel>;
+
+    // panels: SplitterPanel[] = [];
+
+    dragging = false;
+
+    mouseMoveListener = null;
+
+    mouseUpListener = null;
+
+    size = null;
+
+    gutterElement = null;
+
+    startPos = null;
+
+    prevPanelElement = null;
+
+    nextPanelElement = null;
+
+    nextPanelSize = null;
+
+    prevPanelSize = null;
+
+    panelSizes = null;
+
+    prevPanelIndex = null;
+
+    panelListSubscription: Subscription;
+
+    constructor(public cd: ChangeDetectorRef, private el: ElementRef) { }
+
+    ngOnInit() {
+    }
+
+    ngAfterContentInit() {
+        // this.panels = this.panelList.toArray();
+
+        // if (this.panels && this.panels.length) {
+        //     let initialized = false;
+        //     if (!initialized) {
+        //         let children = [...this.panels].filter(child => DomHandler.hasClass(child.el.nativeElement.children[0], 'p-splitter-panel'));
+        //         let _panelSizes = [];
+
+        //         this.panels.map((panel, i) => {
+        //             let panelInitialSize = panel && panel.size ? panel.size : null;
+        //             let panelSize = panelInitialSize || (100 / this.panels.length);
+        //             _panelSizes[i] = panelSize;
+        //             children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
+        //             children[i];
+        //         });
+
+        //         this.panelSizes = _panelSizes;
+        //     }
+        // }
+
+        this.cd.markForCheck();
+    }
+
+    containerClass() {
+        return {
+            'p-splitter p-component': true,
+            'p-splitter-horizontal': this.layout === "horizontal",
+            'p-splitter-vertical': this.layout === "vertical"
+        };
+    }
+
+    ngOnDestroy() {
+        if (this.panelListSubscription) {
+            this.panelListSubscription.unsubscribe();
+        }
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [Splitter],
+    declarations: [Splitter]
+})
+export class SplitterModule { }
diff --git a/src/app/showcase/app-routing.module.ts b/src/app/showcase/app-routing.module.ts
@@ -86,6 +86,7 @@ import { HomeComponent } from './components/home/home.component';
             {path: 'slidemenu', loadChildren: () => import('./components/slidemenu/slidemenudemo.module').then(m => m.SlideMenuDemoModule)},
             {path: 'slider', loadChildren: () => import('./components/slider/sliderdemo.module').then(m => m.SliderDemoModule)},
             {path: 'splitbutton', loadChildren: () => import('./components/splitbutton/splitbuttondemo.module').then(m => m.SplitButtonDemoModule)},
+            {path: 'splitter', loadChildren: () => import('./components/splitter/splitterdemo.module').then(m => m.SplitterDemoModule)},
             {path: 'steps', loadChildren: () => import('./components/steps/stepsdemo.module').then(m => m.StepsDemoModule)},
             {path: 'support', loadChildren: () => import('./components/support/support.module').then(m => m.SupportModule)},
             {path: 'tag', loadChildren: () => import('./components/tag/tagdemo.module').then(m => m.TagDemoModule)},

diff --git a/src/app/showcase/app.menu.component.ts b/src/app/showcase/app.menu.component.ts
@@ -187,6 +187,7 @@ declare let gtag: Function;
                     <a [routerLink]=" ['/divider']" routerLinkActive="router-link-exact-active">Divider <span class="p-tag">New</span></a>
                     <a [routerLink]=" ['/fieldset']" routerLinkActive="router-link-exact-active">Fieldset</a>
                     <a [routerLink]=" ['/panel']" routerLinkActive="router-link-exact-active">Panel</a>
+                    <a [routerLink]=" ['/splitter']" routerLinkActive="router-link-exact-active">Splitter <span class="p-tag">New</span></a>
                     <a [routerLink]=" ['/scrollpanel']" routerLinkActive="router-link-exact-active">ScrollPanel</a>
                     <a [routerLink]=" ['/tabview']" routerLinkActive="router-link-exact-active">TabView</a>
                     <a [routerLink]=" ['/toolbar']" routerLinkActive="router-link-exact-active">Toolbar</a>

diff --git a/src/app/showcase/components/splitter/splitterdemo-routing.module.ts b/src/app/showcase/components/splitter/splitterdemo-routing.module.ts
@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router'
+import {SplitterDemo} from './splitterdemo';
+
+@NgModule({
+	imports: [
+		RouterModule.forChild([
+			{path:'',component: SplitterDemo}
+		])
+	],
+	exports: [
+		RouterModule
+	]
+})
+export class SplitterDemoRoutingModule {}