angular-split · Shemesh · May 15, 2019 · May 15, 2019
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "lint": "ng lint",
+    "build&serve": "ng build angular-split && npm run start",
     "app_build": "npm run lib_build && ng build --prod --base-href /angular-split/ && npm run app_lazy_build && npm run app_lazy2_build",
     "app_lazy_build": "ng build angular-split-app-lazy --prod --base-href /angular-split/lazy --deploy-url /angular-split/lazy/",
     "app_lazy2_build": "ng build angular-split-app-lazy2 --prod --base-href /angular-split/lazy2 --deploy-url /angular-split/lazy2/",

diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss
@@ -16,6 +16,11 @@
         align-items: center;
         justify-content: center;
 
+        &.as-split-gutter-collapsed {
+          flex-basis: 1px !important;
+          pointer-events: none;
+        }
+
         & > .as-split-gutter-icon {
             width: 100%;
             height: 100%;

diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
@@ -241,6 +241,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
             size: 0,
             minSize: null,
             maxSize: null,
+            sizeBeforeCollapse: null,
+            gutterBeforeCollapse: 0
         };
 
         if(component.visible === true) {
@@ -300,6 +302,39 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
         this.build(true, true);
     }
 
+    public collapseArea(comp: SplitAreaDirective, newSize: number, gutter: 'left'|'right'): void {
+
+      const area = this.displayedAreas.find(a => a.component === comp);
+      if (area === undefined) {
+        return;
+      }
+      const whichGutter = gutter === 'right' ? 1 : -1;
+      if (!area.sizeBeforeCollapse) {
+        area.sizeBeforeCollapse = area.size;
+        area.gutterBeforeCollapse = whichGutter;
+      }
+      area.size = newSize;
+      const gtr = this.gutterEls.find(f => f.nativeElement.style.order === `${area.order + whichGutter}`);
+      this.renderer.addClass(gtr.nativeElement, 'as-split-gutter-collapsed');
+      this.updateArea(comp, false, false);
+    }
+
+    public expandArea(comp: SplitAreaDirective): void {
+
+      const area = this.displayedAreas.find(a => a.component === comp);
+      if (area === undefined) {
+        return;
+      }
+      if (!area.sizeBeforeCollapse) {
+        return;
+      }
+      area.size = area.sizeBeforeCollapse;
+      area.sizeBeforeCollapse = null;
+      const gtr = this.gutterEls.find(f => f.nativeElement.style.order === `${area.order + area.gutterBeforeCollapse}`);
+      this.renderer.removeClass(gtr.nativeElement, 'as-split-gutter-collapsed');
+      this.updateArea(comp, false, false);
+    }
+
     public getVisibleAreaSizes(): IOutputAreaSizes {
         return this.displayedAreas.map(a => a.size === null ? '*' : a.size);
     }

diff --git a/projects/angular-split/src/lib/directive/splitArea.directive.ts b/projects/angular-split/src/lib/directive/splitArea.directive.ts
@@ -163,4 +163,12 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
 
         this.split.removeArea(this);
     }
+
+    public collapse(newSize: number = 0, gutter: 'left'|'right' = 'right'): void {
+      this.split.collapseArea(this, newSize, gutter);
+    }
+
+    public expand(): void {
+      this.split.expandArea(this);
+    }
 }
diff --git a/projects/angular-split/src/lib/interface.ts b/projects/angular-split/src/lib/interface.ts
@@ -11,6 +11,8 @@ export interface IArea {
     size: number | null;
     minSize: number | null;
     maxSize: number | null;
+    sizeBeforeCollapse: number | null;
+    gutterBeforeCollapse: number;
 }
 
 // CREATED ON DRAG START

diff --git a/src_app/app/app.module.ts b/src_app/app/app.module.ts
@@ -36,8 +36,7 @@ import { LazyComponent } from './component/examples/lazy.route.component';
 import { ChangelogService } from './service/changelog.service';
 
 import { examples } from './data/listExamples';
-
-
+import {CollapseExpandComponent} from './component/examples/collapseExpandArea.route.component';
 
 const routes = [
     { path: '', component: HomeComponent },
@@ -64,6 +63,7 @@ const routes = [
         TogglingDomAndVisibleComponent,
         GutterClickComponent,
         ClassAccessComponent,
+        CollapseExpandComponent,
         GeekDemoComponent,
         DirRtlComponent,
         WorkspaceLocalstorageComponent,

diff --git a/src_app/app/component/examples/collapseExpandArea.route.component.ts b/src_app/app/component/examples/collapseExpandArea.route.component.ts
@@ -0,0 +1,84 @@
+import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
+import { SplitComponent, SplitAreaDirective } from 'angular-split';
+
+import { AComponent } from './AComponent';
+
+
+@Component({
+  selector: 'sp-ex-class-collapse',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'split-example-page'
+  },
+  styles: [`
+        .btns {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-around;
+        }
+        .btns > div {
+            margin-bottom: 10px;
+        }
+    `],
+  template: `
+        <div class="container">
+            <sp-example-title [type]="exampleEnum.COLLAPSE"></sp-example-title>
+            <div class="split-example">
+                <as-split [unit]="'pixel'">
+                    <as-split-area [size]="200">
+                        <p>area 1</p>
+                    </as-split-area>
+                    <as-split-area>
+                        <p>area 2</p>
+                    </as-split-area>
+                    <as-split-area [size]="100">
+                        <p>area 3</p>
+                    </as-split-area>
+                </as-split>
+            </div>
+            <br>
+            <div class="btns">
+              <div>
+                <button class="btn btn-warning" style="margin-right: 10px" (click)="onClose1()">Collapse #1 to 0</button>
+                <button class="btn btn-warning" (click)="onClose1(40)">Collapse #1 to 40</button>
+              </div>
+              <div>
+                <button class="btn btn-warning" style="margin-right: 10px" (click)="onClose3()">Collapse #3 to 0</button>
+                <button class="btn btn-warning" (click)="onClose3(60)">Collapse #3 to 60</button>
+              </div>
+            </div>
+          <div class="btns">
+            <div>
+              <button class="btn btn-warning" style="margin-right: 10px" (click)="onExpand1()">Expand #1</button>
+            </div>
+            <div>
+              <button class="btn btn-warning" style="margin-right: 10px" (click)="onExpand3()">Expand #3</button>
+            </div>
+          </div>
+        </div>`
+})
+export class CollapseExpandComponent extends AComponent implements AfterViewInit {
+  @ViewChild(SplitComponent) splitEl: SplitComponent;
+  @ViewChildren(SplitAreaDirective) areasEl: QueryList<SplitAreaDirective>
+
+  ngAfterViewInit() {
+    // console.log('Area Components: ', this.areasEl);
+  }
+
+  onClose1(newSize: number = 0) {
+    this.areasEl.first.collapse(newSize);
+  }
+
+  onClose3(newSize: number = 0) {
+    this.areasEl.last.collapse(newSize, 'left');
+  }
+
+  onExpand1() {
+    this.areasEl.first.expand();
+  }
+
+  onExpand3() {
+    this.areasEl.last.expand();
+  }
+}
diff --git a/src_app/app/data/enum.ts b/src_app/app/data/enum.ts
@@ -10,6 +10,7 @@ export enum ExampleEnum {
     TOGGLE = 'toggle',
     CLICK = 'click',
     CODE = 'code',
+    COLLAPSE = 'collapse',
     GEEK = 'geek',
     DIR = 'dir',
     WORKSPACE = 'workspace',

diff --git a/src_app/app/data/listExamples.ts b/src_app/app/data/listExamples.ts
@@ -13,6 +13,7 @@ import { DirRtlComponent } from '../component/examples/dirRtl.route.component';
 import { WorkspaceLocalstorageComponent } from '../component/examples/workspaceLocalstorage.route.component';
 import { LazyComponent } from '../component/examples/lazy.route.component';
 import { ExampleEnum } from './enum'
+import {CollapseExpandComponent} from '../component/examples/collapseExpandArea.route.component';
 
 const srcUrlBase = 'https://github.com/bertrandg/angular-split/blob/master/';
 const srcUrlBaseApp = `${ srcUrlBase }src_app/app/component/examples/`;
@@ -91,6 +92,13 @@ export const examples: Array<IExampleData> = [
         label: 'Access and interact <code>SplitComponent</code> from TS class', 
         srcUrl: `${ srcUrlBaseApp }classAccess.route.component.ts`,
     },
+    {
+        type: ExampleEnum.COLLAPSE,
+        path: 'examples/collapse-expand',
+        component: CollapseExpandComponent,
+        label: 'Collapse/Expand a specific area',
+        srcUrl: `${ srcUrlBaseApp }collapseExpandArea.route.component.ts`,
+    },
     {
         type: ExampleEnum.GEEK,
         path: 'examples/geek-demo',