Skip to content

Commit 08922ab

Browse files
bertrandgbertrandg
committed
Website: update examples & doc.
1 parent 1eb83b1 commit 08922ab

6 files changed

Lines changed: 241 additions & 212 deletions

File tree

‎src/app/component/doc/doc.route.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,18 @@ export class DocComponent {
3636
{name: 'direction', type: 'string', default: '"horizontal"', details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.'},
3737
{name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.`},
3838
{name: 'disabled', type: 'boolean', default: 'false', details: 'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code> still emits.'},
39-
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.'},
39+
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
4040
],
4141
outputs: [
4242
{name: 'dragStart', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.'},
4343
{name: 'dragEnd', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag ends.'},
4444
{name: 'gutterClick', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user clicks on a gutter.'},
45-
{name: 'transitionEnd', value: 'Array<number>', details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code>).<br>Only if <code>[useTransition]="true"</code>'},
45+
{name: 'transitionEnd', value: 'Array<number>', details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code>).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
4646
],
4747
class: [
4848
{name: 'dragProgress$', type: 'Observable<{gutterNum: number, sizes: Array<number>}>', details: 'Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.'},
4949
{name: 'setVisibleAreaSizes()', type: '(Array<number>) => boolean', details: 'Set all <b>visible</b> area sizes in one go, return a boolean to know if input values were correct. Useful when combined with <code>dragProgress$</code> to sync multiple splits.'},
50+
{name: 'getVisibleAreaSizes()', type: '() => Array<number>', details: 'Get all <b>visible</b> area sizes.'},
5051
],
5152
};
5253

‎src/app/component/examples/classAccess.route.component.ts‎

Lines changed: 72 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,72 @@
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-access',
9-
changeDetection: ChangeDetectionStrategy.OnPush,
10-
host: {
11-
'class': 'split-example-page'
12-
},
13-
styles: [`
14-
.btns {
15-
display: flex;
16-
justify-content: space-around;
17-
align-items: center;
18-
flex-wrap: wrap;
19-
}
20-
.btns > div {
21-
flex: 1 1 50%;
22-
display: flex;
23-
justify-content: center;
24-
align-items: center;
25-
}
26-
`],
27-
template: `
28-
<div class="container">
29-
<sp-example-title [type]="exampleEnum.CODE"></sp-example-title>
30-
<div class="split-example">
31-
<as-split direction="horizontal">
32-
<as-split-area [size]="75">
33-
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
34-
</as-split-area>
35-
<as-split-area [size]="3">
36-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
37-
</as-split-area>
38-
<as-split-area [visible]="false" [size]="18">
39-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
40-
</as-split-area>
41-
<as-split-area [size]="4">
42-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
43-
</as-split-area>
44-
</as-split>
45-
</div>
46-
<br>
47-
<div class="btns">
48-
<div>
49-
<button class="btn btn-warning" [class.active]="!splitEl.disabled" (click)="splitEl.disabled = !splitEl.disabled">{{ 'splitEl.disabled: ' + splitEl.disabled }}</button>
50-
</div>
51-
<div>
52-
<button class="btn btn-warning" (click)="splitEl.dir = (splitEl.dir === 'rtl' ? 'ltr' : 'rtl')">{{ 'splitEl.dir: "' + splitEl.dir + '"' }}</button>
53-
</div>
54-
</div>
55-
</div>`
56-
})
57-
export class ClassAccessComponent extends AComponent implements AfterViewInit {
58-
59-
@ViewChild(SplitComponent) splitEl: SplitComponent
60-
@ViewChildren(SplitAreaDirective) areasEl: QueryList<SplitAreaDirective>
61-
62-
ngAfterViewInit() {
63-
}
64-
}
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-access',
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.CODE"></sp-example-title>
27+
<div class="split-example">
28+
<as-split>
29+
<as-split-area [size]="75">
30+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
31+
</as-split-area>
32+
<as-split-area [size]="3">
33+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
34+
</as-split-area>
35+
<as-split-area [visible]="false" [size]="18">
36+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
37+
</as-split-area>
38+
<as-split-area [size]="4">
39+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
40+
</as-split-area>
41+
</as-split>
42+
</div>
43+
<br>
44+
<div class="btns">
45+
<div>
46+
<button class="btn btn-warning" (click)="splitEl.direction = (splitEl.direction === 'horizontal') ? 'vertical' : 'horizontal'">{{ 'Toggle direction: "' + splitEl.direction + '"' }}</button>
47+
</div>
48+
<div>
49+
<button class="btn btn-warning" [class.active]="!splitEl.disabled" (click)="splitEl.disabled = !splitEl.disabled">{{ 'splitEl.disabled: ' + splitEl.disabled }}</button>
50+
</div>
51+
<div>
52+
<button class="btn btn-warning" (click)="splitEl.dir = (splitEl.dir === 'rtl' ? 'ltr' : 'rtl')">{{ 'splitEl.dir: "' + splitEl.dir + '"' }}</button>
53+
</div>
54+
<div>
55+
<label>Gutter size: </label>
56+
<div class="btn-group">
57+
<label class="btn btn-warning btn-sm" (click)="splitEl.gutterSize = null" [class.active]="splitEl.gutterSize === 11">null</label>
58+
<label class="btn btn-warning btn-sm" (click)="splitEl.gutterSize = 7" [class.active]="splitEl.gutterSize === 7">7</label>
59+
<label class="btn btn-warning btn-sm" (click)="splitEl.gutterSize = 22" [class.active]="splitEl.gutterSize === 22">22</label>
60+
</div>
61+
</div>
62+
</div>
63+
</div>`
64+
})
65+
export class ClassAccessComponent extends AComponent implements AfterViewInit {
66+
@ViewChild(SplitComponent) splitEl: SplitComponent
67+
@ViewChildren(SplitAreaDirective) areasEl: QueryList<SplitAreaDirective>
68+
69+
ngAfterViewInit() {
70+
console.log('Area Components: ', this.areasEl)
71+
}
72+
}

‎src/app/component/examples/geekDemo.route.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ import { AComponent } from './AComponent';
6464
[gutterSize]="d.gutterSize"
6565
[style.width]="d.width"
6666
[style.height]="d.height"
67-
useTransition="true"
67+
[useTransition]="d.useTransition"
6868
style="background-color: #ffffff;">
6969
<ng-template ngFor let-area [ngForOf]="d.areas" [ngForTrackBy]="trackByFct" let-index="index">
7070
<as-split-area *ngIf="area.present"
@@ -77,7 +77,9 @@ import { AComponent } from './AComponent';
7777
</div>
7878
<div class="opts-prop">
7979
<div>
80-
<label>Direction: </label>
80+
<button class="btn btn-warning btn-sm" [class.active]="!d.useTransition" (click)="d.useTransition = !d.useTransition">{{ 'useTransition: ' + d.useTransition }}</button>
81+
</div>
82+
<div>
8183
<div class="btn-group">
8284
<label class="btn btn-warning btn-sm" [(ngModel)]="d.dir" btnRadio="horizontal">horizontal</label>
8385
<label class="btn btn-warning btn-sm" [(ngModel)]="d.dir" btnRadio="vertical">vertical</label>
@@ -133,6 +135,7 @@ export class GeekDemoComponent extends AComponent {
133135

134136
d = {
135137
dir: 'horizontal',
138+
useTransition: true,
136139
gutterSize: null,
137140
width: null,
138141
height: null,

‎src/app/component/examples/gutterClick.route.component.ts‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,12 @@ import { formatDate } from '../../service/utils';
1313
'class': 'split-example-page'
1414
},
1515
styles: [`
16-
as-split.is-transition.is-init:not(.is-dragging) > .as-split-gutter,
17-
as-split.is-transition.is-init:not(.is-dragging) ::ng-deep > .as-split-area {
18-
transition: flex-basis 1.5s;
16+
as-split.is-transition.is-init:not(.is-dragging) ::ng-deep > .as-split-gutter,
17+
as-split.is-transition.is-init:not(.is-dragging) > .as-split-area {
18+
transition: flex-basis 1.5s !important;
19+
}
20+
as-split.is-disabled ::ng-deep > .as-split-gutter {
21+
cursor: pointer !important;
1922
}
2023
2124
.btns {
@@ -75,15 +78,15 @@ import { formatDate } from '../../service/utils';
7578
<div class="logs">
7679
<p>All <code>as-split</code> events emitted:</p>
7780
<ul #logs>
78-
<li *ngFor="let l of logMessages">{{ l }}</li>
81+
<li *ngFor="let l of logMessages" [ngClass]="l.type">{{ l.text }}</li>
7982
</ul>
8083
</div>
8184
</div>`
8285
})
8386
export class GutterClickComponent extends AComponent implements AfterViewInit, OnDestroy {
8487
isDisabled: boolean = true
8588
useTransition: boolean = true
86-
logMessages: Array<string> = []
89+
logMessages: Array<{type: string, text: string}> = []
8790
areas = [
8891
{size: 25, order: 1, content: 'fg fdkjuh dfskhf dkujv fd vifdk hvdkuh fg'},
8992
{size: 50, order: 2, content: 'sd h vdshhf deuyf gduyeg hudeg hudfg fd vifdk hvdkuh fg'},
@@ -101,14 +104,21 @@ export class GutterClickComponent extends AComponent implements AfterViewInit, O
101104
}
102105

103106
log(type: string, e: {gutterNum: number, sizes: Array<number>}) {
104-
this.logMessages.push(`${ formatDate(new Date()) } > ${ type } event > ${ JSON.stringify(e) }`);
107+
this.logMessages.push({type, text: `${ formatDate(new Date()) } > ${ type } event > ${ JSON.stringify(e) }`});
105108
setTimeout(() => {
106-
(<HTMLElement> this.logsEl.nativeElement).scroll({top: this.logMessages.length*30});
109+
if(this.logsEl.nativeElement.scroll) {
110+
(<HTMLElement> this.logsEl.nativeElement).scroll({top: this.logMessages.length*30});
111+
}
107112
})
108113

109114
if(type === 'gutterClick') {
110115
this.gutterClick(e);
111116
}
117+
else if(type === 'dragEnd') {
118+
this.areas[0].size = e.sizes[0];
119+
this.areas[1].size = e.sizes[1];
120+
this.areas[2].size = e.sizes[2];
121+
}
112122
}
113123

114124
gutterClick(e: {gutterNum: number, sizes: Array<number>}) {

‎src/app/component/examples/sync.route.component.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,16 +61,22 @@ export class SyncComponent extends AComponent implements AfterViewInit, OnDestro
6161
)
6262
.subscribe(d => {
6363
if(d.name === 'A') { // If split A changed > update BC
64-
this.mySplitBEl.setVisibleAreaSizes(d.data.sizes);
65-
this.mySplitCEl.setVisibleAreaSizes(d.data.sizes);
64+
const sizesSplitA = this.mySplitAEl.getVisibleAreaSizes(); //d.data.sizes; <-- Could have use these values too
65+
66+
this.mySplitBEl.setVisibleAreaSizes(sizesSplitA);
67+
this.mySplitCEl.setVisibleAreaSizes(sizesSplitA);
6668
}
6769
else if(d.name === 'B') { // Else if split B changed > update AC
68-
this.mySplitAEl.setVisibleAreaSizes(d.data.sizes);
69-
this.mySplitCEl.setVisibleAreaSizes(d.data.sizes);
70+
const sizesSplitB = this.mySplitBEl.getVisibleAreaSizes(); //d.data.sizes; <-- Could have use these values too
71+
72+
this.mySplitAEl.setVisibleAreaSizes(sizesSplitB);
73+
this.mySplitCEl.setVisibleAreaSizes(sizesSplitB);
7074
}
7175
else if(d.name === 'C') { // Else if split C changed > update AB
72-
this.mySplitAEl.setVisibleAreaSizes(d.data.sizes);
73-
this.mySplitBEl.setVisibleAreaSizes(d.data.sizes);
76+
const sizesSplitC = this.mySplitCEl.getVisibleAreaSizes(); //d.data.sizes; <-- Could have use these values too
77+
78+
this.mySplitAEl.setVisibleAreaSizes(sizesSplitC);
79+
this.mySplitBEl.setVisibleAreaSizes(sizesSplitC);
7480
}
7581

7682
console.log(`${ formatDate(new Date()) } > dragProgress$ observable emitted, splits synchronized but current component change detection didn't runned! (from split ${ d.name })`);

0 commit comments

Comments
 (0)