Skip to content

Commit 9be7eaa

Browse files
bertrandgbertrandg
committed
add/update demo app examples
1 parent ac60e93 commit 9be7eaa

2 files changed

Lines changed: 144 additions & 80 deletions

File tree

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

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,6 @@ import { AComponent } from './AComponent';
1616
align-items: center;
1717
flex-wrap: wrap;
1818
}
19-
20-
.as-split-area {
21-
background: lightgrey;
22-
}
23-
24-
.as-split-area.as-min {
25-
background: green;
26-
}
27-
28-
.as-split-area.as-max {
29-
background: red;
30-
}
31-
32-
button {
33-
width: 100%;
34-
}
35-
36-
:host .ex2 /deep/ .as-transition.as-init:not(.as-dragging) >.as-split-area, :host /deep/ .as-transition.as-init:not(.as-dragging) > .as-split-gutter {
37-
transition: flex-basis 1s !important;
38-
}
3919
`],
4020
template: `
4121
{{ testChangeDetectorRun() }}
@@ -86,25 +66,6 @@ import { AComponent } from './AComponent';
8666
<div class="alert alert-danger" role="alert">
8767
<b>Warning:</b><br><code>[visible]="false"</code> only hides elements and don't remove it from the DOM, It could lead to useless change detection processing.<br>Use of <code>*ngIf="false"</code> should be the default option unless you have reasons to keep DOM elements.
8868
</div>
89-
<br>
90-
<hr>
91-
<br>
92-
<div class="split-example ex2" style="height: 150px;">
93-
<as-split useTransition="true" unit="pixel">
94-
<as-split-area size="200" minSize="200" order="1" [visible]="only === 1 || only === 0">
95-
<button (click)="left()" class="btn btn-warning">{{ only === 1 ? 'LEFT ⬅️' : 'LEFT ➡' }}</button>
96-
<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>
97-
</as-split-area>
98-
<as-split-area size="*" order="2" [visible]="only === 2 || only === 0">
99-
<button (click)="center()" class="btn btn-warning">{{ only === 2 ? '➡ ️CENTER ⬅' : '️⬅ ️CENTER ➡' }}</button>
100-
<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.</p>
101-
</as-split-area>
102-
<as-split-area size="200" minSize="200" order="3" [visible]="only === 3 || only === 0">
103-
<button (click)="right()" class="btn btn-warning">{{ only === 3 ? '➡ RIGHT' : '⬅️ RIGHT' }}</button>
104-
<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>
105-
</as-split-area>
106-
</as-split>
107-
</div>
10869
</div>`
10970
})
11071
export class TogglingDomAndVisibleComponent extends AComponent {
@@ -121,45 +82,4 @@ export class TogglingDomAndVisibleComponent extends AComponent {
12182
log(eventName, e) {
12283
this.action.logs = `${ new Date() }: ${ eventName } > ${ e }\n${ this.action.logs }`;
12384
}
124-
125-
//
126-
127-
only: number = 0
128-
129-
left() {
130-
switch(this.only) {
131-
case 0:
132-
case 2:
133-
case 3:
134-
this.only = 1;
135-
return;
136-
case 1:
137-
this.only = 0;
138-
return;
139-
}
140-
}
141-
center() {
142-
switch(this.only) {
143-
case 0:
144-
case 1:
145-
case 3:
146-
this.only = 2;
147-
return;
148-
case 2:
149-
this.only = 0;
150-
return;
151-
}
152-
}
153-
right() {
154-
switch(this.only) {
155-
case 0:
156-
case 1:
157-
case 2:
158-
this.only = 3;
159-
return;
160-
case 3:
161-
this.only = 0;
162-
return;
163-
}
164-
}
16585
}

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,26 @@ import { formatDate } from '../../service/utils';
5050
border: 1px solid #bfbfbf;
5151
background-color: #e8e8e8;
5252
}
53+
54+
.as-split-area {
55+
background: lightgrey;
56+
}
57+
58+
.as-split-area.as-min {
59+
background: green;
60+
}
61+
62+
.as-split-area.as-max {
63+
background: red;
64+
}
65+
66+
:host .ex2 button {
67+
width: 100%;
68+
}
69+
70+
:host .ex2 /deep/ .as-transition.as-init:not(.as-dragging) >.as-split-area, :host /deep/ .as-transition.as-init:not(.as-dragging) > .as-split-gutter {
71+
transition: flex-basis 1s !important;
72+
}
5373
`],
5474
template: `
5575
{{ testChangeDetectorRun() }}
@@ -105,6 +125,83 @@ import { formatDate } from '../../service/utils';
105125
<li *ngFor="let l of logMessages" [ngClass]="l.type">{{ l.text }}</li>
106126
</ul>
107127
</div>
128+
<br>
129+
<hr>
130+
<br>
131+
<div class="split-example ex2" style="height: 150px;">
132+
<as-split useTransition="true" unit="pixel">
133+
<as-split-area size="200" minSize="200" order="1" [visible]="only === 1 || only === 0">
134+
<button (click)="left()" class="btn btn-warning">{{ only === 1 ? 'LEFT ⬅️' : 'LEFT ➡' }}</button>
135+
<p>size: 200px<br>minSize: 200px</p>
136+
</as-split-area>
137+
<as-split-area size="*" order="2" [visible]="only === 2 || only === 0">
138+
<button (click)="center()" class="btn btn-warning">{{ only === 2 ? '➡ ️CENTER ⬅' : '️⬅ ️CENTER ➡' }}</button>
139+
<p>size: *</p>
140+
</as-split-area>
141+
<as-split-area size="200" minSize="200" order="3" [visible]="only === 3 || only === 0">
142+
<button (click)="right()" class="btn btn-warning">{{ only === 3 ? '➡ RIGHT' : '⬅️ RIGHT' }}</button>
143+
<p>size: 200px<br>minSize: 200px</p>
144+
</as-split-area>
145+
</as-split>
146+
</div>
147+
<div class="split-example ex2" style="height: 150px;">
148+
<as-split useTransition="true" unit="percent">
149+
<as-split-area size="30" minSize="30" order="1" [visible]="only === 1 || only === 0">
150+
<button (click)="left()" class="btn btn-warning">{{ only === 1 ? 'LEFT ⬅️' : 'LEFT ➡' }}</button>
151+
<p>size: 30%<br>minSize: 30%</p>
152+
</as-split-area>
153+
<as-split-area size="40" order="2" [visible]="only === 2 || only === 0">
154+
<button (click)="center()" class="btn btn-warning">{{ only === 2 ? '➡ ️CENTER ⬅' : '️⬅ ️CENTER ➡' }}</button>
155+
<p>size: 40%</p>
156+
</as-split-area>
157+
<as-split-area size="30" minSize="30" order="3" [visible]="only === 3 || only === 0">
158+
<button (click)="right()" class="btn btn-warning">{{ only === 3 ? '➡ RIGHT' : '⬅️ RIGHT' }}</button>
159+
<p>size: 30%<br>minSize: 30%</p>
160+
</as-split-area>
161+
</as-split>
162+
</div>
163+
<br>
164+
<hr>
165+
<br>
166+
<div class="btns">
167+
<div class="btn-group">
168+
<label class="btn btn-warning"
169+
[class.active]="!keepA"
170+
(click)="keepA = !keepA">{{ 'A: ' + keepA }}</label>
171+
<label class="btn btn-warning"
172+
[class.active]="!keepB"
173+
(click)="keepB = !keepB">{{ 'B: ' + keepB }}</label>
174+
<label class="btn btn-warning"
175+
[class.active]="!keepC"
176+
(click)="keepC = !keepC">{{ 'C: ' + keepC }}</label>
177+
</div>
178+
</div>
179+
<div class="split-example ex2" style="height: 150px;">
180+
<as-split useTransition="true" unit="pixel">
181+
<as-split-area size="200" minSize="200" order="1" [visible]="keepA">
182+
<p>A<br>size: 200px<br>minSize: 200px</p>
183+
</as-split-area>
184+
<as-split-area size="*" order="2" [visible]="keepB">
185+
<p>B<br>size: *</p>
186+
</as-split-area>
187+
<as-split-area size="200" minSize="200" order="3" [visible]="keepC">
188+
<p>C<br>size: 200px<br>minSize: 200px</p>
189+
</as-split-area>
190+
</as-split>
191+
</div>
192+
<div class="split-example ex2" style="height: 150px;">
193+
<as-split useTransition="true" unit="percent">
194+
<as-split-area size="30" minSize="30" order="1" [visible]="keepA">
195+
<p>A<br>size: 30%<br>minSize: 30%</p>
196+
</as-split-area>
197+
<as-split-area size="40" order="2" [visible]="keepB">
198+
<p>B<br>size: 40%</p>
199+
</as-split-area>
200+
<as-split-area size="30" minSize="30" order="3" [visible]="keepC">
201+
<p>C<br>size: 30%<br>minSize: 30%</p>
202+
</as-split-area>
203+
</as-split>
204+
</div>
108205
</div>`
109206
})
110207
export class TransitionsComponent extends AComponent {
@@ -129,4 +226,51 @@ export class TransitionsComponent extends AComponent {
129226
}
130227
})
131228
}
229+
230+
//
231+
232+
only: number = 0
233+
234+
left() {
235+
switch(this.only) {
236+
case 0:
237+
case 2:
238+
case 3:
239+
this.only = 1;
240+
return;
241+
case 1:
242+
this.only = 0;
243+
return;
244+
}
245+
}
246+
center() {
247+
switch(this.only) {
248+
case 0:
249+
case 1:
250+
case 3:
251+
this.only = 2;
252+
return;
253+
case 2:
254+
this.only = 0;
255+
return;
256+
}
257+
}
258+
right() {
259+
switch(this.only) {
260+
case 0:
261+
case 1:
262+
case 2:
263+
this.only = 3;
264+
return;
265+
case 3:
266+
this.only = 0;
267+
return;
268+
}
269+
}
270+
271+
//
272+
273+
keepA: boolean = true;
274+
keepB: boolean = true;
275+
keepC: boolean = true;
132276
}

0 commit comments

Comments
 (0)