Skip to content

Commit 565ef86

Browse files
ShemeshShemesh, Ofir
Shemesh
and
Shemesh, Ofir
authored
NEW expand collapse code & examples (angular-split#276)
Co-authored-by: Shemesh, Ofir <[email protected]>
1 parent d1b505e commit 565ef86

File tree

9 files changed

+15817
-4
lines changed

9 files changed

+15817
-4
lines changed

‎package-lock.json‎

Lines changed: 15663 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/angular-split/src/lib/component/split.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
align-items: center;
1616
justify-content: center;
1717

18+
&.as-split-gutter-collapsed {
19+
flex-basis: 1px !important;
20+
pointer-events: none;
21+
}
22+
1823
& > .as-split-gutter-icon {
1924
width: 100%;
2025
height: 100%;

‎projects/angular-split/src/lib/component/split.component.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
273273
size: 0,
274274
minSize: null,
275275
maxSize: null,
276+
sizeBeforeCollapse: null,
277+
gutterBeforeCollapse: 0
276278
}
277279

278280
if (component.visible === true) {
@@ -766,4 +768,41 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
766768
public ngOnDestroy(): void {
767769
this.stopDragging()
768770
}
771+
772+
public collapseArea(comp: SplitAreaDirective, newSize: number, gutter: 'left'|'right'): void {
773+
774+
const area = this.displayedAreas.find(a => a.component === comp);
775+
if (area === undefined) {
776+
return;
777+
}
778+
const whichGutter = gutter === 'right' ? 1 : -1;
779+
if (!area.sizeBeforeCollapse) {
780+
area.sizeBeforeCollapse = area.size;
781+
area.gutterBeforeCollapse = whichGutter;
782+
}
783+
area.size = newSize;
784+
const gtr = this.gutterEls.find(f => f.nativeElement.style.order === `${area.order + whichGutter}`);
785+
if (gtr) {
786+
this.renderer.addClass(gtr.nativeElement, 'as-split-gutter-collapsed');
787+
}
788+
this.updateArea(comp, false, false);
789+
}
790+
791+
public expandArea(comp: SplitAreaDirective): void {
792+
793+
const area = this.displayedAreas.find(a => a.component === comp);
794+
if (area === undefined) {
795+
return;
796+
}
797+
if (!area.sizeBeforeCollapse) {
798+
return;
799+
}
800+
area.size = area.sizeBeforeCollapse;
801+
area.sizeBeforeCollapse = null;
802+
const gtr = this.gutterEls.find(f => f.nativeElement.style.order === `${area.order + area.gutterBeforeCollapse}`);
803+
if (gtr) {
804+
this.renderer.removeClass(gtr.nativeElement, 'as-split-gutter-collapsed');
805+
}
806+
this.updateArea(comp, false, false);
807+
}
769808
}

‎projects/angular-split/src/lib/directive/splitArea.directive.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,4 +167,12 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
167167

168168
this.split.removeArea(this)
169169
}
170+
171+
public collapse(newSize: number = 0, gutter: 'left'|'right' = 'right'): void {
172+
this.split.collapseArea(this, newSize, gutter);
173+
}
174+
175+
public expand(): void {
176+
this.split.expandArea(this);
177+
}
170178
}

‎projects/angular-split/src/lib/interface.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export interface IArea {
1111
size: number | null
1212
minSize: number | null
1313
maxSize: number | null
14+
sizeBeforeCollapse: number | null;
15+
gutterBeforeCollapse: number;
1416
}
1517

1618
// CREATED ON DRAG START

‎src_app/app/app.module.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
1010
import { SortableModule } from 'ngx-bootstrap/sortable'
1111
import { TooltipModule } from 'ngx-bootstrap/tooltip'
1212
import { AngularSplitModule } from 'angular-split'
13-
1413
import { AppComponent } from './component/app.component'
1514
import { TopbarComponent } from './component/topbar.component'
1615
import { ExampleTitleComponent } from './component/exampleTitle.component'
1716
import { HomeComponent } from './component/home/home.route.component'
1817
import { ChangelogComponent } from './component/changelog/changelog.route.component'
1918
import { DocComponent } from './component/doc/doc.route.component'
20-
2119
import { SimpleComponent } from './component/examples/simple.route.component'
2220
import { MinMaxComponent } from './component/examples/minMax.route.component'
2321
import { NestedComponent } from './component/examples/nested.route.component'
@@ -32,10 +30,9 @@ import { GeekDemoComponent } from './component/examples/geekDemo.route.component
3230
import { DirRtlComponent } from './component/examples/dirRtl.route.component'
3331
import { WorkspaceLocalstorageComponent } from './component/examples/workspaceLocalstorage.route.component'
3432
import { LazyComponent } from './component/examples/lazy.route.component'
35-
3633
import { ChangelogService } from './service/changelog.service'
37-
3834
import { examples } from './data/listExamples'
35+
import { CollapseExpandComponent } from './component/examples/collapseExpandArea.route.component'
3936

4037
const routes = [
4138
{ path: '', component: HomeComponent },
@@ -66,6 +63,7 @@ const routes = [
6663
DirRtlComponent,
6764
WorkspaceLocalstorageComponent,
6865
LazyComponent,
66+
CollapseExpandComponent
6967
],
7068
imports: [
7169
BrowserModule,

‎src_app/app/component/examples/collapseExpandArea.route.component.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
2+
import { SplitComponent, SplitAreaDirective } from 'angular-split';
3+
4+
import { AComponent } from './AComponent';
5+
6+
7+
@Component({
8+
selector: 'sp-ex-class-collapse',
9+
changeDetection: ChangeDetectionStrategy.OnPush,
10+
host: {
11+
'class': 'split-example-page'
12+
},
13+
styles: [`
14+
.btns {
15+
display: flex;
16+
flex-wrap: wrap;
17+
align-items: center;
18+
justify-content: space-around;
19+
}
20+
.btns > div {
21+
margin-bottom: 10px;
22+
}
23+
`],
24+
template: `
25+
<div class="container">
26+
<sp-example-title [type]="exampleEnum.COLLAPSE"></sp-example-title>
27+
<div class="split-example">
28+
<as-split [unit]="'pixel'">
29+
<as-split-area [size]="200">
30+
<div style="height: 100%;display: flex;justify-content: center;align-items: center; background-color: antiquewhite;">area #1</div>
31+
</as-split-area>
32+
<as-split-area>
33+
<div style="height: 100%;display: flex;justify-content: center;align-items: center; background-color: gainsboro;">area #2</div>
34+
</as-split-area>
35+
<as-split-area [size]="100">
36+
<div style="height: 100%;display: flex;justify-content: center;align-items: center; background-color: burlywood;">area #3</div>
37+
</as-split-area>
38+
</as-split>
39+
</div>
40+
<br>
41+
<ul>
42+
<li><b>collapse(newSize:number = 0)</b> will force the area the be the width given and its gutter disabled.</li>
43+
<li><b>expand()</b> will restore the area to its size before it was collapsed.</li>
44+
</ul>
45+
<br><br>
46+
<div class="btns">
47+
<div>
48+
<button class="btn btn-warning" style="margin-right: 10px" (click)="onClose1()">Collapse #1 to 0px</button>
49+
<button class="btn btn-warning" (click)="onClose1(40)">Collapse #1 to 40px</button>
50+
</div>
51+
<div>
52+
<button class="btn btn-warning" style="margin-right: 10px" (click)="onClose3()">Collapse #3 to 0px</button>
53+
<button class="btn btn-warning" (click)="onClose3(60)">Collapse #3 to 60px</button>
54+
</div>
55+
</div>
56+
<div class="btns">
57+
<div>
58+
<button class="btn btn-warning" style="margin-right: 10px" (click)="onExpand1()">Expand #1</button>
59+
</div>
60+
<div>
61+
<button class="btn btn-warning" style="margin-right: 10px" (click)="onExpand3()">Expand #3</button>
62+
</div>
63+
</div>
64+
</div>`
65+
})
66+
export class CollapseExpandComponent extends AComponent implements AfterViewInit {
67+
@ViewChild(SplitComponent) splitEl: SplitComponent;
68+
@ViewChildren(SplitAreaDirective) areasEl: QueryList<SplitAreaDirective>
69+
70+
ngAfterViewInit() {
71+
// console.log('Area Components: ', this.areasEl);
72+
}
73+
74+
onClose1(newSize: number = 0) {
75+
this.areasEl.first.collapse(newSize);
76+
}
77+
78+
onClose3(newSize: number = 0) {
79+
this.areasEl.last.collapse(newSize, 'left');
80+
}
81+
82+
onExpand1() {
83+
this.areasEl.first.expand();
84+
}
85+
86+
onExpand3() {
87+
this.areasEl.last.expand();
88+
}
89+
}

‎src_app/app/data/enum.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ export enum ExampleEnum {
1313
DIR = 'dir',
1414
WORKSPACE = 'workspace',
1515
LAZY = 'lazy',
16+
COLLAPSE = 'collapse'
1617
}

‎src_app/app/data/listExamples.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { DirRtlComponent } from '../component/examples/dirRtl.route.component'
1313
import { WorkspaceLocalstorageComponent } from '../component/examples/workspaceLocalstorage.route.component'
1414
import { LazyComponent } from '../component/examples/lazy.route.component'
1515
import { ExampleEnum } from './enum'
16+
import { CollapseExpandComponent } from '../component/examples/collapseExpandArea.route.component'
1617

1718
const srcUrlBase = 'https://github.com/angular-split/angular-split/blob/main/'
1819
const srcUrlBaseApp = `${srcUrlBase}src_app/app/component/examples/`
@@ -76,6 +77,13 @@ export const examples: Array<IExampleData> = [
7677
label: 'Toggling areas using <code>[visible]</code> and <code>*ngIf</code>',
7778
srcUrl: `${srcUrlBaseApp}togglingDomAndVisible.route.component.ts`,
7879
},
80+
{
81+
type: ExampleEnum.COLLAPSE,
82+
path: 'examples/collapse-expand',
83+
component: CollapseExpandComponent,
84+
label: 'Collapse/Expand a specific area',
85+
srcUrl: `${ srcUrlBaseApp }collapseExpandArea.route.component.ts`,
86+
},
7987
{
8088
type: ExampleEnum.CLICK,
8189
path: 'examples/gutter-click-roll-unroll',

0 commit comments

Comments
 (0)